smoodly 0.0.12 → 0.0.13

package/dist/admin/editor/useCanvasBridge.js

@@ -5,18 +5,19 @@
 // goes dark, the iframe and the outline keep working.
 import { useCallback, useEffect, useRef, useState } from "react";
 const GEOMETRY_TIMEOUT_MS = 4000;
-export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover }) {
+export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover, onRendered }) {
     const [rects, setRects] = useState([]);
     const [emptyZones, setEmptyZones] = useState([]);
+    const [fields, setFields] = useState([]);
     const [docH, setDocH] = useState(900);
     const [geometry, setGeometry] = useState("waiting");
     // The listener registers once; the handlers are read through refs.
-    const handlers = useRef({ onSelect, onHover });
-    handlers.current = { onSelect, onHover };
+    const handlers = useRef({ onSelect, onHover, onRendered });
+    handlers.current = { onSelect, onHover, onRendered };
     // A new canvas URL (a locale switch, a rename) means new geometry — the
     // previous page's rects are stale the instant the iframe starts loading
     // a different route, so clear them alongside resetting geometry.
-    useEffect(() => { setGeometry("waiting"); setRects([]); setEmptyZones([]); }, [iframeSrc]);
+    useEffect(() => { setGeometry("waiting"); setRects([]); setEmptyZones([]); setFields([]); }, [iframeSrc]);
     const postToCanvas = useCallback((m) => {
         iframeRef.current?.contentWindow?.postMessage(m, "*");
     }, [iframeRef]);
@@ -30,14 +31,18 @@ export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover }) {
             if (m.kind === "rects") {
                 setRects(m.nodes);
                 setEmptyZones(m.emptyZones);
+                setFields(m.fields);
                 setDocH(m.docH);
                 setGeometry("ok");
             }
             else if (m.kind === "select") {
-                handlers.current.onSelect(m.id);
+                handlers.current.onSelect(m.id, m.path, m.x, m.y);
             }
             else if (m.kind === "hover") {
-                handlers.current.onHover(m.id);
+                handlers.current.onHover(m.id, m.path);
+            }
+            else if (m.kind === "rendered") {
+                handlers.current.onRendered();
             }
         };
         window.addEventListener("message", onMessage);
@@ -49,5 +54,5 @@ export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover }) {
         const t = setTimeout(() => setGeometry((g) => (g === "waiting" ? "missing" : g)), GEOMETRY_TIMEOUT_MS);
         return () => clearTimeout(t);
     }, [iframeSrc, geometry]);
-    return { rects, emptyZones, docH, geometry, postToCanvas };
+    return { rects, emptyZones, fields, docH, geometry, postToCanvas };
 }

package/dist/admin/editor/useInlineSession.d.ts

@@ -0,0 +1,46 @@
+import { type RefObject } from "react";
+import { type Session } from "./inline-session.ts";
+import type { ToBridge } from "./protocol.ts";
+export type RichtextMount = {
+    session: Session;
+    /** The marked container; its rendered children are hidden while `root` is inside it. */
+    container: HTMLElement;
+    /** The editor root appended inside the container, in the iframe's document. It is
+     *  `display: contents`: the container's flex/grid layout goes on the element holding
+     *  the blocks (InlineRichtext puts `layout` on the ProseMirror root), so the page's
+     *  gap between paragraphs survives the session. */
+    root: HTMLElement;
+    /** The container's layout to copy onto the ProseMirror root (inline-dom `layoutToCopy`). */
+    layout: Record<string, string>;
+    /** Removes the document-level Escape listener; set by the mount, called by the release. */
+    unlisten?: () => void;
+    /** Where the click landed, iframe client coordinates — the caret goes there. */
+    at: {
+        x: number;
+        y: number;
+    } | null;
+    /** Ended with changes: read-only until the refresh has rendered (spec §5). */
+    closing: boolean;
+};
+type Point = {
+    x: number;
+    y: number;
+} | null;
+export declare function useInlineSession({ iframeRef, postToCanvas, patch }: {
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+    postToCanvas(m: ToBridge): void;
+    /** Write a field value into the tree by node id and dotted path. */
+    patch(node: string, path: string, value: unknown): void;
+}): {
+    session: Session | null;
+    richtext: RichtextMount | null;
+    start: (session: Session, at: Point) => boolean;
+    end: () => void;
+    writeText: (node: string, path: string, value: string) => void;
+    markChanged: () => void;
+    onSaved: () => void;
+    onRendered: () => void;
+    onSelection: (id: string | null) => void;
+    onCanvasChange: () => void;
+};
+export {};

package/dist/admin/editor/useInlineSession.js

@@ -0,0 +1,244 @@
+"use client";
+// The inline editing session's DOM side (spec 2026-09-10 §3–§7). The
+// admin reaches the canvas iframe's document — same origin, the reason
+// the admin is embedded (DESIGN.md §2) — for exactly three things: a text
+// session (contentEditable on the real element), a richtext session (a
+// root appended inside the real container for InlineRichtext to portal
+// into, the rendered children hidden meanwhile) and the instant text
+// write. Everything mutates in place — the site's React keeps owning its
+// nodes, and a refresh reconciles into them. The decisions (one session,
+// the deferred refresh) are the pure reducer in ./inline-session.ts.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { EDITOR_ATTR, FIELD_ATTR, resolveMarkPath } from "../../marks.js";
+import { ADMIN_CSS } from "../ui/theme.js";
+import { isPlainTextHost, layoutToCopy, writeTextInto } from "./inline-dom.js";
+import { INITIAL_INLINE, reduceInline } from "./inline-session.js";
+/** How long a closing richtext editor waits for the refresh's `rendered` before letting go anyway. */
+const CLOSE_FALLBACK_MS = 4000;
+/** On a hidden child: its inline display before the session, restored after. */
+const HIDDEN_ATTR = "data-smd-hidden";
+export function useInlineSession({ iframeRef, postToCanvas, patch }) {
+    const [state, setState] = useState(INITIAL_INLINE);
+    const stateRef = useRef(state);
+    const [richtext, setRichtext] = useState(null);
+    const richtextRef = useRef(null);
+    const changedRef = useRef(false);
+    const textRef = useRef(null);
+    const closeTimer = useRef(null);
+    const patchRef = useRef(patch);
+    patchRef.current = patch;
+    const dispatch = useCallback((event) => {
+        const { state: next, refresh } = reduceInline(stateRef.current, event);
+        stateRef.current = next;
+        setState(next);
+        if (refresh)
+            postToCanvas({ source: "smoodly", kind: "refresh" });
+    }, [postToCanvas]);
+    /** The page's elements marked for this node and path — never the admin's own editor DOM. */
+    const findMarked = useCallback((d, node, path) => Array.from(d.querySelectorAll(`[${FIELD_ATTR}]`)).filter((el) => {
+        if (el.closest(`[${EDITOR_ATTR}]`))
+            return false;
+        const m = resolveMarkPath(el);
+        return m !== null && m.node === node && m.path === path;
+    }), []);
+    // ── richtext: mount and release ────────────────────────────────────────
+    const release = useCallback((mount) => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+        mount.unlisten?.();
+        richtextRef.current = null;
+        setRichtext(null);
+        mount.root.remove();
+        for (const child of Array.from(mount.container.children)) {
+            const was = child.getAttribute(HIDDEN_ATTR);
+            if (was === null)
+                continue;
+            child.style.display = was;
+            child.removeAttribute(HIDDEN_ATTR);
+        }
+    }, []);
+    const endRef = useRef(() => { }); // `end`, declared below — both sessions end through it
+    const mountRichtext = useCallback((d, session, at) => {
+        const container = findMarked(d, session.node, session.path)[0];
+        if (!container)
+            return false;
+        ensureStyles(d);
+        const root = d.createElement("div");
+        root.setAttribute(EDITOR_ATTR, "");
+        root.style.display = "contents";
+        const view = d.defaultView;
+        const layout = view ? layoutToCopy(view.getComputedStyle(container)) : {};
+        for (const child of Array.from(container.children)) {
+            child.setAttribute(HIDDEN_ATTR, child.style.display);
+            child.style.display = "none";
+        }
+        container.appendChild(root);
+        // Escape with the focus outside the editor — a card's button took it — still ends the
+        // session; inside, the editor's own keymap runs first (useRichtextEditor's onEscape).
+        const onKey = (e) => {
+            // No `instanceof Node`: the target belongs to the iframe's realm, not the admin's.
+            if (e.key !== "Escape" || richtextRef.current?.closing || root.contains(e.target))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            endRef.current();
+        };
+        d.addEventListener("keydown", onKey, true);
+        const mount = { session, container, root, at, closing: false, layout, unlisten: () => d.removeEventListener("keydown", onKey, true) };
+        richtextRef.current = mount;
+        setRichtext(mount);
+        changedRef.current = false;
+        return true;
+    }, [findMarked]);
+    // ── the text session ────────────────────────────────────────────────────
+    const mountText = useCallback((d, session, at) => {
+        const el = findMarked(d, session.node, session.path).find(isPlainTextHost);
+        if (!el)
+            return false;
+        el.setAttribute("contenteditable", "plaintext-only");
+        const onInput = () => patchRef.current(session.node, session.path, el.textContent ?? "");
+        const onKey = (e) => {
+            if (e.key === "Enter" || e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                endRef.current();
+            }
+        };
+        const onBlur = () => endRef.current();
+        el.addEventListener("input", onInput);
+        el.addEventListener("keydown", onKey);
+        el.addEventListener("blur", onBlur);
+        textRef.current = {
+            el,
+            teardown: () => {
+                el.removeEventListener("input", onInput);
+                el.removeEventListener("keydown", onKey);
+                el.removeEventListener("blur", onBlur);
+                el.removeAttribute("contenteditable");
+                // Back to one text node holding the value — what the site's React rendered.
+                const single = el.childNodes.length === 1 && el.firstChild?.nodeType === 3;
+                if (!single)
+                    el.textContent = el.textContent ?? "";
+            },
+        };
+        el.focus({ preventScroll: true });
+        if (at)
+            placeCaret(d, at.x, at.y);
+        return true;
+    }, [findMarked]);
+    // ── start and end ───────────────────────────────────────────────────────
+    const end = useCallback(() => {
+        if (!stateRef.current.session)
+            return;
+        const text = textRef.current;
+        const mount = richtextRef.current;
+        const changed = changedRef.current;
+        // The reducer first: the blur that removing contenteditable fires re-enters here and must see no session.
+        dispatch({ type: "end" });
+        if (text) {
+            textRef.current = null;
+            text.teardown();
+        }
+        if (mount && !mount.closing) {
+            if (changed) {
+                // Stay mounted read-only until the refresh has rendered, so the old markup never flashes.
+                const closing = { ...mount, closing: true };
+                richtextRef.current = closing;
+                setRichtext(closing);
+                closeTimer.current = setTimeout(() => { if (richtextRef.current === closing)
+                    release(closing); }, CLOSE_FALLBACK_MS);
+            }
+            else {
+                release(mount);
+            }
+        }
+    }, [dispatch, release]);
+    endRef.current = end;
+    const start = useCallback((session, at) => {
+        const d = iframeRef.current?.contentDocument;
+        if (!d)
+            return false;
+        // A closing editor still holds its container: a new session on that field waits; any other releases it.
+        const mount = richtextRef.current;
+        if (mount?.closing) {
+            if (mount.session.node === session.node && mount.session.path === session.path)
+                return false;
+            release(mount);
+        }
+        end();
+        const ok = session.kind === "text" ? mountText(d, session, at) : mountRichtext(d, session, at);
+        if (ok)
+            dispatch({ type: "start", session });
+        return ok;
+    }, [iframeRef, dispatch, end, release, mountText, mountRichtext]);
+    // ── the instant write (spec §7) ─────────────────────────────────────────
+    const writeText = useCallback((node, path, value) => {
+        const d = iframeRef.current?.contentDocument;
+        if (!d)
+            return;
+        for (const el of findMarked(d, node, path)) {
+            if (textRef.current?.el === el)
+                continue; // the session's own element is the source
+            writeTextInto(el, value);
+        }
+    }, [iframeRef, findMarked]);
+    // ── signals from the editor ─────────────────────────────────────────────
+    const markChanged = useCallback(() => { changedRef.current = true; }, []);
+    const onSaved = useCallback(() => dispatch({ type: "saved" }), [dispatch]);
+    const onRendered = useCallback(() => {
+        const mount = richtextRef.current;
+        if (mount?.closing)
+            release(mount);
+    }, [release]);
+    const onSelection = useCallback((id) => {
+        const s = stateRef.current.session;
+        if (s && s.node !== id)
+            end();
+    }, [end]);
+    const onCanvasChange = useCallback(() => {
+        // The old document is gone: tear down without a refresh, tolerating detached nodes.
+        const text = textRef.current;
+        textRef.current = null;
+        if (text) {
+            try {
+                text.teardown();
+            }
+            catch { /* the element left with its document */ }
+        }
+        const mount = richtextRef.current;
+        if (mount)
+            release(mount);
+        dispatch({ type: "canvas" });
+    }, [dispatch, release]);
+    useEffect(() => () => { if (closeTimer.current)
+        clearTimeout(closeTimer.current); }, []);
+    return { session: state.session, richtext, start, end, writeText, markChanged, onSaved, onRendered, onSelection, onCanvasChange };
+}
+/** The admin stylesheet inside the iframe, once: the cards inside the canvas editor are admin UI. */
+function ensureStyles(d) {
+    if (d.querySelector("style[data-smoodly-admin-styles]"))
+        return;
+    const style = d.createElement("style");
+    style.setAttribute("data-smoodly-admin-styles", "");
+    style.textContent = ADMIN_CSS;
+    d.head.appendChild(style);
+}
+/** The caret at a point, for the text session (spec §4). */
+function placeCaret(d, x, y) {
+    const sel = d.getSelection();
+    if (!sel)
+        return;
+    const doc = d;
+    const pos = doc.caretPositionFromPoint?.(x, y);
+    if (pos) {
+        sel.collapse(pos.offsetNode, pos.offset);
+        return;
+    }
+    const range = doc.caretRangeFromPoint?.(x, y);
+    if (range) {
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}

package/dist/admin/field-paths.d.ts

@@ -0,0 +1,13 @@
+import type { AdminField } from "./serialize.ts";
+export declare const splitPath: (path: string) => string[];
+/** The descriptor at `path` in `section.fields`; null when the path is
+ *  not in the schema. A list without an item descriptor is a list of text
+ *  (the same default FieldWidget renders). */
+export declare function descriptorAt(section: {
+    fields: Record<string, AdminField>;
+}, path: string): AdminField | null;
+export declare function getAtPath(fields: Record<string, unknown> | undefined, path: string): unknown;
+/** `fields` with the value at `path` replaced. Copies only the spine —
+ *  siblings keep their identity — and keeps arrays arrays. Missing
+ *  objects along the way are created. */
+export declare function setAtPath(fields: Record<string, unknown> | undefined, path: string, value: unknown): Record<string, unknown>;

package/dist/admin/field-paths.js

@@ -0,0 +1,49 @@
+export const splitPath = (path) => path.split(".").filter((s) => s !== "");
+const isIndex = (s) => /^\d+$/.test(s);
+/** The descriptor at `path` in `section.fields`; null when the path is
+ *  not in the schema. A list without an item descriptor is a list of text
+ *  (the same default FieldWidget renders). */
+export function descriptorAt(section, path) {
+    const segments = splitPath(path);
+    if (segments.length === 0)
+        return null;
+    let d = section.fields[segments[0]];
+    for (const seg of segments.slice(1)) {
+        if (!d)
+            return null;
+        if (d.type === "list")
+            d = isIndex(seg) ? d.item ?? { type: "text" } : undefined;
+        else if (d.type === "object")
+            d = d.fields?.[seg];
+        else
+            return null;
+    }
+    return d ?? null;
+}
+export function getAtPath(fields, path) {
+    let v = fields;
+    for (const seg of splitPath(path)) {
+        if (v === null || typeof v !== "object")
+            return undefined;
+        v = v[seg];
+    }
+    return v;
+}
+/** `fields` with the value at `path` replaced. Copies only the spine —
+ *  siblings keep their identity — and keeps arrays arrays. Missing
+ *  objects along the way are created. */
+export function setAtPath(fields, path, value) {
+    const set = (obj, segments) => {
+        if (segments.length === 0)
+            return value;
+        const [head, ...rest] = segments;
+        if (Array.isArray(obj)) {
+            const copy = obj.slice();
+            copy[Number(head)] = set(obj[Number(head)], rest);
+            return copy;
+        }
+        const o = (obj !== null && typeof obj === "object" ? obj : {});
+        return { ...o, [head]: set(o[head], rest) };
+    };
+    return set(fields ?? {}, splitPath(path));
+}

package/dist/admin/forms/FieldWidget.d.ts

@@ -1,6 +1,6 @@
-import { type ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type { AdminField } from "../serialize.ts";
-export declare function FieldWidget({ descriptor: d, value, onChange, errors, path: pathProp, bare, refOptions, fieldKey, prefix, }: {
+export declare function FieldWidget({ descriptor: d, value, onChange, errors, path: pathProp, bare, refOptions, fieldKey, prefix, mark, inlinePath, onEditHere, }: {
     descriptor: AdminField;
     value: unknown;
     onChange(value: unknown): void;
@@ -16,4 +16,9 @@ export declare function FieldWidget({ descriptor: d, value, onChange, errors, pa
     }[];
     fieldKey: string;
     prefix?: string;
+    /** A glyph after the label — the forms' "same in every language" mark. */
+    mark?: ReactNode;
+    /** The path of the field being edited in the canvas: its richtext widget yields to a note. */
+    inlinePath?: string;
+    onEditHere?(): void;
 }): ReactElement;

package/dist/admin/forms/FieldWidget.js

@@ -1,23 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// One schema descriptor → one labelled control, in the design system's
-// field language: uppercase 9px label, inset control with no border at
-// rest, 1.5px accent border + soft ring on focus (all in ui/theme.tsx).
-// Objects and lists recurse through this same component; the list's
-// logic lives in ./list.ts as pure functions.
-import { useState } from "react";
 import { RichtextWidget } from "./RichtextWidget.js";
 import { MediaWidget } from "./MediaWidget.js";
+import { ListField } from "./ListField.js";
 import { Button, Field, IconButton } from "../ui/primitives.js";
-import { addItem, itemSummary, moveIndex, moveItem, patchObject, removeIndex, removeItem } from "./list.js";
+import { patchObject } from "./list.js";
 const label = (key) => key.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase());
-export function FieldWidget({ descriptor: d, value, onChange, errors, path: pathProp, bare, refOptions = [], fieldKey, prefix, }) {
+export function FieldWidget({ descriptor: d, value, onChange, errors, path: pathProp, bare, refOptions = [], fieldKey, prefix, mark, inlinePath, onEditHere, }) {
     const path = pathProp ?? fieldKey;
     const message = errors?.[path];
-    // Unused for non-list types, but hooks must be unconditional — a list's
-    // rows key their collapse state to this rather than to array position,
-    // so a move or remove doesn't reassign which row looks open.
-    const [collapsed, setCollapsed] = useState(() => new Set());
     const optionTitle = (o) => o.status === "draft" ? `${o.title} (draft)` : o.title;
     let control;
     let counter;
@@ -44,7 +35,9 @@ export function FieldWidget({ descriptor: d, value, onChange, errors, path: path
         case "richtext":
             // The toolbar holds buttons, so this control can never sit in a <label>.
             asDiv = true;
-            control = _jsx(RichtextWidget, { value: value, toolset: d.toolset, onChange: onChange });
+            control = inlinePath === path
+                ? _jsx(InlineNote, { onEditHere: onEditHere })
+                : _jsx(RichtextWidget, { value: value, toolset: d.toolset, onChange: onChange, errors: errors, path: path });
             break;
         case "image":
         case "video":
@@ -64,33 +57,16 @@ export function FieldWidget({ descriptor: d, value, onChange, errors, path: path
         case "object": {
             asDiv = true;
             const obj = (value && typeof value === "object" && !Array.isArray(value) ? value : {});
-            control = (_jsx("div", { className: "sm-group", children: Object.entries(d.fields ?? {}).map(([k, sub]) => (_jsx(FieldWidget, { fieldKey: k, descriptor: sub, value: obj[k], errors: errors, path: `${path}.${k}`, onChange: (v) => onChange(patchObject(obj, k, v, d.optional === true)) }, k))) }));
+            control = (_jsx("div", { className: "sm-group", children: Object.entries(d.fields ?? {}).map(([k, sub]) => (_jsx(FieldWidget, { fieldKey: k, descriptor: sub, value: obj[k], errors: errors, path: `${path}.${k}`, inlinePath: inlinePath, onEditHere: onEditHere, onChange: (v) => onChange(patchObject(obj, k, v, d.optional === true)) }, k))) }));
             break;
         }
         case "list": {
             asDiv = true;
             const items = Array.isArray(value) ? value : [];
             const item = d.item ?? { type: "text" };
-            const atMax = typeof d.max === "number" && items.length >= d.max;
             if (typeof d.max === "number")
                 counter = `${items.length} of ${d.max}`;
-            control = (_jsxs("div", { className: "sm-list", children: [items.map((it, i) => (_jsx(ListRow, { index: i, count: items.length, summary: itemSummary(it, i), open: !collapsed.has(i), onToggle: () => setCollapsed((prev) => {
-                            const next = new Set(prev);
-                            if (next.has(i))
-                                next.delete(i);
-                            else
-                                next.add(i);
-                            return next;
-                        }), onMove: (to) => {
-                            const moved = moveItem(items, i, to);
-                            if (moved !== items) {
-                                onChange(moved);
-                                setCollapsed((prev) => moveIndex(prev, i, to));
-                            }
-                        }, onRemove: () => {
-                            onChange(removeItem(items, i));
-                            setCollapsed((prev) => removeIndex(prev, i));
-                        }, children: _jsx(FieldWidget, { fieldKey: String(i), descriptor: item, value: it, errors: errors, path: `${path}.${i}`, bare: true, onChange: (v) => onChange(items.map((x, j) => (j === i ? v : x))) }) }, i))), _jsx(Button, { variant: "secondary", disabled: atMax, onClick: () => onChange(addItem(items, d)), children: "Add" })] }));
+            control = (_jsx(ListField, { descriptor: d, items: items, onChange: onChange, path: path, renderItem: (it, i) => (_jsx(FieldWidget, { fieldKey: String(i), descriptor: item, value: it, errors: errors, path: `${path}.${i}`, bare: true, inlinePath: inlinePath, onEditHere: onEditHere, onChange: (v) => onChange(items.map((x, j) => (j === i ? v : x))) })) }));
             break;
         }
         default:
@@ -102,13 +78,9 @@ export function FieldWidget({ descriptor: d, value, onChange, errors, path: path
     // A <label> activates its first labelable descendant, so it may only wrap a
     // single control — around refList's rows, an object's fieldset or a list's
     // rows it would turn every click into a press of the first button.
-    return (_jsx(Field, { label: label(fieldKey), counter: counter, error: message, asDiv: asDiv, children: control }));
+    return (_jsx(Field, { label: label(fieldKey), mark: mark, counter: counter, error: message, asDiv: asDiv, path: path, children: control }));
 }
-/** One list item: a header with the summary and the row controls, the
- *  item's widget underneath while expanded. Header is a div, not a label.
- *  Collapse state lives in the parent `FieldWidget`, keyed to the item's
- *  index rather than to `key={i}` position, so a move or remove doesn't
- *  hand this row someone else's open/closed state. */
-function ListRow({ index, count, summary, open, onToggle, onMove, onRemove, children }) {
-    return (_jsxs("div", { className: "sm-listrow", children: [_jsxs("div", { className: "sm-listrow__head", children: [_jsxs("button", { type: "button", className: "sm-listrow__toggle", "aria-expanded": open, onClick: onToggle, children: [_jsx("span", { "aria-hidden": "true", children: open ? "▾" : "▸" }), _jsx("span", { className: "sm-listrow__summary", children: summary })] }), _jsx(IconButton, { label: "Move up", disabled: index === 0, onClick: () => onMove(index - 1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", disabled: index === count - 1, onClick: () => onMove(index + 1), children: "\u2193" }), _jsx(IconButton, { label: "Remove", onClick: onRemove, children: "\u00D7" })] }), open && _jsx("div", { className: "sm-listrow__body", children: children })] }));
+/** The richtext field while it is edited in the canvas (spec 2026-09-10 §5). */
+function InlineNote({ onEditHere }) {
+    return (_jsxs("div", { className: "sm-inline-note", children: [_jsx("span", { children: "Editing in the canvas" }), _jsx(Button, { variant: "secondary", onClick: onEditHere, children: "Edit here" })] }));
 }

package/dist/admin/forms/ListField.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import type { AdminField } from "../serialize.ts";
+export declare function ListField({ descriptor: d, items, onChange, renderItem, path }: {
+    descriptor: AdminField;
+    items: unknown[];
+    onChange(value: unknown[]): void;
+    renderItem(item: unknown, index: number): ReactNode;
+    /** The list's dotted path; each row carries `<path>.<i>` for the canvas reveal. */
+    path?: string;
+}): import("react").JSX.Element;

package/dist/admin/forms/ListField.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A list field's rows: collapse per row, add and remove, and reordering
+// by drag (useSortable), by the arrow keys on the grip, or by the ↑/↓
+// buttons — every path through the pure helpers in ./list.ts. The item
+// widget is rendered by the caller (FieldWidget), which keeps this file
+// free of the recursion.
+import { useState } from "react";
+import { Button, Grip, IconButton } from "../ui/primitives.js";
+import { useSortable } from "../ui/useSortable.js";
+import { addItem, itemSummary, moveIndex, moveItem, removeIndex, removeItem } from "./list.js";
+export function ListField({ descriptor: d, items, onChange, renderItem, path }) {
+    // Keyed to the item's index rather than to `key={i}` position, so a move
+    // or remove doesn't hand a row someone else's open/closed state.
+    const [collapsed, setCollapsed] = useState(() => new Set());
+    const atMax = typeof d.max === "number" && items.length >= d.max;
+    const move = (from, to) => {
+        const moved = moveItem(items, from, to);
+        if (moved === items)
+            return;
+        onChange(moved);
+        setCollapsed((prev) => moveIndex(prev, from, to));
+    };
+    const sortable = useSortable({ count: items.length, onDrop: move });
+    return (_jsxs("div", { className: "sm-list", ref: sortable.containerRef, children: [items.map((it, i) => (_jsx(ListRow, { index: i, count: items.length, summary: itemSummary(it, i), open: !collapsed.has(i), path: path === undefined ? undefined : `${path}.${i}`, style: sortable.rowStyle(i), className: sortable.rowClass(i), grip: _jsx(Grip, { ...sortable.handleProps(i) }), onToggle: () => setCollapsed((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(i))
+                        next.delete(i);
+                    else
+                        next.add(i);
+                    return next;
+                }), onMove: (to) => move(i, to), onRemove: () => {
+                    onChange(removeItem(items, i));
+                    setCollapsed((prev) => removeIndex(prev, i));
+                }, children: renderItem(it, i) }, i))), _jsx(Button, { variant: "secondary", disabled: atMax, onClick: () => onChange(addItem(items, d)), children: "Add" })] }));
+}
+/** One list item: a header with the grip, the summary and the row
+ *  controls, the item's widget underneath while expanded. Header is a
+ *  div, not a label (a label would press its first button on any click). */
+function ListRow({ index, count, summary, open, style, className, grip, path, onToggle, onMove, onRemove, children }) {
+    return (_jsxs("div", { className: className ? `sm-listrow ${className}` : "sm-listrow", style: style, "data-sm-path": path, children: [_jsxs("div", { className: "sm-listrow__head", children: [grip, _jsxs("button", { type: "button", className: "sm-listrow__toggle", "aria-expanded": open, onClick: onToggle, children: [_jsx("span", { "aria-hidden": "true", children: open ? "▾" : "▸" }), _jsx("span", { className: "sm-listrow__summary", children: summary })] }), _jsx(IconButton, { label: "Move up", disabled: index === 0, onClick: () => onMove(index - 1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", disabled: index === count - 1, onClick: () => onMove(index + 1), children: "\u2193" }), _jsx(IconButton, { label: "Remove", onClick: onRemove, children: "\u00D7" })] }), open && _jsx("div", { className: "sm-listrow__body", children: children })] }));
+}

package/dist/admin/forms/MediaWidget.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // The media field widget (spec 2026-09-08 media §10): empty is a drop
 // zone (upload straight away, or open the library); filled is the
-// thumbnail with the crop applied, the alt, and Replace / Edit / Remove.
+// thumbnail with the crop applied — contained on a canvas at most
+// CANVAS_H tall, the frame sized min(CANVAS_H tall, full width) so it
+// keeps its aspect — the alt, and Replace / Edit / Remove.
 // The record comes from the assets context (cached per id); `asset`
 // preloads it for static renders.
 import { useEffect, useState } from "react";
@@ -14,6 +16,8 @@ import { uploadFile } from "./upload.js";
 import { MediaPicker } from "./MediaPicker.js";
 import { CropEditor } from "./CropEditor.js";
 import { AssetThumb } from "./MediaGrid.js";
+/** The filled preview's canvas height cap (the stylesheet repeats it). */
+const CANVAS_H = 300;
 export function MediaWidget({ descriptor, value, onChange, asset: preloaded }) {
     const assets = useAssets();
     const kind = descriptor.type;
@@ -75,8 +79,11 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded }) {
             const image = { url: asset.url, width: asset.width, height: asset.height, mime: asset.mime, alt: "", crop: v.crop, hotspot: v.hotspot, aspect: v.aspect ?? (typeof descriptor.aspect === "string" ? descriptor.aspect : undefined) };
             const box = boxAspectOf(image);
             const f = frameFor(image, box);
-            return (_jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(box) }, children: _jsx("img", { src: asset.url, alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }));
-        })() : asset.kind === "video" ? (_jsx("div", { className: "sm-media__thumb", style: { aspectRatio: asset.width && asset.height ? `${asset.width} / ${asset.height}` : "16 / 9" }, children: _jsx(AssetThumb, { asset: asset, className: "sm-mediacard__img" }) })) : (_jsxs("div", { className: "sm-media__chip", children: [_jsx("span", { style: { fontWeight: 500 }, children: asset.filename }), _jsx("span", { className: "sm-media__alt", children: formatBytes(asset.size) })] }));
+            return (_jsx("div", { className: "sm-media__canvas", children: _jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(box), width: `calc(${CANVAS_H}px * ${box})` }, children: _jsx("img", { src: asset.url, alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }) }));
+        })() : asset.kind === "video" ? (() => {
+            const ratio = asset.width && asset.height ? asset.width / asset.height : 16 / 9;
+            return (_jsx("div", { className: "sm-media__canvas", children: _jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(ratio), width: `calc(${CANVAS_H}px * ${ratio})` }, children: _jsx(AssetThumb, { asset: asset, className: "sm-mediacard__img" }) }) }));
+        })() : (_jsxs("div", { className: "sm-media__chip", children: [_jsx("span", { style: { fontWeight: 500 }, children: asset.filename }), _jsx("span", { className: "sm-media__alt", children: formatBytes(asset.size) })] }));
         body = (_jsxs("div", { className: "sm-media", children: [preview, asset.kind === "image" && _jsx("span", { className: "sm-media__alt", children: v.alt ?? asset.alt ?? "No alt text" }), _jsxs("div", { className: "sm-media__actions", children: [_jsx(Button, { variant: "secondary", onClick: () => setPicker(true), children: "Replace" }), asset.kind === "image" && _jsx(Button, { variant: "secondary", onClick: () => setCrop(true), children: "Edit" }), _jsx(Button, { variant: "secondary", onClick: () => onChange(undefined), children: "Remove" })] })] }));
     }
     return (_jsxs(_Fragment, { children: [body, error && _jsx("span", { className: "sm-error", children: error }), picker && _jsx(MediaPicker, { kinds: [kind], onPick: select, onClose: () => setPicker(false) }), crop && asset && (_jsx(CropEditor, { asset: asset, descriptor: descriptor, value: value, onSave: (next) => { onChange(next); setCrop(false); }, onClose: () => setCrop(false) }))] }));

package/dist/admin/forms/RichtextElementCard.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from "react";
+import { type NodeViewProps } from "@tiptap/react";
+export declare function RichtextElementCard({ node, editor, getPos, updateAttributes, deleteNode, selected }: NodeViewProps): ReactElement;