@pramen/cms-editor 0.0.61 → 0.0.64

package/dist/panel-jsx-dev-runtime.js

@@ -0,0 +1,8 @@
+// GENERATED by @pramen/cms-editor's build — do not edit.
+// Resolves the bare specifier "react/jsx-dev-runtime" for a panel bundle, against the React the
+// editor already loaded. Wired up by the shell's import map; see docs/cms.md.
+const ns = globalThis.PRAMEN_CMS_EDITOR_RUNTIME?.jsxDevRuntime;
+if (!ns) throw new Error("pramen/cms-editor: no editor runtime on this page — a panel bundle was loaded outside the CMS editor, or before it booted.");
+const m = ns.default ?? ns;
+export default m;
+export const { Fragment, jsxDEV } = m;

package/dist/panel-jsx-runtime.js

@@ -0,0 +1,8 @@
+// GENERATED by @pramen/cms-editor's build — do not edit.
+// Resolves the bare specifier "react/jsx-runtime" for a panel bundle, against the React the
+// editor already loaded. Wired up by the shell's import map; see docs/cms.md.
+const ns = globalThis.PRAMEN_CMS_EDITOR_RUNTIME?.jsxRuntime;
+if (!ns) throw new Error("pramen/cms-editor: no editor runtime on this page — a panel bundle was loaded outside the CMS editor, or before it booted.");
+const m = ns.default ?? ns;
+export default m;
+export const { Fragment, jsx, jsxs } = m;

package/dist/panel-react-dom.js

@@ -0,0 +1,8 @@
+// GENERATED by @pramen/cms-editor's build — do not edit.
+// Resolves the bare specifier "react-dom" for a panel bundle, against the React the
+// editor already loaded. Wired up by the shell's import map; see docs/cms.md.
+const ns = globalThis.PRAMEN_CMS_EDITOR_RUNTIME?.reactDom;
+if (!ns) throw new Error("pramen/cms-editor: no editor runtime on this page — a panel bundle was loaded outside the CMS editor, or before it booted.");
+const m = ns.default ?? ns;
+export default m;
+export const { createPortal, flushSync, preconnect, prefetchDNS, preinit, preinitModule, preload, preloadModule, requestFormReset, unstable_batchedUpdates, useFormState, useFormStatus, version } = m;

package/dist/panel-react.js

@@ -0,0 +1,8 @@
+// GENERATED by @pramen/cms-editor's build — do not edit.
+// Resolves the bare specifier "react" for a panel bundle, against the React the
+// editor already loaded. Wired up by the shell's import map; see docs/cms.md.
+const ns = globalThis.PRAMEN_CMS_EDITOR_RUNTIME?.react;
+if (!ns) throw new Error("pramen/cms-editor: no editor runtime on this page — a panel bundle was loaded outside the CMS editor, or before it booted.");
+const m = ns.default ?? ns;
+export default m;
+export const { Activity, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, act, cache, cacheSignal, captureOwnerStack, cloneElement, createContext, createElement, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_useCacheRefresh, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useEffectEvent, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version } = m;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.61",
-  "description": "Visual block/page editor for @pramen/cms \u2014 a standalone React SPA that talks to the CMS handlers over HTTP.",
+  "version": "0.0.64",
+  "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,7 +13,11 @@
   "type": "module",
   "exports": {
     "./editor.js": "./dist/editor.js",
-    "./editor.css": "./dist/editor.css"
+    "./editor.css": "./dist/editor.css",
+    "./panel-react.js": "./dist/panel-react.js",
+    "./panel-react-dom.js": "./dist/panel-react-dom.js",
+    "./panel-jsx-runtime.js": "./dist/panel-jsx-runtime.js",
+    "./panel-jsx-dev-runtime.js": "./dist/panel-jsx-dev-runtime.js"
   },
   "files": [
     "dist",
@@ -27,6 +31,7 @@
   },
   "dependencies": {
     "@buzola/router": "^0.0.12",
+    "@phosphor-icons/react": "^2.1.10",
     "@podoba/react": "^0.0.34",
     "@podoba/tailwind": "^0.0.34",
     "@podoba/tokens": "^0.0.34",

package/src/api.ts

@@ -2,7 +2,7 @@
 // same transport shape as @pramen/admin's api.ts. Config is persisted in localStorage.
 
 import type { AdminPageMeta, AdminPageResponse, AssembledPage, AuditEntry, BlockType, ContentType, Media, Menu, MenuItem, Page, Redirect, Taxonomy, Term, Widget, WidgetArea } from "./types";
-import type { DefaultBlockDefinition, FieldDefinition, RegionDefinition, RpcInput } from "./types";
+import type { DefaultBlockDefinition, FieldDefinition, MediaKind, MediaSort, RegionDefinition, RpcInput, TaxonomyTarget } from "./types";
 
 /** The payload `createBlockType` / `updateBlockType` take. `fieldsSchema` is the whole
  * point: a block type IS its field schema. */
@@ -173,7 +173,13 @@ export class Api {
   listPageAudit = (pageId: string) => this.call<AuditEntry[]>("listPageAudit", { pageId });
 
   // --- media ---
-  listMedia = (limit = 50, offset = 0) => this.call<Media[]>("listMedia", { limit, offset });
+  // `undefined` values are simply not serialized, so the absent narrowings need no
+  // conditional spreading — an omitted key and a key set to undefined reach the server the same.
+  /** Options rather than positionals: the library narrows by four independent things, and
+   * `listMedia(60, 0, sort, undefined, undefined, term)` is a call site nobody can read and
+   * everybody can get one argument out of step. */
+  listMedia = (opts: { limit?: number; offset?: number; sort?: MediaSort; kind?: MediaKind; q?: string; term?: string } = {}) =>
+    this.call<Media[]>("listMedia", { limit: opts.limit ?? 50, offset: opts.offset ?? 0, sort: opts.sort, kind: opts.kind, q: opts.q, term: opts.term });
   getMedia = (id: string) => this.call<Media | null>("getMedia", { id });
   updateMedia = (id: string, alt: string | null) => this.call<Media>("updateMedia", { id, alt });
   deleteMedia = (id: string) => this.call<{ ok: true }>("deleteMedia", { id });
@@ -209,10 +215,14 @@ export class Api {
     this.call<Redirect>("updateRedirect", { id, ...patch } as unknown as RpcInput);
   deleteRedirect = (id: string) => this.call<{ ok: true }>("deleteRedirect", { id });
 
-  listTaxonomies = () => this.call<Taxonomy[]>("listTaxonomies");
-  createTaxonomy = (input: { slug: string; label: string; pluralLabel?: string; description?: string; hierarchical?: boolean }) =>
-    this.call<Taxonomy>("createTaxonomy", input);
-  updateTaxonomy = (id: string, patch: { label?: string; pluralLabel?: string | null; description?: string | null; hierarchical?: boolean }) =>
+  /** Every vocabulary, or only those that classify `target`. The narrowing is the SERVER's —
+   * the page panel, the media panel and the write-side guard read one answer, so they cannot
+   * disagree about what a vocabulary applies to. The Taxonomies screen passes nothing: the one
+   * place that edits `appliesTo` has to see a vocabulary it has narrowed away. */
+  listTaxonomies = (target?: TaxonomyTarget) => this.call<Taxonomy[]>("listTaxonomies", { target });
+  createTaxonomy = (input: { slug: string; label: string; pluralLabel?: string; description?: string; hierarchical?: boolean; appliesTo?: TaxonomyTarget[] | null }) =>
+    this.call<Taxonomy>("createTaxonomy", { ...input, appliesTo: input.appliesTo ?? null });
+  updateTaxonomy = (id: string, patch: { label?: string; pluralLabel?: string | null; description?: string | null; hierarchical?: boolean; appliesTo?: TaxonomyTarget[] | null }) =>
     this.call<Taxonomy>("updateTaxonomy", { id, ...patch } as unknown as RpcInput);
   deleteTaxonomy = (id: string) => this.call<{ ok: true }>("deleteTaxonomy", { id });
 
@@ -224,9 +234,16 @@ export class Api {
     this.call<Term>("updateTerm", { id, ...patch } as unknown as RpcInput);
   deleteTerm = (id: string) => this.call<{ ok: true }>("deleteTerm", { id });
 
+  /** Mint a signed, self-expiring preview link for one page. Editor-gated to MINT; anyone
+   * holding the result can redeem it with no account, which is the point. */
+  signPagePreview = (pageId: string) => this.call<{ url: string; token: string; expiresAt: number }>("signPagePreview", { pageId });
+
   listPageTerms = (pageId: string) => this.call<Term[]>("listPageTerms", { pageId });
   setPageTerms = (pageId: string, termIds: string[]) => this.call<{ ok: true }>("setPageTerms", { pageId, termIds });
 
+  listMediaTerms = (mediaId: string) => this.call<Term[]>("listMediaTerms", { mediaId });
+  setMediaTerms = (mediaId: string, termIds: string[]) => this.call<{ ok: true }>("setMediaTerms", { mediaId, termIds });
+
   // --- Block Kit: custom admin pages ---
   /** The pages THIS caller may open. Filtered server-side, so a nav entry that 403s when
    * clicked cannot happen. An older server has no such handler; the caller treats a failure

package/src/app-context.tsx

@@ -29,6 +29,11 @@ declare global {
        * Rendered as plain external `<a>` links, positioned by `order` (see `NAV_ORDER`) and
        * defaulting to after the built-in tabs. */
       extraNav?: { label: string; href: string; target?: "_blank" | "_self"; order?: number }[];
+      /** Module URLs of this deployment's PANEL bundles — the project's own React screens,
+       * rendered inside the chrome at `/apps/:slug`. Imported by the editor at boot (see
+       * `main.tsx`), not by a script tag of the shell's, because the shared React they
+       * import has to be published first. */
+      panels?: string[];
       /** The wordmark in the topbar, on the Setup screen, and in the browser tab.
        *
        * This editor ships as a package an agency deploys FOR ITS CLIENT, so the default
@@ -36,6 +41,10 @@ declare global {
        * own CMS was greeted by "pramen". Set `name` (and optionally `suffix`) to the
        * deployment's own; `suffix: null` drops the "· cms" half entirely. */
       brand?: BrandConfig;
+      /** Where THIS SITE renders a page preview (e.g. `/preview`). The editor appends
+       * `?token=…`. Unset, a preview link points at the CMS's own redeem endpoint, which
+       * answers with JSON — see `preview.ts`. */
+      previewUrl?: string;
     };
   }
 }
@@ -94,9 +103,10 @@ interface AppContextValue {
   /** Collections registered on the server (from `listCollections`) — drives the nav + the
    * generic list/edit routes. Empty when the server registers none. */
   collections: CollectionMeta[];
-  /** Custom admin pages the CALLER may open (from `listAdminPages`) — Block Kit screens a
-   * project registered with `adminPage()`. They render inside the editor's own chrome, at a
-   * nav position they choose, which is the difference from an `extraNav` link.
+  /** Custom admin screens the CALLER may open (from `listAdminPages`) — Block Kit pages a
+   * project registered with `adminPage()`, and panels it registered with `adminPanel()`.
+   * They render inside the editor's own chrome, at a nav position they choose, which is the
+   * difference from an `extraNav` link.
    *
    * Filtered server-side by role, so there is no entry here the caller cannot open. An app
    * that registers none (or a server without the handler) leaves this empty; a failure is

package/src/app.css

@@ -10,3 +10,51 @@
  * it explicitly (paths are relative to this file). */
 @source "./**/*.{ts,tsx}";
 @source "../node_modules/@podoba/react/src/**/*.{ts,tsx}";
+
+/* Buttons look clickable.
+ *
+ * podoba's `Button` sets no `cursor`, and a real `<button>` gets the default arrow from the
+ * UA sheet — so every button in this app has been showing an arrow, which reads as "not
+ * interactive" to anyone who has used the web. It went unnoticed while the header's Upload
+ * control was a hand-styled `<label>` carrying its own `cursor-pointer`; swapping that for the
+ * design system's Button is what surfaced it.
+ *
+ * In the BASE layer on purpose: Tailwind emits utilities after base, so a component that means
+ * something else by its cursor still wins — podoba's own `data-[pending]:cursor-progress` on a
+ * submitting button, for one. Scoped away from disabled controls, where an arrow is the
+ * correct signal.
+ *
+ * The right home for this is @podoba/react's Button. Until it lands there, one rule here
+ * covers the app rather than every call site remembering. */
+@layer base {
+  button:not(:disabled):not([aria-disabled="true"]),
+  [role="button"]:not([aria-disabled="true"]),
+  label:has(> input[type="file"]) {
+    cursor: pointer;
+  }
+}
+
+/* Turn OFF scroll anchoring for the page scroller.
+ *
+ * This is the fix for a self-referential loop, not a preference. The screen header condenses
+ * once the page is scrolled, which removes ~134px of layout ABOVE the viewport — and scroll
+ * anchoring exists precisely to compensate for that, so the browser silently subtracts the
+ * same 134px from `scrollY` to keep the visible content still. That new scroll position is an
+ * input to the condition that condensed the header, so it flips back, restores the 134px, and
+ * the browser gives the scroll offset back: the header oscillates while the reader is not
+ * touching anything. Hysteresis alone cannot fix it — the compensation is the same size as the
+ * change, so the dead band would have to be wider than the collapse itself, which just moves
+ * the loop further down the page.
+ *
+ * What anchoring buys HERE is close to nothing, which is what makes this trade cheap: the
+ * lists load in explicit "load more" pages appended BELOW the viewport, and every media cell is
+ * a fixed 130px box, so no image settling reflows content above where you are reading.
+ *
+ * On the scroller, because that is the only place it works — `overflow-anchor: none` on an
+ * element merely excludes THAT element from being chosen as the anchor, and the header is not
+ * the anchor here; the list below it is. */
+@layer base {
+  html {
+    overflow-anchor: none;
+  }
+}

package/src/blockkit.tsx

@@ -20,7 +20,8 @@ import { useCallback, useEffect, useState } from "react";
 import type { Api } from "./api";
 import { CONTROL } from "./fields";
 import { WRAP } from "./chrome";
-import type { AdminBlock, AdminElement, AdminInput, AdminPageResponse, JsonValue } from "./types";
+import { ADMIN_ELEMENT_TYPES } from "./types";
+import type { AdminBlock, AdminCell, AdminElement, AdminInput, AdminPageResponse, JsonValue } from "./types";
 
 
 /** Values held for the inputs of one block, keyed by `action_id`. */
@@ -138,10 +139,10 @@ export function BlockList({ blocks, values, setValue, disabled, onFire }: { bloc
   );
 }
 
-/** A stable React key for a block. `form` carries a required `block_id`; `actions` may.
- * Prefixed so a block_id can never collide with a bare index from a sibling. */
+/** A stable React key for a block. `form` carries a required `block_id`; `actions` and
+ * `table` may. Prefixed so a block_id can never collide with a bare index from a sibling. */
 function blockKey(block: AdminBlock, i: number): string {
-  const id = block.type === "form" ? block.block_id : block.type === "actions" ? block.block_id : undefined;
+  const id = block.type === "form" || block.type === "actions" || block.type === "table" ? block.block_id : undefined;
   return id ? `id:${id}` : `${block.type}:${i}`;
 }
 
@@ -188,7 +189,10 @@ function BlockView({ block, values, setValue, disabled, onFire }: { block: Admin
         </div>
       );
     case "table":
-      return <TableBlock block={block} />;
+      // The only interactive-capable block that used NOT to get the value bag. A row could
+      // show that a venue is hidden and could not offer the switch, so a list of 800 rows
+      // had to be written as 800 `actions` blocks — a table with the table taken out.
+      return <TableBlock block={block} values={values} setValue={setValue} disabled={disabled} onFire={onFire} />;
     case "image":
       return (
         <figure className="m-0">
@@ -222,7 +226,7 @@ function BlockView({ block, values, setValue, disabled, onFire }: { block: Admin
   }
 }
 
-function TableBlock({ block }: { block: Extract<AdminBlock, { type: "table" }> }) {
+function TableBlock({ block, values, setValue, disabled, onFire }: { block: Extract<AdminBlock, { type: "table" }>; disabled: boolean; onFire: (f: Fired) => void } & ValueBag) {
   if (block.rows.length === 0) return <p className="text-sm text-fg-subtle">{block.empty ?? "Nothing here."}</p>;
   return (
     // Wide tables scroll INSIDE their own container; the page must not scroll sideways.
@@ -239,7 +243,9 @@ function TableBlock({ block }: { block: Extract<AdminBlock, { type: "table" }> }
           {block.rows.map((row, i) => (
             <tr key={i}>
               {block.columns.map((c) => (
-                <td key={c.key} className="border-b border-border px-3 py-2 text-fg">{cell(row[c.key])}</td>
+                <td key={c.key} className="border-b border-border px-3 py-2 text-fg">
+                  <CellView value={row[c.key]} blockId={block.block_id} values={values} setValue={setValue} disabled={disabled} onFire={onFire} />
+                </td>
               ))}
             </tr>
           ))}
@@ -249,9 +255,31 @@ function TableBlock({ block }: { block: Extract<AdminBlock, { type: "table" }> }
   );
 }
 
-function cell(v: string | number | boolean | null | undefined): string {
+/** One cell: a value to read, or a control to act with.
+ *
+ * A cell's element is the SAME `ElementView` an `actions` block renders, on the same page
+ * value bag and the same `onFire` — a row's button is not a special kind of button, it is a
+ * button that happens to sit in a row. What identifies the row is the button's `value`,
+ * which is the idiom that already existed ("one `action_id` can serve a row"); an input in a
+ * cell has to carry a per-row `action_id` instead, since the bag is keyed by it, and the
+ * server refuses a response where two of them collide. */
+function CellView({ value, blockId, values, setValue, disabled, onFire }: { value: AdminCell | undefined; blockId?: string; disabled: boolean; onFire: (f: Fired) => void } & ValueBag) {
+  if (isElementCell(value)) return <ElementView el={value} blockId={blockId} compact values={values} setValue={setValue} disabled={disabled} onFire={onFire} />;
+  return <>{cell(value)}</>;
+}
+
+/** A cell is a value or an element, told apart by shape — the same discrimination the server
+ * enforces on the way out, so nothing else can be an object by the time it gets here. */
+function isElementCell(v: AdminCell | undefined): v is AdminElement {
+  return v !== null && typeof v === "object" && (ADMIN_ELEMENT_TYPES as readonly string[]).includes(v.type);
+}
+
+function cell(v: AdminCell | undefined): string {
   if (v === null || v === undefined) return "";
   if (typeof v === "boolean") return v ? "yes" : "no";
+  // An object that is not an element cannot reach a browser through a checked response; if
+  // one does, it is named rather than stringified into `[object Object]`.
+  if (typeof v === "object") return `[unsupported cell: ${String(v.type)}]`;
   return String(v);
 }
 
@@ -260,28 +288,46 @@ function ActionsBlock({ block, values, setValue, disabled, onFire }: { block: Ex
   // `onFire` attaches the whole bag, so a filter in this block reaches a button in another.
   return (
     <div className="flex flex-wrap items-end gap-3">
-      {block.elements.map((el, i) =>
-        el.type === "button" ? (
-          <Button
-            key={i}
-            variant={el.style === "primary" ? "primary" : el.style === "danger" ? "ghost" : "secondary"}
-            className={el.style === "danger" ? "text-danger" : undefined}
-            isDisabled={disabled}
-            onPress={() => {
-              if (el.confirm && !confirm(el.confirm)) return;
-              onFire({ type: "block_action", action_id: el.action_id, block_id: block.block_id, value: el.value ?? null });
-            }}
-          >
-            {el.label}
-          </Button>
-        ) : (
-          <InputView key={el.action_id} input={el} value={values[el.action_id]} onChange={(v) => setValue(el.action_id, v)} disabled={disabled} />
-        ),
-      )}
+      {block.elements.map((el, i) => (
+        <ElementView key={el.type === "button" ? `b:${i}` : `i:${el.action_id}`} el={el} blockId={block.block_id} values={values} setValue={setValue} disabled={disabled} onFire={onFire} />
+      ))}
     </div>
   );
 }
 
+/**
+ * One element — a button that fires, or an input bound to the page's value bag.
+ *
+ * Shared by `actions` and by a table cell so that the two cannot drift: a row's control has
+ * to reach the handler with exactly what a toolbar control reaches it with, or "the button
+ * in the row" becomes a second, weaker kind of button.
+ *
+ * `compact` is a rendering decision, not vocabulary: a control inside a data row is not a
+ * toolbar call-to-action, and 800 pill buttons at CTA size make a table unreadable. The
+ * server says what the control IS; the host decides how big it draws.
+ */
+function ElementView({ el, blockId, compact, values, setValue, disabled, onFire }: { el: AdminElement; blockId?: string; compact?: boolean; disabled: boolean; onFire: (f: Fired) => void } & ValueBag) {
+  if (el.type === "button") {
+    return (
+      <Button
+        size={compact ? "sm" : undefined}
+        variant={el.style === "primary" ? "primary" : el.style === "danger" ? "ghost" : "secondary"}
+        className={el.style === "danger" ? "text-danger" : undefined}
+        isDisabled={disabled}
+        onPress={() => {
+          if (el.confirm && !confirm(el.confirm)) return;
+          // `value` is what identifies the ROW: one `action_id` serves every row of a table,
+          // and the value says which one it was.
+          onFire({ type: "block_action", action_id: el.action_id, block_id: blockId, value: el.value ?? null });
+        }}
+      >
+        {el.label}
+      </Button>
+    );
+  }
+  return <InputView input={el} value={values[el.action_id]} onChange={(v) => setValue(el.action_id, v)} disabled={disabled} />;
+}
+
 function FormBlock({ block, values, setValue, disabled, onFire }: { block: Extract<AdminBlock, { type: "form" }>; disabled: boolean; onFire: (f: Fired) => void } & ValueBag) {
   // No local state: the page owns the bag and re-seeds it from every response, so a form
   // cannot keep values the server has since replaced. (The `block_id` key in `BlockList` is
@@ -313,20 +359,27 @@ function FormBlock({ block, values, setValue, disabled, onFire }: { block: Extra
 
 const isInput = (el: AdminElement): el is AdminInput => el.type !== "button";
 
-/** Every input on a page, in declaration order, including those nested in `columns` and
- * `accordion`. The page seeds its whole value bag from this on every response. */
+/** Every input on a page, in declaration order, including those in table cells and those
+ * nested in `columns` and `accordion`. The page seeds its whole value bag from this on every
+ * response — an input the walk misses renders empty however good its `initial_value` was,
+ * and then submits that emptiness. */
 function collectInputs(blocks: readonly AdminBlock[], out: AdminInput[] = []): AdminInput[] {
   for (const b of blocks) {
     if (b.type === "form") out.push(...b.fields);
     else if (b.type === "actions") out.push(...b.elements.filter(isInput));
+    // Only cells a COLUMN names, because only those are rendered — the same set the server
+    // checks for colliding `action_id`s, so the two halves agree on what is on the page.
+    else if (b.type === "table") for (const row of b.rows) for (const c of b.columns) { const v = row[c.key]; if (isElementCell(v) && isInput(v)) out.push(v); }
     else if (b.type === "columns") for (const col of b.columns) collectInputs(col, out);
     else if (b.type === "accordion") collectInputs(b.blocks, out);
   }
   return out;
 }
 
-/** The page's value bag as a fresh response describes it. */
-function seedValues(blocks: readonly AdminBlock[]): BlockValues {
+/** The page's value bag as a fresh response describes it. Exported for the test that holds
+ * the seeding contract: it is a pure function of one response, and a table cell's input is
+ * only reachable through it. */
+export function seedValues(blocks: readonly AdminBlock[]): BlockValues {
   return initialValues(collectInputs(blocks));
 }
 
@@ -353,11 +406,31 @@ function InputView({ input, value, onChange, disabled }: { input: AdminInput; va
     </span>
   ) : null;
 
+  /**
+   * The server's verdict on THIS field, under the field it is about.
+   *
+   * The page-level `toast` was the only failure surface there was, and it is the wrong one
+   * for "25:00 is not a time" or "the end is before the start": it names no field, it is
+   * gone in three seconds, and it floats at the top of a form whose sixth input is the
+   * problem. It cannot be worked around from the page either — `form` renders a flat list of
+   * inputs, so a page cannot interleave a `context` block to put the message where it
+   * belongs.
+   *
+   * It is drawn from the response, not from state: the whole page re-renders on every
+   * interaction, so the error is exactly as old as the values beside it and there is nothing
+   * to invalidate. `role="alert"` because it appears in answer to something the user just
+   * did, so a screen reader has to be told without being asked.
+   */
+  const error = input.error ? (
+    <span role="alert" className="text-caption text-danger">{input.error}</span>
+  ) : null;
+
   if (input.type === "toggle") {
     return (
       <label className="flex items-center gap-2">
-        <input type="checkbox" checked={value === true} disabled={disabled} onChange={(e) => onChange(e.target.checked)} />
+        <input type="checkbox" checked={value === true} disabled={disabled} aria-invalid={input.error ? true : undefined} onChange={(e) => onChange(e.target.checked)} />
         <span className="text-sm text-fg">{input.label ?? input.action_id}</span>
+        {error}
       </label>
     );
   }
@@ -366,7 +439,7 @@ function InputView({ input, value, onChange, disabled }: { input: AdminInput; va
     <label className="flex min-w-[180px] flex-col gap-1.5">
       {label}
       {input.type === "select" ? (
-        <select className={CONTROL} value={typeof value === "string" ? value : ""} disabled={disabled} aria-label={input.label ?? input.action_id} onChange={(e) => onChange(e.target.value)}>
+        <select className={CONTROL} value={typeof value === "string" ? value : ""} disabled={disabled} aria-invalid={input.error ? true : undefined} aria-label={input.label ?? input.action_id} onChange={(e) => onChange(e.target.value)}>
           <option value="">—</option>
           {input.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
         </select>
@@ -378,6 +451,7 @@ function InputView({ input, value, onChange, disabled }: { input: AdminInput; va
           max={input.max}
           placeholder={input.placeholder}
           disabled={disabled}
+          aria-invalid={input.error ? true : undefined}
           aria-label={input.label ?? input.action_id}
           value={typeof value === "number" ? String(value) : ""}
           onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))}
@@ -387,6 +461,7 @@ function InputView({ input, value, onChange, disabled }: { input: AdminInput; va
           className={`${CONTROL} h-auto min-h-24 py-2.5`}
           placeholder={input.placeholder}
           disabled={disabled}
+          aria-invalid={input.error ? true : undefined}
           aria-label={input.label ?? input.action_id}
           value={typeof value === "string" ? value : ""}
           onChange={(e) => onChange(e.target.value)}
@@ -400,11 +475,13 @@ function InputView({ input, value, onChange, disabled }: { input: AdminInput; va
           autoComplete={input.type === "secret_input" ? "new-password" : undefined}
           placeholder={input.placeholder}
           disabled={disabled}
+          aria-invalid={input.error ? true : undefined}
           aria-label={input.label ?? input.action_id}
           value={typeof value === "string" ? value : ""}
           onChange={(e) => onChange(e.target.value)}
         />
       )}
+      {error}
     </label>
   );
 }

package/src/breadcrumb.tsx

@@ -0,0 +1,48 @@
+// Where you are, for the app bar.
+//
+// The trail has two parts and they come from different places, which is the whole design
+// here. The SECTION is derivable — the layout already knows which nav entry is lit, and that
+// entry carries both a label and the route back to its list. The DETAIL is not: `/pages/:id`
+// carries an opaque id, and the page's title only exists inside the editor that fetched it.
+// So the section is computed in the layout and the detail is PUBLISHED by whatever is on
+// screen, through the hook below.
+//
+// It matters most exactly where the screen header is absent. A list screen already says
+// "Media" in 56px immediately under the bar, so the crumb there is a mild echo; a page editor
+// has no header at all — three columns of panels and a "← all pages" button — and the trail is
+// the only thing naming what is open.
+//
+// A LEAF module: `components.tsx` and `furniture.tsx` both publish into it, and
+// `components.tsx` already imports from `furniture.tsx`, so anything they share has to sit
+// below both.
+
+import { createContext, useContext, useEffect, type ReactNode } from "react";
+
+/** Only the SETTER travels down. The value lives in the layout, which is also what renders
+ * the bar — handing the value back down as well would be a second copy of state that exists
+ * to be read by the component that owns it. */
+const PublishCrumb = createContext<(label: string | null) => void>(() => {});
+
+export function BreadcrumbProvider({ publish, children }: { publish: (label: string | null) => void; children: ReactNode }) {
+  return <PublishCrumb.Provider value={publish}>{children}</PublishCrumb.Provider>;
+}
+
+/**
+ * Publish the trailing crumb for the screen that is mounted.
+ *
+ * Pass `undefined` while the record is still loading and the bar simply shows the section —
+ * better than a crumb that says "Loading…" and then changes, which draws the eye to the one
+ * place on screen that should be still.
+ *
+ * The cleanup is not optional: without it a crumb outlives its screen, so leaving a page
+ * editor for a list would leave the page's title sitting in the bar next to a different
+ * section. Effect-based rather than render-time, because publishing during render is a state
+ * update in another component's render pass.
+ */
+export function useCrumb(label: string | null | undefined): void {
+  const publish = useContext(PublishCrumb);
+  useEffect(() => {
+    publish(label ?? null);
+    return () => publish(null);
+  }, [label, publish]);
+}

package/src/chrome.ts

@@ -14,3 +14,30 @@ export const WRAP = "mx-auto max-w-[1200px] px-7 pb-8 pt-2";
 
 /** One row in a list — a card-surfaced strip with the standard inset. */
 export const ROW = "flex items-center gap-3 rounded-[14px] border border-transparent bg-surface-card px-[18px] py-3.5";
+
+// --- the app bar, and what has to clear it -----------------------------------------------
+//
+// Two classes for ONE number. The app bar (the rail toggle + the account menu) is sticky at
+// the top of the content column, and the screen header is sticky BELOW it — so the header's
+// offset has to be the bar's height, exactly. They live here, together, because the two are
+// rendered by different modules (`routes/_layout.tsx` and `page-header.tsx`) and a magic `44`
+// written out in each is a one-pixel gap or overlap waiting for the next edit. Tailwind needs
+// literal class names, so this is a pair of strings rather than a length.
+
+/** The app bar's height. */
+export const APP_BAR_H = "h-11";
+
+/** …and the sticky offset anything pinned beneath it must use. Same 44px. */
+export const BELOW_APP_BAR = "top-11";
+
+// --- the page editor's own toolbar ---------------------------------------------------------
+//
+// Same "two classes for one number" rule as the app bar above, one level deeper. The editor's
+// toolbar is sticky BELOW the app bar, and the inspector column is sticky below THAT — three
+// elements, two of which need to know the height of what is above them.
+
+/** The page editor's toolbar height. */
+export const PAGE_TOOLBAR_H = "h-14";
+
+/** …and the offset for anything pinned beneath it: the app bar (44px) plus the toolbar (56). */
+export const BELOW_PAGE_TOOLBAR = "top-[6.25rem]";