smoodly 0.0.12 → 0.0.13

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

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,6 +111,7 @@ 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 = {};

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,17 @@ export declare function IconButton({ label, tone, size, children, ...rest }: {
     size?: number;
     children: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>): 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 +45,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 +74,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;

package/dist/admin/ui/primitives.js

@@ -5,16 +5,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // values live here; every static rule, and all hover/focus state, lives in
 // theme.tsx's stylesheet.
 import { Fragment } from "react";
-import { Moon, Sun } from "lucide-react";
+import { GlobeOff, GripVertical, Moon, Sun } from "lucide-react";
 import { THEME_KEY } from "./theme.js";
 import { RouteLink } from "../shell/RouteLink.js";
 /** Lucide at the design system's size and stroke. */
 const ICON = { size: 14, strokeWidth: 1.5, "aria-hidden": true };
 /* ── brand ───────────────────────────────────────────────────────────── */
 /** 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 function Logo({ height = 18 }) {
-    return (_jsx("svg", { className: "sm-wordmark", style: { height }, viewBox: "0 0 183 43", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: _jsx("path", { fill: "#0038B1", d: "M13.294 9.9796C15.9908 9.9796 19.823 10.7144 21.4552 11.5204L20.1069 18.3473C18.1198 17.4228 15.3284 16.688 12.7973 16.688C11.307 16.688 10.3371 17.0198 10.3371 17.8021C10.3371 18.3236 10.8575 18.6318 11.7801 18.8214L13.7198 19.2481C17.7413 20.1251 19.7993 22.2111 19.7993 25.4112C19.7993 31.9063 14.7607 34.3716 8.23173 34.3716C4.9909 34.3716 1.8447 33.5893 0.046875 32.8782L1.48987 25.6009C3.90274 26.8572 7.14357 27.6395 9.22526 27.6395C10.7156 27.6395 11.7328 27.2602 11.7328 26.3357C11.7328 25.8142 11.3543 25.4112 10.2425 25.2216L8.58656 24.8897C5.44036 24.2971 2.74362 22.14 2.74362 18.6792C2.74362 13.2982 6.81239 10.0033 13.3413 10.0033L13.294 9.9796ZM52.8463 9.9796C49.014 9.9796 46.6012 12.0656 45.2528 13.5116C44.1883 11.3308 41.9174 9.9796 39.2916 9.9796C36.6658 9.9796 34.6551 10.9989 33.283 12.3975L33.6142 10.7381H26.0681L21.6208 33.6604H29.2616L32.0766 19.011C32.9992 17.8495 34.2529 16.9724 35.6013 16.9724C37.4464 16.9724 38.2034 18.2288 37.8249 20.22L35.2228 33.6604H42.8636L45.6786 18.9162C46.6012 17.8021 47.8549 16.9724 49.156 16.9724C51.0011 16.9724 51.7344 18.2288 51.3796 20.22L49.9366 27.7817C49.5581 29.7255 49.4635 31.9537 50.1732 33.6604H57.8139C57.1279 31.9537 57.1989 29.7255 57.5774 27.7817L59.3752 18.3236C60.3451 13.3219 57.1043 10.027 52.8463 10.027V9.9796ZM109.596 19.6273C109.596 27.6158 103.304 34.3241 94.7877 34.3241C89.7727 34.3241 86.1061 31.9537 84.6158 28.3743C84.4975 28.1136 84.19 28.0662 84.0244 28.3032C81.3986 31.93 77.0933 34.3241 72.031 34.3241C65.4074 34.3241 61.0548 30.1996 61.0548 24.629C61.0548 16.688 67.2998 9.9796 75.8159 9.9796C80.8545 9.9796 84.5211 12.3501 86.0351 15.882C86.1534 16.1428 86.4609 16.1902 86.6265 15.9531C89.2523 12.3501 93.5103 9.9559 98.5963 9.9559C105.267 9.9559 109.62 14.0805 109.62 19.6036L109.596 19.6273ZM78.7965 20.9785C78.7965 18.7029 77.2825 17.1858 74.8697 17.1858C71.6761 17.1858 69.0267 19.9592 69.0267 23.349C69.0267 25.672 70.5643 27.1417 72.9062 27.1417C76.0997 27.1417 78.7728 24.3682 78.7728 20.9785H78.7965ZM101.577 20.9785C101.577 18.7029 100.039 17.1858 97.65 17.1858C94.4565 17.1858 91.8307 19.9592 91.8307 23.349C91.8307 25.672 93.3447 27.1417 95.7103 27.1417C98.9038 27.1417 101.601 24.3682 101.601 20.9785H101.577ZM134.529 33.6367H126.888C126.652 33.1152 126.51 32.5226 126.463 31.93C124.972 33.0915 122.299 34.3479 119.484 34.3479C114.02 34.3479 110.968 29.9388 110.921 24.7475C110.921 16.7591 116.527 10.0033 123.837 10.0033C126.108 10.0033 128.331 10.6433 129.68 12.0419L132.022 0H139.662L134.293 27.7343C133.914 29.6781 133.819 31.9063 134.529 33.6367ZM128.331 18.9873C127.503 17.8258 126.06 17.1858 124.57 17.1858C121.14 17.1858 118.964 20.0066 118.964 23.1356C118.822 25.6957 120.454 27.1654 122.749 27.1654C124.002 27.1654 125.848 26.4305 127.101 25.3638L128.308 19.011L128.331 18.9873ZM146.002 27.758L151.348 0H143.708L138.338 27.7343C137.959 29.6781 137.865 31.9063 138.574 33.613H146.215C145.529 31.9063 145.624 29.6781 145.978 27.7343L146.002 27.758ZM169.752 10.7381L162.064 23.823L158.776 10.7381H150.71L156.86 32.4041L150.095 43.0237H158.421L178.552 10.7381H169.705H169.752ZM179.167 24.8423C176.258 24.8423 173.608 27.4024 173.608 30.2707C173.608 32.3093 175.099 33.8975 177.417 33.8975C180.421 33.8975 183.023 31.3374 183.023 28.4691C183.023 26.3831 181.486 24.8423 179.191 24.8423H179.167Z" }) }));
+    return (_jsx("svg", { className: "sm-wordmark", style: { height }, viewBox: "0 0 183 43", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: _jsx("path", { fill: "currentColor", d: "M13.294 9.9796C15.9908 9.9796 19.823 10.7144 21.4552 11.5204L20.1069 18.3473C18.1198 17.4228 15.3284 16.688 12.7973 16.688C11.307 16.688 10.3371 17.0198 10.3371 17.8021C10.3371 18.3236 10.8575 18.6318 11.7801 18.8214L13.7198 19.2481C17.7413 20.1251 19.7993 22.2111 19.7993 25.4112C19.7993 31.9063 14.7607 34.3716 8.23173 34.3716C4.9909 34.3716 1.8447 33.5893 0.046875 32.8782L1.48987 25.6009C3.90274 26.8572 7.14357 27.6395 9.22526 27.6395C10.7156 27.6395 11.7328 27.2602 11.7328 26.3357C11.7328 25.8142 11.3543 25.4112 10.2425 25.2216L8.58656 24.8897C5.44036 24.2971 2.74362 22.14 2.74362 18.6792C2.74362 13.2982 6.81239 10.0033 13.3413 10.0033L13.294 9.9796ZM52.8463 9.9796C49.014 9.9796 46.6012 12.0656 45.2528 13.5116C44.1883 11.3308 41.9174 9.9796 39.2916 9.9796C36.6658 9.9796 34.6551 10.9989 33.283 12.3975L33.6142 10.7381H26.0681L21.6208 33.6604H29.2616L32.0766 19.011C32.9992 17.8495 34.2529 16.9724 35.6013 16.9724C37.4464 16.9724 38.2034 18.2288 37.8249 20.22L35.2228 33.6604H42.8636L45.6786 18.9162C46.6012 17.8021 47.8549 16.9724 49.156 16.9724C51.0011 16.9724 51.7344 18.2288 51.3796 20.22L49.9366 27.7817C49.5581 29.7255 49.4635 31.9537 50.1732 33.6604H57.8139C57.1279 31.9537 57.1989 29.7255 57.5774 27.7817L59.3752 18.3236C60.3451 13.3219 57.1043 10.027 52.8463 10.027V9.9796ZM109.596 19.6273C109.596 27.6158 103.304 34.3241 94.7877 34.3241C89.7727 34.3241 86.1061 31.9537 84.6158 28.3743C84.4975 28.1136 84.19 28.0662 84.0244 28.3032C81.3986 31.93 77.0933 34.3241 72.031 34.3241C65.4074 34.3241 61.0548 30.1996 61.0548 24.629C61.0548 16.688 67.2998 9.9796 75.8159 9.9796C80.8545 9.9796 84.5211 12.3501 86.0351 15.882C86.1534 16.1428 86.4609 16.1902 86.6265 15.9531C89.2523 12.3501 93.5103 9.9559 98.5963 9.9559C105.267 9.9559 109.62 14.0805 109.62 19.6036L109.596 19.6273ZM78.7965 20.9785C78.7965 18.7029 77.2825 17.1858 74.8697 17.1858C71.6761 17.1858 69.0267 19.9592 69.0267 23.349C69.0267 25.672 70.5643 27.1417 72.9062 27.1417C76.0997 27.1417 78.7728 24.3682 78.7728 20.9785H78.7965ZM101.577 20.9785C101.577 18.7029 100.039 17.1858 97.65 17.1858C94.4565 17.1858 91.8307 19.9592 91.8307 23.349C91.8307 25.672 93.3447 27.1417 95.7103 27.1417C98.9038 27.1417 101.601 24.3682 101.601 20.9785H101.577ZM134.529 33.6367H126.888C126.652 33.1152 126.51 32.5226 126.463 31.93C124.972 33.0915 122.299 34.3479 119.484 34.3479C114.02 34.3479 110.968 29.9388 110.921 24.7475C110.921 16.7591 116.527 10.0033 123.837 10.0033C126.108 10.0033 128.331 10.6433 129.68 12.0419L132.022 0H139.662L134.293 27.7343C133.914 29.6781 133.819 31.9063 134.529 33.6367ZM128.331 18.9873C127.503 17.8258 126.06 17.1858 124.57 17.1858C121.14 17.1858 118.964 20.0066 118.964 23.1356C118.822 25.6957 120.454 27.1654 122.749 27.1654C124.002 27.1654 125.848 26.4305 127.101 25.3638L128.308 19.011L128.331 18.9873ZM146.002 27.758L151.348 0H143.708L138.338 27.7343C137.959 29.6781 137.865 31.9063 138.574 33.613H146.215C145.529 31.9063 145.624 29.6781 145.978 27.7343L146.002 27.758ZM169.752 10.7381L162.064 23.823L158.776 10.7381H150.71L156.86 32.4041L150.095 43.0237H158.421L178.552 10.7381H169.705H169.752ZM179.167 24.8423C176.258 24.8423 173.608 27.4024 173.608 30.2707C173.608 32.3093 175.099 33.8975 177.417 33.8975C180.421 33.8975 183.023 31.3374 183.023 28.4691C183.023 26.3831 181.486 24.8423 179.191 24.8423H179.167Z" }) }));
 }
 /** Light ⇄ dark, remembered in localStorage; an entry in the rail's user menu.
  *  The attribute goes on the ADMIN wrapper, never the host <html>: a customer's
@@ -51,34 +51,53 @@ export function LinkButton({ variant = "secondary", children, ...rest }) {
 export function IconButton({ label, tone = "default", size = 24, children, ...rest }) {
     return (_jsx("button", { type: "button", "aria-label": label, title: label, className: cx("sm-iconbtn", tone === "inverse" && "sm-iconbtn--inverse"), style: { width: size, height: size }, ...rest, children: children }));
 }
+/** 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 function Grip(props) {
+    return (_jsx("button", { type: "button", className: "sm-grip", "aria-label": "Drag to reorder", title: "Drag to reorder", ...props, children: _jsx(GripVertical, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }));
+}
 /** 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 function Field({ label, counter, hint, error, asDiv, children, style, className }) {
+export function Field({ label, mark, counter, hint, error, asDiv, children, style, className, path }) {
     const Tag = asDiv ? "div" : "label";
-    return (_jsxs(Tag, { className: cx("sm-field", className), style: style, children: [(label || counter) && (_jsxs("span", { className: "sm-field__head", children: [_jsx("span", { className: "sm-label", children: label }), counter && _jsx("span", { className: "sm-counter", children: counter })] })), children, hint && _jsx("span", { className: "sm-hint", children: hint }), error && _jsx("span", { className: "sm-error", children: error })] }));
+    return (_jsxs(Tag, { className: cx("sm-field", className), style: style, "data-sm-path": path, children: [(label || counter) && (_jsxs("span", { className: "sm-field__head", children: [_jsxs("span", { className: "sm-label", children: [label, mark] }), counter && _jsx("span", { className: "sm-counter", children: counter })] })), children, hint && _jsx("span", { className: "sm-hint", children: hint }), error && _jsx("span", { className: "sm-error", children: error })] }));
+}
+/** The mark beside a field that is NOT `.localized()`: a globe-off, so a
+ *  multilingual form needs no "shared across languages" grouping. */
+export function UnlocalizedMark() {
+    const title = "Same in every language";
+    return (_jsx("span", { className: "sm-label__mark", role: "img", "aria-label": title, title: title, children: _jsx(GlobeOff, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) }));
 }
 /* ── navigation ──────────────────────────────────────────────────────── */
 export function TopBar({ left, right }) {
     return (_jsxs("header", { className: "sm-topbar", children: [_jsx("div", { className: "sm-topbar__left", children: left }), _jsx("div", { className: "sm-topbar__right", children: right })] }));
 }
 /** `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 function Breadcrumb({ items, backHref }) {
     return (_jsxs("div", { className: "sm-crumbs", children: [backHref && _jsx(RouteLink, { className: "sm-back", href: backHref, "aria-label": "Back", children: "\u2190" }), items.map((it, i) => {
                 const last = i === items.length - 1;
-                return (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { className: "sm-crumbs__sep", children: "/" }), last
+                return (_jsxs(Fragment, { children: [i > 0 && !it.label.startsWith("/") && _jsx("span", { className: "sm-crumbs__sep", children: "/" }), last
                             ? _jsx("span", { className: "sm-crumbs__here", children: it.label })
                             : it.href
                                 ? _jsx(RouteLink, { href: it.href, style: { color: "inherit" }, children: it.label })
-                                : _jsx("span", { children: it.label })] }, i));
+                                : _jsx("span", { children: it.label }), it.trailing] }, i));
             })] }));
 }
 export function Tabs({ tabs, value, onChange }) {
     return (_jsx("div", { className: "sm-tabs", role: "tablist", children: tabs.map((t) => (_jsx("button", { type: "button", role: "tab", "aria-selected": t === value, className: "sm-tab", onClick: () => onChange(t), children: t }, t))) }));
 }
-export function Segmented({ options, value, onChange, stretch, disabled }) {
-    return (_jsx("div", { className: cx("sm-seg", stretch && "sm-seg--stretch", disabled && "sm-seg--disabled"), children: options.map((o) => (_jsx("button", { type: "button", className: "sm-seg__opt", "aria-pressed": o === value, disabled: disabled, onClick: () => onChange(o), children: o }, o))) }));
+export function Segmented({ options, value, onChange, stretch, disabled, label, option, className }) {
+    return (_jsx("div", { className: cx("sm-seg", stretch && "sm-seg--stretch", disabled && "sm-seg--disabled", className), children: options.map((o) => {
+            const extra = option?.(o);
+            return (_jsx("button", { type: "button", className: cx("sm-seg__opt", extra?.className), "aria-pressed": o === value, disabled: disabled || extra?.disabled, title: extra?.title, onClick: () => onChange(o), children: label ? label(o) : o }, o));
+        }) }));
 }
 /* ── data ────────────────────────────────────────────────────────────── */
 const STATUS_TONE = {

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

@@ -0,0 +1,16 @@
+/** Where the dragged width is remembered, browser-side only (like the theme). */
+export declare const INSPECTOR_W_KEY = "smoodly-inspector-w";
+/** Below this the richtext toolbar and the outline rows no longer fit. */
+export declare const MIN_INSPECTOR_W = 260;
+/** The token's value in the warm look; what a reset returns to. */
+export declare const DEFAULT_INSPECTOR_W = 320;
+/** One arrow-key press. */
+export declare const RESIZE_STEP = 16;
+/** Half the editor row (canvas + handle + inspector), never below the minimum. */
+export declare const maxInspectorW: (rowWidth: number) => number;
+/** An integer inside [MIN, half the row]. */
+export declare const clampInspectorW: (px: number, rowWidth: number) => number;
+/** A stored value is trusted only as a plain integer ≥ MIN; anything else is
+ *  ignored (never clamped or rewritten). The boot script in theme.tsx repeats
+ *  this test inline — keep the two in step. */
+export declare const parseStoredWidth: (raw: string | null) => number | null;