@pramen/cms-editor 0.0.60 → 0.0.63

package/src/cover.tsx

@@ -0,0 +1,163 @@
+// The page header's generated cover art.
+//
+// A Notion page opens with a cover, and a CMS screen has the same problem a Notion page has:
+// six list screens whose only difference is a word at the top read as one screen you keep
+// landing on. The cover is what makes "Media" and "Menus" recognisable before the type is.
+//
+// So it is DERIVED, not chosen: a hash of the screen's name seeds a PRNG, and the PRNG lays
+// out a Truchet field — a grid of quarter-circle arcs whose per-tile orientation is the only
+// random thing about it. Same name, same picture, forever; a new collection gets its own
+// without anyone drawing one. That is the whole appeal over a stock image: nothing to author,
+// nothing to upload, and no screen that looks like another.
+//
+// Two rules govern every choice below, and both come from what this art sits UNDER:
+//
+//   LEGIBILITY. The header carries 56px type and the primary action. Line work is
+//   `currentColor` at low alpha — a tint of the foreground, so it is dark on the light theme
+//   and light on the dark one BY CONSTRUCTION. That matters here specifically: podoba does
+//   not redefine its accent tokens per theme, so a fixed accent stroke would be near-white
+//   mint on a white ground in light, or near-black blue on a dark ground in dark. Colour
+//   therefore arrives as a WASH at ~0.14 alpha, which survives either ground, and the left
+//   third fades to the panel colour so the title never sits on pattern.
+//
+//   NO DEPENDENCY, NO CANVAS, NO NETWORK. It is one inline SVG built during render: ~50
+//   paths, no measuring, no effects, no images to load, and it prints and scales.
+
+import type { ReactElement } from "react";
+
+/** Tiles across and down. The banner is wide and short and the SVG is `slice`-fitted, so
+ * these are a RATIO more than a count: the field fits by WIDTH and is cropped vertically,
+ * which is what makes it bleed to the panel edges at any header height.
+ *
+ * Tuned by looking at it. A 14×3 field puts ~80px tiles in a 1140px panel, and at that size a
+ * Truchet arc stops being a woven line and becomes a big soft loop — organic, which is the
+ * wrong register next to Swiss type. Finer tiles read as the precise, drawn-by-a-machine
+ * pattern this is meant to be. */
+const COLS = 20;
+const ROWS = 5;
+
+/**
+ * FNV-1a, 32-bit.
+ *
+ * Not for security — for a stable, well-mixed number from a short string. Stability is the
+ * requirement that rules out `Math.random` and anything else stateful: the same screen has to
+ * draw the same picture on every render, in every browser, after every deploy.
+ *
+ * `>>> 0` after the multiply keeps it in unsigned 32-bit; JS bitwise ops work on int32, so
+ * without it the accumulator goes negative and the mixing degrades.
+ */
+export function hashSeed(input: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return h >>> 0;
+}
+
+/** mulberry32 — a tiny, well-distributed PRNG. Seeded once per cover, so the sequence (and
+ * therefore the picture) is a pure function of the name. */
+export function seededRandom(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * The accents a wash may use.
+ *
+ * A CLOSED list of podoba tokens, not a hue rotation: the point is a page that looks like it
+ * belongs to this product, and a free hue would put colours in the chrome that exist nowhere
+ * else in it. Every entry is mid-toned, which is what lets one alpha work on both the white
+ * and the near-black ground — the very light tokens (`accent-mint`) vanish on white and the
+ * very dark one (`accent-blue`) vanishes on the dark theme, so neither is in here.
+ */
+export const COVER_ACCENTS: readonly string[] = [
+  "var(--color-accent-strong)",
+  "var(--color-brand-green)",
+  "var(--color-accent-green-lighter)",
+  "var(--color-accent-yellow)",
+  "var(--color-accent-pink)",
+];
+
+/** Which accent a given name gets. Exported because it is the one part of the picture worth
+ * asserting on directly: it must be stable, and it must be one of the five. */
+export function accentFor(seed: string): string {
+  return COVER_ACCENTS[hashSeed(`${seed}:accent`) % COVER_ACCENTS.length] as string;
+}
+
+/** One Truchet tile: two quarter arcs joining opposite edge midpoints, in one of two
+ * orientations. Both are drawn at unit scale and translated into place, so the whole field is
+ * resolution-independent and the stroke scales with the banner. */
+function tilePath(col: number, row: number, flipped: boolean): string {
+  const x = col;
+  const y = row;
+  return flipped
+    ? `M${x + 0.5} ${y} A0.5 0.5 0 0 0 ${x + 1} ${y + 0.5} M${x} ${y + 0.5} A0.5 0.5 0 0 0 ${x + 0.5} ${y + 1}`
+    : `M${x} ${y + 0.5} A0.5 0.5 0 0 0 ${x + 0.5} ${y} M${x + 1} ${y + 0.5} A0.5 0.5 0 0 0 ${x + 0.5} ${y + 1}`;
+}
+
+/**
+ * The cover for one screen, seeded by its name.
+ *
+ * Absolutely positioned to fill its (relative, `overflow-hidden`) parent — it is a
+ * background, and giving it its own box would make the header's height depend on the art
+ * rather than on the type in it.
+ *
+ * `aria-hidden`: it carries no information a reader could act on. The screen's name is in the
+ * `<h1>` right next to it, so announcing "image" here would add a stop on the way to the
+ * thing that is actually being labelled.
+ */
+export function CoverArt({ seed }: { seed: string }): ReactElement {
+  const rand = seededRandom(hashSeed(seed));
+  const accent = accentFor(seed);
+  // The wash's origin, kept to the RIGHT half: the title is set left, and colour pooling
+  // under it is exactly the contrast the header cannot afford.
+  const washX = 55 + rand() * 40;
+  const washY = 20 + rand() * 60;
+
+  const tiles: string[] = [];
+  for (let row = 0; row < ROWS; row++) {
+    for (let col = 0; col < COLS; col++) tiles.push(tilePath(col, row, rand() > 0.5));
+  }
+  // A few filled nodes where arcs meet — the one place the accent appears at full strength,
+  // and what stops a page's identity from being carried by geometry alone (two names can land
+  // on similar-looking fields; they will not also land on the same colour).
+  const dots = Array.from({ length: 5 }, () => ({
+    cx: 1 + rand() * (COLS - 2),
+    cy: 0.5 + rand() * (ROWS - 1),
+    r: 0.09 + rand() * 0.11,
+  }));
+
+  return (
+    <svg
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 h-full w-full text-fg"
+      viewBox={`0 0 ${COLS} ${ROWS}`}
+      preserveAspectRatio="xMidYMid slice"
+    >
+      <defs>
+        <radialGradient id={`wash-${hashSeed(seed)}`} cx={`${washX}%`} cy={`${washY}%`} r="70%">
+          <stop offset="0%" stopColor={accent} stopOpacity="0.34" />
+          <stop offset="100%" stopColor={accent} stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <rect width={COLS} height={ROWS} fill={`url(#wash-${hashSeed(seed)})`} />
+      <g fill="none" stroke="currentColor" strokeWidth="0.035" strokeLinecap="round" opacity="0.28">
+        {tiles.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </g>
+      <g fill={accent} opacity="0.5">
+        {dots.map((c) => (
+          <circle key={`${c.cx}-${c.cy}`} cx={c.cx} cy={c.cy} r={c.r} />
+        ))}
+      </g>
+    </svg>
+  );
+}

package/src/furniture.tsx

@@ -11,29 +11,25 @@
 
 import { Button, Heading, Input } from "@podoba/react";
 import { useCallback, useEffect, useState } from "react";
-import { useUnsavedGuard } from "./app-context";
+import { useApp, useUnsavedGuard } from "./app-context";
 import type { Api } from "./api";
 import { CONTROL, RichText, slugify } from "./fields";
 import { ROW, WRAP } from "./chrome";
+import { useCrumb } from "./breadcrumb";
+import { PageHeader } from "./page-header";
 import type { CollectionMeta, Menu, MenuItem, MenuItemKind, Page, Redirect, RichTextDoc, Taxonomy, Term, Widget, WidgetArea } from "./types";
-import { MAX_MENU_DEPTH, REDIRECT_STATUSES } from "./types";
+import { MAX_MENU_DEPTH, REDIRECT_STATUSES, TAXONOMY_TARGET_LABELS, TAXONOMY_TARGETS } from "./types";
+import type { TaxonomyTarget } from "./types";
 
 
 export function errText(e: unknown): string {
   return String((e as Error)?.message ?? e);
 }
 
-function Head({ lead, em, children }: { lead: string; em: string; children?: React.ReactNode }) {
-  return (
-    <div className="mb-6 mt-6 flex items-end justify-between gap-6 max-[820px]:flex-col max-[820px]:items-start">
-      <h1 className="m-0 text-[40px] font-normal leading-[1.1] tracking-[-0.01em]">
-        <span className="block text-fg-subtle">{lead}</span>
-        <span className="block text-fg">{em}</span>
-      </h1>
-      {children}
-    </div>
-  );
-}
+/** The site-furniture screens' header. `Head` stays as the local name the four call sites
+ * below already use; it is the same component, at the same scale, as every other screen —
+ * see the note in `page-header.tsx` about why the smaller variant went away. */
+const Head = PageHeader;
 
 function Saved() {
   return <div className="rounded-lg border border-brand-green bg-brand-green/20 px-3.5 py-2.5 text-small text-fg">saved</div>;
@@ -84,9 +80,10 @@ export function MenusView({ api, onOpen, onError, canEdit }: { api: Api; onOpen:
   };
 
   return (
-    <div className={WRAP}>
+    <>
       <Head lead="Navigation" em={menus === null ? "Menus" : menus.length === 1 ? "1 menu" : `${menus.length} menus`} />
-      <div className="flex flex-col gap-2">
+      <div className={WRAP}>
+        <div className="flex flex-col gap-2">
         {menus === null ? <p className="text-fg-subtle">Loading…</p> : null}
         {menus?.length === 0 ? <p className="text-fg-subtle">No menus yet. A menu is read by name — <code>getMenu(&quot;primary&quot;)</code> — from your layout.</p> : null}
         {(menus ?? []).map((m) => (
@@ -110,7 +107,8 @@ export function MenusView({ api, onOpen, onError, canEdit }: { api: Api; onOpen:
           <Button className="mt-3" onPress={create} isDisabled={busy || !label.trim() || !name.trim()}>Create menu</Button>
         </div>
       ) : null}
-    </div>
+      </div>
+    </>
   );
 }
 
@@ -166,6 +164,9 @@ export function MenuEditor({ api, name, collections, onBack, onDeleted, onError,
 }) {
   const [menu, setMenu] = useState<Menu | null>(null);
   const [items, setItems] = useState<MenuItem[]>([]);
+  // The app bar's trailing crumb — the menu's LABEL once it has loaded, not the `name` key in
+  // the URL, which is what a layout gets to publish and is not what an editor calls it.
+  useCrumb(menu?.label);
   const [label, setLabel] = useState("");
   // The whole tree is edited locally and written only by "Save menu", so leaving the screen
   // discards it. Nothing prompted before this — `PageEditor` was the only screen that ever
@@ -440,9 +441,10 @@ export function RedirectsView({ api, onError, canEdit }: { api: Api; onError: (s
   };
 
   return (
-    <div className={WRAP}>
+    <>
       <Head lead="Old URLs, kept alive" em={rows === null ? "Redirects" : rows.length === 1 ? "1 redirect" : `${rows.length} redirects`} />
-      <p className="mb-4 max-w-[62ch] text-sm text-fg-muted">
+      <div className={WRAP}>
+        <p className="mb-4 max-w-[62ch] text-sm text-fg-muted">
         Changing a page&apos;s slug changes a live URL and breaks every link to it. A redirect is how the old one keeps working.
         Disabling one keeps the record of what the old URL was, which deleting it does not.
       </p>
@@ -486,21 +488,76 @@ export function RedirectsView({ api, onError, canEdit }: { api: Api; onError: (s
           <Button className="mt-3" onPress={create} isDisabled={busy || !from.trim() || !to.trim()}>Add redirect</Button>
         </div>
       ) : null}
-    </div>
+      </div>
+    </>
   );
 }
 
 // --- taxonomies -----------------------------------------------------------------------
 
+/** What a vocabulary classifies. `null` is EVERYTHING, and it is a real state rather than a
+ * shorthand for "all boxes ticked": a vocabulary that was never narrowed keeps applying to
+ * whatever the CMS grows next, where an explicit `["page","media"]` freezes it at today's two.
+ * So "Everything" is its own option, not the all-checked case. */
+function AppliesToField({ value, onChange, disabled }: { value: TaxonomyTarget[] | null; onChange: (v: TaxonomyTarget[] | null) => void; disabled?: boolean }) {
+  const toggle = (t: TaxonomyTarget) => {
+    const next = (value ?? []).includes(t) ? (value ?? []).filter((x) => x !== t) : [...(value ?? []), t];
+    // Unchecking the last one would mean a vocabulary nothing can use, which the server
+    // refuses — so it lands back on "Everything", the nearest thing the person meant.
+    onChange(next.length === 0 ? null : next);
+  };
+  return (
+    <div className="mt-3">
+      <span className="text-caption text-fg-subtle">Applies to</span>
+      {/* "Everything" gets its own line rather than sitting in the row as a third peer: a radio
+          beside two checkboxes reads as one group with mismatched controls, when it is actually
+          the choice ABOVE them — pick everything, or pick which. */}
+      <div className="mt-1 flex flex-col gap-1">
+        <label className="flex items-center gap-2">
+          <input type="radio" checked={value === null} disabled={disabled} onChange={() => onChange(null)} />
+          <span className="text-sm text-fg">Everything</span>
+        </label>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 pl-5">
+          {TAXONOMY_TARGETS.map((t) => (
+            <label key={t} className="flex items-center gap-2">
+              <input type="checkbox" checked={(value ?? []).includes(t)} disabled={disabled} onChange={() => toggle(t)} />
+              <span className="text-sm text-fg">{TAXONOMY_TARGET_LABELS[t]}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** How a vocabulary's scope reads in a list row. */
+function appliesToText(t: Taxonomy): string {
+  const list = t.appliesTo;
+  if (!Array.isArray(list) || list.length === 0) return "everything";
+  return list.map((x) => TAXONOMY_TARGET_LABELS[x] ?? x).join(" + ").toLowerCase();
+}
+
+
 export function TaxonomiesView({ api, onOpen, onError, canEdit }: { api: Api; onOpen: (slug: string) => void; onError: (s: string) => void; canEdit: boolean }) {
   const [taxa, setTaxa] = useState<Taxonomy[] | null>(null);
   const [label, setLabel] = useState("");
   const [slug, setSlug] = useState("");
   const [slugTouched, setSlugTouched] = useState(false);
   const [hierarchical, setHierarchical] = useState(false);
+  // `null` is "everything", which is also what an un-narrowed vocabulary stores — so the
+  // default here is the same value the server would have written anyway.
+  const [appliesTo, setAppliesTo] = useState<TaxonomyTarget[] | null>(null);
   const [busy, setBusy] = useState(false);
+  // Scoping a vocabulary and media tagging shipped together, and the flag is the same one for
+  // that reason: a server either has both or neither, and a second capability for the same
+  // release would be one that can never be false on its own. On an older server the field is
+  // hidden rather than offered and silently dropped.
+  const { cms: { mediaTerms: scopable } } = useApp();
 
   const refresh = useCallback(() => {
+    // No target: this is the screen that EDITS the scope, so it has to show a vocabulary it
+    // has narrowed away — otherwise narrowing one to Media would remove it from the only
+    // place that could widen it again.
     api.listTaxonomies().then(setTaxa).catch((e) => { setTaxa([]); onError(errText(e)); });
   }, [api, onError]);
   useEffect(refresh, [refresh]);
@@ -508,16 +565,19 @@ export function TaxonomiesView({ api, onOpen, onError, canEdit }: { api: Api; on
   const create = async () => {
     setBusy(true);
     try {
-      const created = await api.createTaxonomy({ slug, label, hierarchical });
-      setLabel(""); setSlug(""); setSlugTouched(false); setHierarchical(false);
+      // On a server that cannot scope a vocabulary, `null` is what it would store anyway —
+      // so this sends the same value the field's default means rather than a conditional key.
+      const created = await api.createTaxonomy({ slug, label, hierarchical, appliesTo: scopable ? appliesTo : null });
+      setLabel(""); setSlug(""); setSlugTouched(false); setHierarchical(false); setAppliesTo(null);
       onOpen(created.slug);
     } catch (e) { onError(errText(e)); } finally { setBusy(false); }
   };
 
   return (
-    <div className={WRAP}>
+    <>
       <Head lead="How this site" em="is classified" />
-      <p className="mb-4 max-w-[62ch] text-sm text-fg-muted">
+      <div className={WRAP}>
+        <p className="mb-4 max-w-[62ch] text-sm text-fg-muted">
         A vocabulary is a way of grouping pages — categories, tags, regions. There are no built-in ones:
         a deployment declares what it sorts by, the same way it declares its content types.
       </p>
@@ -529,6 +589,7 @@ export function TaxonomiesView({ api, onOpen, onError, canEdit }: { api: Api; on
             <span className="min-w-0 flex-1 truncate font-medium">{t.label}</span>
             <span className="shrink-0 truncate text-fg-subtle">{t.slug}</span>
             <span className="shrink-0 text-caption text-fg-subtle">{t.hierarchical ? "nested" : "flat"}</span>
+            {scopable ? <span className="shrink-0 text-caption text-fg-subtle">{appliesToText(t)}</span> : null}
           </div>
         ))}
       </div>
@@ -546,10 +607,12 @@ export function TaxonomiesView({ api, onOpen, onError, canEdit }: { api: Api; on
             <input type="checkbox" checked={hierarchical} onChange={(e) => setHierarchical(e.target.checked)} />
             <span className="text-sm text-fg">Terms can nest (categories rather than tags)</span>
           </label>
+          {scopable ? <AppliesToField value={appliesTo} onChange={setAppliesTo} /> : null}
           <Button className="mt-3" onPress={create} isDisabled={busy || !label.trim() || !slug.trim()}>Create vocabulary</Button>
         </div>
       ) : null}
-    </div>
+      </div>
+    </>
   );
 }
 
@@ -569,6 +632,7 @@ export function TaxonomyEditor({ api, slug, onBack, onDeleted, onError, canEdit
   const [termSlugTouched, setTermSlugTouched] = useState(false);
   const [parentId, setParentId] = useState("");
   const [busy, setBusy] = useState(false);
+  const { cms: { mediaTerms: scopable } } = useApp();
 
   const refreshTerms = useCallback(() => {
     api.getTermTree(slug).then(setTree).catch((e) => { setTree([]); onError(errText(e)); });
@@ -606,6 +670,23 @@ export function TaxonomyEditor({ api, slug, onBack, onDeleted, onError, canEdit
     if (label === t.label) return;
     try { await api.updateTerm(t.id, { label }); refreshTerms(); } catch (e) { onError(errText(e)); }
   };
+  /** Saved on change rather than behind a Save button, because a narrowing can be REFUSED —
+   * the server rejects one that would strand existing assignments — and a refusal has to be
+   * visible while the choice that caused it is still on screen. On refusal the field goes back
+   * to what is stored, so it never shows a scope the server did not accept. */
+  const setAppliesTo = async (next: TaxonomyTarget[] | null) => {
+    if (!tax) return;
+    const previous = tax.appliesTo ?? null;
+    setTax({ ...tax, appliesTo: next });
+    try {
+      onError("");
+      await api.updateTaxonomy(tax.id, { appliesTo: next });
+    } catch (e) {
+      setTax({ ...tax, appliesTo: previous });
+      onError(errText(e));
+    }
+  };
+
   const delTaxonomy = async () => {
     if (!tax || !confirm(`Delete the vocabulary “${tax.label}”? Every term in it goes too, along with every page's assignments.`)) return;
     try { await api.deleteTaxonomy(tax.id); onDeleted(); } catch (e) { onError(errText(e)); }
@@ -665,6 +746,17 @@ export function TaxonomyEditor({ api, slug, onBack, onDeleted, onError, canEdit
           </div>
         ) : null}
 
+        {canEdit && scopable ? (
+          <div className="rounded-lg border border-border bg-surface-muted p-4">
+            <Heading level="2" className="mb-1 font-normal">Where this vocabulary is offered</Heading>
+            <p className="max-w-[62ch] text-caption text-fg-subtle">
+              Narrowing is refused while the vocabulary is still assigned to something it would stop applying to —
+              remove those assignments first, so nothing is left tagged with a vocabulary you can no longer see.
+            </p>
+            <AppliesToField value={tax.appliesTo ?? null} onChange={setAppliesTo} />
+          </div>
+        ) : null}
+
         {canEdit ? <Button variant="ghost" className="self-start text-danger" onPress={delTaxonomy}>Delete this vocabulary</Button> : null}
       </div>
     </div>
@@ -706,9 +798,10 @@ export function WidgetAreasView({ api, onOpen, onError, canEdit }: { api: Api; o
   };
 
   return (
-    <div className={WRAP}>
+    <>
       <Head lead="Parts of the layout" em="you can fill in" />
-      <p className="mb-4 max-w-[62ch] text-sm text-fg-muted">
+      <div className={WRAP}>
+        <p className="mb-4 max-w-[62ch] text-sm text-fg-muted">
         A widget area is a named slot in your layout — a sidebar, a footer column — that an editor fills without touching code.
         Your layout reads one by name: <code>getWidgetArea(&quot;sidebar&quot;)</code>.
       </p>
@@ -736,7 +829,8 @@ export function WidgetAreasView({ api, onOpen, onError, canEdit }: { api: Api; o
           <Button className="mt-3" onPress={create} isDisabled={busy || !label.trim() || !name.trim()}>Create widget area</Button>
         </div>
       ) : null}
-    </div>
+      </div>
+    </>
   );
 }
 

package/src/icons.tsx

@@ -0,0 +1,97 @@
+// The editor's icon family: Phosphor, regular weight.
+//
+// ONE family, chosen for its plainness — at 15px in a nav rail an icon has to survive as a
+// silhouette, and Phosphor's regular weight is the simplest set that still reads at that
+// size. It replaces two half-families: podoba's own line set (which does not cover a CMS's
+// nouns — no taxonomy, no widget area, no redirect) and, next to it, the glyphs this file
+// used to draw by hand to fill those gaps. Two sets of hand-fitted curves side by side is
+// the one outcome worse than either.
+//
+// Everything the editor draws comes from HERE, aliased to a name that says what it means in
+// this app rather than what it depicts. That is not ceremony: it is what makes the family a
+// decision recorded in one file. Swapping it (or moving it into @podoba/react, where it
+// belongs once the design system adopts a set) is then this module's imports and nothing
+// else — no call site names a vendor.
+//
+// A HOST's own icon is a separate thing and stays a separate thing: a collection or a Block
+// Kit page declares `icon: "🎓"` and that string goes in the icon column verbatim (see
+// `NavIcon` in nav.ts). Resolving such a string against Phosphor BY NAME is deliberately not
+// offered — a by-name lookup needs the whole 3000-icon registry in the bundle, which is
+// megabytes to let a deployment name one glyph it can already supply directly.
+
+import {
+  ArrowBendUpRightIcon,
+  ArrowSquareOutIcon,
+  CaretDownIcon,
+  CaretRightIcon,
+  FileTextIcon,
+  FolderIcon,
+  GearIcon,
+  type Icon,
+  ImageIcon,
+  LayoutIcon,
+  ListDashesIcon,
+  ListIcon,
+  MoonIcon,
+  SidebarSimpleIcon,
+  SignOutIcon,
+  SquaresFourIcon,
+  StackIcon,
+  SunIcon,
+  TagIcon,
+  UsersIcon,
+} from "@phosphor-icons/react";
+import type { NavGlyph } from "./nav";
+
+/** A drawable glyph. Phosphor's own component type, re-exported so a call site can hold one
+ * without importing the vendor. */
+export type { Icon };
+
+// --- the chrome's own controls -----------------------------------------------------------
+//
+// Named for the JOB, not the picture. `MenuToggleIcon` is the hamburger that opens the rail
+// below `md`; calling it `ListIcon` at the call site would put it one careless edit away from
+// standing in for the Menus SECTION, which is a destination and a different glyph.
+
+/** Opens the collapsed rail below `md`. */
+export const MenuToggleIcon = ListIcon;
+/** Collapses the rail to icons, and brings it back. ONE glyph for both directions: the
+ * button is a toggle, and swapping the picture per state makes the reader decide what the
+ * new picture means before they can decide whether to press it. `aria-expanded` carries the
+ * state, which is where a state belongs. */
+export const RailToggleIcon = SidebarSimpleIcon;
+/** A group that is open — points down, as every file tree has agreed. */
+export const GroupOpenIcon = CaretDownIcon;
+/** …and one that is folded. */
+export const GroupFoldedIcon = CaretRightIcon;
+/** Switch to the light theme (shown while dark is active). */
+export const LightThemeIcon = SunIcon;
+/** …and the reverse. */
+export const DarkThemeIcon = MoonIcon;
+/** Drop the session. */
+export { SignOutIcon };
+/** The account menu's settings entry — the same glyph the nav's Settings row uses. */
+export { GearIcon as SettingsIcon };
+
+// --- the nav's destinations ---------------------------------------------------------------
+
+/** Glyph name -> component. The layout renders `NAV_GLYPHS[entry.icon.name]`; `satisfies`
+ * rather than an annotation, so the mapping stays exhaustive over `NavGlyph` (a glyph with no
+ * drawing is a compile error, not a blank square in the rail) without widening every value to
+ * the shared signature. */
+export const NAV_GLYPHS = {
+  pages: FileTextIcon,
+  collection: FolderIcon,
+  media: ImageIcon,
+  // NOT the hamburger: that is the control that opens this rail, and one glyph cannot mean
+  // both "open the nav" and "the Menus section".
+  menus: ListDashesIcon,
+  taxonomies: TagIcon,
+  widgets: LayoutIcon,
+  redirects: ArrowBendUpRightIcon,
+  app: SquaresFourIcon,
+  types: StackIcon,
+  users: UsersIcon,
+  settings: GearIcon,
+  link: ArrowSquareOutIcon,
+} satisfies Record<NavGlyph, Icon>;