@orbytes/astrolab 0.3.0 → 0.4.0-next.2

package/src/chrome/ViewportControls.astro

@@ -0,0 +1,173 @@
+---
+// 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";
+
+interface Props {
+  /** The frame's size when neither the URL nor the last visit names one. */
+  defaultW: number;
+  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, 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-nb__tools"
+  data-lab-vp-controls
+  data-kind={kind}
+  data-default-w={defaultW}
+  data-default-h={defaultH}
+  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-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-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>
+
+  <div class="lab-nb__overlays">
+    {
+      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>
+      )
+    }
+    {
+      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>
+</div>

package/src/chrome/ViewportStage.astro

@@ -0,0 +1,55 @@
+---
+// The canvas: the story or page in an <iframe> whose LOGICAL size is set by the controls or by
+// 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. 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, pins = false, tasksHref = null, parameters = false } = Astro.props;
+---
+
+<div class="lab-vp" data-lab-vp>
+  <div class="lab-vp-stage" data-lab-vp-stage>
+    <div class="lab-vp-box" data-lab-vp-box>
+      <div class="lab-vp-wrapper" data-lab-vp-wrapper>
+        <iframe src={src} title={title} data-lab-vp-frame></iframe>
+      </div>
+      <div class="lab-vp-handle lab-vp-handle--e" data-axis="x" title="Drag to resize the width" aria-hidden="true"></div>
+      <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>
+  {
+    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>
+  import "./viewport-client";
+</script>

package/src/chrome/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/chrome/icons.ts

@@ -0,0 +1,68 @@
+// The chrome's icon set: Lucide 1.47.0 (lucide-static), ISC — a few shapes Lucide inherited from
+// Feather are MIT. Both notices are in ./LICENSE-icons, which must travel with this file.
+//
+// WHY LUCIDE AND NOT THE DESIGN'S OWN ICONS (2026-09-24). The Figma file draws Untitled UI icons.
+// Their npm package declares "MIT" in package.json, but the licence file it ships forbids
+// distributing the icons in original or modified form — and this package is published to npm, so
+// bundling them would be distributing them. Lucide draws the same 24px, 2px-stroke, round-cap
+// family, so each design icon maps to its nearest Lucide shape by name below; the right-hand
+// comment is the Lucide file each one came from.
+//
+// Every icon is `fill="none" stroke="currentColor"` (set once on the <symbol> in ./Sprite.astro), so
+// it takes the colour of the text around it and themes with the chrome for free.
+export const ICONS = {
+  "home": "<path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\" /><path d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />", // house
+  "site": "<path d=\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\" /><path d=\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\" /><path d=\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\" />", // layers
+  "sections": "<path d=\"M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z\" /><path d=\"m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845\" />", // layers-2
+  "pages": "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" />", // file
+  "page": "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" />", // file
+  "components": "<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
+  "assets": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" /><circle cx=\"9\" cy=\"9\" r=\"2\" /><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\" />", // image
+  "tasks": "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\" /><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\" /><path d=\"m9 14 2 2 4-4\" />", // clipboard-check
+  "board": "<path d=\"m12.296 3.464 3.02 3.956\" /><path d=\"M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z\" /><path d=\"M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" /><path d=\"m6.18 5.276 3.1 3.899\" />", // clapperboard
+  "all-tasks": "<path d=\"m12 15 2 2 4-4\" /><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-check
+  "support": "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m4.93 4.93 4.24 4.24\" /><path d=\"m14.83 9.17 4.24-4.24\" /><path d=\"m14.83 14.83 4.24 4.24\" /><path d=\"m9.17 14.83-4.24 4.24\" /><circle cx=\"12\" cy=\"12\" r=\"4\" />", // life-buoy
+  "settings": "<path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />", // settings
+  "chevron-down": "<path d=\"m6 9 6 6 6-6\" />", // chevron-down
+  "chevron-up": "<path d=\"m18 15-6-6-6 6\" />", // chevron-up
+  "chevron-right": "<path d=\"m9 18 6-6-6-6\" />", // chevron-right
+  "chevron-left": "<path d=\"m15 18-6-6 6-6\" />", // chevron-left
+  "chevrons-left": "<path d=\"m11 17-5-5 5-5\" /><path d=\"m18 17-5-5 5-5\" />", // chevrons-left
+  "chevrons-right": "<path d=\"m6 17 5-5-5-5\" /><path d=\"m13 17 5-5-5-5\" />", // chevrons-right
+  "search": "<path d=\"m21 21-4.34-4.34\" /><circle cx=\"11\" cy=\"11\" r=\"8\" />", // search
+  "filter": "<path d=\"M2 5h20\" /><path d=\"M6 12h12\" /><path d=\"M9 19h6\" />", // list-filter
+  "folder": "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />", // folder
+  "coffee": "<path d=\"M10 2v2\" /><path d=\"M14 2v2\" /><path d=\"M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1\" /><path d=\"M6 2v2\" />", // coffee
+  "panel-close": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M9 3v18\" /><path d=\"m16 15-3-3 3-3\" />", // panel-left-close
+  "panel-open": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M9 3v18\" /><path d=\"m14 9 3 3-3 3\" />", // panel-left-open
+  "sun": "<circle cx=\"12\" cy=\"12\" r=\"4\" /><path d=\"M12 2v2\" /><path d=\"M12 20v2\" /><path d=\"m4.93 4.93 1.41 1.41\" /><path d=\"m17.66 17.66 1.41 1.41\" /><path d=\"M2 12h2\" /><path d=\"M20 12h2\" /><path d=\"m6.34 17.66-1.41 1.41\" /><path d=\"m19.07 4.93-1.41 1.41\" />", // sun
+  "moon": "<path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" />", // moon
+  "code": "<path d=\"m18 16 4-4-4-4\" /><path d=\"m6 8-4 4 4 4\" /><path d=\"m14.5 4-5 16\" />", // code-xml
+  "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
+  "tablet": "<rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\" ry=\"2\" /><line x1=\"12\" x2=\"12.01\" y1=\"18\" y2=\"18\" />", // tablet
+  "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
+  "story": "<path d=\"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z\" />", // bookmark
+  "pin": "<path d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z\" />", // message-square
+  "check": "<path d=\"M20 6 9 17l-5-5\" />", // check
+} as const;
+
+export type IconName = keyof typeof ICONS;

package/src/chrome/marks-client.ts

@@ -0,0 +1,75 @@
+// 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 }
+//
+// 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]");
+
+type Resp = { done: string[]; approved: string[] };
+let resp: Resp | null = null;
+
+const getJson = async (url: string) => {
+  const response = await fetch(url, { headers: { accept: "application/json" } });
+  if (!response.ok) throw new Error(String(response.status));
+  return response.json();
+};
+const putJson = async (url: string, body: unknown) => {
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: { "content-type": "application/json", accept: "application/json" },
+    body: JSON.stringify(body),
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
+  return data;
+};
+
+const paint = () => {
+  if (!resp) return;
+  for (const box of boxes) {
+    box.checked = (box.dataset.labMark === "done" ? resp.done : resp.approved).includes(box.dataset.file!);
+    box.disabled = false;
+  }
+};
+
+const say = (text: string) => {
+  if (note) note.textContent = text;
+};
+
+if (boxes.length) {
+  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 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 {
+        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}`);
+      }
+      paint();
+    });
+  }
+}
+
+export {};

package/src/chrome/model.ts

@@ -0,0 +1,156 @@
+// The chrome's data shapes, and the one place that decides what level 1 lists.
+//
+// Server-side only: everything here runs in the .astro frontmatter of a chrome page (dev: per
+// request; staging: once, at build). Nothing is sent to the browser but the HTML it renders.
+/// <reference path="../../virtual.d.ts" />
+import labConfig from "virtual:orbytes-lab/config.mjs";
+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] ?? ""));
+
+/** One row of a level 2 tree. A node with `children` is a group; one with only `href` is a leaf. */
+export interface TreeNode {
+  /** Stable across requests — the key its open/closed state is remembered under. */
+  id: string;
+  label: string;
+  href?: string;
+  icon?: IconName;
+  children?: TreeNode[];
+  /** This row is the page being shown. Its ancestors are forced open. */
+  current?: boolean;
+  /** The one-glyph status: live on the site, used by something live, an open task, or muted. */
+  dot?: "live" | "used" | "open" | "muted";
+  dotTitle?: string;
+  count?: number | string;
+  /** Extra words the panel search matches, beyond the label. */
+  search?: string;
+  /** Values the panel filter menu matches against, space-separated (e.g. "live section"). */
+  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 {
+  label: string;
+  href?: string;
+}
+
+/** One choice in the level 2 filter menu. `value` is matched against a node's `facets`. */
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Which level 1 item a page belongs to. Tiers are the consumer's (`tiers` option), so they are
+ * keyed by id rather than listed here.
+ */
+export type NavKey =
+  | "home"
+  | "pages"
+  | `tier:${string}`
+  | "assets"
+  | "tasks-board"
+  | "tasks-all"
+  | "support"
+  | "settings";
+
+export interface NavItem {
+  key: NavKey;
+  label: string;
+  href: string;
+  icon: IconName;
+}
+
+export interface NavGroup {
+  id: string;
+  label: string;
+  icon: IconName;
+  items: NavItem[];
+}
+
+/** The tier's icon: the two conventional tiers get the design's own; anything else a component. */
+const tierIcon = (id: string): IconName =>
+  id === labConfig.sectionsTier || id === "sections" ? "sections" : id === "components" ? "components" : "component";
+
+/** Where the task views live, or null when the pin board is not running (a build, or `pin: false`). */
+export const tasksBase: string | null = labConfig.tasks ? labConfig.tasks.base : null;
+
+export const hrefs = {
+  home: labBase || "/",
+  pages: `${labBase}/pages`,
+  page: (route: string) => `${labBase}/pages/${route === "/" ? "index" : route.replace(/^\/+/, "")}`,
+  tier: (id: string) => `${labBase}/browse/${id}`,
+  folder: (path: string) => `${labBase}/browse/${path}`,
+  assets: `${labBase}/assets`,
+  support: `${labBase}/support`,
+  settings: `${labBase}/settings`,
+};
+
+export const navModel = (): { home: NavItem; groups: NavGroup[]; footer: NavItem[] } => {
+  const site: NavGroup = {
+    id: "site",
+    label: "Site",
+    icon: "site",
+    items: [
+      { key: "pages", label: "Pages", href: hrefs.pages, icon: "pages" },
+      ...labConfig.tiers.filter((tier) => tiersInUse.has(tier.id)).map((tier) => ({
+        key: `tier:${tier.id}` as NavKey,
+        label: tier.label,
+        href: hrefs.tier(tier.id),
+        icon: tierIcon(tier.id),
+      })),
+      { key: "assets", label: "Assets", href: hrefs.assets, icon: "assets" },
+    ],
+  };
+  const groups = [site];
+  // Tasks are the pin board, which is dev only — so the group exists only where the board does.
+  if (tasksBase) {
+    groups.push({
+      id: "tasks",
+      label: "Tasks",
+      icon: "tasks",
+      items: [
+        { key: "tasks-board", label: "Kanban Board", href: tasksBase, icon: "board" },
+        { key: "tasks-all", label: "All Tasks", href: `${tasksBase}/all`, icon: "all-tasks" },
+      ],
+    });
+  }
+  return {
+    home: { key: "home", label: "Home", href: hrefs.home, icon: "home" },
+    groups,
+    footer: [
+      { key: "support", label: "Support", href: hrefs.support, icon: "support" },
+      { key: "settings", label: "Settings", href: hrefs.settings, icon: "settings" },
+    ],
+  };
+};
+
+/** The group a nav key sits in, for the breadcrumb ("Site › Pages"). */
+export const crumbsFor = (key: NavKey, extra: Crumb[] = []): Crumb[] => {
+  const model = navModel();
+  for (const group of model.groups) {
+    const item = group.items.find((i) => i.key === key);
+    if (item) return [{ label: group.label }, { label: item.label, href: item.href }, ...extra];
+  }
+  return extra;
+};
+
+export { labBase, labConfig };