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

package/src/chrome/ViewportControls.astro

@@ -1,9 +1,19 @@
 ---
-// The viewport's controls, for the navbar: the device switch (the site's design widths), the
-// W × H field with rotate, the presets menu (both sides of every breakpoint, and named devices), the
-// band readout, zoom (Fit by default), and — only when the frame supports them — the preview's own
-// light/dark switch and the parameters drawer's button. Decided 2026-09-24; the sizes are the
-// `viewports` option (../../defaults.mjs). Behaviour: ./viewport-client.ts.
+// The navbar's tools half: the viewport group and the overlays. Figma `Astrolab` › Lab / Components ›
+// Device switch, Viewport field, Menu › Type=Presets, Tool button.
+//
+//   · the DEVICE SWITCH — the site's four design widths (the `viewports` option, ../../defaults.mjs);
+//   · the VIEWPORT FIELD — width × height edited in place, and a button naming the band and the zoom
+//     ("tablet Fit") that opens the Presets menu: rotate, both sides of every breakpoint, named
+//     devices, and the zoom row. Decided 2026-09-24 (ASTROL-19, option B): keep the four device
+//     icons and merge the rest into one field — so there is no separate rotate button, zoom select
+//     or band readout;
+//   · the OVERLAYS — Comment (click an element in the frame to pin it; only where the pin board
+//     runs) and Parameters (only for a variant that registers any; the drawer's own script shows it).
+//
+// This element is `[data-lab-vp-controls]`, which ./viewport-client.ts reads its settings from, so
+// the Parameters button has to stay inside it. Every shortcut is unchanged: [ ] step the widths,
+// r rotates, f fits, 0 is 100%.
 import Icon from "./Icon.astro";
 import type { IconName } from "./icons";
 import { labConfig } from "./model";
@@ -14,16 +24,21 @@ interface Props {
   defaultH: number;
   /** Which remembered size to use: sections, components and pages each keep their own. */
   kind: string;
+  /** Render the Comment button — only where the pin board runs. */
+  comment: boolean;
+  /** Render the Parameters button (hidden until the variant registers parameters). */
+  parameters: boolean;
 }
 
-const { defaultW, defaultH, kind } = Astro.props;
+const { defaultW, defaultH, kind, comment, parameters } = Astro.props;
 const { design, breakpoints, devices } = labConfig.viewports;
 const edges = breakpoints.filter((b) => b.min > 0).flatMap((b) => [b.min, b.min - 1]);
+const bandName = (w: number) => breakpoints.find((b) => w >= b.min)?.name ?? "";
 const zooms = [25, 50, 75, 100, 150, 200];
 ---
 
 <div
-  class="lab-navbar__tools"
+  class="lab-nb__tools"
   data-lab-vp-controls
   data-kind={kind}
   data-default-w={defaultW}
@@ -31,68 +46,128 @@ const zooms = [25, 50, 75, 100, 150, 200];
   data-breakpoints={JSON.stringify(breakpoints)}
   data-step-widths={[...new Set([...design.map((d) => d.width), ...edges])].sort((a, b) => a - b).join(",")}
 >
-  <div class="lab-seg" role="group" aria-label="Design widths">
-    {
-      design.map((d) => (
-        <button class="lab-btn lab-btn--sm lab-btn--icon" type="button" data-lab-vp-width={d.width} title={`${d.label} · ${d.width}px`}>
-          <Icon name={d.icon as IconName} />
-          <span class="lab-visually-hidden">{d.label}, {d.width} pixels wide</span>
-        </button>
-      ))
-    }
-  </div>
+  <div class="lab-nb__viewport">
+    <div class="lab-devsw" role="group" aria-label="Design widths">
+      {
+        design.map((d) => (
+          <button
+            class="lab-devsw__btn"
+            type="button"
+            aria-pressed="false"
+            data-lab-vp-width={d.width}
+            title={`${d.label} · ${d.width} ( [ / ] step )`}
+          >
+            <Icon name={d.icon as IconName} size="sm" />
+            <span class="lab-visually-hidden">{d.label}, {d.width} pixels wide</span>
+          </button>
+        ))
+      }
+    </div>
+
+    <div class="lab-vpf" role="group" aria-label="Frame size, band and zoom" data-lab-vpf>
+      <input class="lab-vpf__num lab-vpf__num--w" type="number" inputmode="numeric" min="240" step="1" aria-label="Width" data-lab-vp-w />
+      <span class="lab-vpf__x" aria-hidden="true">×</span>
+      <input class="lab-vpf__num" type="number" inputmode="numeric" min="240" step="1" aria-label="Height" data-lab-vp-h />
+      <button
+        class="lab-vpf__menu"
+        type="button"
+        popovertarget="lab-vp-presets"
+        title="Rotate, breakpoints, devices and zoom"
+      >
+        <span class="lab-vpf__band" data-lab-vp-band>—</span>
+        <span class="lab-vpf__zoom" data-lab-vp-zoom-label>Fit</span>
+        <Icon name="chevron-down" size="sm" />
+      </button>
+    </div>
 
-  <div class="lab-vp-size" role="group" aria-label="Frame size">
-    <input type="number" inputmode="numeric" min="240" step="1" aria-label="Width" data-lab-vp-w />
-    <span aria-hidden="true">×</span>
-    <input type="number" inputmode="numeric" min="240" step="1" aria-label="Height" data-lab-vp-h />
-    <button class="lab-icon-btn" type="button" title="Rotate — swap width and height (r)" data-lab-vp-rotate>
-      <Icon name="rotate" />
-      <span class="lab-visually-hidden">Rotate</span>
-    </button>
+    <div class="lab-menu lab-menu--presets" id="lab-vp-presets" popover role="menu">
+      <button class="lab-menu__item" type="button" role="menuitem" data-lab-vp-rotate>
+        <span class="lab-menu__mark"><Icon name="rotate" size="sm" /></span>
+        <span class="lab-menu__text">Rotate</span>
+        <kbd class="lab-menu__hint">r</kbd>
+      </button>
+      <hr />
+      <p class="lab-menu__label">Breakpoint edges · width only</p>
+      {
+        edges.map((w) => (
+          <button class="lab-menu__item" type="button" role="menuitemradio" aria-checked="false" data-lab-vp-width={w}>
+            <span class="lab-menu__mark"><Icon name="check" size="sm" class="lab-menu__tick" /></span>
+            <span class="lab-menu__text">{w}</span>
+            <span class="lab-menu__hint">{bandName(w)}</span>
+          </button>
+        ))
+      }
+      <hr />
+      <p class="lab-menu__label">Devices · width and height</p>
+      {
+        devices.map((d) => (
+          <button
+            class="lab-menu__item"
+            type="button"
+            role="menuitemradio"
+            aria-checked="false"
+            data-lab-vp-width={d.width}
+            data-lab-vp-height={d.height}
+          >
+            <span class="lab-menu__mark"><Icon name="check" size="sm" class="lab-menu__tick" /></span>
+            <span class="lab-menu__text">{d.label}</span>
+            <span class="lab-menu__hint">{d.width} × {d.height}</span>
+          </button>
+        ))
+      }
+      <hr />
+      <p class="lab-menu__label" id="lab-vp-zoom-label">Zoom</p>
+      <div class="lab-zoom" role="group" aria-labelledby="lab-vp-zoom-label">
+        <button class="lab-zoom__btn" type="button" role="menuitemradio" aria-checked="false" data-lab-vp-zoom="fit" title="Fit (f)">Fit</button>
+        {
+          zooms.map((z) => (
+            <button
+              class="lab-zoom__btn"
+              type="button"
+              role="menuitemradio"
+              aria-checked="false"
+              data-lab-vp-zoom={String(z / 100)}
+              title={z === 100 ? "100% (0)" : `${z}%`}
+            >
+              {z}
+            </button>
+          ))
+        }
+      </div>
+      <p class="lab-menu__note">[ ] step widths · r rotate · f fit · 0 is 100%</p>
+    </div>
   </div>
 
-  <button class="lab-btn lab-btn--sm" type="button" popovertarget="lab-vp-presets" title="Breakpoints and devices ([ and ] step)">
-    Presets
-    <Icon name="chevron-down" />
-  </button>
-  <div class="lab-menu" id="lab-vp-presets" popover role="menu">
-    <p class="lab-menu__label">Breakpoint edges — width only</p>
+  <div class="lab-nb__overlays">
     {
-      edges.map((w) => (
-        <button class="lab-menu__item" type="button" role="menuitem" data-lab-vp-width={w}>
-          {w}px
-          <span class="lab-menu__hint">{breakpoints.find((b) => b.min <= w)?.name}</span>
+      comment && (
+        <button
+          class="lab-tool lab-tool--pins"
+          type="button"
+          aria-pressed="false"
+          disabled
+          title="Comment — click an element in the frame to pin it (Esc stops)"
+          data-lab-comment
+        >
+          <Icon name="comment" size="sm" />
+          <span class="lab-tool__label">Comment</span>
         </button>
-      ))
+      )
     }
-    <hr />
-    <p class="lab-menu__label">Devices</p>
     {
-      devices.map((d) => (
-        <button class="lab-menu__item" type="button" role="menuitem" data-lab-vp-width={d.width} data-lab-vp-height={d.height}>
-          {d.label}
-          <span class="lab-menu__hint">{d.width} × {d.height}</span>
+      parameters && (
+        <button
+          class="lab-tool lab-tool--icon"
+          type="button"
+          hidden
+          aria-pressed="false"
+          title="Parameters"
+          data-lab-params-toggle
+        >
+          <Icon name="parameters" size="sm" />
+          <span class="lab-visually-hidden">Parameters</span>
         </button>
-      ))
+      )
     }
   </div>
-
-  <span class="lab-pill lab-vp-band" data-lab-vp-band aria-live="polite">—</span>
-
-  <select class="lab-select lab-select--sm" aria-label="Zoom" title="Zoom (f fits, 0 is 100%)" data-lab-vp-zoom>
-    <option value="fit">Fit</option>
-    {zooms.map((z) => <option value={String(z / 100)}>{z}%</option>)}
-  </select>
-
-  <button class="lab-btn lab-btn--sm lab-btn--icon lab-preview-theme-btn" type="button" hidden title="The preview's light or dark" data-lab-preview-theme>
-    <Icon name="sun" class="lab-icon--sun" />
-    <Icon name="moon" class="lab-icon--moon" />
-    <span class="lab-visually-hidden">Switch the preview between light and dark</span>
-  </button>
-
-  <button class="lab-btn lab-btn--sm" type="button" hidden aria-pressed="false" title="Tuning parameters" data-lab-params-toggle>
-    <Icon name="params" />
-    Parameters
-  </button>
 </div>

package/src/chrome/ViewportStage.astro

@@ -3,13 +3,28 @@
 // dragging its edges. Media queries and vh units inside the frame follow the frame's own size,
 // which is why it is an iframe and never an inline render. Zoom is a transform on the wrapper, so
 // zooming never changes the frame's width — or its breakpoints. The parameters drawer sits on the
-// canvas's right edge, over it, and exists only for a story that registered parameters.
+// canvas's right edge, over it. It is mounted only where `parameters` is set — the component page,
+// never the page view, which has no Parameters button to open or close it (decided 2026-09-24) —
+// and shows only once the story registers parameters.
+//
+// Two overlays belong to the pin board and exist only where it runs (`astro dev`, board enabled):
+// the PINS drawn on the framed page — one per ticket left on it, blue while open and grey once
+// resolved, governed by ⋯ › Pins — and the HINT shown while Comment is picking. Both are chrome
+// drawn over the frame, never inside it: a marker inside the frame would be photographed into
+// the next ticket's screenshot. They carry `data-orbytes-pin-ui`, the attribute the pin picker
+// skips, so the picker never pins the lab's own markers. Behaviour: ./navbar-client.ts.
 interface Props {
   src: string;
   title: string;
+  /** Draw the pin overlays — only where the pin board runs. */
+  pins?: boolean;
+  /** Where a pin leads when clicked. */
+  tasksHref?: string | null;
+  /** Mount the parameters drawer — only where the navbar has the Parameters button to drive it. */
+  parameters?: boolean;
 }
 
-const { src, title } = Astro.props;
+const { src, title, pins = false, tasksHref = null, parameters = false } = Astro.props;
 ---
 
 <div class="lab-vp" data-lab-vp>
@@ -22,9 +37,17 @@ const { src, title } = Astro.props;
       <div class="lab-vp-handle lab-vp-handle--s" data-axis="y" title="Drag to resize the height" aria-hidden="true"></div>
       <div class="lab-vp-handle lab-vp-handle--se" data-axis="xy" title="Drag to resize" aria-hidden="true"></div>
       <span class="lab-vp-live" data-lab-vp-live aria-hidden="true"></span>
+      {pins && <div class="lab-vp-pins" data-lab-vp-pins data-orbytes-pin-ui="lab-pins" data-tasks-href={tasksHref ?? undefined}></div>}
     </div>
   </div>
-  <aside class="lab-params" data-lab-params hidden aria-label="Parameters"></aside>
+  {
+    pins && (
+      <p class="lab-vp-hint" data-lab-pin-hint data-orbytes-pin-ui="lab-hint" hidden>
+        Click any element to pin it · Esc to stop
+      </p>
+    )
+  }
+  {parameters && <aside class="lab-params" data-lab-params hidden aria-label="Parameters"></aside>}
 </div>
 
 <script>

package/src/chrome/icons.ts

@@ -41,6 +41,12 @@ export const ICONS = {
   "link": "<path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" />", // link
   "expand": "<path d=\"M15 3h6v6\" /><path d=\"m21 3-7 7\" /><path d=\"m3 21 7-7\" /><path d=\"M9 21H3v-6\" />", // maximize-2
   "external": "<path d=\"M15 3h6v6\" /><path d=\"M10 14 21 3\" /><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />", // external-link
+  "properties": "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />", // eye
+  "comment": "<path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />", // message-circle
+  "marker": "<path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" /><circle cx=\"12\" cy=\"10\" r=\"3\" />", // map-pin
+  "staging": "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\" /><path d=\"M2 12h20\" />", // globe
+  "reload-page": "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" /><path d=\"M3 3v5h5\" />", // rotate-ccw
+  "parameters": "<path d=\"M10 8h4\" /><path d=\"M12 21v-9\" /><path d=\"M12 8V3\" /><path d=\"M17 16h4\" /><path d=\"M19 12V3\" /><path d=\"M19 21v-5\" /><path d=\"M3 14h4\" /><path d=\"M5 10V3\" /><path d=\"M5 21v-7\" />", // sliders-vertical
   "reload": "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" /><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /><path d=\"M8 16H3v5\" />", // refresh-cw
   "rotate": "<path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" />", // rotate-cw
   "monitor": "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\" /><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\" /><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\" />", // monitor
@@ -48,6 +54,9 @@ export const ICONS = {
   "phone": "<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\" /><path d=\"M12 18h.01\" />", // smartphone
   "phone-landscape": "<g transform=\"rotate(90 12 12)\"><rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\" /><path d=\"M12 18h.01\" /></g>", // smartphone, turned a quarter
   "params": "<path d=\"M10 5H3\" /><path d=\"M12 19H3\" /><path d=\"M14 3v4\" /><path d=\"M16 17v4\" /><path d=\"M21 12h-9\" /><path d=\"M21 19h-5\" /><path d=\"M21 5h-7\" /><path d=\"M8 10v4\" /><path d=\"M8 12H3\" />", // sliders-horizontal
+  "reset": "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" /><path d=\"M3 3v5h5\" />", // rotate-ccw
+  "copy": "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" /><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />", // copy
+  "help": "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" /><path d=\"M12 17h.01\" />", // circle-help
   "close": "<path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />", // x
   "more": "<circle cx=\"12\" cy=\"12\" r=\"1\" /><circle cx=\"19\" cy=\"12\" r=\"1\" /><circle cx=\"5\" cy=\"12\" r=\"1\" />", // ellipsis
   "component": "<path d=\"M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z\" /><path d=\"M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z\" /><path d=\"M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z\" /><path d=\"M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z\" />", // component

package/src/chrome/marks-client.ts

@@ -1,18 +1,18 @@
-// The status menu's marks — responsive (approved / done) and marked-for-deletion — on the dev
-// server's two mark APIs (../../index.mjs). Both are dev-only middleware: on a staging build the
-// probe fails, the boxes stay disabled and show the state the page was built with, and the menu
-// says why. The box always shows the server's answer, never the click's.
+// The responsive marks in the Properties panel (./Properties.astro) — "approved for responsive
+// work" and "made responsive" — on the dev server's responsive API (../../index.mjs). It is
+// dev-only middleware: on a staging build the probe fails, the boxes stay disabled and show the
+// state the page was built with, and the panel says why. The box always shows the server's
+// answer, never the click's.
 //
 //   GET /__lab/responsive → { done, approved }   PUT { done, approved }
-//   GET /__lab/cull       → { marked }           PUT { marked }   (400 with offenders if refused)
+//
+// There is no deletion mark any more: mark for deletion was removed from the lab as a feature
+// (decided 2026-09-24).
 const boxes = [...document.querySelectorAll<HTMLInputElement>("input[data-lab-mark]")];
 const note = document.querySelector<HTMLElement>("[data-lab-marks-note]");
-const respPill = document.querySelector<HTMLElement>("[data-lab-resp-pill]");
-const cullPill = document.querySelector<HTMLElement>("[data-lab-cull-pill]");
 
 type Resp = { done: string[]; approved: string[] };
 let resp: Resp | null = null;
-let marked: string[] | null = null;
 
 const getJson = async (url: string) => {
   const response = await fetch(url, { headers: { accept: "application/json" } });
@@ -26,35 +26,16 @@ const putJson = async (url: string, body: unknown) => {
     body: JSON.stringify(body),
   });
   const data = await response.json().catch(() => ({}));
-  if (!response.ok) {
-    const names = Array.isArray(data.offenders) ? data.offenders.map((o: { reason?: string }) => o.reason).join("; ") : "";
-    throw new Error(`${data.error || `HTTP ${response.status}`}${names ? ` — ${names}` : ""}`);
-  }
+  if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
   return data;
 };
 
 const paint = () => {
+  if (!resp) return;
   for (const box of boxes) {
-    const file = box.dataset.file!;
-    const kind = box.dataset.labMark;
-    if (kind === "cull") {
-      if (marked) {
-        box.checked = marked.includes(file);
-        box.disabled = Boolean(box.dataset.blocked);
-      }
-    } else if (resp) {
-      box.checked = (kind === "done" ? resp.done : resp.approved).includes(file);
-      box.disabled = false;
-    }
+    box.checked = (box.dataset.labMark === "done" ? resp.done : resp.approved).includes(box.dataset.file!);
+    box.disabled = false;
   }
-  const doneBox = boxes.find((b) => b.dataset.labMark === "done");
-  if (respPill && doneBox && resp) {
-    respPill.textContent = doneBox.checked ? "responsive" : "not responsive";
-    respPill.classList.toggle("lab-pill--responsive", doneBox.checked);
-    respPill.classList.toggle("lab-pill--unresponsive", !doneBox.checked);
-  }
-  const cullBox = boxes.find((b) => b.dataset.labMark === "cull");
-  if (cullPill) cullPill.hidden = !(cullBox && cullBox.checked);
 };
 
 const say = (text: string) => {
@@ -62,35 +43,27 @@ const say = (text: string) => {
 };
 
 if (boxes.length) {
-  const wantsResp = boxes.some((b) => b.dataset.labMark !== "cull");
-  const wantsCull = boxes.some((b) => b.dataset.labMark === "cull");
-  Promise.allSettled([
-    wantsResp ? getJson("/__lab/responsive").then((d: Resp) => (resp = { done: d.done ?? [], approved: d.approved ?? [] })) : null,
-    wantsCull ? getJson("/__lab/cull").then((d: { marked?: string[] }) => (marked = d.marked ?? [])) : null,
-  ]).then(() => {
-    if (resp || marked) say("Saved to your repo as you tick.");
-    paint();
-  });
+  getJson("/__lab/responsive")
+    .then((d: Resp) => {
+      resp = { done: d.done ?? [], approved: d.approved ?? [] };
+      paint();
+    })
+    .catch(() => say("Marks can be changed on the dev server only."));
 
   for (const box of boxes) {
     box.addEventListener("change", async () => {
+      if (!resp) return;
       const file = box.dataset.file!;
-      const kind = box.dataset.labMark;
       const want = box.checked;
       box.checked = !want; // the server's answer decides
+      const set = new Set(box.dataset.labMark === "done" ? resp.done : resp.approved);
+      if (want) set.add(file);
+      else set.delete(file);
+      const body = box.dataset.labMark === "done" ? { done: [...set], approved: resp.approved } : { done: resp.done, approved: [...set] };
       try {
-        if (kind === "cull" && marked) {
-          const next = want ? [...new Set([...marked, file])] : marked.filter((f) => f !== file);
-          marked = (await putJson("/__lab/cull", { marked: next })).marked ?? next;
-        } else if (resp) {
-          const set = new Set(kind === "done" ? resp.done : resp.approved);
-          if (want) set.add(file);
-          else set.delete(file);
-          const body = kind === "done" ? { done: [...set], approved: resp.approved } : { done: resp.done, approved: [...set] };
-          const data = await putJson("/__lab/responsive", body);
-          resp = { done: data.done ?? body.done, approved: data.approved ?? body.approved };
-        }
-        say("Saved.");
+        const data = await putJson("/__lab/responsive", body);
+        resp = { done: data.done ?? body.done, approved: data.approved ?? body.approved };
+        say("Saved to the repo.");
       } catch (error) {
         say(`Not saved: ${(error as Error).message}`);
       }

package/src/chrome/model.ts

@@ -8,6 +8,9 @@ import type { IconName } from "./icons";
 import { labBase } from "../shell/lab-index";
 import storyModules from "virtual:astrobook/story-modules.mjs";
 
+/** The tier that holds page sections — its level 2 is the Sections tree. Null when none is set. */
+export const sectionsTier: string | null = labConfig.sectionsTier ?? null;
+
 /** Tiers that hold at least one stories file — an empty tier is not worth a row in level 1. */
 const tiersInUse = new Set(storyModules.map((mod) => mod.directory.split("/")[0] ?? ""));
 
@@ -31,6 +34,17 @@ export interface TreeNode {
   facets?: string;
   disabled?: boolean;
   title?: string;
+  /**
+   * The Sections tree's slot badge (./SectionsTree.astro): where the row is mounted, or null for
+   * "on no page". A root row carrying this key makes the whole tree a Sections tree.
+   */
+  slot?: { n: number; of: number; page: string } | null;
+  /** Which half of the Sections tree a root row sits in: mounted first, the rest under a heading. */
+  group?: "slotted" | "unslotted";
+  /** The row's place in each sort order, so a remembered "Name" sort applies before paint. */
+  order?: { slot: number; name: number };
+  /** Draw the children only while this row holds the current page (a section's versions). */
+  childrenWhenCurrent?: boolean;
 }
 
 export interface Crumb {