npm - @orbytes/astrolab - Versions diffs - 0.3.0 → 0.4.0-next.2 - Mend

@orbytes/astrolab 0.3.0 → 0.4.0-next.2

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 (82) hide show

package/README.md +261 -116
package/bin/pin-gallery.mjs +53 -19
package/defaults.mjs +72 -20
package/dist/core/virtual-module/virtual-routes.js +12 -1
package/docs/PIN-CONTRACT.md +84 -10
package/docs/PIN.md +117 -37
package/index.d.ts +41 -23
package/index.mjs +46 -91
package/package.json +7 -3
package/src/Home.astro +166 -264
package/src/LabHead.astro +37 -1047
package/src/chrome/ActionsMenu.astro +97 -0
package/src/chrome/ComponentCard.astro +76 -0
package/src/chrome/Icon.astro +21 -0
package/src/chrome/LICENSE-icons +43 -0
package/src/chrome/Nav.astro +131 -0
package/src/chrome/Panel.astro +117 -0
package/src/chrome/Properties.astro +104 -0
package/src/chrome/SectionsTree.astro +128 -0
package/src/chrome/Shell.astro +120 -0
package/src/chrome/Sprite.astro +23 -0
package/src/chrome/StoryView.astro +192 -0
package/src/chrome/Tree.astro +86 -0
package/src/chrome/ViewportControls.astro +173 -0
package/src/chrome/ViewportStage.astro +55 -0
package/src/chrome/fonts/OFL.txt +93 -0
package/src/chrome/fonts/inter-latin-wght-normal.woff2 +0 -0
package/src/chrome/icons.ts +68 -0
package/src/chrome/marks-client.ts +75 -0
package/src/chrome/model.ts +156 -0
package/src/chrome/navbar-client.ts +324 -0
package/src/chrome/params-client.ts +434 -0
package/src/chrome/pins-data.ts +63 -0
package/src/chrome/shell-client.ts +468 -0
package/src/chrome/site-data.ts +230 -0
package/src/chrome/trees.ts +257 -0
package/src/chrome/viewport-client.ts +405 -0
package/src/chrome/views/Assets.astro +125 -0
package/src/chrome/views/Pages.astro +214 -0
package/src/chrome/views/Placeholder.astro +37 -0
package/src/chrome/views/Tasks.astro +79 -0
package/src/core/LICENSE-astrobook +21 -0
package/src/core/lib/components/home.astro +4 -2
package/src/core/lib/pages/story.astro +12 -10
package/src/core/utils/kebab-case.ts +2 -2
package/src/core/virtual-module/virtual-routes.ts +20 -4
package/src/pin/board.mjs +414 -190
package/src/pin/index.mjs +67 -22
package/src/pin/tickets.mjs +6 -5
package/src/pin/toolbar.js +82 -4
package/src/shell/Browse.astro +131 -353
package/src/shell/Viewport.astro +22 -1315
package/src/shell/lab-index.ts +28 -18
package/src/shell/lab-params.ts +113 -6
package/src/shell/live-files.mjs +212 -10
package/src/shell/marks.mjs +17 -41
package/src/ui/components/app.astro +5 -7
package/src/ui/components/preview-layout.astro +17 -0
package/src/ui/components/theme-script.astro +17 -5
package/src/ui/lab.css +3754 -371
package/virtual.d.ts +13 -4
package/bin/lab-cull.mjs +0 -401
package/src/shell/CardGrid.astro +0 -297
package/src/ui/components/build-path.ts +0 -13
package/src/ui/components/build-tree.ts +0 -108
package/src/ui/components/collapse-duration.ts +0 -28
package/src/ui/components/compress-terms.ts +0 -10
package/src/ui/components/dashboard-layout.astro +0 -39
package/src/ui/components/home.astro +0 -65
package/src/ui/components/layout.astro +0 -110
package/src/ui/components/sidebar-button-fullscreen.astro +0 -38
package/src/ui/components/sidebar-button-search.astro +0 -23
package/src/ui/components/sidebar-button-theme.astro +0 -9
package/src/ui/components/sidebar-button.astro +0 -24
package/src/ui/components/sidebar-resize-handle.astro +0 -74
package/src/ui/components/sidebar-search-panel.astro +0 -41
package/src/ui/components/sidebar-search-script.ts +0 -103
package/src/ui/components/sidebar-title.astro +0 -17
package/src/ui/components/sidebar-tree-node.astro +0 -143
package/src/ui/components/sidebar-tree.astro +0 -84
package/src/ui/components/sidebar.astro +0 -29
package/src/ui/components/theme-toggle.astro +0 -63

package/src/chrome/SectionsTree.astro ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,120 @@
+---
+// The chrome document — every lab page renders through this, and nothing of the consumer's does.
+// Level 1 (./Nav.astro), level 2 (./Panel.astro, when the page has a list to show), and main: the
+// navbar (slot "navbar") above the content (default slot). Figma `Astrolab` › Design › Desktop.
+//
+// PURE CHROME, NO CONSUMER CSS. Previews are <iframe>s of their own documents (the bare story
+// route, or the site's own page), so this document never imports `virtual:astrobook/user-css.mjs`
+// or the consumer's head. That split is what testbeds/orbytes-v2/scripts/check-isolation.mjs
+// asserts, both ways, on every built page.
+//
+// NO CLIENT ROUTER. A click is a real page load; `@view-transition { navigation: auto }` in the
+// stylesheet keeps the old page painted until the new one is ready, and everything worth keeping
+// across a load — which levels are collapsed, which tree groups are closed, the tree's scroll — is
+// in storage and re-applied before paint. That keeps every script here a plain module that runs
+// once per page, with none of the re-run guards a swapped document needs.
+import LabHead from "../LabHead.astro";
+import Nav from "./Nav.astro";
+import Panel from "./Panel.astro";
+import Sprite from "./Sprite.astro";
+import Icon from "./Icon.astro";
+import { labConfig, type Crumb, type FilterOption, type NavKey } from "./model";
+interface Props {
+  /** The document title's first half; the lab's own title follows it. */
+  title: string;
+  active: NavKey;
+  /** Level 2. Omit `panel` for a page with no list to show (Home, Settings): level 2 is not drawn. */
+  panel?: {
+    label: string;
+    crumbs: Crumb[];
+    search?: boolean;
+    searchPlaceholder?: string;
+    filters?: FilterOption[];
+    filterLabel?: string;
+  };
+  /** 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, navbarClass } = Astro.props;
+---
+<html lang="en" class="lab-shell" data-lab-page={active}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{`${title} · ${labConfig.title}`}</title>
+    <LabHead />
+    {/* 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 {
+          const root = document.documentElement;
+          const l1 = localStorage.getItem("lab-l1");
+          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 */
+        }
+      })();
+    </script>
+  </head>
+  <body class="lab-shell">
+    <Sprite />
+    <div class="lab-app">
+      <Nav active={active} />
+      {
+        panel && (
+          <Panel
+            label={panel.label}
+            crumbs={panel.crumbs}
+            search={panel.search}
+            searchPlaceholder={panel.searchPlaceholder}
+            filters={panel.filters}
+            filterLabel={panel.filterLabel}
+          >
+            <slot name="panel" />
+          </Panel>
+        )
+      }
+      <main class="lab-main" id="lab-main">
+        {panel && <div class="lab-peek-zone" data-lab-peek-zone aria-hidden="true" />}
+        <header class:list={["lab-navbar", navbarClass]} data-lab-navbar>
+          {
+            panel && (
+              <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-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>
+            )
+          }
+          <slot name="navbar" />
+        </header>
+        <div class:list={["lab-content", contentClass]} id="lab-content">
+          <slot />
+        </div>
+      </main>
+    </div>
+    <script>
+      import "./shell-client";
+    </script>
+  </body>
+</html>

package/src/chrome/Sprite.astro ADDED Viewed

@@ -0,0 +1,23 @@
+---
+// The icon sprite — every icon the chrome uses, once per page, as <symbol>s that ./Icon.astro
+// points at with <use>. A tree of fifty rows costs fifty `<use href>` tags rather than fifty copies
+// of the same path data. Shapes and licence: ./icons.ts.
+import { ICONS } from "./icons";
+---
+<svg aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
+  {
+    Object.entries(ICONS).map(([name, inner]) => (
+      <symbol
+        id={`lab-i-${name}`}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        set:html={inner}
+      />
+    ))
+  }
+</svg>

package/src/chrome/StoryView.astro ADDED Viewed

@@ -0,0 +1,192 @@
+---
+// A component's page — <subpath>/dashboard/<storyId>, the route Astrobook's core generates for every
+// story (../core/lib/pages/story.astro renders this).
+//
+//   · the story is an <iframe> of its bare route on a canvas you size (./ViewportStage.astro), never
+//     rendered inline beside the chrome — so this page carries none of the site's CSS;
+//   · the tree stops at the component; the component's variants are ALWAYS a dropdown ("Default
+//     1 of 3"), at any count, and previous / next (and j / k) step through every variant of the
+//     tier in tree order (decided 2026-09-24: no tabs in the navbar);
+//   · the identity is the name, the version and an eye: no pills. The eye opens the Properties
+//     panel — live and slot, open pins, the responsive marks, the source file (./Properties.astro);
+//   · everything that leaves the lab, and the pin and preview switches, are in ⋯ (./ActionsMenu.astro).
+//
+// THE NAVBAR (Figma `Astrolab` › Lab / Components › Navbar, View=Story) is one grid laid out by a
+// container query on its own width, because the sidebars change the main area and never the
+// viewport: ONE row when the navbar is 1040px wide or more — identity · variants · previous / next
+// · device switch + Viewport field · Comment · Parameters · ⋯ — otherwise TWO rows, the viewport
+// row last, and under 552px three or four, the identity on a row of its own with ⋯. The rules are
+// lab.css › "The navbar" and "The narrow navbar".
+import Shell from "./Shell.astro";
+import Tree from "./Tree.astro";
+import Icon from "./Icon.astro";
+import Properties from "./Properties.astro";
+import ActionsMenu from "./ActionsMenu.astro";
+import ViewportControls from "./ViewportControls.astro";
+import ViewportStage from "./ViewportStage.astro";
+import { hrefs, tasksBase, type Crumb, type TreeNode } from "./model";
+import { componentsOf, tierTree } from "./trees";
+import { pinCounts } from "./pins-data";
+import { buildLabIndex, isSectionLike, tierLabel } from "../shell/lab-index";
+interface Props {
+  story: string;
+}
+const index = buildLabIndex();
+const item = index.items.find((i) => i.storyId === Astro.props.story)!;
+const mod = componentsOf(index).find((c) => c.moduleId === item.moduleId)!;
+const tree = tierTree(index, item.tier, mod.moduleId);
+// Every story of the tier, in the tree's own order, for previous / next.
+const leaves = (nodes: TreeNode[]): TreeNode[] => nodes.flatMap((n) => (n.children ? leaves(n.children) : [n]));
+const modules = new Map(componentsOf(index).map((c) => [`mod:${c.moduleId}`, c]));
+const sequence = leaves(tree).flatMap((leaf) => modules.get(leaf.id)?.stories ?? []);
+const at = sequence.findIndex((s) => s.storyId === item.storyId);
+const prev = at > 0 ? sequence[at - 1] : null;
+const next = at >= 0 && at < sequence.length - 1 ? sequence[at + 1] : null;
+const pins = await pinCounts();
+const tally = pins.forFile(mod.componentFile);
+const liveStory = mod.stories.find((s) => s.live);
+const section = isSectionLike(item);
+const variantAt = mod.stories.indexOf(item) + 1;
+// The Properties panel's "On the site" lines: every page the component is mounted on, or what
+// uses it, or the honest grey "Not on any page".
+const site = liveStory
+  ? liveStory.liveOn.map((m) => ({ text: `Live on ${m.page} — slot ${m.slot} of ${m.of}`, live: true }))
+  : mod.usedBy.length
+    ? [{ text: `Used by ${mod.usedBy.length}`, live: true }]
+    : [{ text: "Not on any page", live: false }];
+// Level 2's breadcrumb names the PANEL's place — Site › Sections — as the design does; where the
+// component sits inside the tier is the tree's job, and which component it is, the navbar's.
+const crumbs: Crumb[] = [{ label: "Site" }, { label: tierLabel(item.tier), href: hrefs.tier(item.tier) }];
+const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
+---
+<Shell
+  title={`${mod.moduleName} — ${item.storyName}`}
+  active={`tier:${item.tier}`}
+  panel={{
+    label: tierLabel(item.tier),
+    crumbs,
+    searchPlaceholder: `Search ${tierLabel(item.tier).toLowerCase()}`,
+    filterLabel: "Show components",
+    filters: [
+      { value: "live", label: "Live on the site" },
+      { value: "used", label: "Used by something live" },
+      { value: "unused", label: "Unused" },
+    ],
+  }}
+>
+  <Tree slot="panel" nodes={tree} />
+  <div class="lab-nb" slot="navbar" data-lab-nb>
+    <div class="lab-nb__id">
+      <div class="lab-nb__line">
+        <h1 class="lab-nb__name" title={mod.moduleName}>{mod.moduleName}</h1>
+        {mod.version && <span class="lab-nb__tag">{mod.version}</span>}
+        <Properties
+          site={site}
+          pins={tasksBase ? { ...tally, href: `${tasksBase}/all` } : null}
+          responsive={mod.responsive ? { file: mod.moduleFile, ...mod.responsive } : null}
+          source={mod.componentFile}
+        />
+      </div>
+    </div>
+    <div class="lab-nb__variants">
+      <button
+        class="lab-variant-btn"
+        type="button"
+        popovertarget="lab-variant-menu"
+        title={`${plural(mod.stories.length, "variant")} · j / k step`}
+      >
+        <span class="lab-variant-btn__name">{item.storyName}</span>
+        <span class="lab-variant-btn__count">{variantAt} of {mod.stories.length}</span>
+        <Icon name="chevron-down" size="sm" />
+      </button>
+      <div class="lab-menu lab-menu--variants" id="lab-variant-menu" popover role="menu" data-lab-align="end">
+        <p class="lab-menu__label">{plural(mod.stories.length, "variant")}</p>
+        {
+          mod.stories.map((s) => (
+            <a
+              class="lab-menu__item"
+              role="menuitemradio"
+              aria-checked={String(s.storyId === item.storyId)}
+              href={s.dashboardUrl}
+              data-lab-keep-viewport
+            >
+              <span class="lab-menu__mark"><Icon name="check" size="sm" class="lab-menu__tick" /></span>
+              <span class="lab-menu__text">{s.storyName}</span>
+            </a>
+          ))
+        }
+        <hr />
+        <p class="lab-menu__note">j / k — next and previous</p>
+      </div>
+      <div class="lab-nb__step" role="group" aria-label="Previous and next variant">
+        {
+          prev ? (
+            <a
+              class="lab-tool lab-tool--icon"
+              href={prev.dashboardUrl}
+              title={`Previous variant · k — ${prev.moduleName} — ${prev.storyName}`}
+              data-lab-step="prev"
+              data-lab-keep-viewport
+            >
+              <Icon name="chevron-left" size="sm" />
+              <span class="lab-visually-hidden">Previous variant</span>
+            </a>
+          ) : (
+            <button class="lab-tool lab-tool--icon" type="button" disabled data-lab-step>
+              <Icon name="chevron-left" size="sm" />
+              <span class="lab-visually-hidden">Previous variant</span>
+            </button>
+          )
+        }
+        {
+          next ? (
+            <a
+              class="lab-tool lab-tool--icon"
+              href={next.dashboardUrl}
+              title={`Next variant · j — ${next.moduleName} — ${next.storyName}`}
+              data-lab-step="next"
+              data-lab-keep-viewport
+            >
+              <Icon name="chevron-right" size="sm" />
+              <span class="lab-visually-hidden">Next variant</span>
+            </a>
+          ) : (
+            <button class="lab-tool lab-tool--icon" type="button" disabled data-lab-step>
+              <Icon name="chevron-right" size="sm" />
+              <span class="lab-visually-hidden">Next variant</span>
+            </button>
+          )
+        }
+      </div>
+    </div>
+    <ViewportControls
+      defaultW={section ? 1440 : 960}
+      defaultH={section ? 900 : 540}
+      kind={section ? "section" : "component"}
+      comment={Boolean(tasksBase)}
+      parameters
+    />
+    <div class="lab-nb__actions">
+      <ActionsMenu editorUrl={item.editorUrl} fullScreenUrl={item.storyUrl} stagingUrl={item.stagingUrl} pins={Boolean(tasksBase)} />
+    </div>
+  </div>
+  <ViewportStage src={item.storyUrl} title={`${mod.moduleName} — ${item.storyName}`} pins={Boolean(tasksBase)} tasksHref={tasksBase ? `${tasksBase}/all` : null} parameters />
+</Shell>
+<script>
+  import "./marks-client";
+  import "./navbar-client";
+</script>

package/src/chrome/Tree.astro ADDED Viewed

@@ -0,0 +1,86 @@
+---
+// The level 2 tree (Figma `Tree view`, sm) — recursive, server-rendered, and usable with no script:
+// groups are <details>, rows are links. The shell script adds memory (which groups you closed),
+// search, the filter menu and j/k on top. Connector lines are CSS on the <li>, so the tree carries
+// no connector markup at all.
+//
+// Rows carry no icons and read at 12px (decided 2026-09-24, to condense level 2). A node's `icon`
+// is still accepted — the data layer keeps it — and simply not drawn.
+//
+// A tree whose root rows carry a slot is the Sections tree, which draws its own rows and sort
+// control (./SectionsTree.astro).
+import Icon from "./Icon.astro";
+import SectionsTree from "./SectionsTree.astro";
+import type { TreeNode } from "./model";
+interface Props {
+  nodes: TreeNode[];
+  depth?: number;
+  /** Set on the outermost call only. */
+  root?: boolean;
+}
+const { nodes, depth = 0, root = true } = Astro.props;
+const sections = root && nodes.some((node) => node.slot !== undefined);
+/** Whether a node is, or holds, the current page — those groups render open whatever was stored. */
+const holdsCurrent = (node: TreeNode): boolean =>
+  Boolean(node.current) || (node.children ?? []).some(holdsCurrent);
+const searchText = (node: TreeNode) => `${node.label} ${node.search ?? ""}`.toLowerCase();
+---
+{
+  sections ? (
+    <SectionsTree nodes={nodes} />
+  ) : (
+    <ul class={root ? "lab-tree" : "lab-tree__group"} role={root ? "tree" : "group"} data-lab-tree={root ? "" : undefined}>
+      {nodes.map((node) => {
+        const hasChildren = (node.children?.length ?? 0) > 0;
+        const trailing = (
+          <>
+            {node.count !== undefined && <span class="lab-tree__count">{node.count}</span>}
+            {node.dot && <span class={`lab-dot lab-dot--${node.dot}`} title={node.dotTitle} />}
+          </>
+        );
+        return (
+          <li
+            class="lab-tree__node"
+            role="none"
+            style={`--lab-d:${depth}`}
+            data-lab-search={searchText(node)}
+            data-lab-facets={node.facets}
+          >
+            {hasChildren ? (
+              <details open data-lab-tree-id={node.id} data-lab-holds-current={holdsCurrent(node) ? "" : undefined}>
+                <summary class="lab-tree__row" role="treeitem" aria-current={node.current ? "page" : undefined} title={node.title}>
+                  <span class="lab-tree__label">{node.href ? <a href={node.href}>{node.label}</a> : node.label}</span>
+                  {trailing}
+                  <Icon name="chevron-down" size="sm" class="lab-tree__chevron" />
+                </summary>
+                <Astro.self nodes={node.children!} depth={depth + 1} root={false} />
+              </details>
+            ) : node.href && !node.disabled ? (
+              <a
+                class="lab-tree__row"
+                role="treeitem"
+                href={node.href}
+                aria-current={node.current ? "page" : undefined}
+                title={node.title}
+                data-lab-leaf
+              >
+                <span class="lab-tree__label">{node.label}</span>
+                {trailing}
+              </a>
+            ) : (
+              <span class="lab-tree__row" role="treeitem" aria-disabled="true" title={node.title}>
+                <span class="lab-tree__label">{node.label}</span>
+                {trailing}
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  )
+}