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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbytes/astrolab",
-  "version": "0.4.0-next.1",
+  "version": "0.4.0-next.2",
   "type": "module",
   "description": "The orbytes lab for Astro sites — every page, section and component rendered live, which of them the site actually mounts, a viewport canvas to size them on, and a dev-only click-to-ticket pin board — in one integration, all local.",
   "keywords": [
@@ -28,10 +28,10 @@
     "preview": "npm --workspace testbed-orbytes-v2 run preview",
     "build:staging": "npm --workspace testbed-orbytes-v2 run build:staging",
     "check:isolation": "npm --workspace testbed-orbytes-v2 run check:isolation",
+    "check:lab-index": "npm --workspace testbed-orbytes-v2 run check:lab-index",
     "verify": "npm --workspace testbed-orbytes-v2 run verify"
   },
   "bin": {
-    "orbytes-lab-cull": "bin/lab-cull.mjs",
     "orbytes-pin-gallery": "bin/pin-gallery.mjs"
   },
   "main": "./index.mjs",

package/src/Home.astro

@@ -79,15 +79,14 @@ const previewAlias = (branch: string) =>
 const unusedAssets = assets.filter((a) => a.usedBy.length === 0).length;
 ---
 
-<Shell title="Home" active="home">
+<Shell title="Home" active="home" navbarClass="lab-navbar--listing">
   <Fragment slot="navbar">
-    <div class="lab-navbar__id">
-      <h1 class="lab-navbar__title">Home <small>{labConfig.title}</small></h1>
-    </div>
-    <div class="lab-navbar__tools">
+    <div class="lab-listing-bar">
+      <h1 class="lab-listing-bar__title">Home</h1>
+      <p class="lab-listing-bar__counts">{labConfig.title}</p>
       {
         STAGING_URL && (
-          <a class="lab-btn lab-btn--sm" href={STAGING_URL} target="_blank" rel="noopener">
+          <a class="lab-btn lab-btn--sm lab-listing-bar__end" href={STAGING_URL} target="_blank" rel="noopener">
             <Icon name="external" />
             Staging
           </a>
@@ -126,7 +125,7 @@ const unusedAssets = assets.filter((a) => a.usedBy.length === 0).length;
               {tier.live > 0 && <span class="lab-pill lab-pill--live">{tier.live} live</span>}
               {tier.used > 0 && <span class="lab-pill lab-pill--used">{tier.used} used</span>}
               {tier.unused > 0 && <span class="lab-pill">{tier.unused} unused</span>}
-              <span class="lab-pill">{tier.stories} stories</span>
+              <span class="lab-pill">{tier.stories} variant{tier.stories === 1 ? "" : "s"}</span>
             </span>
           </a>
         ))
@@ -168,7 +167,7 @@ const unusedAssets = assets.filter((a) => a.usedBy.length === 0).length;
                     {component.version && <span class="lab-card__version">{component.version}</span>}
                   </a>
                 ) : (
-                  <span class="lab-slots__name lab-slots__name--bare" title="Not in the lab — no stories file for it">
+                  <span class="lab-slots__name lab-slots__name--bare" title="Not in the lab — no *.stories.ts file for it">
                     {file.split("/").pop()}
                   </span>
                 )}

package/src/LabHead.astro

@@ -5,7 +5,7 @@
 // consumer configured a key.
 //
 // REWRITTEN 2026-09-24 for the redesign. Until then this file also decorated Astrobook's sidebar
-// after the fact — pills, cull and responsive boxes, search widening, header buttons — with 800
+// after the fact — pills, mark boxes, search widening, header buttons — with 800
 // lines of script patching a DOM it did not render, plus a copy of the whole lab index as JSON on
 // every page. The new chrome renders all of that on the server, so none of it is needed here.
 //

package/src/chrome/ActionsMenu.astro

@@ -0,0 +1,97 @@
+---
+// The navbar's ⋯ button and its menu — Figma `Astrolab` › Menu › Type=Actions. Everything that
+// leaves the lab (VS Code, the bare variant full screen, staging, a link at this exact size), then
+// two sections that are switches rather than places:
+//
+//   Pins     Show pins (on) and Show resolved (off) — they govern the markers drawn on the framed
+//            preview. They moved here from the navbar (decided 2026-09-24); the navbar keeps only
+//            Comment. Only while the pin board runs, which is `astro dev` with the board enabled.
+//   Preview  Dark mode — the PREVIEW's own light or dark, separate from the chrome's. Hidden until
+//            the framed site turns out to have a dark mode (./viewport-client.ts looks for one).
+//
+// Checkable rows are `menuitemcheckbox` buttons, so the menu stays one list a keyboard can walk.
+// Behaviour: ./navbar-client.ts (pins), ./viewport-client.ts (copy link, dark mode).
+import Icon from "./Icon.astro";
+
+interface Props {
+  editorUrl?: string | null;
+  /** The bare variant, alone in a tab. */
+  fullScreenUrl?: string | null;
+  stagingUrl?: string | null;
+  /** Show the Pins section — only where the pin board runs. */
+  pins: boolean;
+}
+
+const { editorUrl, fullScreenUrl, stagingUrl, pins } = Astro.props;
+---
+
+<button
+  class="lab-tool lab-tool--icon lab-nb__more"
+  type="button"
+  popovertarget="lab-actions-menu"
+  title="More actions"
+>
+  <Icon name="more" size="sm" />
+  <span class="lab-visually-hidden">More actions</span>
+</button>
+<div class="lab-menu lab-menu--actions" id="lab-actions-menu" popover role="menu" data-lab-align="end">
+  {
+    editorUrl && (
+      <a class="lab-menu__item" role="menuitem" href={editorUrl}>
+        <span class="lab-menu__mark"><Icon name="code" size="sm" /></span>
+        <span class="lab-menu__text">Open in VS Code</span>
+      </a>
+    )
+  }
+  {
+    fullScreenUrl && (
+      <a class="lab-menu__item" role="menuitem" href={fullScreenUrl} target="_blank" rel="noopener">
+        <span class="lab-menu__mark"><Icon name="expand" size="sm" /></span>
+        <span class="lab-menu__text">Open full screen</span>
+        <span class="lab-menu__hint">the bare variant</span>
+      </a>
+    )
+  }
+  {
+    stagingUrl && (
+      <a class="lab-menu__item" role="menuitem" href={stagingUrl} target="_blank" rel="noopener">
+        <span class="lab-menu__mark"><Icon name="staging" size="sm" /></span>
+        <span class="lab-menu__text">View on staging</span>
+      </a>
+    )
+  }
+  {(editorUrl || fullScreenUrl || stagingUrl) && <hr />}
+  <button class="lab-menu__item" type="button" role="menuitem" data-lab-copy-link>
+    <span class="lab-menu__mark"><Icon name="link" size="sm" /></span>
+    <span class="lab-menu__text" data-lab-copy-label>Copy link to this exact size</span>
+    <span class="lab-menu__hint" data-lab-copy-size></span>
+  </button>
+  {
+    pins && (
+      <>
+        <hr />
+        <p class="lab-menu__label" id="lab-actions-pins">Pins</p>
+        <div role="group" aria-labelledby="lab-actions-pins">
+          <button class="lab-menu__item" type="button" role="menuitemcheckbox" aria-checked="true" data-lab-pins-toggle="show">
+            <span class="lab-menu__mark"><span class="lab-menu__box" aria-hidden="true" /></span>
+            <span class="lab-menu__text">Show pins</span>
+          </button>
+          <button class="lab-menu__item" type="button" role="menuitemcheckbox" aria-checked="false" data-lab-pins-toggle="resolved">
+            <span class="lab-menu__mark"><span class="lab-menu__box" aria-hidden="true" /></span>
+            <span class="lab-menu__text">Show resolved</span>
+          </button>
+        </div>
+      </>
+    )
+  }
+  <div data-lab-preview-group hidden>
+    <hr />
+    <p class="lab-menu__label" id="lab-actions-preview">Preview</p>
+    <div role="group" aria-labelledby="lab-actions-preview">
+      <button class="lab-menu__item" type="button" role="menuitemcheckbox" aria-checked="false" data-lab-preview-theme>
+        <span class="lab-menu__mark"><span class="lab-menu__box" aria-hidden="true" /></span>
+        <span class="lab-menu__text">Dark mode</span>
+      </button>
+    </div>
+  </div>
+</div>

package/src/chrome/ComponentCard.astro

@@ -4,6 +4,9 @@
 // <iframe> sized to a virtual viewport and scaled to the card by ../chrome/shell-client.ts: page
 // width for section-like tiers, a component stage otherwise. The whole card opens the component;
 // the icon links under it sit above that link.
+//
+// A live component carries the Sections tree's slot badge, not a "live · slot N of M" pill: one sign
+// for "live in slot N" across the lab (decided 2026-09-24, ASTROL-26). The title keeps the long form.
 import Icon from "./Icon.astro";
 import { componentState, type LabComponent } from "./trees";
 import { isSectionLike, livePillText, liveTitle } from "../shell/lab-index";
@@ -30,10 +33,14 @@ const state = componentState(mod);
         {mod.version && <span class="lab-card__version">{mod.version}</span>}
       </span>
       <span class="lab-card__sub">
-        {mod.stories.length} stor{mod.stories.length === 1 ? "y" : "ies"}{mod.summary ? ` · ${mod.summary}` : ""}
+        {mod.stories.length} variant{mod.stories.length === 1 ? "" : "s"}{mod.summary ? ` · ${mod.summary}` : ""}
       </span>
       <span class="lab-card__pills">
-        {liveStory && <span class="lab-pill lab-pill--live" title={liveTitle(liveStory)}>{livePillText(liveStory)}</span>}
+        {liveStory?.live && (
+          <span class="lab-slot" data-state="slotted" title={liveTitle(liveStory) ?? livePillText(liveStory) ?? undefined}>
+            <span class="lab-visually-hidden">Live in slot </span>{liveStory.live.slot}
+          </span>
+        )}
         {!mod.live && mod.usedBy.length > 0 && (
           <span class="lab-pill lab-pill--used" title={mod.usedBy.join("\n")}>used by {mod.usedBy.length}</span>
         )}

package/src/chrome/Nav.astro

@@ -1,8 +1,13 @@
 ---
 // Level 1 — the main nav (Figma `Sidebar navigation`, the white card). Home, the Site group (Pages,
 // one entry per tier, Assets), the Tasks group when the pin board is running, and Support and
-// Settings at the foot. Collapses to a 56px icon strip (⌘⇧B); in the strip a group's items open
-// as a flyout on hover or focus, drawn by CSS alone (../ui/lab.css › level 1 as a rail).
+// Settings at the foot. Collapses to a 64px icon rail (⌘⇧B); in the rail a group's items open as
+// a flyout on hover or focus, under the group's name, drawn by CSS alone (../ui/lab.css › level 1
+// as a rail).
+//
+// The header carries the collapse button and the LAB's own light/dark toggle — a moon, beside the
+// logo, under the logomark in the rail (decided 2026-09-24). It switches the chrome only; the
+// preview's light/dark is a separate setting of its own.
 //
 // The logo and the Support / Settings pages are placeholders until they are designed.
 import Icon from "./Icon.astro";
@@ -25,15 +30,35 @@ const isOpen = (group: { items: { key: NavKey }[] }) => group.items.some((item)
           <span class="lab-brand__mark" aria-hidden="true"></span>
           <span class="lab-brand__name">Astrolab</span>
         </a>
-        <button class="lab-icon-btn lab-theme-btn" type="button" data-lab-theme-toggle title="Light or dark lab">
-          <Icon name="sun" class="lab-icon--sun" />
-          <Icon name="moon" class="lab-icon--moon" />
-          <span class="lab-visually-hidden">Toggle the lab's light or dark theme</span>
+        {/* The collapse button's name and tooltip follow the state: "Collapse menu" when level 1
+            is open, "Expand menu" in the rail (./shell-client.ts keeps aria-label in step). */}
+        <button
+          class="lab-icon-btn lab-l1__btn lab-tipped"
+          type="button"
+          data-lab-toggle="l1"
+          data-lab-l1-btn
+          aria-label="Collapse menu"
+          aria-describedby="lab-tip-l1"
+        >
+          <Icon name="chevrons-left" size="sm" class="lab-l1-btn__collapse" />
+          <Icon name="chevrons-right" size="sm" class="lab-l1-btn__expand" />
+          <span class="lab-tip lab-tip--l1" id="lab-tip-l1" role="tooltip">
+            <span class="lab-tip__title">
+              <span class="lab-l1-btn__collapse">Collapse menu</span><span class="lab-l1-btn__expand">Expand menu</span> · ⌘⇧B
+            </span>
+            <span class="lab-tip__text">⌘B shows or hides the panel</span>
+            <span class="lab-tip__text">⌘. hides both (focus mode)</span>
+          </span>
         </button>
-        <button class="lab-icon-btn" type="button" data-lab-toggle="l1" title="Collapse the menu (⌘⇧B)" data-lab-l1-btn>
-          <Icon name="chevrons-left" class="lab-l1-btn__collapse" />
-          <Icon name="chevrons-right" class="lab-l1-btn__expand" />
-          <span class="lab-visually-hidden">Collapse or expand the menu</span>
+        <button
+          class="lab-icon-btn lab-l1__btn lab-theme-btn"
+          type="button"
+          data-lab-theme-toggle
+          aria-pressed="false"
+          aria-label="Dark mode for the lab"
+          title="Dark mode for the lab"
+        >
+          <Icon name="moon" size="sm" />
         </button>
       </div>
 
@@ -66,6 +91,7 @@ const isOpen = (group: { items: { key: NavKey }[] }) => group.items.some((item)
                   <Icon name="chevron-down" size="sm" class="lab-nav-group__chevron" />
                 </button>
                 <div class="lab-nav-group__items">
+                  <p class="lab-nav-group__flyout-label" aria-hidden="true">{group.label}</p>
                   {group.items.map((item) => (
                     <a
                       class="lab-nav-item"

package/src/chrome/Panel.astro

@@ -1,7 +1,10 @@
 ---
 // Level 2 — the panel (Figma `Sidebar navigation`, the grey column): breadcrumb, search with its
 // filter menu, the tree in the default slot, and the coffee footer. Closes with ⌘B or its own
-// button; while closed it peeks out over the stage when the pointer reaches the stage's left edge.
+// button; while closed it peeks out over the stage — below the navbar, never over it — when the
+// pointer reaches the stage's left edge.
+//
+// Only the Site views have one. Kanban Board and All Tasks have no level 2 (decided 2026-09-24).
 //
 // The coffee link is a placeholder until it has a destination.
 import Icon from "./Icon.astro";
@@ -37,9 +40,19 @@ const { crumbs, label, search = true, searchPlaceholder = "Search", filters, fil
           }
         </ol>
       </nav>
-      <button class="lab-icon-btn lab-l2__close" type="button" data-lab-toggle="l2" title="Close the panel (⌘B)">
-        <Icon name="panel-close" />
-        <span class="lab-visually-hidden">Close the panel</span>
+      {/* One button, two actions: docked, it hides the panel; while the panel only peeks, it keeps
+          it open. Its name follows the action — ./shell-client.ts swaps the label when a peek
+          starts and ends (decided 2026-09-24). */}
+      <button
+        class="lab-icon-btn lab-l2__close"
+        type="button"
+        data-lab-toggle="l2"
+        data-lab-l2-btn
+        aria-label="Hide panel"
+        title="Hide panel · ⌘B"
+      >
+        <Icon name="panel-close" class="lab-l2__close-hide" />
+        <Icon name="panel-open" class="lab-l2__close-dock" />
       </button>
     </div>
 

package/src/chrome/Properties.astro

@@ -0,0 +1,104 @@
+---
+// The eye beside a component's (or page's) name, and the Properties panel it opens. It replaces the
+// navbar's status pills and their status menu (decided 2026-09-24: no pills in the identity — a
+// panel that opens when you hover a small eye beside the name). Figma `Astrolab` › Menu ›
+// Type=Properties, and the four cases on the `Lab / Properties` sheet.
+//
+// In order: On the site (live and its slot, used by, or not on any page), Open pins (with a row to
+// the task list), Responsive (the two marks, sections only), Source file. Mark for deletion is not
+// here: it was removed from the lab as a feature (decided 2026-09-24).
+//
+// Not a menu. The panel is a `popover="manual"` dialog: hovering the eye opens it after a short
+// delay and it stays open while the pointer is on the eye or the panel; clicking the eye (or
+// Enter / Space) pins it open until Escape or a click outside. Behaviour: ./navbar-client.ts. The
+// marks are live checkboxes whenever the panel is open (./marks-client.ts).
+import Icon from "./Icon.astro";
+
+interface Props {
+  /** One line per fact under "On the site"; `live` draws the green dot, otherwise it is grey. */
+  site: { text: string; live: boolean }[];
+  /** Open and resolved pins, and where the row leads. Null when the pin board is not running. */
+  pins: { open: number; resolved: number; href: string } | null;
+  /** The responsive marks for this file, or null when the lab keeps none for it. */
+  responsive: { file: string; approved: boolean; done: boolean } | null;
+  source: string | null;
+}
+
+const { site, pins, responsive, source } = Astro.props;
+
+const pinLine = (open: number, resolved: number) =>
+  open === 0 && resolved === 0 ? "No pins" : `${open === 0 ? "No open pins" : `${open} open`} · ${resolved} resolved`;
+---
+
+<button
+  class="lab-tool lab-tool--icon"
+  type="button"
+  aria-expanded="false"
+  aria-controls="lab-props"
+  title="Properties — hover to look, click to pin open"
+  data-lab-props-trigger
+>
+  <Icon name="properties" size="sm" />
+  <span class="lab-visually-hidden">Properties</span>
+</button>
+<div class="lab-menu lab-props" id="lab-props" popover="manual" role="dialog" aria-label="Properties" data-lab-props>
+  <p class="lab-menu__label">On the site</p>
+  <div class="lab-props__facts">
+    {
+      site.map((line) => (
+        <p class="lab-props__fact">
+          <span class:list={["lab-props__dot", line.live && "lab-props__dot--live"]} aria-hidden="true" />
+          {line.text}
+        </p>
+      ))
+    }
+  </div>
+  {
+    pins && (
+      <>
+        <hr />
+        <p class="lab-menu__label">Open pins</p>
+        <a class="lab-menu__item" href={pins.href}>
+          <span class="lab-menu__mark lab-props__pin">
+            <Icon name="marker" size="sm" />
+          </span>
+          <span class="lab-menu__text">{pinLine(pins.open, pins.resolved)}</span>
+          <Icon name="chevron-right" size="sm" class="lab-menu__trail" />
+        </a>
+      </>
+    )
+  }
+  {
+    responsive && (
+      <>
+        <hr />
+        <p class="lab-menu__label">Responsive</p>
+        <label class="lab-menu__item">
+          <span class="lab-menu__mark">
+            <input class="lab-checkbox" type="checkbox" data-lab-mark="approved" data-file={responsive.file} checked={responsive.approved} disabled />
+          </span>
+          <span class="lab-menu__text">Approved for responsive work</span>
+        </label>
+        <label class="lab-menu__item">
+          <span class="lab-menu__mark">
+            <input class="lab-checkbox" type="checkbox" data-lab-mark="done" data-file={responsive.file} checked={responsive.done} disabled />
+          </span>
+          <span class="lab-menu__text">Made responsive</span>
+        </label>
+      </>
+    )
+  }
+  {
+    source && (
+      <>
+        <hr />
+        <p class="lab-menu__label">Source file</p>
+        <p class="lab-props__source">{source}</p>
+      </>
+    )
+  }
+  <hr />
+  <p class="lab-props__note" data-lab-marks-note>
+    {responsive ? "Click the eye to pin · marks save to the repo" : "Click the eye to pin"}
+  </p>
+</div>

package/src/chrome/SectionsTree.astro

@@ -0,0 +1,128 @@
+---
+// Level 2 for the sections tier (Figma `Astrolab` › `Sections tree`, decided 2026-09-24): a
+// "Sort by" dropdown, then one row per section with its slot badge — the sections a page mounts
+// first, the rest under "Unslotted · on no page". The rows and their order come from
+// ./trees.ts › sectionsTree; ./Tree.astro hands a tree to this component when its root rows carry a
+// slot.
+//
+// It is the same tree to the shell script as any other: one [data-lab-tree] list of
+// .lab-tree__node rows, so search, the filter menu, j / k and the scroll memory all work unchanged.
+// What it adds is the sort. The rows are rendered in slot order; each carries its rank in both
+// orders as CSS custom properties, and the viewer's choice (localStorage `lab-tree-sort`) is put on
+// <html> before paint by the inline script in ./Shell.astro, so a remembered "Name" sort is drawn
+// by CSS `order` from the first frame. ./shell-client.ts then moves the rows themselves into that
+// order, so reading order, keyboard order and j / k agree with what is on screen.
+import Icon from "./Icon.astro";
+import { labConfig, sectionsTier, type TreeNode } from "./model";
+
+interface Props {
+  nodes: TreeNode[];
+}
+
+const { nodes } = Astro.props;
+
+const slotted = nodes.filter((n) => n.group !== "unslotted");
+const unslotted = nodes.filter((n) => n.group === "unslotted");
+
+const holdsCurrent = (node: TreeNode): boolean => Boolean(node.current) || (node.children ?? []).some(holdsCurrent);
+const leaves = (list: TreeNode[]): number => list.reduce((n, node) => n + (node.children ? leaves(node.children) : 1), 0);
+const count = leaves(nodes);
+const tierName = (labConfig.tiers.find((t) => t.id === sectionsTier)?.label ?? "Sections").toLowerCase();
+const noun = count === 1 && tierName.endsWith("s") ? tierName.slice(0, -1) : tierName;
+
+const searchText = (node: TreeNode) => `${node.label} ${node.search ?? ""}`.toLowerCase();
+const orderStyle = (node: TreeNode) =>
+  node.order ? `--lab-o-slot:${node.order.slot};--lab-o-name:${node.order.name}` : undefined;
+const badge = (node: TreeNode) =>
+  node.slot
+    ? {
+        text: String(node.slot.n),
+        state: node.current ? "current" : "slotted",
+        title: `Slot ${node.slot.n} of ${node.slot.of} on ${node.slot.page}`,
+        aria: `${node.label}, slot ${node.slot.n}`,
+      }
+    : {
+        text: "–",
+        state: node.current ? "current" : "unslotted",
+        title: "On no page",
+        aria: `${node.label}, on no page`,
+      };
+const heading = slotted.length;
+---
+
+<div class="lab-stree-head">
+  <span class="lab-stree-head__count">{count} {noun}</span>
+  <button class="lab-stree-head__sort" type="button" popovertarget="lab-tree-sort" aria-haspopup="menu" data-lab-sort-btn>
+    Sort by
+    <b><span class="lab-stree-head__by-slot">Slot</span><span class="lab-stree-head__by-name">Name</span></b>
+    <Icon name="chevron-down" size="sm" />
+  </button>
+</div>
+<div class="lab-menu lab-menu--sort" id="lab-tree-sort" popover role="menu" data-lab-align="end">
+  <button class="lab-menu__item" type="button" role="menuitemradio" aria-checked="true" data-lab-sort-by="slot">
+    <Icon name="check" size="sm" class="lab-menu__tick" />
+    Slot number
+  </button>
+  <button class="lab-menu__item" type="button" role="menuitemradio" aria-checked="false" data-lab-sort-by="name">
+    <Icon name="check" size="sm" class="lab-menu__tick" />
+    Name (A–Z)
+  </button>
+</div>
+
+<ul class="lab-tree lab-stree" role="tree" aria-label={`${count} ${noun}`} data-lab-tree data-lab-stree>
+  {
+    [...slotted, ...unslotted].map((node, i) => {
+      const b = badge(node);
+      const open = Boolean(node.children?.length) && (!node.childrenWhenCurrent || holdsCurrent(node));
+      return (
+        <>
+          {i === heading && unslotted.length > 0 && (
+            <li class="lab-stree__heading" role="none" style={`--lab-o-slot:${heading};--lab-o-name:${heading}`} data-lab-tree-heading>
+              Unslotted · on no page
+            </li>
+          )}
+          <li
+            class="lab-tree__node"
+            role="none"
+            style={orderStyle(node)}
+            data-lab-slot-group={node.group}
+            data-lab-search={searchText(node)}
+            data-lab-facets={node.facets}
+          >
+            <a
+              class="lab-tree__row"
+              role="treeitem"
+              href={node.href}
+              aria-current={node.current ? "page" : undefined}
+              aria-label={b.aria}
+              aria-expanded={node.children?.length ? String(open) : undefined}
+              title={node.title}
+              data-lab-leaf
+            >
+              <span class="lab-slot" data-state={b.state} title={b.title}>{b.text}</span>
+              <span class="lab-tree__label">{node.label}</span>
+            </a>
+            {open && (
+              <ul class="lab-tree__group" role="group">
+                {node.children!.map((child) => (
+                  <li class="lab-tree__node" role="none" style="--lab-d:1" data-lab-search={searchText(child)} data-lab-facets={child.facets}>
+                    <a
+                      class="lab-tree__row"
+                      role="treeitem"
+                      href={child.href}
+                      aria-current={child.current ? "page" : undefined}
+                      title={child.title}
+                      data-lab-leaf
+                    >
+                      <span class="lab-tree__label">{child.label}</span>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </li>
+        </>
+      );
+    })
+  }
+</ul>

package/src/chrome/Shell.astro

@@ -35,9 +35,11 @@ interface Props {
   };
   /** Extra class on main's content box, e.g. to make it a positioning context for the stage. */
   contentClass?: string;
+  /** Extra class on the navbar, e.g. `lab-navbar--listing` for a listing's title bar. */
+  navbarClass?: string;
 }
 
-const { title, active, panel, contentClass } = Astro.props;
+const { title, active, panel, contentClass, navbarClass } = Astro.props;
 ---
 
 <html lang="en" class="lab-shell" data-lab-page={active}>
@@ -47,8 +49,9 @@ const { title, active, panel, contentClass } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{`${title} · ${labConfig.title}`}</title>
     <LabHead />
-    {/* The collapse state, before paint — so a closed panel never flashes open. Level 1 starts as
-        the rail on a narrow window unless it was explicitly expanded there. */}
+    {/* The collapse state and the Sections tree's sort, before paint — so a closed panel never
+        flashes open and a tree sorted by name never flashes in slot order. Level 1 starts as the
+        rail on a narrow window unless it was explicitly expanded there. */}
     <script is:inline>
       (() => {
         try {
@@ -57,6 +60,7 @@ const { title, active, panel, contentClass } = Astro.props;
           const l2 = localStorage.getItem("lab-l2");
           if (l1 === "rail" || (!l1 && window.innerWidth < 1024)) root.dataset.labL1 = "rail";
           if (l2 === "closed") root.dataset.labL2 = "closed";
+          if (localStorage.getItem("lab-tree-sort") === "name") root.dataset.labSort = "name";
         } catch {
           /* storage blocked — the defaults are fine */
         }
@@ -83,12 +87,22 @@ const { title, active, panel, contentClass } = Astro.props;
       }
       <main class="lab-main" id="lab-main">
         {panel && <div class="lab-peek-zone" data-lab-peek-zone aria-hidden="true" />}
-        <header class="lab-navbar">
+        <header class:list={["lab-navbar", navbarClass]} data-lab-navbar>
           {
             panel && (
-              <button class="lab-icon-btn lab-navbar__panel-btn" type="button" data-lab-toggle="l2" title="Open the panel (⌘B)">
+              <button
+                class="lab-icon-btn lab-navbar__panel-btn lab-tipped"
+                type="button"
+                data-lab-toggle="l2"
+                aria-label="Show panel"
+                aria-describedby="lab-tip-panel"
+              >
                 <Icon name="panel-open" />
-                <span class="lab-visually-hidden">Open the panel</span>
+                <span class="lab-tip lab-tip--panel" id="lab-tip-panel" role="tooltip">
+                  <span class="lab-tip__title">Show panel · ⌘B</span>
+                  <span class="lab-tip__text">⌘⇧B collapses the menu</span>
+                  <span class="lab-tip__text">⌘. hides both (focus mode)</span>
+                </span>
               </button>
             )
           }