@lovek4d/kickflip 0.0.0-stage → 0.1.0

package/board/public/shell.js

@@ -0,0 +1,298 @@
+// The app shell (app.html; docs/adr/0055-one-app-for-the-whole-hub.md): the sidebar, mounted once, beside one view at a
+// time. A board's view is BoardView (app.js); Waiting on you and Notes are AppViews.questions and .notes,
+// the Hub page AppViews.hub with its settings modals, and every other page AppViews.frame. Board Settings mounts over the board
+// as a modal. Each page is {className, title(view, {siteTitle}), markup(view, {siteTitle}), create(root,
+// siteRoot, ctx)}; a hub page's siteRoot is /_hub. Following a link to any of them, the sidebar's included, swaps the
+// view in place through router.js; a link to anything that isn't a page loads it. Leaving a view whose root holds
+// [data-dirty], an unsaved edit, asks first. The shell holds the hub's one stream, /_hub/stream
+// (hub/stream.mjs): `change {route}` signals the open board, and `sidebar` repaints the sidebar. A board the shell
+// leaves is unmounted; one left fresh whose stream sent no change since paints live when it comes back, and any other
+// paints dimmed from its last visit (docs/adr/0028-the-board-opens-on-the-last-visit.md).
+// A push tap reaches it from hub/sw.js as {open: url}, and a page framed inside it hands it a view's URL through
+// AppShell.open(url, {replace, frames}) → true when the shell shows it in place; frames false refuses a frame view.
+window.AppShell = (function () {
+  const LAST_KEY = 'hub:lastBoard';
+  const DATA_KEY = 'hub:sidebar';
+  const read = (k) => { try { return JSON.parse(localStorage.getItem(k) || 'null'); } catch { return null; } };
+  let opener = null;
+  const open = (url, opts) => Boolean(opener?.(url, opts));
+  let bootCode = null;
+  let updateReady = false;
+  let sidebar = null;
+  function codeSeen(hash) {
+    if (!hash) return;
+    if (!bootCode) { bootCode = hash; return; }
+    if (hash !== bootCode && !updateReady) { updateReady = true; sidebar?.setUpdate('ready'); }
+  }
+
+  async function reload() {
+    const controller = navigator.serviceWorker?.controller;
+    if (controller) await new Promise((resolve) => {
+      const channel = new MessageChannel();
+      const done = () => { clearTimeout(timer); channel.port1.close(); channel.port2.close(); resolve(); };
+      const timer = setTimeout(done, 1000);
+      channel.port1.onmessage = done;
+      try { controller.postMessage({ forget: 'shell' }, [channel.port2]); } catch { done(); }
+    });
+    setTimeout(() => location.reload(), 0);
+  }
+
+  // The app shell around this page when it is framed in one.
+  function outer() {
+    try { return window.top !== window && typeof window.top.AppShell?.open === 'function' ? window.top.AppShell : null; } catch { return null; }
+  }
+
+  async function start() {
+    // A frame that lands on a view's URL, such as a framed page's link back to its card, shows it in the shell around it.
+    if (outer()?.open(location.href, { frames: false })) return;
+    // The same URL and scope as hub-kit.js's push registration, so the one registration and its push subscription stay.
+    navigator.serviceWorker?.register('/sw.js', { scope: '/' }).catch(() => {});
+    let data = null;
+    try { data = JSON.parse(document.getElementById('sidebarData')?.textContent || 'null'); } catch { data = null; }
+    // The board server's copy of the shell, for a load the hub forwards, carries no sidebar data.
+    if (!data) {
+      try { const r = await fetch('/_hub/sidebar.json', { cache: 'no-store' }); if (r.ok) data = await r.json(); } catch { /* the cached copy */ }
+    }
+    // A stored sidebar's code says nothing about the shell that booted, so it adopts the next live hash.
+    bootCode = data?.code || null;
+    data ||= read(DATA_KEY);
+    sidebar = Sidebar.mount({ data, poll: false, reload, open: (href) => { if (!open(href)) location.assign(href); } });
+    const boards = () => new Set((data?.sites || []).filter((s) => s.board).map((s) => s.route));
+    const titleOf = (route) => data?.sites?.find((s) => s.route === route)?.title || route;
+
+    // route → the views' change listeners; a view subscribes through BoardView.create's signal.
+    const listeners = new Map();
+    const signalFor = (route) => (fn) => {
+      if (!listeners.has(route)) listeners.set(route, new Set());
+      listeners.get(route).add(fn);
+      return () => listeners.get(route)?.delete(fn);
+    };
+    // route → {fresh, generatedAt} for each board left fresh with no change since. Trusted only while the stream is up:
+    // a dropped stream may have missed a change, so its return forgets them all.
+    const left = new Map();
+    let streamUp = false;
+    let current = null;
+    function changed(route) {
+      left.delete(route);
+      for (const fn of listeners.get(route) || []) fn();
+    }
+
+    let es = null;
+    let opened = false;
+    let tries = 0;
+    let retry = null;
+    // An EventSource retries a dropped stream by itself, but gives up on an answer that isn't a stream, such as while
+    // the hub restarts, so a closed one reopens here with a growing backoff.
+    function openStream() {
+      if (!('EventSource' in window) || (es && es.readyState !== EventSource.CLOSED)) return;
+      clearTimeout(retry);
+      const cur = es = new EventSource('/_hub/stream');
+      cur.addEventListener('open', () => {
+        tries = 0;
+        streamUp = true;
+        if (opened) { left.clear(); if (current) changed(current.route); }
+        opened = true;
+      });
+      cur.addEventListener('change', (e) => {
+        let d = null;
+        try { d = JSON.parse(e.data); } catch { return; }
+        if (typeof d?.route === 'string') changed(d.route);
+      });
+      cur.addEventListener('sidebar', (e) => {
+        try { data = JSON.parse(e.data); } catch { return; }
+        codeSeen(data.code);
+        sidebar.setData(data);
+        current?.v?.B?.renderStatus?.();
+      });
+      cur.addEventListener('error', () => {
+        streamUp = false;
+        if (cur.readyState !== EventSource.CLOSED || es !== cur) return;
+        retry = setTimeout(openStream, Math.min(30000, 1000 * 2 ** tries++));
+      });
+    }
+
+    // A view that changed what the sidebar's foot rows say, such as notifications or polling, asks for a fresh copy
+    // rather than waiting for the stream's next one.
+    async function refreshSidebar() {
+      sidebar.checkDevice();
+      try {
+        const r = await fetch('/_hub/sidebar.json', { cache: 'no-store' });
+        if (r.ok) { data = await r.json(); codeSeen(data.code); sidebar.setData(data); current?.v?.B?.renderStatus?.(); }
+      } catch { /* the stream brings the next copy */ }
+    }
+
+    const scrim = document.getElementById('sidebarScrim');
+    let settings = null;
+    function removeSettings() {
+      if (!settings) return;
+      settings.v.unmount();
+      settings.root.remove();
+      settings = null;
+    }
+    function dismissSettings() {
+      const closing = settings;
+      const finish = () => {
+        if (settings !== closing) return;
+        removeSettings();
+        router.replace(AppRouter.urlOf(current.view));
+      };
+      if (!settings?.root.querySelector('[data-dirty]')) { finish(); return; }
+      BoardDialogs.confirm('Leave without saving? Your unsaved edits here will be lost.').then((leave) => { if (leave) finish(); });
+    }
+    function showSettings() {
+      if (settings) return;
+      const root = document.createElement('div');
+      root.className = 'view-settings';
+      root.innerHTML = AppViews.settings.markup({}, { siteTitle: titleOf(current.route) });
+      current.root.appendChild(root);
+      const v = AppViews.settings.create(root, '/' + encodeURIComponent(current.route), { dismiss: dismissSettings, open: openHere, sidebarChanged: refreshSidebar, siteTitle: titleOf(current.route) });
+      settings = { root, v };
+      v.mount();
+    }
+
+    // current: {view, route, root, v}, the router's view shown, its root element and its mounted {B, mount, unmount}.
+    function show(view) {
+      const modal = view.kind === 'settings';
+      if (modal) view = { kind: 'board', route: view.route, hash: '' };
+      removeSettings();
+      const { route } = view;
+      const board = view.kind === 'board';
+      const hub = route === undefined;
+      const siteTitle = hub ? 'Hub' : titleOf(route);
+      if (current) {
+        const st = current.v.B.state;
+        const keep = streamUp && st?.view === 'fresh' && st.board ? { fresh: st.fresh, generatedAt: st.board.generatedAt } : null;
+        current.v.unmount();
+        if (keep) left.set(current.route, keep);
+      }
+      const page = board ? null : AppViews[view.kind];
+      const root = document.createElement('div');
+      root.className = board ? 'view-board' : page.className;
+      root.innerHTML = board ? BoardView.markup({ title: siteTitle }) : page.markup(view, { siteTitle });
+      if (current) current.root.replaceWith(root); else scrim.after(root);
+      const siteRoot = hub ? '/_hub' : '/' + encodeURIComponent(route);
+      let v;
+      if (board) {
+        const live = streamUp ? left.get(route) || null : null;
+        left.delete(route);
+        v = BoardView.create(root, siteRoot, { signal: signalFor(route), live, pause: () => data?.pause });
+      } else {
+        v = page.create(root, siteRoot, { view, siteTitle, boards, open: openHere, toggleSidebar: sidebar.toggle, keydown: sidebar.keydown, pointerdown: sidebar.pointerdown,
+          reload: () => go(AppRouter.viewOf(location.href, { boards: boards() }), location.href, 'reload'), closeSidebar: sidebar.close, up: () => router.up(),
+          loaded: (url, title) => { if (current?.v === v) framed(url, title); }, sidebarChanged: refreshSidebar });
+      }
+      current = { view, route, root, v };
+      document.title = board ? siteTitle : page.title(view, { siteTitle });
+      if (boards().has(route)) { try { localStorage.setItem(LAST_KEY, route); } catch { /* no storage: `/` opens the start board */ } }
+      sidebar.setHere(hub ? new URL(AppRouter.urlOf(view), location.href).pathname.slice(1) : route);
+      scrollTo(0, 0);
+      v.mount();
+      if (modal) showSettings();
+    }
+
+    // A framed page loaded url in the frame: the top's URL and title follow it, without a history entry of their own,
+    // since the frame's navigation made one. Any other view shows in the top instead.
+    function framed(url, title) {
+      const { href } = AppRouter.entryOf(url);
+      const view = AppRouter.viewOf(href, { boards: boards() });
+      if (view && view.kind !== 'frame') { if (!opener(href, { replace: true })) location.replace(href); return; }
+      document.title = title;
+      if (!view) return;
+      history.replaceState(history.state, '', href);
+      current.view = view;
+      if (view.route !== current.route) { current.route = view.route; sidebar.setHere(view.route); }
+    }
+    const openHere = (href) => { if (!opener(href)) location.assign(href); };
+
+    // The board and Waiting on you follow their own hash, so a link that only moves it keeps the view.
+    const sameView = (a, b) => a.kind === b.kind && a.route === b.route && (a.kind !== 'notes' || a.item === b.item) && (a.kind !== 'frame' || a.url === b.url);
+    const dirty = () => Boolean(current?.root.querySelector('[data-dirty]'));
+    addEventListener('beforeunload', (e) => { if (dirty()) { e.preventDefault(); e.returnValue = ''; } });
+
+    // go(view, href, how, from): router.js's, with how 'replace' for a framed page's hand-off and 'reload' for a view's
+    // own refresh. → true, or a promise of whether the view switched once the owner answers about an unsaved edit.
+    let router = null;
+    function go(view, href, how, from) {
+      if (!AppRouter.mounted(view)) return false;
+      if (view.kind === 'settings') {
+        if (current?.view.kind === 'board' && current.route === view.route) {
+          const here = AppRouter.viewOf(location.href, { boards: boards() });
+          if (here?.kind === 'board') current.view = here;
+          router.replace(href);
+          showSettings();
+          sidebar.close();
+          return true;
+        }
+        const board = { kind: 'board', route: view.route, hash: '' };
+        return Promise.resolve(go(board, AppRouter.urlOf(board), how, from)).then((shown) => {
+          if (!shown) return false;
+          router.replace(href);
+          showSettings();
+          return true;
+        });
+      }
+      if (view.kind === 'hub' && current?.view.kind === 'hub' && how !== 'reload') {
+        return Promise.resolve(current.v.B.openSettings(view)).then((shown) => {
+          if (shown) { current.view = view; sidebar.close(); }
+          return shown;
+        });
+      }
+      const stays = how !== 'reload' && current && sameView(current.view, view);
+      const finish = () => {
+        const moved = how === 'push' ? router.push(href, from) : how === 'replace' ? router.replace(href) : null;
+        if (moved === 'up') { sidebar.close(); return true; }
+        if (!stays) show(view);
+        else {
+          current.view = view;
+          if (how !== 'pop') dispatchEvent(new HashChangeEvent('hashchange'));
+        }
+        sidebar.close();
+        return true;
+      };
+      if ((stays && !settings) || !dirty()) { if (stays && settings) removeSettings(); return finish(); }
+      return BoardDialogs.confirm('Leave without saving? Your unsaved edits here will be lost.').then((leave) => (leave ? (removeSettings(), finish()) : false));
+    }
+
+    // `/` opens this device's last board, else the board the hub picks (sidebar data's start), else the hub's page
+    // (docs/adr/0050-a-sidebar-of-every-board-replaces-the-hub-home.md).
+    let first = AppRouter.viewOf(location.href, { boards: boards() });
+    if (first?.kind === 'start') {
+      let last = null;
+      try { last = localStorage.getItem(LAST_KEY); } catch {}
+      const pick = boards().has(last) ? last : data?.start || null;
+      history.replaceState(history.state, '', boards().has(pick) ? `/${encodeURIComponent(pick)}/` : '/_hub/');
+      first = AppRouter.viewOf(location.href, { boards: boards() });
+    }
+    if (!AppRouter.mounted(first)) { location.replace('/_hub/'); return; }
+
+    router = AppRouter.listen({ boards, go });
+    opener = (url, { replace = false, frames = true } = {}) => {
+      const view = AppRouter.viewOf(url, { boards: boards() });
+      if (!AppRouter.mounted(view) || (!frames && view.kind === 'frame')) return false;
+      go(view, new URL(url, location.href).href, replace ? 'replace' : 'push');
+      return true;
+    };
+    // Answered at once, since the switch may wait on the owner's answer about an unsaved edit.
+    navigator.serviceWorker?.addEventListener('message', (e) => {
+      const url = e.data?.open;
+      if (typeof url !== 'string') return;
+      e.ports?.[0]?.postMessage({ routed: open(url) });
+    });
+    navigator.serviceWorker?.startMessages?.();
+
+    show(first);
+    openStream();
+    addEventListener('visibilitychange', () => { if (!document.hidden) openStream(); });
+    addEventListener('pageshow', openStream);
+    // A page kept in the back-forward cache keeps its stream's connection, and a few such pages take every connection
+    // the browser allows the hub, so the next page's requests wait.
+    addEventListener('pagehide', (e) => {
+      if (!e.persisted || !es) return;
+      clearTimeout(retry);
+      streamUp = false;
+      es.close();
+    });
+  }
+
+  return { start, open, codeSeen };
+})();

package/board/public/sidebar.css

@@ -0,0 +1,199 @@
+/* The sidebar (ui-sidebar.js, sidebar.js): a rail from 900px, which collapses out of sight, and a drawer below it.
+   The app shell and the hub's pages link it after colors.css; the hub serves it as /_hub/sidebar.css. Every rule is
+   scoped to .sidebar, its scrim, the page classes sidebar.js sets or the shared New board dialog, since each page's own CSS uses the same short class names. */
+.sidebar { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); display: flex; flex-direction: column;
+  padding: 0 8px 0 max(8px, env(safe-area-inset-left));
+  background: var(--panel); border-right: 1px solid var(--line); overflow: hidden; overscroll-behavior: contain; touch-action: pan-y;
+  transform: translateX(-102%); visibility: hidden; transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s;
+  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; color: var(--text); }
+.sidebar.open { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
+/* Safari tints its toolbars with the background of fixed elements at the screen's edges, even a hidden or opacity: 0
+   one, so a closed scrim has no background colour, or the bars and the strip below a bottom sheet turn grey. */
+.sidebar-scrim { position: fixed; inset: 0; z-index: 19; background: transparent; pointer-events: none; transition: background-color .2s; }
+.sidebar-scrim.on { background: rgba(0,0,0,.4); pointer-events: auto; }
+@media (prefers-reduced-motion: reduce) { .sidebar, .sidebar.open, .sidebar-scrim { transition: none; } }
+
+/* The head is the page header itself (ui-page-header.js), edge to edge across the sidebar and pinned while the list
+   scrolls, so its logo and title sit where the page header's do. Its ✕ mirrors the logo's 44px box on the right. */
+.sidebar > .top { flex: none; margin: 0 -8px 0 calc(-1 * max(8px, env(safe-area-inset-left))); min-height: 53px; background: var(--panel); }
+.sidebar .sb-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
+.sidebar .sb-close:active { background: var(--chip); }
+@media (hover: hover) { .sidebar .sb-close:hover { background: var(--chip); color: var(--text); } }
+.sidebar .sb-label { margin: 12px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
+.sidebar .sb-group { display: flex; flex-direction: column; gap: 2px; }
+.sidebar .sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
+.sidebar .sb-scroll > section { flex: none; }
+.sidebar .sb-utility { padding-top: 6px; }
+.sidebar .sb-boards { margin-top: auto; }
+.sidebar .sb-empty { margin: 4px 8px; color: var(--muted); font-size: 12.5px; }
+.sidebar .sb-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
+.sidebar .sb-row:active { background: var(--chip); }
+@media (hover: hover) { .sidebar .sb-row:hover { background: color-mix(in srgb, var(--chip) 70%, transparent); text-decoration: none; } }
+.sidebar .sb-row.on { background: var(--accent-soft); }
+.sidebar .sb-turnon { margin: 6px 0 0; background: color-mix(in srgb, var(--color-danger) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--line)); }
+.sidebar .sb-update-row { width: 100%; min-height: 48px; margin: 0 0 6px; padding: 6px 8px; border-radius: 10px; text-align: left; font: inherit; color: var(--text);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); cursor: pointer; }
+.sidebar .sb-update-row:disabled { opacity: 1; cursor: default; }
+.sidebar .sb-go { flex: none; padding: 5px 10px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
+.sidebar .sb-update-row:disabled .sb-go { background: transparent; color: var(--muted); padding-right: 0; font-weight: 400; }
+html.sb-update body.has-sidebar > .top .hub, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub { position: relative; }
+html.sb-update body.has-sidebar > .top .hub::after, html.sb-update body.has-sidebar > :not(.sidebar) > .top .hub::after {
+  content: ''; position: absolute; width: 10px; height: 10px; top: 3px; right: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
+.sidebar .sb-text { flex: 1; min-width: 0; }
+.sidebar .sb-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar .sb-moon { display: inline-block; margin-left: 5px; color: var(--muted); vertical-align: -1px; }
+.sidebar .sb-moon svg { display: block; }
+@media (hover: none) { .sidebar .sb-moon { pointer-events: none; } }
+.sidebar .sb-sub { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.sidebar .sb-new { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; }
+.sidebar .sb-starting { color: var(--muted); }
+.sidebar .sb-starting:hover, .sidebar .sb-starting:active { background: transparent; }
+.sidebar .sb-dismiss { flex: none; min-height: 44px; font-size: 12px; }
+.sidebar .sb-row .icon.sb-plus { color: var(--muted); background: var(--chip); }
+
+#newBoardSheet .nb-form { min-width: 0; }
+#newBoardSheet .sheet-head { margin-bottom: 8px; }
+#newBoardSheet .sheet-head h2 { font-size: 17px; }
+#newBoardSheet .nb-field { display: block; padding: 8px 0; margin: 0; }
+#newBoardSheet .nb-field > span:first-child { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
+#newBoardSheet :is(input, select) { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px;
+  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; text-align: left; box-sizing: border-box; }
+#newBoardSheet select { text-overflow: ellipsis; }
+#newBoardSheet :is(input, select):focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
+#newBoardSheet .sheet-head { display: flex; align-items: center; justify-content: space-between; }
+#newBoardSheet .nb-repo-list { display: grid; gap: 8px; }
+#newBoardSheet .nb-repo { display: block; width: 100%; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
+#newBoardSheet .nb-repo:hover, #newBoardSheet .nb-repo:focus-visible { border-color: var(--accent); }
+#newBoardSheet .nb-repo strong { overflow-wrap: anywhere; }
+#newBoardSheet .nb-repo.nb-repo-highlight { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
+#newBoardSheet .nb-repo-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
+#newBoardSheet .nb-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
+#newBoardSheet .nb-box > span { min-width: 0; }
+#newBoardSheet .nb-box strong { display: block; overflow-wrap: anywhere; }
+#newBoardSheet .nb-box-no { border-color: color-mix(in srgb, var(--color-danger) 40%, var(--line)); }
+#newBoardSheet .nb-why { display: block; margin-top: 4px; color: var(--color-danger); font-size: 13px; }
+#newBoardSheet .nb-spin { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: nb-spin .8s linear infinite; }
+@keyframes nb-spin { to { transform: rotate(360deg); } }
+#newBoardSheet .nb-local { display: block; margin-top: 8px; font-size: 12px; color: var(--accent); }
+#newBoardSheet .nb-selected { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
+#newBoardSheet .nb-clone { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 12px; }
+#newBoardSheet [hidden] { display: none; }
+#newBoardSheet .nb-help { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; }
+#newBoardSheet .nb-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; padding-bottom: 2px; }
+#newBoardSheet .nb-actions button { min-height: 44px; }
+#newBoardSheet .nb-next { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
+#newBoardSheet .nb-error { color: var(--color-danger); font-size: 13px; }
+@media (min-width: 900px) {
+  #newBoardSheet { inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 48px); }
+}
+
+/* The site tiles hub/icons.mjs siteIcon draws, and the hub rows' solid tiles. */
+.sidebar .icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c);
+  background: color-mix(in srgb, var(--c) 18%, transparent); font-weight: 700; font-size: 15px; line-height: 1; }
+.sidebar .icon.sm { width: 32px; height: 32px; border-radius: 8px; }
+.sidebar .icon.solid { color: #fff; background: var(--c); }
+@media (prefers-color-scheme: dark) { .sidebar .icon:not(.solid) { color: color-mix(in srgb, var(--c) 70%, #fff); } }
+.sidebar .icon svg { display: block; }
+
+/* Switch mode (sidebar.js): while .ks-on, each row's key in its tile in place of its glyph, the title's letter in
+   builder orange, and the Boards label's hint with a bar that drains over the 3 seconds switch mode waits for a key.
+   Its marks stay in the markup until the next paint, so they fade out on toasts.js timing; @starting-style fades them in.
+   Nothing in the hint takes space, so no row moves when switch mode starts or ends. */
+.sidebar .ks-key { display: none; }
+.sidebar.ks-on .icon:has(.ks-key) { font-size: 0; }
+.sidebar.ks-on .icon:has(.ks-key) > svg { display: none; }
+.sidebar.ks-on .ks-key { display: block; font: 700 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
+.sidebar .ks-label { position: relative; display: flex; align-items: baseline; gap: .45em; white-space: nowrap; }
+.sidebar .ks-label-hint { font-weight: 400; letter-spacing: 0; text-transform: none;
+  opacity: 0; visibility: hidden; transition: opacity 200ms linear, visibility 0s linear 200ms; }
+.sidebar.ks-on .ks-label-hint { opacity: 1; visibility: visible; transition: opacity 150ms linear; }
+@starting-style { .sidebar.ks-on .ks-label-hint { opacity: 0; } }
+/* The label is the bar's containing block: left 0 is the BOARDS text's edge, and right -8px crosses the label's 8px
+   side margin (.sb-label) to the rows' right edge. The bar sits in the label's 4px bottom margin. */
+.sidebar .ks-bar { position: absolute; left: 0; right: -8px; top: 100%; height: 2px; margin-top: 1px; background: var(--color-notice);
+  transform-origin: 0 50%; animation: ks-drain 3s linear forwards; }
+@keyframes ks-drain { to { transform: scaleX(0); } }
+.sidebar .ks-u { transition: color 200ms linear; }
+.sidebar.ks-on .ks-u { color: var(--color-notice); transition: color 150ms linear; }
+@starting-style { .sidebar.ks-on .ks-u { color: inherit; } }
+@media (prefers-reduced-motion: reduce) {
+  .sidebar .ks-bar { animation: none; }
+  .sidebar .ks-label-hint { transition: opacity 100ms linear, visibility 0s linear 100ms; }
+  .sidebar.ks-on .ks-label-hint { transition: opacity 80ms linear; }
+  .sidebar .ks-u { transition: color 100ms linear; }
+  .sidebar.ks-on .ks-u { transition: color 80ms linear; }
+}
+
+/* A site's status (hub/home.mjs statusLine): the lane chips wrap on their own line, and the status word goes below them. */
+.sidebar .sb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
+.sidebar .lcs { order: -1; flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
+.sidebar .lc { flex: none; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; line-height: 18px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
+.sidebar .lc-review { --tone: var(--accent); } .sidebar .lc-progress { --tone: var(--color-notice); } .sidebar .lc-todo { --tone: var(--muted); }
+.sidebar .dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
+@keyframes sb-pulse { 50% { opacity: .35; } }
+@media (prefers-reduced-motion: no-preference) { .sidebar .dot.pulse { animation: sb-pulse 1.4s ease-in-out infinite; } }
+.sidebar .word { flex: none; font-weight: 600; color: var(--tone); }
+.sidebar .t-down, .sidebar .t-needs { --tone: var(--color-danger); }
+.sidebar .t-starting, .sidebar .t-asleep { --tone: var(--muted); }
+.sidebar .t-working { --tone: var(--color-notice); }
+.sidebar .t-building { --tone: var(--color-notice); }
+.sidebar .t-ok { --tone: var(--color-success); }
+.sidebar .t-wait { --tone: var(--color-notice); }
+
+@media (min-width: 900px) {
+  body.has-sidebar { padding-left: 272px; }
+  body.has-sidebar .sidebar { width: 272px; transform: none; visibility: visible; transition: none; z-index: 4; }
+  body.has-sidebar .sidebar .sb-close { display: none; }
+  body.has-sidebar .sidebar-scrim { display: none; }
+  html:not(.sb-collapsed) body.has-sidebar > .top .hub, html:not(.sb-collapsed) body.has-sidebar > :not(.sidebar) > .top .hub { display: none; }
+  html.sb-collapsed body.has-sidebar { padding-left: 0; }
+  html.sb-collapsed body.has-sidebar .sidebar { transform: translateX(-102%); visibility: hidden; }
+  /* Switch mode shows a collapsed rail over the page until it ends, and leaves it collapsed. */
+  html.sb-collapsed body.has-sidebar .sidebar.ks-on { transform: none; visibility: visible; z-index: 20; }
+  html.sb-anim body.has-sidebar { transition: padding-left .24s cubic-bezier(.2,.8,.2,1); }
+  html.sb-anim body.has-sidebar .sidebar { transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s; }
+  html.sb-anim:not(.sb-collapsed) body.has-sidebar .sidebar { transition: transform .24s cubic-bezier(.2,.8,.2,1); }
+}
+@media (min-width: 900px) and (prefers-reduced-motion: reduce) { html.sb-anim body.has-sidebar, html.sb-anim body.has-sidebar .sidebar { transition: none; } }
+
+@media (max-width: 899px) {
+  .sidebar > .top { position: static; order: 2; margin-bottom: 0; border-bottom: 0; border-top: 1px solid var(--line);
+    padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
+  .sidebar .sb-scroll { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; }
+}
+
+.sidebar .u-tone-ok { --u: var(--accent); }
+.sidebar .u-tone-high { --u: var(--color-notice); }
+.sidebar .u-tone-full { --u: var(--color-danger); }
+.sidebar .u-tone-stale, .sidebar .u-tone-none { --u: var(--muted); }
+.sidebar .u-bar { display: block; height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; }
+.sidebar .u-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--u); }
+.sidebar .u-tone-stale .u-bar, .sidebar .u-tone-none .u-bar { background: repeating-linear-gradient(135deg, var(--chip) 0 4px, color-mix(in srgb, var(--muted) 22%, var(--chip)) 4px 6px); }
+.sidebar .u-num { color: var(--u); font-weight: 600; font-variant-numeric: tabular-nums; }
+.sidebar .u-tone-ok .u-num { color: inherit; font-weight: 400; }
+
+.sidebar .sb-row.sb-hub-usage { align-items: flex-start; padding-top: 8px; padding-bottom: 10px; }
+.sidebar .sb-hub-usage > .icon { margin-top: 2px; }
+.sidebar .sb-hub-usage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.sidebar .sb-usage { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.3; }
+.sidebar .sb-usage .u-one { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.sidebar .sb-usage .u-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar .sb-usage .u-name { color: var(--text); font-weight: 600; }
+
+/* The shortcuts sheet (sidebar.js, h h): centred near the top of the window over the dimmed page, never on a phone. */
+.sheet.shortcuts-sheet { inset: 12vh 0 auto; max-width: 440px; max-height: 76vh; padding: 0; border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: 0 10px 30px rgba(0,0,0,.18); }
+.sheet.shortcuts-sheet[open] { animation: fade-in .16s ease-out; }
+.shortcuts-sheet .sheet-body { padding: 14px 18px; }
+.shortcuts-sheet .sheet-head h2 { font-size: 16px; }
+.shortcuts-sheet .sc-group { margin-top: 12px; }
+.shortcuts-sheet .sc-group h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
+.shortcuts-sheet .sc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 3px 0; }
+.shortcuts-sheet .sc-what { min-width: 0; }
+.shortcuts-sheet .sc-sub { display: block; font-size: 12px; color: var(--muted); }
+.shortcuts-sheet .sc-keys { flex: none; display: inline-flex; align-items: center; gap: 4px; }
+.shortcuts-sheet .sc-key { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
+  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--chip); color: var(--text);
+  font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
+.shortcuts-sheet .sc-foot { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
+@media (prefers-reduced-motion: reduce) { .sheet.shortcuts-sheet[open] { animation: none; } }