Something went wrong. Try again.
Monorepo for the nibling.run platform
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448:root { color-scheme: light dark; --bg: #f7f7f5; --surface: #ffffff; --sunken: #efefec; --line: #e2e2dd; --line-strong: #cfcfc8; --text: #1c1c1a; --muted: #6b6b65; --faint: #9a9a93; --accent: #3b5bdb; --focus: #3b5bdb; --ok: #2b8a3e; --warn: #b26b00; --error: #c92a2a; --error-bg: #fff1f1; --warn-bg: #fff6e6; --ok-bg: #ebf7ee; --stderr: #b42323; --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04); --sans: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius: 8px;}
@media (prefers-color-scheme: dark) { :root { --bg: #131312; --surface: #1b1b1a; --sunken: #0f0f0e; --line: #2a2a28; --line-strong: #3a3a37; --text: #e8e8e3; --muted: #9a9a93; --faint: #6b6b65; --accent: #8ea4ff; --focus: #8ea4ff; --ok: #69db7c; --warn: #ffc06b; --error: #ff8787; --error-bg: #2a1616; --warn-bg: #2a2214; --ok-bg: #15241a; --stderr: #ff9b9b; --shadow: none; }}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased;}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;}
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.wordmark { font: 600 1.5rem/1 var(--mono); letter-spacing: -0.02em; margin: 0;}.wordmark.small { font-size: 0.95rem; }
.meta { color: var(--muted); font: 12px/1 var(--mono); white-space: nowrap;}
/* ---- catalog ---- */
.catalog { max-width: 44rem; margin: 0 auto; padding: 4rem 1.25rem;}
.catalog-head { margin-bottom: 2rem; }
.lede { margin: 0.75rem 0 0; color: var(--muted); max-width: 34rem;}
.catalog-status { color: var(--muted); }.catalog-status[data-tone="error"] { color: var(--error); background: var(--error-bg); border-radius: var(--radius); padding: 0.75rem 1rem;}
.catalog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem;}
.app-card { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: border-color 120ms ease;}.app-card:hover { border-color: var(--line-strong); }.app-card-title { font-weight: 600; }.app-card-desc { color: var(--muted); }.app-card-meta { color: var(--faint); font: 12px/1.4 var(--mono); margin-top: 0.25rem; }
/* ---- run view ---- */
.run { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(9rem, 32%);}
.bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); background: var(--surface); min-width: 0;}
.back { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); text-decoration: none; padding: 0.25rem 0.375rem; border-radius: 6px;}.back:hover { color: var(--text); background: var(--sunken); }
.sep { color: var(--faint); }
.app-title { margin: 0; font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.status { display: flex; align-items: center; gap: 0.75rem; min-width: 0;}
.pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5rem; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--sunken); color: var(--muted);}.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;}.pill[data-state="listening"],.pill[data-state="running"] { color: var(--ok); background: var(--ok-bg); }.pill[data-state="starting"],.pill[data-state="booting"],.pill[data-state="restarting"] { color: var(--warn); background: var(--warn-bg); }.pill[data-state="starting"]::before,.pill[data-state="booting"]::before,.pill[data-state="restarting"]::before { animation: pulse 1.2s ease-in-out infinite; }.pill[data-state="crashed"],.pill[data-state="failed"],.pill[data-state="error"] { color: var(--error); background: var(--error-bg); }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .pill::before { animation: none !important; }}
#port.closed { text-decoration: line-through; color: var(--faint); }
.tools { margin-left: auto; display: flex; gap: 0.25rem;}
.tool { font: inherit; font-size: 13px; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.625rem; cursor: pointer; text-decoration: none; white-space: nowrap;}.tool:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sunken); border-color: var(--line-strong); }.tool:disabled,.tool[aria-disabled="true"] { color: var(--faint); cursor: default; pointer-events: none; }.tool.small { font-size: 12px; padding: 0.125rem 0.5rem; }
/* ---- stage ---- */
.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); background: var(--sunken); min-height: 0;}
/* A CLI has no frame to reload or open, and no port. */.run[data-kind="cli"] :is(#reload, #open, #port) { display: none; }
#app-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff;}
/* The grid track ignores the xterm grid's own width, so a narrower pane refits in one step. */.term-pane { min-height: 0; overflow: hidden; padding: 0.75rem 0.25rem 0.5rem 0.875rem; background: var(--surface);}.term-screen { height: 100%; }.term-pane .xterm-viewport { scrollbar-width: thin; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(2px);}
.overlay-card { max-width: 26rem; text-align: center;}
.overlay-title { margin: 0; font-weight: 600; font-size: 1rem;}.overlay[data-tone="error"] .overlay-title { color: var(--error); }.overlay[data-tone="warn"] .overlay-title { color: var(--warn); }
.overlay-detail { margin: 0.375rem 0 0; color: var(--muted);}.overlay-detail:empty { display: none; }
/* Docked: a strip under the terminal, in flow, so it never covers output. */.overlay[data-placement="dock"] { position: static; grid-row: 2; display: block; place-items: normal; padding: 0.625rem 0.875rem; background: var(--surface); backdrop-filter: none; border-top: 1px solid var(--line);}.overlay[data-placement="dock"] .overlay-card { max-width: none; display: flex; align-items: center; gap: 0.75rem; text-align: left;}.overlay[data-placement="dock"] .overlay-title { font-size: 0.875rem; }.overlay[data-placement="dock"] .overlay-detail { margin: 0; font-size: 13px; }.overlay[data-placement="dock"] .overlay-actions { margin: 0 0 0 auto; }
.overlay-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem;}.overlay-actions:not(:has(:not([hidden]))) { display: none; }
.primary,.secondary { font: inherit; font-weight: 500; border-radius: 6px; padding: 0.375rem 0.875rem; cursor: pointer; text-decoration: none;}.primary { background: var(--text); color: var(--bg); border: 1px solid var(--text); }.primary:hover { opacity: 0.9; }.secondary { color: var(--text); border: 1px solid var(--line-strong); background: var(--surface); }
/* ---- console ---- */
.console { display: grid; grid-template-rows: auto minmax(0, 1fr); border-top: 1px solid var(--line); background: var(--surface); min-height: 0;}
.console-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--line);}
.console-title { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);}
.tabs { display: flex; gap: 0.125rem;}
.tab { font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: transparent; border: 0; border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer;}.tab:hover:not(:disabled) { background: var(--sunken); }.tab[aria-selected="true"] { color: var(--text); background: var(--sunken); }.tab:disabled { color: var(--faint); cursor: default; }
.spacer { flex: 1; }
.console-body { overflow: auto; padding: 0.5rem 0.75rem 0.75rem; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin;}
/* The Shell tab's terminal fills the same row as the console body. */.shell-body { min-height: 0; overflow: hidden; padding: 0.5rem 0.25rem 0.5rem 0.625rem;}
.line.stderr { color: var(--stderr);}
.note { color: var(--faint); font-family: var(--sans); font-size: 12px; padding: 0.125rem 0;}.note::before { content: "› "; }.note.ok { color: var(--ok); }.note.error { color: var(--error); }
@media (max-width: 40rem) { .bar { flex-wrap: wrap; } .tools { margin-left: 0; }}
.store { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);}