npm - @orbytes/astrolab - Versions diffs - 0.3.0 - Mend

@orbytes/astrolab 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/LICENSE +37 -0
package/README.md +410 -0
package/bin/lab-cull.mjs +401 -0
package/bin/pin-gallery.mjs +121 -0
package/defaults.mjs +120 -0
package/dist/core/astro-integration.js +130 -0
package/dist/core/index.js +6 -0
package/dist/core/lib-paths.js +29 -0
package/dist/core/options.js +173 -0
package/dist/core/utils/get-exports.js +52 -0
package/dist/core/utils/invariant.js +12 -0
package/dist/core/utils/kebab-case.js +15 -0
package/dist/core/utils/path-builder.js +22 -0
package/dist/core/utils/path.js +53 -0
package/dist/core/virtual-module/get-story-modules.js +60 -0
package/dist/core/virtual-module/story-modules.js +8 -0
package/dist/core/virtual-module/virtual-module-ids.js +22 -0
package/dist/core/virtual-module/virtual-routes.js +83 -0
package/dist/core/virtual-module/vite-plugin.js +98 -0
package/docs/PIN-CONTRACT.md +263 -0
package/docs/PIN.md +429 -0
package/index.d.ts +279 -0
package/index.mjs +347 -0
package/package.json +93 -0
package/src/Empty.astro +4 -0
package/src/Home.astro +298 -0
package/src/LabHead.astro +1102 -0
package/src/core/LICENSE-astrobook +166 -0
package/src/core/astro-integration.ts +166 -0
package/src/core/client.ts +89 -0
package/src/core/index.ts +7 -0
package/src/core/lib/components/empty.astro +1 -0
package/src/core/lib/components/head.astro +1 -0
package/src/core/lib/components/home.astro +8 -0
package/src/core/lib/components/with-decorators.astro +22 -0
package/src/core/lib/pages/app.astro +19 -0
package/src/core/lib/pages/preview.astro +17 -0
package/src/core/lib/pages/story.astro +16 -0
package/src/core/lib-paths.ts +72 -0
package/src/core/options.ts +262 -0
package/src/core/utils/get-exports.ts +59 -0
package/src/core/utils/invariant.ts +13 -0
package/src/core/utils/kebab-case.ts +30 -0
package/src/core/utils/path-builder.ts +45 -0
package/src/core/utils/path.ts +80 -0
package/src/core/virtual-module/get-story-modules.ts +110 -0
package/src/core/virtual-module/story-modules.ts +9 -0
package/src/core/virtual-module/virtual-module-ids.ts +17 -0
package/src/core/virtual-module/virtual-routes.ts +130 -0
package/src/core/virtual-module/vite-plugin.ts +125 -0
package/src/pin/board.mjs +1521 -0
package/src/pin/index.mjs +666 -0
package/src/pin/shot.mjs +427 -0
package/src/pin/source-stamp.mjs +159 -0
package/src/pin/tickets.mjs +697 -0
package/src/pin/toolbar.js +3181 -0
package/src/shell/Browse.astro +371 -0
package/src/shell/CardGrid.astro +297 -0
package/src/shell/Viewport.astro +1330 -0
package/src/shell/index.json.ts +12 -0
package/src/shell/lab-index.ts +344 -0
package/src/shell/lab-params.ts +245 -0
package/src/shell/live-files.mjs +164 -0
package/src/shell/marks.mjs +136 -0
package/src/types/index.ts +6 -0
package/src/types/types.ts +239 -0
package/src/types/virtual.d.ts +29 -0
package/src/ui/components/app.astro +13 -0
package/src/ui/components/build-path.ts +13 -0
package/src/ui/components/build-tree.ts +108 -0
package/src/ui/components/collapse-duration.ts +28 -0
package/src/ui/components/compress-terms.ts +10 -0
package/src/ui/components/dashboard-layout.astro +39 -0
package/src/ui/components/home.astro +65 -0
package/src/ui/components/layout.astro +110 -0
package/src/ui/components/preview-layout.astro +109 -0
package/src/ui/components/sidebar-button-fullscreen.astro +38 -0
package/src/ui/components/sidebar-button-search.astro +23 -0
package/src/ui/components/sidebar-button-theme.astro +9 -0
package/src/ui/components/sidebar-button.astro +24 -0
package/src/ui/components/sidebar-resize-handle.astro +74 -0
package/src/ui/components/sidebar-search-panel.astro +41 -0
package/src/ui/components/sidebar-search-script.ts +103 -0
package/src/ui/components/sidebar-title.astro +17 -0
package/src/ui/components/sidebar-tree-node.astro +143 -0
package/src/ui/components/sidebar-tree.astro +84 -0
package/src/ui/components/sidebar.astro +29 -0
package/src/ui/components/theme-message.ts +26 -0
package/src/ui/components/theme-script.astro +71 -0
package/src/ui/components/theme-toggle.astro +63 -0
package/src/ui/components/theme.ts +32 -0
package/src/ui/index.ts +4 -0
package/src/ui/lab.css +549 -0
package/virtual.d.ts +42 -0

package/src/LabHead.astro ADDED Viewed

@@ -0,0 +1,1102 @@
+---
+// LabHead — the lab's CHROME head component, given to Astrobook as its `head` option by the
+// integration (../index.mjs) and imported directly by the shell's own pages (./shell/Browse.astro,
+// ./shell/Viewport.astro). Everything in it is generic: the unconditional noindex, the sidebar
+// collapse, the live / used-by / responsive pills, the search widening, j/k, the cull switch and
+// the Feedbucket tag.
+//
+// CHANGED 2026-09-22 — the lab is not styled in the styles of the website being built; it has a
+// standard style across every site. This file used to mount the consumer's own
+// head component here — <UserHead />, the site's fonts — on EVERY lab page, and it used to declare
+// the lab's tokens in a cascade layer the consumer was expected to override. Both are gone. The
+// consumer's head and stylesheets now reach the PREVIEW only: ./ui/components/dashboard-layout.astro
+// for the story rendered beside the chrome, and ./ui/components/preview-layout.astro for the bare
+// story route. The chrome's own look ships with the package, in the one stylesheet imported below.
+import "./ui/lab.css";
+import ThemeScript from "./ui/components/theme-script.astro";
+import labConfig from "virtual:orbytes-lab/config.mjs";
+// Feedbucket on lab pages too (decided 2026-09-05 — until then the lab was the one staging
+// surface nothing seen on could enter the ticket loop from). The package takes a key or
+// nothing: the consumer keeps its own staging gate and passes the key only where the widget
+// belongs.
+const feedbucketKey = labConfig.feedbucketKey;
+// The lab index — every story with its module file, tier, section/version, LIVE slot (which page
+// under src/pages/ mounts it, and where in that page), its responsive mark and the live sections
+// that import it. Built once per process: this head renders on every lab page (130+ in a build),
+// and the index globs every story module.
+import { buildLabIndex, labBase, type LabIndex } from "./shell/lab-index";
+const memo = globalThis as typeof globalThis & { __labIndex?: LabIndex };
+const labIndex = (memo.__labIndex ??= buildLabIndex());
+// Only what the sidebar script needs; `</` is escaped so the JSON can never close its own tag.
+// `viewportBase` is where the viewport configurator lives (./shell/Viewport.astro, one page
+// per story), so the sidebar's Viewport button never hard-codes the lab's base path.
+// `editorUrl` is null in any build — the VS Code link is a local absolute path, dev only.
+const labIndexJson = JSON.stringify({
+  viewportBase: `${labBase}/viewport`,
+  // Which tier the cull switch acts on and which carries the responsive marks — the consumer's
+  // `tiers` option, never a tier name written into the script below.
+  tiers: { cull: labConfig.cullTier, responsive: labConfig.sectionsTier },
+  items: labIndex.items.map(
+    ({
+      storyId,
+      moduleId,
+      moduleFile,
+      moduleName,
+      tier,
+      section,
+      version,
+      live,
+      livePage,
+      liveOn,
+      responsive,
+      stagingUrl,
+      editorUrl,
+      usedBy,
+      tags,
+    }) => ({
+      storyId,
+      moduleId,
+      moduleFile,
+      moduleName,
+      tier,
+      section,
+      version,
+      live,
+      livePage,
+      liveOn,
+      responsive,
+      stagingUrl,
+      editorUrl,
+      usedBy,
+      tags,
+    }),
+  ),
+}).replace(/</g, "\\u003c");
+---
+{/* The theme, applied before paint. It lives here rather than in the layout because every chrome
+    page mounts this head — the dashboard and the `/lab` home through Astrobook's layout, the
+    folder pages and the viewport configurator directly — and `.dark` on <html> is what the whole
+    chrome themes on (./ui/lab.css). Exactly one per document: the bare story page mounts no
+    LabHead and carries its own copy. */}
+<ThemeScript />
+{/* THE LAB IS STAGING-ONLY AND NEVER INDEXABLE (ruled 2026-09-02: the lab is live on staging and
+    staging only, and must never go live on the main domain).
+    Two independent mechanisms enforce that, deliberately — one gate is not enough for a rule this
+    absolute:
+      1. BUILD GATE — the consumer's astro.config.mjs registers this integration for `astro dev`
+         or a staging build only, so a production build emits no lab routes at all. On orbytes.io
+         that is asserted by `npm run check:lab-gate`, which fails if /lab ever appears in a
+         production build. The gate is the consumer's to keep; the meta below is this package's.
+      2. THIS META — unconditional, not gated on the environment. Lab pages are rendered by
+         Astrobook, NOT by the site's own layout, so they never receive the sitewide staging
+         noindex that layout emits. Without this line the lab was the one crawlable corner of
+         an otherwise noindex staging deploy (verified live on 2026-09-02: home page carried
+         `noindex`, /lab/ carried no robots meta, and robots.txt has no Disallow).
+    It is unconditional on purpose: if the build gate ever regresses, the meta is the thing that
+    still keeps the lab out of search. Do not make it depend on PUBLIC_DEPLOY_ENV. */}
+<meta name="robots" content="noindex, nofollow" />
+{
+  feedbucketKey && (
+    <script
+      is:inline
+      defer
+      src="https://cdn.feedbucket.app/assets/feedbucket.js"
+      data-feedbucket={feedbucketKey}
+    />
+  )
+}
+{/* THE KEYBOARD GUARD — one predicate, shared by every lab shortcut.
+    `window.__labIgnoreKey(event)` answers: is this keystroke someone else's? The lab owns ⌘B,
+    ⌘K and j/k on `document`, and the viewport route owns [ ] r f 0 (./shell/Viewport.astro).
+    None of them may fire while a character is being typed — into the lab's own search box, into
+    a form on the previewed story, or into a panel belonging to another tool.
+    WHY IT READS composedPath() AND NOT document.activeElement (ruled 2026-09-22: keyboard
+    shortcuts in the lab must be disabled while a pin note is being written). The pin composer's
+    textarea lives inside the Astro dev toolbar's shadow tree. A keystroke crossing a shadow
+    boundary is RETARGETED, so a `document` listener sees `event.target` — and `document.activeElement` —
+    as the shadow HOST, <astro-dev-toolbar>, which is neither an input nor contentEditable.
+    Every "am I typing?" test written against either of those reads false and the shortcut
+    fires. Measured: typing `j` into a pin comment ran stepStory(), which preventDefault'ed the
+    character, clicked a sidebar story link, navigated the lab and took focus off the composer —
+    after which every remaining character landed on <body> and was lost.
+    composedPath() is the one view that still holds the real target, because Astro's toolbar
+    shadow roots are open. A closed root would trim the path back to the host — which is why the
+    <astro-dev-toolbar> test below is a second, independent line of defence and not redundant:
+    it holds whatever the toolbar does with its shadow roots, and it covers the toolbar's
+    BUTTONS too, where nothing is being typed but the keystroke is still not the lab's.
+    Defined before every handler that uses it, and idempotent — LabHead renders once per page,
+    but a view transition can re-run an inline script. */}
+<script is:inline>
+  window.__labIgnoreKey ||= (event) => {
+    const path =
+      typeof event.composedPath === "function" ? event.composedPath() : [event.target];
+    for (const node of path) {
+      if (!node || node.nodeType !== 1) continue;
+      const tag = node.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+      if (node.isContentEditable) return true;
+      if (tag === "ASTRO-DEV-TOOLBAR") return true;
+    }
+    return false;
+  };
+</script>
+{/* Sidebar collapse for the Astrobook dashboard. Astrobook 0.13.3 has no built-in
+    collapse (its "fullscreen" button navigates away to the bare story), so this
+    injects one the same way Astrobook persists its sidebar width: a data attribute
+    on <html>, localStorage, and a re-apply on every view-transition swap. Bare
+    story pages render no #astrobook-sidebar, so everything below no-ops there. */}
+<script is:inline>
+  (() => {
+    if (window.__labSidebarCollapseInit) return;
+    window.__labSidebarCollapseInit = true;
+    const KEY = "lab-sidebar-collapsed";
+    const applyState = () => {
+      if (localStorage.getItem(KEY) === "1") {
+        document.documentElement.dataset.labSidebarCollapsed = "";
+      } else {
+        delete document.documentElement.dataset.labSidebarCollapsed;
+      }
+    };
+    const toggle = () => {
+      if (localStorage.getItem(KEY) === "1") localStorage.removeItem(KEY);
+      else localStorage.setItem(KEY, "1");
+      applyState();
+    };
+    const CHEVRONS_LEFT =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>';
+    const CHEVRONS_RIGHT =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>';
+    const makeButton = (id, title, svg) => {
+      const button = document.createElement("button");
+      button.id = id;
+      button.className = "astrobook-sidebar-button";
+      button.title = title;
+      button.setAttribute("aria-label", title);
+      button.innerHTML = svg;
+      button.addEventListener("click", toggle);
+      return button;
+    };
+    const setup = () => {
+      applyState();
+      const sidebar = document.getElementById("astrobook-sidebar");
+      if (!sidebar) return; // bare story page — no dashboard chrome
+      const header = sidebar.querySelector("nav > div");
+      if (header && !document.getElementById("lab-sidebar-collapse")) {
+        header.appendChild(
+          makeButton(
+            "lab-sidebar-collapse",
+            "Collapse sidebar (⌘B)",
+            CHEVRONS_LEFT,
+          ),
+        );
+      }
+      if (!document.getElementById("lab-sidebar-expand")) {
+        document.body.appendChild(
+          makeButton(
+            "lab-sidebar-expand",
+            "Show sidebar (⌘B)",
+            CHEVRONS_RIGHT,
+          ),
+        );
+      }
+    };
+    applyState(); // pre-paint, so a collapsed sidebar never flashes visible
+    document.addEventListener("astro:after-swap", setup);
+    document.addEventListener("keydown", (event) => {
+      if (window.__labIgnoreKey(event)) return; // › THE KEYBOARD GUARD, above
+      if (
+        event.key.toLowerCase() === "b" &&
+        (event.metaKey || event.ctrlKey) &&
+        document.getElementById("astrobook-sidebar")
+      ) {
+        event.preventDefault();
+        toggle();
+      }
+    });
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", setup, { once: true });
+    } else {
+      setup();
+    }
+  })();
+</script>
+<style is:global>
+  :root[data-lab-sidebar-collapsed] #astrobook-sidebar,
+  :root[data-lab-sidebar-collapsed] astrobook-sidebar-resize-handle {
+    display: none;
+  }
+  #lab-sidebar-collapse svg,
+  #lab-sidebar-expand svg {
+    display: block;
+  }
+  /* Floating re-open control; only exists while the sidebar is collapsed. Sits
+     over whatever the story canvas renders, so it carries its own ground. */
+  #lab-sidebar-expand {
+    display: none;
+    position: fixed;
+    top: 0.85rem;
+    left: 0.5rem;
+    z-index: 50;
+    background-color: var(--lab-color-bg-sunken);
+    border: 1px solid var(--lab-color-border);
+  }
+  :root[data-lab-sidebar-collapsed] #lab-sidebar-expand {
+    display: block;
+  }
+</style>
+{/* The lab index, for the sidebar script below. Emitted on every lab page (the bare story pages
+    included — they have no sidebar, so nothing reads it there). */}
+<script is:inline type="application/json" id="lab-index" set:html={labIndexJson} />
+{/* Lab shell — live pills, responsive marks, ⌘K search, j/k navigation, the cull switch, and the
+    Viewport / staging / VS Code buttons. Same shape as the collapse script above:
+    inline, guarded on #astrobook-sidebar (bare story pages and any other page that imports this
+    head have no sidebar, so every step below no-ops there), re-run on astro:after-swap and
+    astro:page-load, idempotent — a row is decorated once and marked, so a pill is never added
+    twice.
+    Astrobook 0.13.3 DOM this couples to (verified in @astrobook/ui/dist/components — the hashed
+    UnoCSS class names are NOT stable, these are):
+      #astrobook-sidebar > nav > div            the header row (the collapse button lands there too)
+      <html data-active-story="<storyId>">      the story the dashboard shows, "" on the home page;
+                                                replaced on every swap. The Viewport button links to
+                                                /lab/viewport/<storyId> from it.
+      astrobook-sidebar-tree#astrobook-sidebar-tree   the tree; transition:persist'ed, so it — and
+                                                everything this script hangs on it — survives a
+                                                view transition. The header does not, so the
+                                                cull button is re-added on every swap.
+      details[data-astrobook-collapsible][data-id="dir:<Name>"|"module:<moduleId>"][data-search-text]
+        > summary.astrobook-sidebar-link          folder and module rows. dir ids are BARE folder
+                                                names (dir:V2 occurs in every section), so a
+                                                folder's path is the chain of ancestor dir ids.
+      a[data-astrobook-story-link][data-story-id][data-search-text].astrobook-sidebar-link
+                                                story leaves. A module with a single story named
+                                                like itself is hoisted: its link sits directly
+                                                under the folder with no module: ancestor.
+      #astrobook-search-toggle / #astrobook-search-panel[data-open] / #astrobook-search-input
+                                                the search. Filtering is CSS Astrobook injects:
+                                                `[data-search-text]:not([data-search-text*=term])
+                                                { display:none }` per lower-cased query term — so
+                                                widening a match means appending lower-cased terms
+                                                to data-search-text on the row AND on every
+                                                details ancestor (a hidden ancestor hides the
+                                                row). Elements without data-search-text (the
+                                                pills) are never touched by that CSS.
+    Mark APIs (dev-only middleware, absent on staging — the switch and the boxes hide themselves
+    when the probe fails):
+      GET /__lab/cull → { marked: string[] (module files), updated }; PUT { marked } → 200
+        { ok, marked } | 400 { error, offenders }.
+      GET /__lab/responsive → { done: string[], approved: string[], updated }; PUT
+        { done, approved } → 200 { ok, done, approved } | 400 { error, offenders }. Section
+        versions only — components and explorations never show the boxes. */}
+<script is:inline>
+  (() => {
+    if (window.__labShellInit) return;
+    window.__labShellInit = true;
+    // The tier roles, read straight off the index blob above (it is emitted before this script,
+    // so it is already in the DOM). Either may be null on a site whose `tiers` option declares no
+    // such tier, and then the matching controls simply never find a row to hang on.
+    const LAB_TIERS = (() => {
+      try {
+        const blob = document.getElementById("lab-index");
+        return (JSON.parse((blob && blob.textContent) || "{}").tiers) || {};
+      } catch {
+        return {};
+      }
+    })();
+    const CULL_KEY = "lab-cull-on"; // sessionStorage — the switch's on/off state
+    const CULL_ENDPOINT = "/__lab/cull";
+    const RESPONSIVE_ENDPOINT = "/__lab/responsive";
+    const TREE_ID = "astrobook-sidebar-tree";
+    // ---- index --------------------------------------------------------------------------------
+    let index = null;
+    const readIndex = () => {
+      if (index) return index;
+      const blob = document.getElementById("lab-index");
+      if (!blob) return null;
+      let items;
+      let viewportBase;
+      try {
+        const parsed = JSON.parse(blob.textContent || "{}");
+        items = parsed.items || [];
+        viewportBase = typeof parsed.viewportBase === "string" ? parsed.viewportBase : "/lab/viewport";
+      } catch {
+        return null;
+      }
+      const byStory = new Map();
+      const byModule = new Map();
+      for (const item of items) {
+        byStory.set(item.storyId, item);
+        if (!byModule.has(item.moduleId)) byModule.set(item.moduleId, []);
+        byModule.get(item.moduleId).push(item);
+      }
+      index = { items, byStory, byModule, viewportBase };
+      return index;
+    };
+    const directoryOf = (item) => {
+      const cut = item.moduleId.lastIndexOf("/");
+      return cut < 0 ? "" : item.moduleId.slice(0, cut);
+    };
+    const liveUnder = (path) =>
+      index.items.filter((item) => {
+        if (!item.live) return false;
+        const directory = directoryOf(item);
+        return directory === path || directory.startsWith(path + "/");
+      }).length;
+    // ---- DOM ----------------------------------------------------------------------------------
+    const tree = () => document.getElementById(TREE_ID);
+    const folderPath = (details) => {
+      const names = [];
+      for (let el = details; el && el.id !== TREE_ID; el = el.parentElement) {
+        if (el.tagName === "DETAILS" && (el.dataset.id || "").startsWith("dir:")) {
+          names.unshift(el.dataset.id.slice(4));
+        }
+      }
+      return names.join("/");
+    };
+    const moduleIdOf = (details) => details.dataset.id.slice("module:".length);
+    const isHoisted = (link) => !link.closest('details[data-id^="module:"]');
+    const summaryOf = (details) => details.querySelector(":scope > summary");
+    // The sidebar row a control sits in — `a.astrobook-sidebar-link` for a story leaf,
+    // `summary.astrobook-sidebar-link` for a module row. Both carry the class; the mark boxes live
+    // inside the row's pill box, so they cannot use parentElement.
+    const rowOf = (el) => el.closest(".astrobook-sidebar-link") || el.parentElement;
+    const pill = (text, extraClass, title) => {
+      const span = document.createElement("span");
+      span.className = extraClass ? `lab-pill ${extraClass}` : "lab-pill";
+      span.textContent = text;
+      if (title) span.title = title;
+      return span;
+    };
+    const pillsOf = (row) => {
+      let box = row.querySelector(":scope > .lab-pills");
+      if (!box) {
+        box = document.createElement("span");
+        box.className = "lab-pills";
+        row.appendChild(box);
+      }
+      return box;
+    };
+    const usedByPill = (usedBy) =>
+      pill(`used by ${usedBy.length}`, "", `used by\n${usedBy.join("\n")}`);
+    const liveCountPill = (count) => pill(String(count), "lab-pill--live lab-pill--count", `${count} live`);
+    // The live pill's text. A single-page site reads exactly as it always did — `live · slot 3 of
+    // 12` — and only a page that is not the home page names itself: `live · /about, slot 3`. The
+    // same three lines are livePillText() in shell/lab-index.ts, for the cards; keep them in step.
+    const livePillText = (item) =>
+      item.livePage && item.livePage !== "/"
+        ? `live · ${item.livePage}, slot ${item.live.slot}`
+        : `live · slot ${item.live.slot} of ${item.live.of}`;
+    const liveTitle = (item) =>
+      (item.liveOn || []).length > 1
+        ? item.liveOn.map((mount) => `${mount.page} · slot ${mount.slot} of ${mount.of}`).join("\n")
+        : null;
+    // ---- search widening -----------------------------------------------------------------------
+    const extraTerms = (item) => {
+      const terms = [item.tier, item.section, item.version, item.moduleName, ...(item.tags || [])];
+      if (item.live) terms.push("live", item.livePage);
+      // "unresponsive", not "not responsive": Astrobook's filter is a substring match per term, so
+      // a row that said "not responsive" would still be a hit for "responsive".
+      if (item.responsive) terms.push(item.responsive.done ? "responsive" : "unresponsive");
+      return terms.filter(Boolean).map((term) => String(term).toLowerCase());
+    };
+    const appendTerms = (el, terms) => {
+      let text = el.dataset.searchText || "";
+      for (const term of terms) if (!text.includes(term)) text += ` ${term}`;
+      el.dataset.searchText = text;
+    };
+    const widenSearch = (link, terms) => {
+      appendTerms(link, terms);
+      for (let el = link.parentElement; el && el.id !== TREE_ID; el = el.parentElement) {
+        if (el.tagName === "DETAILS" && el.hasAttribute("data-search-text")) appendTerms(el, terms);
+      }
+    };
+    // ---- pills ----------------------------------------------------------------------------------
+    const decorate = () => {
+      const root = tree();
+      if (!root || !readIndex()) return;
+      for (const link of root.querySelectorAll(
+        "a[data-astrobook-story-link][data-story-id]:not([data-lab-decorated])",
+      )) {
+        link.dataset.labDecorated = "";
+        const item = index.byStory.get(link.dataset.storyId);
+        if (!item) continue;
+        const box = pillsOf(link);
+        if (item.live) {
+          box.appendChild(pill(livePillText(item), "lab-pill--live", liveTitle(item)));
+        }
+        if (isHoisted(link) && item.usedBy.length) box.appendChild(usedByPill(item.usedBy));
+        widenSearch(link, extraTerms(item));
+      }
+      for (const details of root.querySelectorAll('details[data-id^="module:"]:not([data-lab-decorated])')) {
+        details.dataset.labDecorated = "";
+        const summary = summaryOf(details);
+        const items = index.byModule.get(moduleIdOf(details)) || [];
+        if (!summary || !items.length) continue;
+        const box = pillsOf(summary);
+        const liveCount = items.filter((item) => item.live).length;
+        if (liveCount) box.appendChild(liveCountPill(liveCount));
+        if (items[0].usedBy.length) box.appendChild(usedByPill(items[0].usedBy));
+      }
+      for (const details of root.querySelectorAll('details[data-id^="dir:"]:not([data-lab-decorated])')) {
+        details.dataset.labDecorated = "";
+        const summary = summaryOf(details);
+        if (!summary) continue;
+        const count = liveUnder(folderPath(details));
+        if (count) pillsOf(summary).appendChild(liveCountPill(count));
+      }
+    };
+    // ---- ⌘K search -------------------------------------------------------------------------------
+    document.addEventListener("keydown", (event) => {
+      if (!document.getElementById("astrobook-sidebar")) return;
+      const input = document.getElementById("astrobook-search-input");
+      // ⌘K stays live inside the lab's OWN search box, where it means "select what is there and
+      // retype it". Everywhere else that a character is being typed, the keystroke is not ours.
+      // › THE KEYBOARD GUARD at the top of this file.
+      const elsewhere = event.target !== input && window.__labIgnoreKey(event);
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k" && !elsewhere) {
+        event.preventDefault();
+        const panel = document.getElementById("astrobook-search-panel");
+        const toggle = document.getElementById("astrobook-search-toggle");
+        if (panel && toggle && !panel.hasAttribute("data-open")) {
+          toggle.click(); // Astrobook opens the panel and focuses the input itself
+        } else if (input) {
+          input.focus();
+          input.select();
+        }
+      } else if (event.key === "Escape" && input && document.activeElement === input) {
+        input.blur();
+      }
+    });
+    // ---- cull switch -----------------------------------------------------------------------------
+    let cull = { available: false, marked: new Set() };
+    let probe = null;
+    const probeCull = () => {
+      probe ??= fetch(CULL_ENDPOINT, { headers: { accept: "application/json" } })
+        .then(async (response) => {
+          if (!response.ok) throw new Error(String(response.status));
+          const body = await response.json();
+          cull = { available: true, marked: new Set(Array.isArray(body.marked) ? body.marked : []) };
+        })
+        .catch(() => {
+          cull = { available: false, marked: new Set() };
+        })
+        .then(() => {
+          setupCullButton();
+          renderCull();
+        });
+      return probe;
+    };
+    const cullOn = () => cull.available && sessionStorage.getItem(CULL_KEY) === "1";
+    const applyCullState = () => {
+      if (cullOn()) document.documentElement.dataset.labCull = "";
+      else delete document.documentElement.dataset.labCull;
+      const button = document.getElementById("lab-cull-toggle");
+      if (button) {
+        button.setAttribute("aria-pressed", String(cullOn()));
+        button.toggleAttribute("data-active", cullOn());
+      }
+    };
+    const toggleCull = () => {
+      if (sessionStorage.getItem(CULL_KEY) === "1") sessionStorage.removeItem(CULL_KEY);
+      else sessionStorage.setItem(CULL_KEY, "1");
+      applyCullState();
+    };
+    const TRASH =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="m19 6-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>';
+    const setupCullButton = () => {
+      const sidebar = document.getElementById("astrobook-sidebar");
+      if (!sidebar || !cull.available) return;
+      const header = sidebar.querySelector("nav > div");
+      if (!header || document.getElementById("lab-cull-toggle")) return;
+      const button = document.createElement("button");
+      button.id = "lab-cull-toggle";
+      button.type = "button";
+      button.className = "astrobook-sidebar-button";
+      button.title = "Mark for deletion";
+      button.setAttribute("aria-label", "Mark for deletion");
+      button.setAttribute("aria-pressed", "false");
+      button.innerHTML = TRASH;
+      button.addEventListener("click", toggleCull);
+      const collapse = document.getElementById("lab-sidebar-collapse");
+      if (collapse && collapse.parentElement === header) header.insertBefore(button, collapse);
+      else header.appendChild(button);
+      applyCullState();
+    };
+    // Rows that can be marked: module rows and hoisted single-story leaves (module = the story's
+    // own moduleFile, from the index) — in the EXPLORATIONS tier only (ruled 2026-09-05: deletion
+    // is restricted to the explorations tier; section versions are the version history, components
+    // are the shared chrome, neither is ever culled). An exploration a live section imports keeps a
+    // disabled box: the cull script would refuse it anyway, so the UI says so up front.
+    const CULL_TIER = LAB_TIERS.cull;
+    const blockReason = (items) => {
+      if (items.some((item) => item.live)) return "live on the site — cannot be marked";
+      const usedBy = items[0].usedBy || [];
+      if (usedBy.length) return `used by ${usedBy.length} live section${usedBy.length === 1 ? "" : "s"} — cannot be marked`;
+      return null;
+    };
+    // Every row a mark can hang on, in one tier: module rows and hoisted single-story leaves.
+    // Shared by the cull boxes and the responsive boxes, so the two never disagree about what a
+    // markable row is — the same reason their path rules live together in shell/marks.mjs.
+    const tierRows = (tier) => {
+      const root = tree();
+      const rows = [];
+      if (!root) return rows;
+      for (const details of root.querySelectorAll('details[data-id^="module:"]')) {
+        const summary = summaryOf(details);
+        const items = index.byModule.get(moduleIdOf(details)) || [];
+        if (summary && items[0] && items[0].tier === tier) rows.push({ row: summary, items });
+      }
+      for (const link of root.querySelectorAll("a[data-astrobook-story-link][data-story-id]")) {
+        if (!isHoisted(link)) continue;
+        const item = index.byStory.get(link.dataset.storyId);
+        if (item && item.tier === tier) rows.push({ row: link, items: [item] });
+      }
+      return rows;
+    };
+    const cullRows = () =>
+      tierRows(CULL_TIER).map(({ row, items }) => ({
+        row,
+        item: items[0],
+        blocked: blockReason(items),
+      }));
+    const renderCull = () => {
+      if (!tree() || !readIndex()) return;
+      applyCullState();
+      for (const { row, item, blocked } of cullRows()) {
+        const marked = cull.marked.has(item.moduleFile);
+        row.classList.toggle("lab-row--marked", marked);
+        const box = pillsOf(row);
+        const markedPill = box.querySelector(".lab-pill--marked");
+        if (marked && !markedPill) box.appendChild(pill("marked", "lab-pill--marked", "marked for deletion"));
+        if (!marked && markedPill) markedPill.remove();
+        // The box lives in the pill box, not the row: the row wraps as one group, so a narrow
+        // sidebar puts pills AND boxes on a second line together instead of on three lines.
+        let check = box.querySelector(":scope > .lab-cull-box");
+        if (!cull.available) {
+          if (check) check.remove();
+          continue;
+        }
+        if (!check) {
+          check = document.createElement("input");
+          check.type = "checkbox";
+          check.className = "lab-cull-box";
+          check.addEventListener("click", onCullClick);
+          box.appendChild(check);
+        }
+        check.checked = marked;
+        check.disabled = Boolean(blocked);
+        check.dataset.moduleFile = item.moduleFile;
+        check.title = blocked ? blocked : marked ? "Unmark for deletion" : "Mark for deletion";
+        check.setAttribute("aria-label", `Mark ${item.moduleName} for deletion`);
+      }
+    };
+    const showRowError = (row, message, offenders) => {
+      const previous = row.nextElementSibling;
+      if (previous && previous.classList.contains("lab-row-error")) previous.remove();
+      const note = document.createElement("div");
+      note.className = "lab-row-error";
+      note.setAttribute("role", "alert");
+      const names = Array.isArray(offenders) ? offenders.map((path) => String(path).split("/").pop()) : [];
+      note.textContent = names.length ? `${message}: ${names.join(", ")}` : message;
+      row.insertAdjacentElement("afterend", note);
+      setTimeout(() => note.remove(), 4000);
+    };
+    const onCullClick = async (event) => {
+      // The box shows the server's state, never the click's — and preventDefault keeps the host
+      // <a> from navigating and the <summary> from toggling.
+      event.preventDefault();
+      event.stopPropagation();
+      const check = event.currentTarget;
+      if (check.disabled) return;
+      const row = rowOf(check);
+      const next = new Set(cull.marked);
+      if (next.has(check.dataset.moduleFile)) next.delete(check.dataset.moduleFile);
+      else next.add(check.dataset.moduleFile);
+      try {
+        const response = await fetch(CULL_ENDPOINT, {
+          method: "PUT",
+          headers: { "content-type": "application/json", accept: "application/json" },
+          body: JSON.stringify({ marked: [...next] }),
+        });
+        const body = await response.json().catch(() => ({}));
+        if (response.ok) {
+          cull.marked = new Set(Array.isArray(body.marked) ? body.marked : [...next]);
+        } else {
+          showRowError(row, body.error || `HTTP ${response.status}`, body.offenders);
+        }
+      } catch (error) {
+        showRowError(row, (error && error.message) || "request failed");
+      }
+      renderCull();
+    };
+    // ---- responsive marks ------------------------------------------------------------------------
+    // SECTION VERSIONS ONLY (decided 2026-09-06: a checkbox, not a pill, for whatever section has
+    // been made responsive). Components and explorations never get one.
+    //
+    // Two boxes, because responsive work is approval-gated (same day): `approved` says the version
+    // has been approved for the work — which is NOT the same as the version being final, and the
+    // approval can be withdrawn later — and `done` says the work is finished. Both are hand-set,
+    // because neither is readable from the code; the pill shows `done`.
+    //
+    // No switch guards them, unlike the cull boxes: ticking one is routine, marking a file for
+    // deletion is not. The pill comes from the build-time index until the API answers, so on
+    // staging (no dev server, no API) the marks still show, just without the boxes.
+    const RESPONSIVE_TIER = LAB_TIERS.responsive;
+    let responsive = { available: false, done: new Set(), approved: new Set() };
+    let responsiveProbe = null;
+    const probeResponsive = () => {
+      responsiveProbe ??= fetch(RESPONSIVE_ENDPOINT, { headers: { accept: "application/json" } })
+        .then(async (response) => {
+          if (!response.ok) throw new Error(String(response.status));
+          const body = await response.json();
+          responsive = {
+            available: true,
+            done: new Set(Array.isArray(body.done) ? body.done : []),
+            approved: new Set(Array.isArray(body.approved) ? body.approved : []),
+          };
+        })
+        .catch(() => {
+          responsive = { available: false, done: new Set(), approved: new Set() };
+        })
+        .then(() => renderResponsive());
+      return responsiveProbe;
+    };
+    // In the row's pill box, beside the pills, for the wrapping reason given on the cull box.
+    const responsiveBox = (pills, kind, file, checked, title) => {
+      let box = pills.querySelector(`:scope > .lab-resp-box[data-kind="${kind}"]`);
+      if (!box) {
+        box = document.createElement("input");
+        box.type = "checkbox";
+        box.className = `lab-resp-box lab-resp-box--${kind}`;
+        box.dataset.kind = kind;
+        box.addEventListener("click", onResponsiveClick);
+        pills.appendChild(box);
+      }
+      box.checked = checked;
+      box.dataset.moduleFile = file;
+      box.title = title;
+      box.setAttribute("aria-label", title);
+    };
+    const renderResponsive = () => {
+      if (!tree() || !readIndex()) return;
+      for (const { row, items } of tierRows(RESPONSIVE_TIER)) {
+        const item = items[0];
+        const file = item.moduleFile;
+        const mark = item.responsive || { done: false, approved: false };
+        const done = responsive.available ? responsive.done.has(file) : mark.done;
+        const approved = responsive.available ? responsive.approved.has(file) : mark.approved;
+        const box = pillsOf(row);
+        // "not responsive" is only news on a version that is actually meant to become responsive
+        // — the one a page mounts. V1s are never made responsive (ruled 2026-09-06), and an
+        // unmounted V2 is not owed the work yet, so neither carries the nag; both still show
+        // "responsive" once ticked, and both keep their boxes so a mark is always possible.
+        const owed = items.some((i) => i.live);
+        let badge = box.querySelector(".lab-pill--resp");
+        if (!done && !owed) {
+          if (badge) badge.remove();
+        } else {
+          if (!badge) {
+            badge = pill("", "lab-pill--resp");
+            box.appendChild(badge);
+          }
+          // The row's search text is written once, at decorate() — a mark ticked in this session
+          // shows up in the search box after a reload, not before.
+          badge.textContent = done ? "responsive" : "not responsive";
+          badge.classList.toggle("lab-pill--resp-done", done);
+          badge.title = approved
+            ? "approved for responsive work"
+            : "not approved for responsive work yet";
+        }
+        if (!responsive.available) {
+          for (const stale of box.querySelectorAll(":scope > .lab-resp-box")) stale.remove();
+          continue;
+        }
+        responsiveBox(
+          box,
+          "approved",
+          file,
+          approved,
+          approved ? "Approved for responsive work" : "Approve for responsive work",
+        );
+        responsiveBox(
+          box,
+          "done",
+          file,
+          done,
+          done ? "Made responsive — untick to clear" : "Mark as made responsive",
+        );
+      }
+    };
+    const onResponsiveClick = async (event) => {
+      // Same contract as the cull box: the box shows the server's state, never the click's, and
+      // preventDefault keeps the host <a> from navigating and the <summary> from toggling.
+      event.preventDefault();
+      event.stopPropagation();
+      const box = event.currentTarget;
+      const row = rowOf(box);
+      const file = box.dataset.moduleFile;
+      const done = new Set(responsive.done);
+      const approved = new Set(responsive.approved);
+      const set = box.dataset.kind === "done" ? done : approved;
+      if (set.has(file)) set.delete(file);
+      else set.add(file);
+      try {
+        const response = await fetch(RESPONSIVE_ENDPOINT, {
+          method: "PUT",
+          headers: { "content-type": "application/json", accept: "application/json" },
+          body: JSON.stringify({ done: [...done], approved: [...approved] }),
+        });
+        const body = await response.json().catch(() => ({}));
+        if (response.ok) {
+          responsive = {
+            available: true,
+            done: new Set(Array.isArray(body.done) ? body.done : [...done]),
+            approved: new Set(Array.isArray(body.approved) ? body.approved : [...approved]),
+          };
+        } else {
+          showRowError(row, body.error || `HTTP ${response.status}`, body.offenders);
+        }
+      } catch (error) {
+        showRowError(row, (error && error.message) || "request failed");
+      }
+      renderResponsive();
+    };
+    // ---- header links for the active story ---------------------------------------------------------
+    // Three, rebuilt on every swap because the header and <html data-active-story> are both
+    // replaced: the viewport configurator (src/lab/shell/Viewport.astro — drag the frame's width
+    // and height, zoom, presets, the viewport in the URL), the same story on the STAGING build (the
+    // real minified output, which the dev server is not — the blur incident), and the component in
+    // VS Code. No active story (the lab home) → no buttons. The viewport link carries
+    // `data-astro-reload` because the configurator is outside Astrobook's ClientRouter: a full
+    // load, never a view transition. The VS Code link exists in dev only — `editorUrl` is null in
+    // any build, so on staging it simply never appears.
+    const VIEWPORT_ICON =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="12" height="20" x="6" y="2" rx="1"/><rect width="20" height="12" x="2" y="6" rx="1"/></svg>';
+    const STAGING_ICON =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg>';
+    const CODE_ICON =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>';
+    const headerOf = () => {
+      const sidebar = document.getElementById("astrobook-sidebar");
+      return sidebar ? sidebar.querySelector("nav > div") : null;
+    };
+    const headerLink = (id, title, icon, href, options) => {
+      const header = headerOf();
+      if (!header) return;
+      let link = document.getElementById(id);
+      if (!href) {
+        if (link) link.remove();
+        return;
+      }
+      if (!link) {
+        link = document.createElement("a");
+        link.id = id;
+        link.className = "astrobook-sidebar-button";
+        link.innerHTML = icon;
+        if (options && options.reload) link.setAttribute("data-astro-reload", "");
+        if (options && options.blank) {
+          link.target = "_blank";
+          link.rel = "noopener";
+        }
+        // Left of whichever of the existing header controls is furthest left, so the row's order
+        // is stable however many of them exist on this page.
+        const before = ["lab-viewport-link", "lab-cull-toggle", "lab-sidebar-collapse"]
+          .map((existing) => document.getElementById(existing))
+          .find((el) => el && el.parentElement === header);
+        if (before) header.insertBefore(link, before);
+        else header.appendChild(link);
+      }
+      link.title = title;
+      link.setAttribute("aria-label", title);
+      link.href = href;
+    };
+    const setupStoryButtons = () => {
+      if (!readIndex() || !headerOf()) return;
+      const item = index.byStory.get(document.documentElement.dataset.activeStory || "");
+      headerLink(
+        "lab-viewport-link",
+        "Open in the viewport configurator",
+        VIEWPORT_ICON,
+        item ? `${index.viewportBase}/${item.storyId}` : null,
+        { reload: true },
+      );
+      headerLink("lab-staging-link", "View this story on staging", STAGING_ICON, item ? item.stagingUrl : null, {
+        blank: true,
+      });
+      headerLink("lab-code-link", "Open the component in VS Code", CODE_ICON, item ? item.editorUrl : null);
+    };
+    // ---- j / k -------------------------------------------------------------------------------------
+    // Next / previous story in sidebar order, and navigate there. Only rows the sidebar is actually
+    // showing count, so j/k walk the search results while a filter is on and never jump into a
+    // collapsed folder. Guarded three ways so nothing collides: a modifier held is somebody else's
+    // shortcut (⌘B, ⌘K), a focused input or contenteditable means the key is being typed (the
+    // search box), and no #astrobook-sidebar means this is a bare story or the viewport
+    // configurator — which owns [ ] r f 0 on its own page.
+    const storyLinks = () => {
+      const root = tree();
+      if (!root) return [];
+      const links = [...root.querySelectorAll("a[data-astrobook-story-link][data-story-id]")];
+      const visible = links.filter((link) => link.offsetParent !== null);
+      return visible.length ? visible : links;
+    };
+    const stepStory = (delta) => {
+      const links = storyLinks();
+      if (!links.length) return;
+      const active = document.documentElement.dataset.activeStory || "";
+      const at = links.findIndex((link) => link.dataset.storyId === active);
+      const next = at === -1 ? (delta > 0 ? 0 : links.length - 1) : at + delta;
+      if (next < 0 || next >= links.length || next === at) return;
+      links[next].scrollIntoView({ block: "nearest" });
+      links[next].click(); // Astrobook's ClientRouter takes it from here
+    };
+    document.addEventListener("keydown", (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.isComposing) return;
+      if (!document.getElementById("astrobook-sidebar")) return;
+      // Bare letters, so this is the handler a typed character reaches first. The local
+      // activeElement test that used to stand here could not see through a shadow boundary.
+      // › THE KEYBOARD GUARD at the top of this file.
+      if (window.__labIgnoreKey(event)) return;
+      const key = event.key.toLowerCase();
+      if (key !== "j" && key !== "k") return;
+      event.preventDefault();
+      stepStory(key === "j" ? 1 : -1);
+    });
+    // ---- lifecycle ------------------------------------------------------------------------------
+    const setup = () => {
+      applyCullState(); // <html> attributes are replaced on every swap
+      if (!document.getElementById("astrobook-sidebar")) return; // bare story page, or not the lab
+      decorate();
+      renderCull();
+      renderResponsive();
+      setupStoryButtons(); // header and data-active-story are both replaced on every swap
+      setupCullButton(); // the header is re-rendered on every swap; the probe result is not
+      probeCull(); // once per hard load
+      probeResponsive();
+    };
+    document.addEventListener("astro:after-swap", setup);
+    document.addEventListener("astro:page-load", setup);
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", setup, { once: true });
+    } else {
+      setup();
+    }
+  })();
+</script>
+<style is:global>
+  /* Lab shell — pills, responsive and cull marks, drawn on top of the chrome the package ships
+     (./ui/lab.css). Every token here is a `--lab-*` one, defined in that file and themed there
+     for light and dark; nothing reads a name the consumer could also define.
+     REWRITTEN 2026-09-22 — the lab is not styled in the styles of the website being built.
+     Until then these rules read the consumer's own token names — `--color-accent`, `--font-mono`,
+     `--radius-pill` — with a `@layer orbytes-lab-fallback` block below supplying neutral greys
+     "so a host that defines --color-hairline on a plain :root wins here every time". That layer
+     WAS the leak, written as a policy; it is gone, and the lab wins now.
+     Anything that has to read on both the plain row and the inverted active row still rides on
+     currentColor. The one exception is the live pill's accent, which needs the other theme's
+     accent when it lands on the inverted row — hence --lab-color-accent-inverse. */
+  /* A live section version carries a live pill, a responsive pill and two boxes — wider than a
+     narrow sidebar. Letting the ROW wrap drops that group onto a second line, so the story's name
+     is never truncated and nothing is cut off at the sidebar's edge. Everything the marks add
+     lives inside .lab-pills, so it wraps as one group: two lines at the default 300px width for
+     rows that carry both pills (three for the twelve live ones), and two for everything from about
+     380px, which is a sidebar drag away. */
+  #astrobook-sidebar-tree .astrobook-sidebar-link {
+    flex-wrap: wrap;
+    row-gap: 0.25em;
+  }
+  #astrobook-sidebar .lab-pills {
+    display: inline-flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.22em;
+    margin-left: auto;
+  }
+  #astrobook-sidebar .lab-pill {
+    font-family: var(--lab-font-mono);
+    font-size: 0.65em;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    padding: 0.3em 0.45em;
+    border-radius: var(--lab-radius-pill);
+    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+    color: inherit;
+  }
+  #astrobook-sidebar .lab-pill--live {
+    color: var(--lab-color-accent);
+    border-color: color-mix(in srgb, currentColor 50%, transparent);
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+  }
+  /* The active row inverts its ground, so the accent has to invert with it. */
+  #astrobook-sidebar .astrobook-sidebar-story-link-active .lab-pill--live {
+    color: var(--lab-color-accent-inverse);
+  }
+  #astrobook-sidebar .lab-pill--count {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45em;
+  }
+  #astrobook-sidebar .lab-pill--count::before {
+    content: "";
+    width: 0.55em;
+    height: 0.55em;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+  #astrobook-sidebar .lab-pill--marked {
+    border-style: dashed;
+    border-color: color-mix(in srgb, currentColor 60%, transparent);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  #astrobook-sidebar .lab-row--marked > span:not([class]) {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+  /* The responsive mark: dashed and faint until the version has been made responsive, solid after
+     — the same two-state reading as the cards' pill. */
+  #astrobook-sidebar .lab-pill--resp {
+    border-style: dashed;
+    opacity: 0.6;
+  }
+  #astrobook-sidebar .lab-pill--resp-done {
+    border-style: solid;
+    border-color: color-mix(in srgb, currentColor 55%, transparent);
+    opacity: 1;
+  }
+  /* Responsive boxes need no switch — unlike the cull boxes they are always on. Two per row:
+     approved for the work (hollow), and the work done (accented). */
+  #astrobook-sidebar .lab-resp-box {
+    flex: none;
+    width: 0.8em;
+    height: 0.8em;
+    margin: 0 0 0 0.1em;
+    cursor: pointer;
+  }
+  #astrobook-sidebar .lab-resp-box--approved {
+    accent-color: var(--lab-color-border-strong);
+    opacity: 0.6;
+  }
+  #astrobook-sidebar .lab-resp-box--done {
+    accent-color: var(--lab-color-accent);
+  }
+  /* Cull boxes exist only while the switch is on; live modules keep a disabled one. */
+  #astrobook-sidebar .lab-cull-box {
+    display: none;
+    flex: none;
+    width: 0.85em;
+    height: 0.85em;
+    margin: 0 0 0 0.25em;
+    accent-color: var(--lab-color-accent);
+    cursor: pointer;
+  }
+  :root[data-lab-cull] #astrobook-sidebar .lab-cull-box {
+    display: inline-block;
+  }
+  #astrobook-sidebar .lab-cull-box:disabled {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+  #lab-cull-toggle svg,
+  #lab-viewport-link svg,
+  #lab-staging-link svg,
+  #lab-code-link svg {
+    display: block;
+  }
+  #lab-cull-toggle[aria-pressed="true"] {
+    color: var(--lab-color-accent);
+  }
+  #astrobook-sidebar .lab-row-error {
+    font-family: var(--lab-font-mono);
+    font-size: 0.7em;
+    line-height: 1.35;
+    margin: 0.25em 0.5em 0.25em 1.75em;
+    padding: 0.5em 0.75em;
+    border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
+    border-radius: 0.25rem;
+    color: var(--lab-color-text-strong);
+  }
+</style>