@orbytes/astrolab 0.4.0-next.1 → 0.4.0-next.2

package/src/chrome/trees.ts

@@ -1,15 +1,22 @@
 // Level 2's trees, built from the lab index and the site's files. Server-side only.
 //
-// THE TREE STOPS AT THE COMPONENT (decided 2026-09-24). A component's stories are tabs in the
-// navbar, not rows here, so a leaf is one stories module and links to its first story. Folders
-// above it are the directories under the tier, with one fold: a directory holding exactly one
-// module and nothing else IS that module, so `Section01Hero › V1 › Section01Hero` reads
-// `Section01Hero › V1`.
+// THE TREE STOPS AT THE COMPONENT (decided 2026-09-24). A component's stories are its variants,
+// chosen in the navbar, not rows here, so a leaf is one stories module and links to its first
+// story. Folders above it are the directories under the tier, with one fold: a directory holding
+// exactly one module and nothing else IS that module, so `Section01Hero › V1 › Section01Hero`
+// reads `Section01Hero › V1`.
+//
+// THE SECTIONS TIER IS DIFFERENT (decided 2026-09-24): its level 2 is the Sections tree
+// (./SectionsTree.astro) — one row per section with its slot on the page, the sections the site
+// mounts first, the rest grouped under them. See sectionsTree below.
 import type { LabItem, LabIndex } from "../shell/lab-index";
 import { livePillText } from "../shell/lab-index";
-import type { TreeNode } from "./model";
+import { sectionsTier, type TreeNode } from "./model";
 
-/** One stories module — a component — with its stories in file order. */
+/**
+ * One stories module — a component — with its stories sorted by export name, not in file order:
+ * the core's getExports (src/core/utils/get-exports.ts) sorts them, and nothing after it re-orders.
+ */
 export interface LabComponent {
   moduleId: string;
   moduleName: string;
@@ -91,9 +98,107 @@ interface Dir {
   mods: LabComponent[];
 }
 
+/** Where a component is mounted — its primary mount (the home page's, when it is on it) — or null. */
+const mountOf = (mod: LabComponent): { n: number; of: number; page: string } | null => {
+  const story = mod.stories.find((s) => s.live && s.livePage);
+  return story ? { n: story.live!.slot, of: story.live!.of, page: story.livePage! } : null;
+};
+
+const byName = (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
+
+/** A section module's version folder (`V1`), read from its directory when the index has none. */
+const versionOf = (mod: LabComponent): string | null => mod.version ?? mod.directory.split("/")[2] ?? null;
+
+/** Home page first, then the other pages by route, then top to bottom. */
+const bySlot = (a: { n: number; page: string }, b: { n: number; page: string }) =>
+  a.page === b.page ? a.n - b.n : a.page === "/" ? -1 : b.page === "/" ? 1 : byName(a.page, b.page);
+
+/**
+ * The Sections tree (decided 2026-09-24). One row per section, with a slot badge: the sections the
+ * site mounts come first, each badged with its slot; the rest follow under their own heading,
+ * badged with a dash. A section's versions sit under its row, unbadged, and are drawn only while
+ * you are on one of them — the tree still stops at the component. A version no page mounts is
+ * listed in the unslotted group as "Section · Version" even when a sibling version is mounted,
+ * because that is where you look for what is not on the site.
+ *
+ * Rows come out in slot order, which is also the order previous / next and the cards follow. Each
+ * root row carries its rank in both sort orders; the viewer's choice between them is theirs, kept
+ * in their browser and applied on the page (./SectionsTree.astro, ./shell-client.ts).
+ *
+ * Leaves keep the `mod:<moduleId>` id every other tree uses, so a caller walking the leaves for
+ * previous / next gets exactly the section versions, in order.
+ */
+const sectionsTree = (mods: LabComponent[], currentModuleId?: string): TreeNode[] => {
+  const groups = new Map<string, LabComponent[]>();
+  for (const mod of mods) {
+    const name = mod.section ?? mod.directory.split("/")[1] ?? mod.moduleName;
+    groups.set(name, [...(groups.get(name) ?? []), mod]);
+  }
+
+  const leaf = (mod: LabComponent, label: string, extra: Partial<TreeNode> = {}): TreeNode => {
+    const state = componentState(mod);
+    return {
+      id: `mod:${mod.moduleId}`,
+      label,
+      href: mod.stories[0]!.dashboardUrl,
+      current: mod.moduleId === currentModuleId,
+      facets: state.facets,
+      search: state.search,
+      title: label === mod.moduleName ? undefined : mod.moduleName,
+      ...extra,
+    };
+  };
+
+  const slotted: (TreeNode & { slot: NonNullable<TreeNode["slot"]> })[] = [];
+  const unslotted: TreeNode[] = [];
+  for (const [name, list] of groups) {
+    const versions = [...list].sort((a, b) => byName(versionOf(a) ?? a.moduleName, versionOf(b) ?? b.moduleName));
+    const mounted = versions
+      .map((mod) => ({ mod, mount: mountOf(mod) }))
+      .filter((v): v is { mod: LabComponent; mount: NonNullable<ReturnType<typeof mountOf>> } => v.mount !== null)
+      .sort((a, b) => bySlot(a.mount, b.mount));
+    const lead = mounted[0];
+    if (lead) {
+      if (versions.length === 1 && !versionOf(lead.mod)) {
+        // A section with no version folders is its own module: one row, badged, no children.
+        slotted.push({ ...leaf(lead.mod, name), slot: lead.mount, group: "slotted" });
+      } else {
+        const state = componentState(lead.mod);
+        slotted.push({
+          id: `sec:${lead.mod.tier}/${name}`,
+          label: name,
+          href: lead.mod.stories[0]!.dashboardUrl,
+          slot: lead.mount,
+          group: "slotted",
+          childrenWhenCurrent: true,
+          facets: state.facets,
+          search: [name, ...mounted.map((v) => componentState(v.mod).search)].join(" ").toLowerCase(),
+          children: mounted.map((v) => leaf(v.mod, versionOf(v.mod) ?? v.mod.moduleName)),
+        });
+      }
+    }
+    for (const mod of versions) {
+      if (mountOf(mod)) continue;
+      const version = versionOf(mod);
+      const label = version ? `${name} · ${version}` : mod.moduleName;
+      unslotted.push({ ...leaf(mod, label), slot: null, group: "unslotted" });
+    }
+  }
+
+  slotted.sort((a, b) => bySlot(a.slot, b.slot) || byName(a.label, b.label));
+  unslotted.sort((a, b) => byName(a.label, b.label));
+  // Ranks for the two sort orders. Unslotted rows always follow the heading between the groups,
+  // which sits at rank `slotted.length` in both.
+  const nameRank = new Map([...slotted].sort((a, b) => byName(a.label, b.label)).map((n, i) => [n.id, i]));
+  slotted.forEach((node, i) => (node.order = { slot: i, name: nameRank.get(node.id)! }));
+  unslotted.forEach((node, i) => (node.order = { slot: slotted.length + 1 + i, name: slotted.length + 1 + i }));
+  return [...slotted, ...unslotted];
+};
+
 /** The tree for one tier: its directories, folded, down to its components. */
 export const tierTree = (index: LabIndex, tier: string, currentModuleId?: string): TreeNode[] => {
   const mods = componentsOf(index).filter((mod) => mod.tier === tier);
+  if (tier === sectionsTier) return sectionsTree(mods, currentModuleId);
   const top: Dir = { name: tier, path: tier, dirs: new Map(), mods: [] };
   for (const mod of mods) {
     const segments = mod.directory.split("/").slice(1);

package/src/chrome/viewport-client.ts

@@ -8,9 +8,14 @@
 // preset, key) rewrites the URL with replaceState and the memory; a live drag only redraws —
 // Safari throttles replaceState to 100 calls per 30 s, and a drag would spend that in a second.
 //
-// The viewport rides along on every link marked data-lab-keep-viewport (the story tabs, previous
-// and next), so stepping through stories compares like with like.
-import type { LabParamControl, LabParamEntry } from "../shell/lab-params";
+// The controls are the device switch and ONE Viewport field (decided 2026-09-24, ASTROL-19 option
+// B): width × height typed in place, and a button naming the band and the zoom that opens the
+// Presets menu — rotate, the breakpoint edges, the devices and the zoom row. Every render
+// announces itself as a `lab:viewport` event on the stage's root, which the pins overlay
+// (./navbar-client.ts) follows.
+//
+// The viewport rides along on every link marked data-lab-keep-viewport (the variant menu, previous
+// and next), so stepping through variants compares like with like.
 
 declare global {
   interface Window {
@@ -28,10 +33,15 @@ if (controls && vp) {
   const wrapper = $<HTMLElement>("[data-lab-vp-wrapper]", vp);
   const frame = $<HTMLIFrameElement>("[data-lab-vp-frame]", vp);
   const live = $<HTMLElement>("[data-lab-vp-live]", vp);
+  const field = $<HTMLElement>("[data-lab-vpf]", controls);
   const inputW = $<HTMLInputElement>("[data-lab-vp-w]", controls);
   const inputH = $<HTMLInputElement>("[data-lab-vp-h]", controls);
   const band = $<HTMLElement>("[data-lab-vp-band]", controls);
-  const zoom = $<HTMLSelectElement>("[data-lab-vp-zoom]", controls);
+  const zoomLabel = $<HTMLElement>("[data-lab-vp-zoom-label]", controls);
+  const menuButton = band.closest<HTMLElement>("button")!;
+  const zoomButtons = [...controls.querySelectorAll<HTMLElement>("[data-lab-vp-zoom]")];
+  const sizeButtons = [...controls.querySelectorAll<HTMLElement>("[data-lab-vp-width]")];
+  const copySize = document.querySelector<HTMLElement>("[data-lab-copy-size]");
 
   const MIN = 240;
   const ZOOM_MIN = 0.1;
@@ -85,6 +95,7 @@ if (controls && vp) {
   };
   const scale = () => (state.z === "fit" ? fitZoom() : state.z);
 
+  /** The band a width falls in, and its range — the field names the band, its tooltip the range. */
   const bandOf = (w: number) => {
     const i = breakpoints.findIndex((b) => w >= b.min);
     if (i === -1) return null;
@@ -106,22 +117,24 @@ if (controls && vp) {
     if (document.activeElement !== inputH) inputH.value = String(state.h);
     live.textContent = `${state.w} × ${state.h}`;
     const b = bandOf(state.w);
-    band.textContent = b ? `${b.name} · ${b.range}` : `${state.w}px`;
-    // The zoom menu shows Fit while fitting; otherwise the nearest stop, or the exact value added.
-    const value = state.z === "fit" ? "fit" : String(Math.round(state.z * 100) / 100);
-    if (![...zoom.options].some((o) => o.value === value)) {
-      zoom.querySelector("[data-lab-custom]")?.remove();
-      const option = new Option(`${Math.round(Number(value) * 100)}%`, value);
-      option.dataset.labCustom = "";
-      zoom.add(option);
-    }
-    zoom.value = value;
-    zoom.options[0]!.textContent = state.z === "fit" ? `Fit · ${Math.round(z * 100)}%` : "Fit";
-    for (const button of controls.querySelectorAll<HTMLElement>("[data-lab-vp-width]")) {
+    band.textContent = b ? b.name : `${state.w}px`;
+    zoomLabel.textContent = state.z === "fit" ? "Fit" : `${Math.round(state.z * 100)}%`;
+    menuButton.title = `${b ? `${b.name} · ${b.range}` : `${state.w}px`} — ${
+      state.z === "fit" ? `Fit · ${Math.round(z * 100)}%` : `${Math.round(z * 100)}%`
+    }. Rotate, breakpoints, devices and zoom.`;
+    if (copySize) copySize.textContent = `${state.w} × ${state.h}`;
+    // Where the frame is now: the device switch presses the width it is at, the menu ticks the edge
+    // or device it matches, and the zoom row the zoom — a width that is none of them presses nothing.
+    for (const button of sizeButtons) {
       const w = Number(button.dataset.labVpWidth);
       const h = button.dataset.labVpHeight ? Number(button.dataset.labVpHeight) : null;
-      button.toggleAttribute("data-active", w === state.w && (h === null || h === state.h));
+      const on = w === state.w && (h === null || h === state.h);
+      if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(on));
+      else button.setAttribute("aria-checked", String(on));
     }
+    const zoomValue = state.z === "fit" ? "fit" : String(Math.round(state.z * 100) / 100);
+    for (const button of zoomButtons) button.setAttribute("aria-checked", String(button.dataset.labVpZoom === zoomValue));
+    vp.dispatchEvent(new CustomEvent("lab:viewport", { detail: { w: state.w, h: state.h, z } }));
   };
 
   // ---- commit ---------------------------------------------------------------------------------
@@ -172,13 +185,24 @@ if (controls && vp) {
       else setSize(state.w, value);
     });
   }
-  $("[data-lab-vp-rotate]", controls).addEventListener("click", rotate);
-  zoom.addEventListener("change", () => setZoom(parseZoom(zoom.value, "fit")));
-  for (const button of controls.querySelectorAll<HTMLElement>("[data-lab-vp-width]")) {
+  // Choosing from the presets menu closes it, as choosing from any menu does.
+  const closeMenu = (el: HTMLElement) => el.closest<HTMLElement>("[popover]")?.hidePopover?.();
+  const rotateItem = $<HTMLElement>("[data-lab-vp-rotate]", controls);
+  rotateItem.addEventListener("click", () => {
+    rotate();
+    closeMenu(rotateItem);
+  });
+  for (const button of zoomButtons) {
+    button.addEventListener("click", () => {
+      setZoom(parseZoom(button.dataset.labVpZoom, "fit"));
+      closeMenu(button);
+    });
+  }
+  for (const button of sizeButtons) {
     button.addEventListener("click", () => {
       const h = button.dataset.labVpHeight ? Number(button.dataset.labVpHeight) : state.h;
       setSize(Number(button.dataset.labVpWidth), h);
-      button.closest<HTMLElement>("[popover]")?.hidePopover?.();
+      closeMenu(button);
     });
   }
   new ResizeObserver(() => {
@@ -189,7 +213,7 @@ if (controls && vp) {
   // Pointer capture keeps the moves on the handle even across the iframe, which is also made inert
   // for the drag. Screen deltas are divided by the zoom, so the frame grows by the pixels dragged.
   // A drag at "fit" freezes the zoom at what fit was, or the frame would shrink under the pointer,
-  // and fits again on release.
+  // and fits again on release. The field's numbers follow the drag live, in violet.
   for (const handle of vp.querySelectorAll<HTMLElement>(".lab-vp-handle")) {
     const axis = handle.dataset.axis || "xy";
     let startX = 0;
@@ -210,6 +234,7 @@ if (controls && vp) {
       wasFit = state.z === "fit";
       if (wasFit) state.z = z;
       vp.dataset.dragging = axis;
+      field.dataset.dragging = axis;
       frame.style.pointerEvents = "none";
     });
     handle.addEventListener("pointermove", (event) => {
@@ -222,8 +247,9 @@ if (controls && vp) {
       if (!handle.hasPointerCapture(event.pointerId)) return;
       handle.releasePointerCapture(event.pointerId);
       delete vp.dataset.dragging;
+      delete field.dataset.dragging;
       frame.style.pointerEvents = "";
-      if (wasFit) state.z = "fit"; // back to fitting the new size, as the menu still says
+      if (wasFit) state.z = "fit"; // back to fitting the new size, as the field still says
       commit();
     };
     handle.addEventListener("pointerup", end);
@@ -290,7 +316,7 @@ if (controls && vp) {
         if (label) label.textContent = "Copy failed";
       }
       setTimeout(() => {
-        if (label) label.textContent = "Copy link to this size";
+        if (label) label.textContent = "Copy link to this exact size";
       }, 1500);
     });
   }
@@ -305,12 +331,14 @@ if (controls && vp) {
   }
 
   // ---- the preview's own theme ----------------------------------------------------------------
-  // Separate from the chrome's (decided 2026-09-24). The switch appears only when the site in the
-  // frame has something to switch: a `.dark` or `[data-theme]` rule, or a dark colour-scheme query.
-  // Flipping it does both things a site might listen to — the frame's theme script (the same
-  // `astrobook:set-theme` message the thumbnails have always used) and the iframe's color-scheme,
-  // which is what `prefers-color-scheme` reads inside it.
-  const themeButton = controls.querySelector<HTMLElement>("[data-lab-preview-theme]");
+  // Separate from the chrome's (decided 2026-09-24): it is ⋯ › Preview › Dark mode, a checkbox row
+  // that appears only when the site in the frame has something to switch — a `.dark` or
+  // `[data-theme]` rule, or a dark colour-scheme query. Ticking it does both things a site might
+  // listen to — the frame's theme script (the same `astrobook:set-theme` message the thumbnails
+  // have always used) and the iframe's color-scheme, which is what `prefers-color-scheme` reads
+  // inside it.
+  const themeItem = document.querySelector<HTMLElement>("[data-lab-preview-theme]");
+  const themeGroup = document.querySelector<HTMLElement>("[data-lab-preview-group]");
   const PREVIEW_THEME_KEY = "theme-toggle";
   const previewTheme = () => {
     try {
@@ -322,7 +350,7 @@ if (controls && vp) {
   };
   const paintPreviewTheme = (theme: "light" | "dark") => {
     frame.dataset.theme = theme;
-    themeButton?.setAttribute("data-theme", theme);
+    themeItem?.setAttribute("aria-checked", String(theme === "dark"));
   };
   const supportsDark = (doc: Document) => {
     const scan = (rules: CSSRuleList | undefined): boolean => {
@@ -345,12 +373,12 @@ if (controls && vp) {
   paintPreviewTheme(previewTheme());
   frame.addEventListener("load", () => {
     try {
-      if (themeButton && frame.contentDocument) themeButton.hidden = !supportsDark(frame.contentDocument);
+      if (themeGroup && frame.contentDocument) themeGroup.hidden = !supportsDark(frame.contentDocument);
     } catch {
       /* cross-origin */
     }
   });
-  themeButton?.addEventListener("click", () => {
+  themeItem?.addEventListener("click", () => {
     const next = previewTheme() === "dark" ? "light" : "dark";
     try {
       localStorage.setItem(PREVIEW_THEME_KEY, next);
@@ -362,218 +390,16 @@ if (controls && vp) {
   });
 
   // ---- the parameters drawer --------------------------------------------------------------------
-  // Present only for a story that registers parameters through @orbytes/astrolab/params, which
-  // puts them on the FRAME's window and announces each with a `lab:params` event there. The frame
-  // is same-origin, so the drawer reads that array directly and calls each group's own apply()
-  // across the boundary — the values object is shared, never copied.
-  const drawer = vp.querySelector<HTMLElement>("[data-lab-params]");
-  const drawerButton = controls.querySelector<HTMLElement>("[data-lab-params-toggle]");
-  const DRAWER_KEY = "lab-params-open";
-  const COLLAPSE_KEY = "lab-params-collapsed";
-  const storedJson = <T,>(key: string, fallback: T): T => {
-    try {
-      const raw = JSON.parse(localStorage.getItem(key) || "null");
-      return raw ?? fallback;
-    } catch {
-      return fallback;
-    }
-  };
-  let groups: LabParamEntry[] = [];
-  const drawerOpen = () => storedJson(DRAWER_KEY, true) !== false;
-  const applyDrawer = () => {
-    if (!drawer || !drawerButton) return;
-    drawerButton.hidden = groups.length === 0;
-    const open = groups.length > 0 && drawerOpen();
-    drawer.hidden = !open;
-    drawerButton.setAttribute("aria-pressed", String(open));
-  };
-  drawerButton?.addEventListener("click", () => {
-    localStorage.setItem(DRAWER_KEY, JSON.stringify(!drawerOpen()));
-    applyDrawer();
-  });
-
-  const decimalsOf = (step: number) => {
-    const text = String(step);
-    const dot = text.indexOf(".");
-    return dot === -1 ? 0 : text.length - dot - 1;
-  };
-  const el = <K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string) => {
-    const node = document.createElement(tag);
-    if (className) node.className = className;
-    if (text !== undefined) node.textContent = text;
-    return node;
-  };
-
-  // Each control returns its node and a `sync` that pulls the input back from the live values —
-  // Reset changes the values behind the inputs' backs.
-  const buildControl = (entry: LabParamEntry, control: LabParamControl) => {
-    const field = el("label", `vpp__control vpp__control--${control.kind}`);
-    if (control.note) field.title = control.note;
-    const name = el("span", "vpp__label", control.label);
-    if (control.kind === "toggle") {
-      const input = el("input");
-      input.type = "checkbox";
-      input.addEventListener("change", () => entry.set(control.id, input.checked));
-      field.append(input, name);
-      const sync = () => (input.checked = entry.values[control.id] === true);
-      sync();
-      return { node: field, sync };
-    }
-    if (control.kind === "select") {
-      const select = el("select", "vpp__select");
-      for (const option of control.options) {
-        const node = el("option", undefined, option.label);
-        node.value = option.value;
-        select.append(node);
-      }
-      select.addEventListener("change", () => entry.set(control.id, select.value));
-      field.append(name, select);
-      const sync = () => (select.value = String(entry.values[control.id]));
-      sync();
-      return { node: field, sync };
-    }
-    if (control.kind === "color") {
-      const input = el("input", "vpp__swatch");
-      input.type = "color";
-      const out = el("output", "vpp__value");
-      input.addEventListener("input", () => {
-        out.textContent = input.value;
-        entry.set(control.id, input.value);
-      });
-      field.append(name, out, input);
-      const sync = () => {
-        input.value = String(entry.values[control.id]);
-        out.textContent = input.value;
-      };
-      sync();
-      return { node: field, sync };
-    }
-    const step = control.step ?? 1;
-    const places = decimalsOf(step);
-    const unit = control.unit ?? "";
-    const input = el("input");
-    input.type = "range";
-    input.min = String(control.min);
-    input.max = String(control.max);
-    input.step = String(step);
-    const out = el("output", "vpp__value");
-    const paint = () => (out.textContent = `${Number(input.value).toFixed(places)}${unit}`);
-    input.addEventListener("input", () => {
-      paint();
-      entry.set(control.id, Number(input.value));
-    });
-    field.append(name, out, input);
-    const sync = () => {
-      input.value = String(entry.values[control.id]);
-      paint();
-    };
-    sync();
-    return { node: field, sync };
-  };
-
-  const buildGroup = (entry: LabParamEntry, collapsed: Record<string, boolean>) => {
-    const group = entry.group;
-    const wrap = el("div", "vpp__group");
-    const head = el("div", "vpp__head");
-    const toggle = el("button", "vpp__toggle");
-    toggle.type = "button";
-    toggle.append(el("span", "vpp__chev", "▾"), el("span", "vpp__title", group.title));
-    head.append(toggle);
-    if (group.source) {
-      const link = el("a", "vpp__source", group.source.label);
-      link.href = group.source.href;
-      link.target = "_blank";
-      link.rel = "noreferrer";
-      head.append(link);
-    }
-    if (group.note) head.append(el("p", "vpp__note", group.note));
-
-    const list = el("div", "vpp__controls");
-    const syncers: (() => void)[] = [];
-    for (const control of group.controls) {
-      const built = buildControl(entry, control);
-      syncers.push(built.sync);
-      list.append(built.node);
-    }
-    const reset = el("button", "vpp__button", "Reset");
-    reset.type = "button";
-    const copy = el("button", "vpp__button", "Copy settings");
-    copy.type = "button";
-    const actions = el("div", "vpp__actions");
-    actions.append(reset, copy);
-    const status = el("p", "vpp__status", entry.lastStatus || "Starting…");
-    status.setAttribute("aria-live", "polite");
-    entry.onStatus = (text) => (status.textContent = text);
-    reset.addEventListener("click", () => {
-      entry.resetAll();
-      for (const sync of syncers) sync();
-      entry.status("Reset to the declared defaults.");
-    });
-    copy.addEventListener("click", async () => {
-      const json = entry.json();
-      try {
-        await navigator.clipboard.writeText(json);
-        entry.status("Settings copied as JSON — paste them onto the ticket.");
-      } catch {
-        entry.status(json);
-      }
-    });
-    const body = el("div", "vpp__body");
-    body.append(list, actions, status);
-    wrap.append(head, body);
-
-    const setCollapsed = (value: boolean) => {
-      wrap.toggleAttribute("data-collapsed", value);
-      toggle.setAttribute("aria-expanded", String(!value));
-    };
-    setCollapsed(collapsed[group.id] === true);
-    toggle.addEventListener("click", () => {
-      const next = !wrap.hasAttribute("data-collapsed");
-      setCollapsed(next);
-      const map = storedJson<Record<string, boolean>>(COLLAPSE_KEY, {});
-      if (next) map[group.id] = true;
-      else delete map[group.id];
-      localStorage.setItem(COLLAPSE_KEY, JSON.stringify(map));
-    });
-    return wrap;
-  };
-
-  const buildDrawer = () => {
-    if (!drawer) return;
-    drawer.textContent = "";
-    try {
-      groups = frame.contentWindow?.__labParams ?? [];
-    } catch {
-      groups = []; // a lab preview is always same-origin, but the drawer must never throw
-    }
-    const collapsed = storedJson<Record<string, boolean>>(COLLAPSE_KEY, {});
-    for (const entry of groups) drawer.append(buildGroup(entry, collapsed));
-    applyDrawer();
-  };
-  let queued = false;
-  const queueBuild = () => {
-    if (queued) return;
-    queued = true;
-    queueMicrotask(() => {
-      queued = false;
-      buildDrawer();
-    });
-  };
-  const readParams = () => {
-    queueBuild();
-    try {
-      // Groups registered after load (an async setup) announce themselves; ones registered during
-      // module evaluation are already in the array queueBuild just read.
-      frame.contentWindow?.addEventListener("lab:params", queueBuild);
-    } catch {
-      /* cross-origin — the drawer stays as built */
-    }
-  };
-  frame.addEventListener("load", readParams);
-  if (frame.contentDocument?.readyState === "complete") readParams();
+  // Present only for a story that registers parameters through @orbytes/astrolab/params. The
+  // drawer — its rows, groups, footer, storage and Esc — is ./params-client.ts.
+  mountParamsDrawer(vp.querySelector<HTMLElement>("[data-lab-params]"), frame);
 
   render();
   commit(); // the URL always names the viewport, even when it came from memory or defaults
 }
 
+// Hoisted like every import. It stands here, beside the one call that uses it, so the drawer's
+// wiring is in one place in this file.
+import { mountParamsDrawer } from "./params-client";
+
 export {};

package/src/chrome/views/Assets.astro

@@ -34,6 +34,7 @@ const filters: FilterOption[] = [
 <Shell
   title="Assets"
   active="assets"
+  navbarClass="lab-navbar--listing"
   panel={{
     label: "Assets",
     crumbs: [{ label: "Site" }, { label: "Assets", href: hrefs.assets }],
@@ -45,12 +46,26 @@ const filters: FilterOption[] = [
   <Tree slot="panel" nodes={assetsTree(assets)} />
 
   <Fragment slot="navbar">
-    <div class="lab-navbar__id">
-      <h1 class="lab-navbar__title">Assets</h1>
-      <div class="lab-navbar__meta">
-        <span class="lab-pill">{assets.length} image{assets.length === 1 ? "" : "s"}</span>
-        <span class="lab-pill">{formatBytes(total)}</span>
-        {unused > 0 && <span class="lab-pill lab-pill--unresponsive">{unused} unused</span>}
+    <div class="lab-listing-bar">
+      <h1 class="lab-listing-bar__title">Assets</h1>
+      <p class="lab-listing-bar__counts">
+        {[`${assets.length} image${assets.length === 1 ? "" : "s"}`, formatBytes(total), unused > 0 ? `${unused} unused` : null]
+          .filter(Boolean)
+          .join(" · ")}
+      </p>
+      {/* The same filter as level 2's menu (../shell-client.ts). */}
+      <div class="lab-chips" role="radiogroup" aria-label="Show images">
+        {
+          [
+            { value: "", label: "All", n: assets.length },
+            { value: "used", label: "Referenced", n: assets.length - unused },
+            { value: "unused", label: "Unused", n: unused },
+          ].map((chip) => (
+            <button class="lab-chip" type="button" role="radio" aria-checked={String(chip.value === "")} data-lab-filter={chip.value}>
+              {chip.label} {chip.n}
+            </button>
+          ))
+        }
       </div>
     </div>
   </Fragment>