smoodly 0.0.12 → 0.0.14

package/dist/admin/shell/SharedList.js

@@ -1,13 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-// The Shared content list (spec 2026-09-07 §6): every registered item is
+// The Globals list (shared content, spec 2026-09-07 §6; renamed in the
+// UI 2026-09-09, the route stays /shared): every registered item is
 // a row, edited on its own page. Nothing here is created or deleted by
 // editors — the registry declares the items and ops.shared.list
 // materializes them — so there is no "+ New".
 import { useCallback, useEffect, useState } from "react";
 import { ListView } from "./ListView.js";
 import { sharedRows } from "./shared-list.js";
-import { Segmented, StatusBadge } from "../ui/primitives.js";
+import { StatusBadge } from "../ui/primitives.js";
+import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { relativeTime } from "../ui/format.js";
 import { BASE } from "./base.js";
 import { ErrorPane } from "./ErrorPane.js";
@@ -44,7 +46,7 @@ export function SharedList({ ops, registry }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const rows = items ? sharedRows(items, registry, locale) : [];
-    return (_jsx(ListView, { title: "Shared content", count: items ? rows.length : undefined, actions: multilingual ? _jsx(Segmented, { options: registry.locales.supported, value: locale, onChange: pickLocale }) : undefined, columns: [
+    return (_jsx(ListView, { title: "Globals", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
             { label: "Title", width: "minmax(160px,1fr)" },
             { label: "Kind", width: "90px" },
             { label: "Updated", width: "minmax(110px,160px)" },

package/dist/admin/shell/entries-list.d.ts

@@ -19,3 +19,7 @@ export declare function entrySourceLocale(record: EntryRecord, registry: AdminRe
  *  (the same split entry-store.ts's splitFields makes). */
 export declare function localizedFieldKeys(meta: AdminCollection): string[];
 export declare function entryRows(records: EntryRecord[], meta: AdminCollection, registry: AdminRegistry, locale: string): EntryRow[];
+/** The list drags only when the order IS the `sort` column and the rows
+ *  are siblings: a nested collection's flat index is not a sibling index
+ *  (spec 2026-09-09 §5; nested manual collections wait for the entry tree UI). */
+export declare function canReorder(meta: AdminCollection): boolean;

package/dist/admin/shell/entries-list.js

@@ -34,3 +34,9 @@ export function entryRows(records, meta, registry, locale) {
         };
     });
 }
+/** The list drags only when the order IS the `sort` column and the rows
+ *  are siblings: a nested collection's flat index is not a sibling index
+ *  (spec 2026-09-09 §5; nested manual collections wait for the entry tree UI). */
+export function canReorder(meta) {
+    return meta.manual && meta.depth === 1;
+}

package/dist/admin/shell/pages-tree.d.ts

@@ -1,5 +1,6 @@
 import type { PageLocale, PageRecord } from "../../store.ts";
 import type { AdminCollection, AdminPageTemplate, AdminRegistry } from "../serialize.ts";
+import type { Projection } from "../ui/useSortable.ts";
 type NodeLike = {
     parentId: string | null;
     locales: Record<string, {
@@ -54,4 +55,27 @@ export type PagesTreeRow = {
     record: PageRecord;
 };
 export declare function pagesTreeRows(records: PageRecord[], registry: AdminRegistry, locale: string, collapsed: ReadonlySet<string>): PagesTreeRow[];
+export type TreeProjection = Projection;
+/** Every row drags: root order is the listing's order, nothing code owns.
+ *  Fixed nodes and the home page stay at the root — projectDrop refuses
+ *  them any deeper slot, the move op refuses any other parent. */
+export declare const canDragRow: (_row: PagesTreeRow) => boolean;
+/** Whether a row may only reorder among the root siblings. */
+export declare const rootOnly: (row: PagesTreeRow) => boolean;
+/** Levels below a node: 0 for a leaf. From the records, because the
+ *  dragged node's rows are collapsed away during the drag. */
+export declare function subtreeHeight(records: {
+    id: string;
+    parentId: string | null;
+}[], id: string): number;
+/**
+ * Reads a flat drop slot as a tree position. `rows` still hold the dragged
+ * row at `from` (its subtree collapsed); `slot` is its index in the
+ * resulting flat order; `xDrift` is the pointer's horizontal travel and
+ * every `indent` px of it is one level. Returns null for a slot the tree
+ * refuses: a parent that cannot have children, a subtree that would
+ * pass the depth limit, or any depth but the root for a row that is
+ * code-owned or the site root.
+ */
+export declare function projectDrop(rows: PagesTreeRow[], from: number, slot: number, xDrift: number, height: number, pageDepth: number, indent?: number): TreeProjection | null;
 export {};

package/dist/admin/shell/pages-tree.js

@@ -84,7 +84,7 @@ export function pagesTreeRows(records, registry, locale, collapsed) {
                 template: r.template,
                 templateTitle: mount
                     ? r.template === null ? "Collection" : `Collection · ${templateTitle(r.template)}`
-                    : r.template === null ? "Folder" : templateTitle(r.template),
+                    : r.template === null ? "Path" : templateTitle(r.template),
                 status: !row || r.template === null ? null : localeStatusOf(row),
                 // A child needs its parent in the locale (the parent rule), so an absent node offers none.
                 canHaveChildren: present && !mount && !isHome && depth + 1 < registry.pageDepth,
@@ -97,3 +97,61 @@ export function pagesTreeRows(records, registry, locale, collapsed) {
     walk(buildPageTree(records, locale, opts), 0, null);
     return rows;
 }
+/** Every row drags: root order is the listing's order, nothing code owns.
+ *  Fixed nodes and the home page stay at the root — projectDrop refuses
+ *  them any deeper slot, the move op refuses any other parent. */
+export const canDragRow = (_row) => true;
+/** Whether a row may only reorder among the root siblings. */
+export const rootOnly = (row) => row.fixed || row.isHome;
+/** Levels below a node: 0 for a leaf. From the records, because the
+ *  dragged node's rows are collapsed away during the drag. */
+export function subtreeHeight(records, id) {
+    const children = records.filter((r) => r.parentId === id);
+    if (children.length === 0)
+        return 0;
+    return 1 + Math.max(...children.map((c) => subtreeHeight(records, c.id)));
+}
+/**
+ * Reads a flat drop slot as a tree position. `rows` still hold the dragged
+ * row at `from` (its subtree collapsed); `slot` is its index in the
+ * resulting flat order; `xDrift` is the pointer's horizontal travel and
+ * every `indent` px of it is one level. Returns null for a slot the tree
+ * refuses: a parent that cannot have children, a subtree that would
+ * pass the depth limit, or any depth but the root for a row that is
+ * code-owned or the site root.
+ */
+export function projectDrop(rows, from, slot, xDrift, height, pageDepth, indent = 20) {
+    const others = rows.filter((_, i) => i !== from);
+    const above = slot > 0 ? others[slot - 1] : null;
+    const below = slot < others.length ? others[slot] : null;
+    const maxDepth = above ? above.depth + 1 : 0;
+    const minDepth = below ? below.depth : 0;
+    if (minDepth > maxDepth)
+        return null;
+    const wanted = rows[from].depth + Math.round(xDrift / indent);
+    const depth = Math.max(minDepth, Math.min(maxDepth, wanted));
+    if (depth + height >= pageDepth)
+        return null;
+    if (depth > 0 && rootOnly(rows[from]))
+        return null;
+    let parent = null;
+    if (depth > 0) {
+        for (let i = slot - 1; i >= 0; i--) {
+            if (others[i].depth === depth - 1) {
+                parent = others[i];
+                break;
+            }
+        }
+        if (!parent || !parent.canHaveChildren)
+            return null;
+    }
+    const parentId = parent?.id ?? null;
+    // A collapsed parent hides its children: the slot after it is "last child".
+    if (parent && parent.hasChildren && !parent.expanded)
+        return { depth, parentId, index: undefined };
+    let index = 0;
+    for (let i = 0; i < slot; i++)
+        if (others[i].parentId === parentId)
+            index++;
+    return { depth, parentId, index };
+}

package/dist/admin/tree-ops.d.ts

@@ -6,7 +6,14 @@ export declare function findNode(tree: PageTree, id: string): TreeNode | null;
 export declare function insertNode(tree: PageTree, zone: string, index: number, node: TreeNode): PageTree;
 export declare function removeNode(tree: PageTree, id: string): PageTree;
 export declare function moveNode(tree: PageTree, id: string, dir: -1 | 1): PageTree;
+/** Places `id` at `index` in its zone's RESULTING order (removed first,
+ *  then spliced in — moveItem's convention); clamped, and the same tree
+ *  when nothing changes. The drop path; `moveNode` stays for the arrows. */
+export declare function moveNodeTo(tree: PageTree, id: string, index: number): PageTree;
 export declare function patchNode(tree: PageTree, id: string, ns: "fields" | "styles" | "meta", key: string, value: unknown): PageTree;
+/** patchNode for a dotted path inside `fields` (spec 2026-09-10 §1):
+ *  `points.2.heading` sets one item's heading and copies only the spine. */
+export declare function patchNodePath(tree: PageTree, id: string, path: string, value: unknown): PageTree;
 export declare function canInsert(policy: ZonePolicy | undefined, count: number): boolean;
 export declare function allowedSections(policy: ZonePolicy | undefined, all: AdminSection[]): AdminSection[];
 /** The visual items the picker offers in a zone: materialized (an id is
@@ -15,7 +22,8 @@ export declare function allowedShared(policy: ZonePolicy | undefined, shared: Ad
 /** A page places a visual item as this node (spec 2026-09-07 §6): `item`
  *  names the registration, `ref` is the item's row id. */
 export declare function placementNode(item: AdminShared, ref: string, id: string): TreeNode;
-export declare function nodeFromSample(section: AdminSection, id: string): TreeNode;
+/** Also fills an element node (an `AdminElement` is a section shape plus contexts). */
+export declare function nodeFromSample(section: Pick<AdminSection, "name" | "fields" | "styles" | "sample">, id: string): TreeNode;
 /** A locked zone holds exactly one node the editor can never insert or
  * remove — so someone has to put it there. This does, from the component's
  * sample (or, for a zone bound to a shared item, a placement), for every
@@ -24,3 +32,5 @@ export declare function nodeFromSample(section: AdminSection, id: string): TreeN
  * schema. Returns the same tree when nothing changed. */
 export declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[], sharedIds?: Record<string, string>): PageTree;
 export declare function newNodeId(type: string): string;
+/** A page-level value — the template's page fields or the SEO meta (spec 2026-09-10 page fields §5). */
+export declare function patchPage(tree: PageTree, ns: "fields" | "meta", key: string, value: unknown): PageTree;

package/dist/admin/tree-ops.js

@@ -1,4 +1,5 @@
 import { SHARED_NODE_TYPE } from "../shared.js";
+import { setAtPath } from "./field-paths.js";
 export function zoneOf(tree, id) {
     for (const [zone, nodes] of Object.entries(tree.zones)) {
         if (nodes.some((n) => n.id === id))
@@ -40,12 +41,37 @@ export function moveNode(tree, id, dir) {
     [list[i], list[j]] = [list[j], list[i]];
     return withZone(tree, zone, list);
 }
+/** Places `id` at `index` in its zone's RESULTING order (removed first,
+ *  then spliced in — moveItem's convention); clamped, and the same tree
+ *  when nothing changes. The drop path; `moveNode` stays for the arrows. */
+export function moveNodeTo(tree, id, index) {
+    const zone = zoneOf(tree, id);
+    if (!zone)
+        return tree;
+    const list = tree.zones[zone];
+    const from = list.findIndex((n) => n.id === id);
+    const to = Math.max(0, Math.min(index, list.length - 1));
+    if (from === to)
+        return tree;
+    const next = [...list];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return withZone(tree, zone, next);
+}
 export function patchNode(tree, id, ns, key, value) {
     const zone = zoneOf(tree, id);
     if (!zone)
         return tree;
     return withZone(tree, zone, tree.zones[zone].map((n) => (n.id === id ? { ...n, [ns]: { ...(n[ns] ?? {}), [key]: value } } : n)));
 }
+/** patchNode for a dotted path inside `fields` (spec 2026-09-10 §1):
+ *  `points.2.heading` sets one item's heading and copies only the spine. */
+export function patchNodePath(tree, id, path, value) {
+    const zone = zoneOf(tree, id);
+    if (!zone)
+        return tree;
+    return withZone(tree, zone, tree.zones[zone].map((n) => (n.id === id ? { ...n, fields: setAtPath(n.fields, path, value) } : n)));
+}
 export function canInsert(policy, count) {
     if (!policy || policy.kind === "locked")
         return false;
@@ -85,11 +111,12 @@ const EMPTY_BY_TYPE = { refList: [], object: {} };
  * broken-image icon or a stray zero, worse than nothing at all. With no
  * sample, leave the key out of `fields` entirely rather than seed a lie. */
 const ABSENT_WHEN_UNSAMPLED = new Set(["image", "video", "file", "number"]);
+/** Also fills an element node (an `AdminElement` is a section shape plus contexts). */
 export function nodeFromSample(section, id) {
     const fields = {};
     const styles = {};
     for (const [key, d] of Object.entries(section.fields)) {
-        const sampled = section.sample?.[key];
+        const sampled = section.sample?.[key] ?? d.default ?? (d.type === "boolean" ? false : undefined);
         if (sampled !== undefined)
             fields[key] = sampled;
         else if (ABSENT_WHEN_UNSAMPLED.has(d.type))
@@ -141,3 +168,7 @@ export function fillLockedZones(tree, policies, sections, sharedIds = {}) {
 export function newNodeId(type) {
     return `${type}-${crypto.randomUUID().slice(0, 8)}`;
 }
+/** A page-level value — the template's page fields or the SEO meta (spec 2026-09-10 page fields §5). */
+export function patchPage(tree, ns, key, value) {
+    return { ...tree, [ns]: { ...(tree[ns] ?? {}), [key]: value } };
+}

package/dist/admin/ui/LocaleSwitcher.d.ts

@@ -1,4 +1,8 @@
 import type { AdminRegistry } from "../serialize.ts";
+/** Above this many supported locales the switch is a dropdown. */
+export declare const SEGMENTED_MAX = 3;
+/** "fi" → "Fi": the locale code as the pill reads it. */
+export declare const localeLabel: (locale: string) => string;
 export declare function LocaleSwitcher({ registry, present, parentLocales, value, adding, onSwitch, onAdd }: {
     registry: AdminRegistry;
     /** The locales the record has; `[value]` while nothing is loaded. */
@@ -9,3 +13,9 @@ export declare function LocaleSwitcher({ registry, present, parentLocales, value
     onSwitch(locale: string): void;
     onAdd(locale: string): void;
 }): import("react").JSX.Element;
+/** The lists' locale selector: every locale exists, nothing to add. */
+export declare function LocalePicker({ locales, value, onChange }: {
+    locales: readonly string[];
+    value: string;
+    onChange(locale: string): void;
+}): import("react").JSX.Element;

package/dist/admin/ui/LocaleSwitcher.js

@@ -1,15 +1,35 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Segmented } from "./primitives.js";
+/** Above this many supported locales the switch is a dropdown. */
+export const SEGMENTED_MAX = 3;
+/** "fi" → "Fi": the locale code as the pill reads it. */
+export const localeLabel = (locale) => locale.charAt(0).toUpperCase() + locale.slice(1);
 export function LocaleSwitcher({ registry, present, parentLocales, value, adding, onSwitch, onAdd }) {
-    const missing = registry.locales.supported.filter((l) => !present.includes(l) && l !== value);
+    const supported = registry.locales.supported;
+    const missing = supported.filter((l) => !present.includes(l) && l !== value);
+    const blocked = (l) => !parentLocales.includes(l);
+    const reason = (l) => `add ${l} to the parent first`;
+    if (supported.length <= SEGMENTED_MAX) {
+        return (_jsx(Segmented, { options: supported, value: value, disabled: adding, label: localeLabel, className: "sm-seg--locale", option: (l) => {
+                if (!missing.includes(l))
+                    return undefined;
+                return blocked(l)
+                    ? { disabled: true, title: reason(l), className: "sm-seg__opt--absent" }
+                    : { title: `Not in ${l} yet`, className: "sm-seg__opt--absent" };
+            }, onChange: onSwitch }));
+    }
     return (_jsxs("select", { className: "sm-input", style: { width: "auto" }, value: value, "aria-label": "Locale", onChange: (e) => { const v = e.target.value; if (v.startsWith("+"))
             onAdd(v.slice(1));
         else
-            onSwitch(v); }, children: [present.map((l) => _jsx("option", { value: l, children: l }, l)), !present.includes(value) && _jsxs("option", { value: value, children: [value, " (not yet)"] }), missing.length > 0 && (_jsx("optgroup", { label: "Add locale", disabled: adding, children: missing.map((l) => {
-                    const blocked = !parentLocales.includes(l);
-                    const reason = `add ${l} to the parent first`;
-                    return blocked
-                        ? _jsxs("option", { value: `+${l}`, disabled: true, title: reason, children: ["+ ", l, " \u2014 ", reason] }, l)
-                        : _jsxs("option", { value: `+${l}`, children: ["+ ", l] }, l);
-                }) }))] }));
+            onSwitch(v); }, children: [present.map((l) => _jsx("option", { value: l, children: localeLabel(l) }, l)), !present.includes(value) && _jsxs("option", { value: value, children: [localeLabel(value), " (not yet)"] }), missing.length > 0 && (_jsx("optgroup", { label: "Add locale", disabled: adding, children: missing.map((l) => blocked(l)
+                    ? _jsxs("option", { value: `+${l}`, disabled: true, title: reason(l), children: ["+ ", localeLabel(l), " \u2014 ", reason(l)] }, l)
+                    : _jsxs("option", { value: `+${l}`, children: ["+ ", localeLabel(l)] }, l)) }))] }));
+}
+/** The lists' locale selector: every locale exists, nothing to add. */
+export function LocalePicker({ locales, value, onChange }) {
+    if (locales.length <= SEGMENTED_MAX) {
+        return _jsx(Segmented, { options: locales, value: value, onChange: onChange, label: localeLabel, className: "sm-seg--locale" });
+    }
+    return (_jsx("select", { className: "sm-input", style: { width: "auto" }, value: value, "aria-label": "Locale", onChange: (e) => onChange(e.target.value), children: locales.map((l) => _jsx("option", { value: l, children: localeLabel(l) }, l)) }));
 }

package/dist/admin/ui/Modal.js

@@ -2,14 +2,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The one modal: a fixed overlay (click outside or Escape closes) and a
 // centred panel with a title row. Same overlay shape as InsertPicker.
-import { useEffect } from "react";
+// Rendered through a portal into the admin wrapper: a picker opened from
+// a card inside the canvas iframe must not be fixed to the iframe's
+// viewport (spec 2026-09-10 §5), and every modal escapes its parent's
+// overflow the same way. Static rendering (no document) keeps it inline.
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { IconButton } from "./primitives.js";
+function adminRoot() {
+    if (typeof document === "undefined")
+        return null;
+    return document.querySelector(".sm-admin") ?? document.body;
+}
 export function Modal({ title, width = 720, onClose, children, footer }) {
+    const [root] = useState(adminRoot);
     useEffect(() => {
         const onKey = (e) => { if (e.key === "Escape")
             onClose(); };
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
     }, [onClose]);
-    return (_jsx("div", { className: "sm-modal", onClick: onClose, children: _jsxs("div", { className: "sm-modal__panel", role: "dialog", "aria-label": title, style: { width }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "sm-modal__head", children: [_jsx("span", { className: "sm-title", children: title }), _jsx(IconButton, { label: "Close", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "sm-modal__body", children: children }), footer && _jsx("div", { className: "sm-modal__foot", children: footer })] }) }));
+    const modal = (_jsx("div", { className: "sm-modal", onClick: onClose, children: _jsxs("div", { className: "sm-modal__panel", role: "dialog", "aria-label": title, style: { width }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "sm-modal__head", children: [_jsx("span", { className: "sm-title", children: title }), _jsx(IconButton, { label: "Close", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "sm-modal__body", children: children }), footer && _jsx("div", { className: "sm-modal__foot", children: footer })] }) }));
+    return root ? createPortal(modal, root) : modal;
 }

package/dist/admin/ui/ResizeHandle.d.ts

@@ -0,0 +1 @@
+export declare function ResizeHandle(): import("react").JSX.Element;

package/dist/admin/ui/ResizeHandle.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The inspector's drag-to-resize handle (spec 2026-09-10 §3–§5). Rendered
+// between the main column and <aside class="sm-inspector"> inside .sm-editor.
+// A drag writes --inspector-w straight onto the .sm-admin wrapper — no React
+// state, so the canvas iframe is never re-rendered mid-gesture; only the
+// aria-valuenow re-renders, on release and after a keyboard step.
+import { useEffect, useRef, useState } from "react";
+import { INSPECTOR_W_KEY, MIN_INSPECTOR_W, RESIZE_STEP, clampInspectorW, maxInspectorW } from "./resize.js";
+/** The wrapper the variable lives on, the grid row, and the inspector itself. */
+const parts = (handle) => {
+    const admin = handle.closest(".sm-admin");
+    const grid = handle.parentElement;
+    const aside = handle.nextElementSibling;
+    return {
+        admin: admin instanceof HTMLElement ? admin : null,
+        grid: grid instanceof HTMLElement ? grid : null,
+        aside: aside instanceof HTMLElement ? aside : null,
+    };
+};
+const apply = (admin, px) => admin.style.setProperty("--inspector-w", `${px}px`);
+/** Private mode and blocked site data both throw; the width still changes. */
+const remember = (px) => {
+    try {
+        if (px === null)
+            localStorage.removeItem(INSPECTOR_W_KEY);
+        else
+            localStorage.setItem(INSPECTOR_W_KEY, String(px));
+    }
+    catch { /* not remembered */ }
+};
+export function ResizeHandle() {
+    const ref = useRef(null);
+    const drag = useRef(null);
+    const [now, setNow] = useState(null);
+    // A hidden tab lays out at zero width (seen in the desktop pane's walk):
+    // zero is "unknown", not a value — measured again on focus.
+    const measure = () => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const { aside } = parts(el);
+        if (aside && aside.offsetWidth > 0)
+            setNow(aside.offsetWidth);
+    };
+    useEffect(measure, []);
+    /** Clamp, write and remember one width; the aria value follows. */
+    const commit = (px) => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const { admin, grid } = parts(el);
+        if (!admin || !grid)
+            return;
+        const next = clampInspectorW(px, grid.clientWidth);
+        apply(admin, next);
+        remember(next);
+        setNow(next);
+    };
+    const reset = () => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const { admin } = parts(el);
+        if (!admin)
+            return;
+        admin.style.removeProperty("--inspector-w");
+        remember(null);
+        measure();
+    };
+    const onPointerDown = (e) => {
+        if (e.button !== 0 || drag.current)
+            return;
+        const { admin, grid, aside } = parts(e.currentTarget);
+        if (!admin || !grid || !aside)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        drag.current = { id: e.pointerId, startX: e.clientX, startW: aside.offsetWidth, rowW: grid.clientWidth, last: aside.offsetWidth };
+        admin.classList.add("sm-admin--resizing");
+    };
+    const onPointerMove = (e) => {
+        const d = drag.current;
+        if (!d || e.pointerId !== d.id)
+            return;
+        const { admin } = parts(e.currentTarget);
+        if (!admin)
+            return;
+        // The handle sits on the inspector's left edge: moving left widens it.
+        d.last = clampInspectorW(d.startW - (e.clientX - d.startX), d.rowW);
+        apply(admin, d.last);
+    };
+    // Also fires from releasePointerCapture below, when drag.current is already null.
+    const finish = (e) => {
+        const d = drag.current;
+        if (!d || e.pointerId !== d.id)
+            return;
+        drag.current = null;
+        const { admin } = parts(e.currentTarget);
+        if (e.currentTarget.hasPointerCapture(d.id))
+            e.currentTarget.releasePointerCapture(d.id);
+        admin?.classList.remove("sm-admin--resizing");
+        remember(d.last);
+        setNow(d.last);
+    };
+    const onKeyDown = (e) => {
+        const { grid, aside } = parts(e.currentTarget);
+        if (!grid || !aside || drag.current)
+            return;
+        const w = aside.offsetWidth;
+        let next = null;
+        if (e.key === "ArrowLeft")
+            next = w + RESIZE_STEP;
+        else if (e.key === "ArrowRight")
+            next = w - RESIZE_STEP;
+        else if (e.key === "Home")
+            next = MIN_INSPECTOR_W;
+        else if (e.key === "End")
+            next = maxInspectorW(grid.clientWidth);
+        if (next === null)
+            return;
+        e.preventDefault();
+        e.stopPropagation(); // the editor's window keydown must not see these
+        commit(next);
+    };
+    return (_jsx("div", { ref: ref, className: "sm-resize", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize inspector", "aria-valuemin": MIN_INSPECTOR_W, "aria-valuenow": now ?? undefined, title: "Drag to resize \u00B7 double-click to reset", tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finish, onPointerCancel: finish, onLostPointerCapture: finish, onDoubleClick: reset, onKeyDown: onKeyDown, onFocus: measure }));
+}

package/dist/admin/ui/primitives.d.ts

@@ -1,7 +1,7 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
 import type { SaveState } from "../editor/autosave.ts";
 /** The wordmark, inlined: a package can't ship a file into the host app's
- *  /public. Dark mode inverts it through --logo-filter, per the handoff. */
+ *  /public. Its colour is the --logo-color token (accent in the warm look). */
 export declare function Logo({ height }: {
     height?: number;
 }): import("react").JSX.Element;
@@ -27,11 +27,26 @@ export declare function IconButton({ label, tone, size, children, ...rest }: {
     size?: number;
     children: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+/** An on/off control in the design system's control language: a pill
+ *  track, a knob, the accent when on. A button, so it sits inside a
+ *  field's implicit label and the label click toggles it. */
+export declare function Switch({ checked, onChange, disabled, label }: {
+    checked: boolean;
+    onChange(next: boolean): void;
+    disabled?: boolean;
+    label?: string;
+}): import("react").JSX.Element;
+/** The drag handle every sortable row carries at its left edge (spec
+ *  2026-09-09 §2): a button, so it is focusable and takes the arrow keys;
+ *  `touch-action: none` (theme) so a finger on it drags instead of scrolling. */
+export declare function Grip(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
 /** Label + optional counter above a control — the handoff's Input/Textarea head.
  *  `asDiv` for groups holding more than one control: an implicit <label>
  *  activates its first labelable descendant, so wrapping several is a trap. */
-export declare function Field({ label, counter, hint, error, asDiv, children, style, className }: {
+export declare function Field({ label, mark, counter, hint, error, asDiv, children, style, className, path }: {
     label?: ReactNode;
+    /** A small glyph after the label — the field's "same in every language" mark. */
+    mark?: ReactNode;
     counter?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
@@ -39,17 +54,27 @@ export declare function Field({ label, counter, hint, error, asDiv, children, st
     children: ReactNode;
     style?: CSSProperties;
     className?: string;
+    /** The field's dotted path, for the canvas reveal (spec 2026-09-10 §8). */
+    path?: string;
 }): import("react").JSX.Element;
+/** The mark beside a field that is NOT `.localized()`: a globe-off, so a
+ *  multilingual form needs no "shared across languages" grouping. */
+export declare function UnlocalizedMark(): import("react").JSX.Element;
 export declare function TopBar({ left, right }: {
     left: ReactNode;
     right?: ReactNode;
 }): import("react").JSX.Element;
 /** `items` are crumbs; every one but the last is a link when given an href.
- *  Links route in place: the shell never reloads for a crumb. */
+ *  Links route in place: the shell never reloads for a crumb. A crumb whose
+ *  label starts with "/" (a page path) brings its own slash, so no
+ *  separator is drawn before it. A crumb's `trailing` node renders right
+ *  after it — the locale switch rides the first crumb, so it keeps its
+ *  place however long the title or path after it grows. */
 export declare function Breadcrumb({ items, backHref }: {
     items: {
         label: string;
         href?: string;
+        trailing?: ReactNode;
     }[];
     backHref?: string;
 }): import("react").JSX.Element;
@@ -58,12 +83,21 @@ export declare function Tabs<T extends string>({ tabs, value, onChange }: {
     value: T | undefined;
     onChange(tab: T): void;
 }): import("react").JSX.Element;
-export declare function Segmented<T extends string>({ options, value, onChange, stretch, disabled }: {
+export declare function Segmented<T extends string>({ options, value, onChange, stretch, disabled, label, option, className }: {
     options: readonly T[];
     value: T;
     onChange(v: T): void;
     stretch?: boolean;
     disabled?: boolean;
+    className?: string;
+    /** What an option reads as; the value itself by default. */
+    label?(o: T): ReactNode;
+    /** Per-option state: disabled with a reason, or a modifier class (an absent locale). */
+    option?(o: T): {
+        disabled?: boolean;
+        title?: string;
+        className?: string;
+    } | undefined;
 }): import("react").JSX.Element;
 export declare function StatusBadge({ status }: {
     status: string;