@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/src/chrome/StoryView.astro

@@ -0,0 +1,251 @@
+---
+// A component's page — <subpath>/dashboard/<storyId>, the route Astrobook's core generates for every
+// story (../core/lib/pages/story.astro renders this). REDESIGNED 2026-09-24:
+//
+//   · the story is an <iframe> of its bare route on a canvas you size (./ViewportStage.astro), no
+//     longer rendered inline beside the chrome — so this page carries none of the site's CSS;
+//   · the tree stops at the component, and the component's stories are TABS here, a dropdown past
+//     four; previous / next (and j / k) step through every story of the tier in tree order;
+//   · the component's marks (responsive, marked for deletion) live in the status menu behind its
+//     pills, and everything that leaves the lab (VS Code, full screen, staging, a link) in ⋯.
+//
+// The navbar is interim — ops/navbar-brief.md is the design it will be replaced with.
+import Shell from "./Shell.astro";
+import Tree from "./Tree.astro";
+import Icon from "./Icon.astro";
+import ViewportControls from "./ViewportControls.astro";
+import ViewportStage from "./ViewportStage.astro";
+import { hrefs, labConfig, type Crumb, type TreeNode } from "./model";
+import { componentsOf, tierTree } from "./trees";
+import { pinCounts } from "./pins-data";
+import { buildLabIndex, isSectionLike, livePillText, liveTitle, 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 openPins = pins.openFor(mod.componentFile);
+const liveStory = mod.stories.find((s) => s.live);
+const section = isSectionLike(item);
+const tierDef = labConfig.tiers.find((t) => t.id === item.tier);
+const cullable = Boolean(tierDef?.cullable);
+const blocked = mod.live
+  ? "live on the site — cannot be marked"
+  : mod.usedBy.length
+    ? `used by ${mod.usedBy.length} live component${mod.usedBy.length === 1 ? "" : "s"} — cannot be marked`
+    : null;
+
+// 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 TAB_LIMIT = 4;
+---
+
+<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} />
+
+  <Fragment slot="navbar">
+    <div class="lab-navbar__id">
+      <h1 class="lab-navbar__title">
+        {mod.moduleName}
+        {mod.version && <small>{mod.version}</small>}
+      </h1>
+      <button class="lab-status-btn" type="button" popovertarget="lab-status-menu" title="Status and marks">
+        {liveStory && <span class="lab-pill lab-pill--live" title={liveTitle(liveStory)}>{livePillText(liveStory)}</span>}
+        {!mod.live && mod.usedBy.length > 0 && <span class="lab-pill lab-pill--used">used by {mod.usedBy.length}</span>}
+        {!mod.live && !mod.usedBy.length && <span class="lab-pill">unused</span>}
+        {mod.responsive && (
+          <span class:list={["lab-pill", mod.responsive.done ? "lab-pill--responsive" : "lab-pill--unresponsive"]} data-lab-resp-pill>
+            {mod.responsive.done ? "responsive" : "not responsive"}
+          </span>
+        )}
+        <span class="lab-pill lab-pill--marked" data-lab-cull-pill hidden>marked for deletion</span>
+        {openPins > 0 && <span class="lab-pill lab-pill--brand">{openPins} open pin{openPins === 1 ? "" : "s"}</span>}
+        <Icon name="chevron-down" size="sm" />
+      </button>
+    </div>
+
+    <nav class="lab-tabs" aria-label="Stories">
+      {
+        mod.stories.length <= TAB_LIMIT ? (
+          mod.stories.map((s) => (
+            <a
+              class="lab-tab"
+              href={s.dashboardUrl}
+              aria-current={s.storyId === item.storyId ? "page" : undefined}
+              data-lab-keep-viewport
+            >
+              {s.storyName}
+            </a>
+          ))
+        ) : (
+          <>
+            <button class="lab-btn lab-btn--sm" type="button" popovertarget="lab-story-menu">
+              {item.storyName}
+              <span class="lab-tabs__count">{mod.stories.indexOf(item) + 1} / {mod.stories.length}</span>
+              <Icon name="chevron-down" />
+            </button>
+            <div class="lab-menu" id="lab-story-menu" popover role="menu">
+              <p class="lab-menu__label">{mod.stories.length} stories</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
+                >
+                  {s.storyName}
+                  <Icon name="check" size="sm" class="lab-menu__tick" />
+                </a>
+              ))}
+            </div>
+          </>
+        )
+      }
+    </nav>
+
+    <div class="lab-navbar__tools">
+      <div class="lab-seg" role="group" aria-label="Previous and next story">
+        {
+          prev ? (
+            <a class="lab-btn lab-btn--sm lab-btn--icon" href={prev.dashboardUrl} title={`Previous: ${prev.moduleName} — ${prev.storyName} (k)`} data-lab-step="prev" data-lab-keep-viewport>
+              <Icon name="chevron-left" />
+              <span class="lab-visually-hidden">Previous story</span>
+            </a>
+          ) : (
+            <span class="lab-btn lab-btn--sm lab-btn--icon" aria-disabled="true" data-lab-step><Icon name="chevron-left" /></span>
+          )
+        }
+        {
+          next ? (
+            <a class="lab-btn lab-btn--sm lab-btn--icon" href={next.dashboardUrl} title={`Next: ${next.moduleName} — ${next.storyName} (j)`} data-lab-step="next" data-lab-keep-viewport>
+              <Icon name="chevron-right" />
+              <span class="lab-visually-hidden">Next story</span>
+            </a>
+          ) : (
+            <span class="lab-btn lab-btn--sm lab-btn--icon" aria-disabled="true" data-lab-step><Icon name="chevron-right" /></span>
+          )
+        }
+      </div>
+    </div>
+
+    <ViewportControls defaultW={section ? 1440 : 960} defaultH={section ? 900 : 540} kind={section ? "section" : "component"} />
+
+    <div class="lab-navbar__tools">
+      <button class="lab-btn lab-btn--sm lab-btn--icon" type="button" popovertarget="lab-actions-menu" title="More">
+        <Icon name="more" />
+        <span class="lab-visually-hidden">More actions</span>
+      </button>
+    </div>
+
+    <div class="lab-menu" id="lab-actions-menu" popover role="menu" data-lab-align="end">
+      {
+        item.editorUrl && (
+          <a class="lab-menu__item" role="menuitem" href={item.editorUrl}>
+            <Icon name="code" />
+            Open in VS Code
+          </a>
+        )
+      }
+      <a class="lab-menu__item" role="menuitem" href={item.storyUrl} target="_blank" rel="noopener">
+        <Icon name="expand" />
+        Open full screen
+      </a>
+      {
+        item.stagingUrl && (
+          <a class="lab-menu__item" role="menuitem" href={item.stagingUrl} target="_blank" rel="noopener">
+            <Icon name="external" />
+            View on staging
+          </a>
+        )
+      }
+      <button class="lab-menu__item" type="button" role="menuitem" data-lab-copy-link>
+        <Icon name="link" />
+        <span data-lab-copy-label>Copy link to this size</span>
+      </button>
+    </div>
+
+    <div class="lab-menu lab-status-menu" id="lab-status-menu" popover role="menu">
+      <p class="lab-menu__label">On the site</p>
+      <p class="lab-status-menu__fact">
+        {
+          liveStory
+            ? liveStory.liveOn.map((m) => `${m.page} · slot ${m.slot} of ${m.of}`).join(", ")
+            : mod.usedBy.length
+              ? `Used by ${mod.usedBy.map((f) => f.split("/").pop()).join(", ")}`
+              : "Not mounted by any page, and nothing live uses it."
+        }
+      </p>
+      {
+        mod.componentFile && (
+          <p class="lab-status-menu__fact lab-mono">{mod.componentFile}</p>
+        )
+      }
+      {
+        mod.responsive && (
+          <>
+            <hr />
+            <p class="lab-menu__label">Responsive</p>
+            <label class="lab-menu__item lab-menu__check">
+              <input type="checkbox" data-lab-mark="approved" data-file={mod.moduleFile} checked={mod.responsive.approved} disabled />
+              Approved for responsive work
+            </label>
+            <label class="lab-menu__item lab-menu__check">
+              <input type="checkbox" data-lab-mark="done" data-file={mod.moduleFile} checked={mod.responsive.done} disabled />
+              Made responsive
+            </label>
+          </>
+        )
+      }
+      {
+        cullable && (
+          <>
+            <hr />
+            <p class="lab-menu__label">Clean-up</p>
+            <label class="lab-menu__item lab-menu__check" title={blocked ?? undefined}>
+              <input type="checkbox" data-lab-mark="cull" data-file={mod.moduleFile} data-blocked={blocked ?? undefined} disabled />
+              Mark for deletion
+            </label>
+            {blocked && <p class="lab-status-menu__fact">{blocked}</p>}
+          </>
+        )
+      }
+      <p class="lab-status-menu__note" data-lab-marks-note>Marks can be changed on the dev server only.</p>
+    </div>
+  </Fragment>
+
+  <ViewportStage src={item.storyUrl} title={`${mod.moduleName} — ${item.storyName}`} />
+</Shell>
+
+<script>
+  import "./marks-client";
+</script>

package/src/chrome/Tree.astro

@@ -0,0 +1,83 @@
+---
+// 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.
+import Icon from "./Icon.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;
+
+/** 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();
+---
+
+<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 icon = node.icon ?? (hasChildren ? "folder" : "page");
+      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}
+              >
+                <Icon name={icon} size="sm" />
+                <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
+            >
+              <Icon name={icon} size="sm" />
+              <span class="lab-tree__label">{node.label}</span>
+              {trailing}
+            </a>
+          ) : (
+            <span class="lab-tree__row" role="treeitem" aria-disabled="true" title={node.title}>
+              <Icon name={icon} size="sm" />
+              <span class="lab-tree__label">{node.label}</span>
+              {trailing}
+            </span>
+          )}
+        </li>
+      );
+    })
+  }
+</ul>

package/src/chrome/ViewportControls.astro

@@ -0,0 +1,98 @@
+---
+// 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.
+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;
+}
+
+const { defaultW, defaultH, kind } = Astro.props;
+const { design, breakpoints, devices } = labConfig.viewports;
+const edges = breakpoints.filter((b) => b.min > 0).flatMap((b) => [b.min, b.min - 1]);
+const zooms = [25, 50, 75, 100, 150, 200];
+---
+
+<div
+  class="lab-navbar__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-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-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>
+
+  <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>
+    {
+      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>
+        </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>
+        </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

@@ -0,0 +1,32 @@
+---
+// 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, and exists only for a story that registered parameters.
+interface Props {
+  src: string;
+  title: string;
+}
+
+const { src, title } = 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>
+    </div>
+  </div>
+  <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,59 @@
+// 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
+  "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
+  "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;