smoodly 0.0.12 → 0.0.14

package/dist/admin/forms/FieldWidget.js

@@ -1,23 +1,17 @@
 "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 { Button, Field, IconButton } from "../ui/primitives.js";
-import { addItem, itemSummary, moveIndex, moveItem, patchObject, removeIndex, removeItem } from "./list.js";
+import { ListField } from "./ListField.js";
+import { optionsOf } from "../../fields.js";
+import { Button, Field, IconButton, Switch } from "../ui/primitives.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: valueProp, 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());
+    // The descriptor's default shows while the value is absent (spec 2026-09-10 page fields §1).
+    const value = valueProp === undefined && d.default !== undefined ? d.default : valueProp;
     const optionTitle = (o) => o.status === "draft" ? `${o.title} (draft)` : o.title;
     let control;
     let counter;
@@ -36,15 +30,34 @@ export function FieldWidget({ descriptor: d, value, onChange, errors, path: path
         case "number":
             control = (_jsx("input", { className: "sm-input", type: "number", value: value == null ? "" : String(value), onChange: (e) => onChange(e.target.value === "" ? undefined : Number(e.target.value)) }));
             break;
+        case "boolean":
+            control = _jsx(Switch, { checked: value === true, onChange: onChange });
+            break;
         case "select": {
-            const options = Array.isArray(d.options) ? d.options : [];
-            control = (_jsxs("select", { className: "sm-select", value: String(value ?? ""), onChange: (e) => onChange(e.target.value), children: [d.optional === true && _jsx("option", { value: "", children: "\u2014" }), options.map((o) => _jsx("option", { value: o, children: o }, o))] }));
+            const options = optionsOf(d.options);
+            control = (_jsxs("select", { className: "sm-select", value: String(value ?? ""), onChange: (e) => onChange(e.target.value), children: [d.optional === true && _jsx("option", { value: "", children: "\u2014" }), options.map((o) => _jsx("option", { value: o.value, children: o.label }, o.value))] }));
+            break;
+        }
+        case "radio": {
+            asDiv = true; // several inputs: never inside one implicit label
+            control = (_jsx("div", { className: "sm-choices", role: "radiogroup", children: optionsOf(d.options).map((o) => (_jsxs("label", { className: "sm-choice", children: [_jsx("input", { type: "radio", name: path, value: o.value, checked: value === o.value, onChange: () => onChange(o.value) }), o.label] }, o.value))) }));
+            break;
+        }
+        case "checkboxes": {
+            asDiv = true;
+            const chosen = Array.isArray(value) ? value : [];
+            const all = optionsOf(d.options);
+            // Stored in option order, whatever order the boxes were ticked in.
+            const toggle = (v, on) => onChange(all.map((o) => o.value).filter((x) => (x === v ? on : chosen.includes(x))));
+            control = (_jsx("div", { className: "sm-choices", children: all.map((o) => (_jsxs("label", { className: "sm-choice", children: [_jsx("input", { type: "checkbox", checked: chosen.includes(o.value), onChange: (e) => toggle(o.value, e.target.checked) }), o.label] }, o.value))) }));
             break;
         }
         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 +77,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 +98,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;

package/dist/admin/forms/RichtextElementCard.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The element node view (spec 2026-09-08 block nodes §3): the node view IS
+// the form — a header (icon, title, collapse, delete) and the element's
+// fields then styles through FieldWidget, reading and writing attrs.
+// A richtext field inside mounts a nested RichtextWidget with its own
+// toolset. Errors come from the enclosing form under
+// `<path>.elements.<i>.<key>`, i being this node's index among the
+// document's element nodes. Collapse is component state only: a card
+// starts collapsed (2026-09-09) unless it holds nothing yet — a freshly
+// inserted element opens, so its fields can be filled straight away.
+import { useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { IconButton } from "../ui/primitives.js";
+import { FieldWidget } from "./FieldWidget.js";
+import { useElements } from "./elements-context.js";
+import { cardClass, useRichtextForm } from "./richtext-form-context.js";
+import { elementIndexAt } from "./richtext-insert.js";
+/** No field holds a value yet — the state right after an insert. */
+function isBlank(fields) {
+    return Object.values(fields).every((v) => v === undefined || v === null || v === "");
+}
+export function RichtextElementCard({ node, editor, getPos, updateAttributes, deleteNode, selected }) {
+    const elements = useElements();
+    const form = useRichtextForm();
+    const name = String(node.attrs.name ?? "");
+    const element = elements.find((e) => e.name === name);
+    const fields = (node.attrs.fields && typeof node.attrs.fields === "object" ? node.attrs.fields : {});
+    const styles = (node.attrs.styles && typeof node.attrs.styles === "object" ? node.attrs.styles : {});
+    const [open, setOpen] = useState(() => isBlank(fields));
+    const pos = getPos();
+    const index = typeof pos === "number" ? elementIndexAt(editor.state.doc, pos) : 0;
+    const base = `${form.path}.elements.${index}`;
+    const select = () => { if (typeof pos === "number")
+        editor.commands.setNodeSelection(pos); };
+    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [Object.entries(element.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), Object.entries(element.styles).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: styles[key], path: `${base}.styles.${key}`, onChange: (v) => updateAttributes({ styles: { ...styles, [key]: v } }) }, `style-${key}`)))] }))] }));
+}

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

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

package/dist/admin/forms/RichtextImageCard.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The image node view (spec 2026-09-08 block nodes §3): thumbnail,
+// filename, an alt input whose placeholder is the library's alt, a
+// caption input, Replace and Delete. Attribute edits go through
+// updateAttributes so the outer history sees them. Inputs stop keys from
+// reaching the editor (TipTap's node view stops events from form
+// controls), so Backspace in the caption never deletes the node.
+import { useEffect, useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import { IconButton } from "../ui/primitives.js";
+import { useAssets } from "./assets-context.js";
+import { MediaPicker } from "./MediaPicker.js";
+import { cardClass, useRichtextForm } from "./richtext-form-context.js";
+export function RichtextImageCard({ node, editor, getPos, updateAttributes, deleteNode, selected }) {
+    const assets = useAssets();
+    const form = useRichtextForm();
+    const value = (node.attrs.image ?? {});
+    const caption = typeof node.attrs.caption === "string" ? node.attrs.caption : "";
+    const id = typeof value.asset === "string" ? value.asset : null;
+    const [asset, setAsset] = useState(null);
+    const [picker, setPicker] = useState(false);
+    useEffect(() => {
+        if (!id) {
+            setAsset(null);
+            return;
+        }
+        let live = true;
+        assets.get(id).then((r) => { if (live)
+            setAsset(r); });
+        return () => { live = false; };
+    }, [id, assets]);
+    const select = () => { const pos = getPos(); if (typeof pos === "number")
+        editor.commands.setNodeSelection(pos); };
+    const setAlt = (alt) => updateAttributes({ image: alt === "" ? { asset: id } : { asset: id, alt } });
+    const replace = (record) => {
+        assets.remember(record);
+        setPicker(false);
+        updateAttributes({ image: value.alt ? { asset: record.id, alt: value.alt } : { asset: record.id } });
+    };
+    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, "data-drag-handle": true, children: [_jsxs("div", { className: "sm-rtcard__head", onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: "\u25A3" }), _jsx("span", { className: "sm-rtcard__title", children: "Image" }), _jsx(IconButton, { label: "Replace image", onClick: () => setPicker(true), children: "\u21BB" }), _jsx(IconButton, { label: "Delete image", onClick: () => deleteNode(), children: "\u00D7" })] }), _jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [asset ? _jsx("img", { className: "sm-rtcard__thumb", src: asset.url, alt: "" }) : _jsx("div", { className: "sm-rtcard__thumb", style: { height: 80 } }), asset && _jsx("span", { className: "sm-rtcard__file", children: asset.filename }), _jsx("input", { className: "sm-input", "aria-label": "Alt text", placeholder: asset?.alt ?? "Alt text", value: value.alt ?? "", onChange: (e) => setAlt(e.target.value) }), _jsx("input", { className: "sm-input", "aria-label": "Caption", placeholder: "Caption", value: caption, onChange: (e) => updateAttributes({ caption: e.target.value }) })] }), picker && _jsx(MediaPicker, { kinds: ["image"], onPick: replace, onClose: () => setPicker(false) })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { InsertItem } from "./richtext-insert.ts";
+export declare function RichtextInsertMenu({ items, active, onPick }: {
+    items: InsertItem[];
+    active: number;
+    onPick(item: InsertItem): void;
+}): import("react").JSX.Element;

package/dist/admin/forms/RichtextInsertMenu.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const keepFocus = (e) => e.preventDefault();
+export function RichtextInsertMenu({ items, active, onPick }) {
+    return (_jsxs("div", { className: "sm-picker sm-richtext__insert", role: "listbox", "aria-label": "Insert", children: [items.length === 0 && _jsx("div", { className: "sm-richtext__insert-empty", children: "Nothing matches" }), items.map((item, i) => (_jsxs("button", { type: "button", role: "option", "aria-selected": i === active, className: i === active ? "sm-picker__item sm-picker__item--active" : "sm-picker__item", onMouseDown: keepFocus, onClick: () => onPick(item), children: [_jsx("span", { className: "sm-picker__icon", children: item.icon }), _jsx("span", { style: { fontWeight: 600 }, children: item.title })] }, `${item.kind}-${item.title}`)))] }));
+}

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

@@ -0,0 +1,7 @@
+import type { RichtextApi } from "./useRichtextEditor.ts";
+export declare function RichtextMenu({ menu }: {
+    menu: RichtextApi["menu"];
+}): import("react").JSX.Element;
+export declare function RichtextLinkRow({ link }: {
+    link: RichtextApi["link"];
+}): import("react").JSX.Element;

package/dist/admin/forms/RichtextPopovers.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The richtext editor's two popovers, shared by the sidebar widget and
+// the canvas toolbar (spec 2026-09-10 §5): the "+" insert menu with its
+// filter, and the link row. Presentational over the hook's state.
+import { Button } from "../ui/primitives.js";
+import { RichtextInsertMenu } from "./RichtextInsertMenu.js";
+export function RichtextMenu({ menu }) {
+    // Focus leaving the menu (a click anywhere else) closes it, without stealing focus back to the editor.
+    return (_jsxs("div", { className: "sm-richtext__menu", onBlur: menu.dismiss, children: [_jsx("input", { className: "sm-input", placeholder: "Filter\u2026", value: menu.query, autoFocus: true, "aria-label": "Insert filter", onChange: (e) => menu.setQuery(e.target.value), onKeyDown: menu.onKeyDown }), _jsx(RichtextInsertMenu, { items: menu.items, active: menu.active, onPick: menu.pick })] }));
+}
+export function RichtextLinkRow({ link }) {
+    return (_jsxs("div", { className: "sm-richtext__link", children: [_jsx("input", { className: "sm-input", placeholder: "https://\u2026 or /path", value: link.href, autoFocus: true, "aria-label": "Link URL", onChange: (e) => link.setHref(e.target.value), onKeyDown: (e) => {
+                    // Escape must not reach the editor's window handler, which clears the block selection.
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        link.apply();
+                    }
+                    if (e.key === "Escape") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        link.close();
+                    }
+                } }), _jsx(Button, { onClick: link.apply, children: "Apply" }), _jsx(Button, { variant: "secondary", onClick: link.remove, children: "Remove" })] }));
+}

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

@@ -1,5 +1,5 @@
 import type { Allowed } from "../../toolset.ts";
-export type ToolbarCommand = "bold" | "italic" | "link" | "bulletList" | "orderedList" | "blockquote" | {
+export type ToolbarCommand = "bold" | "italic" | "link" | "bulletList" | "orderedList" | "blockquote" | "insert" | {
     heading: number;
 };
 export type ActiveState = {
@@ -13,8 +13,10 @@ export type ActiveState = {
     heading: number | null;
 };
 export declare const INACTIVE: ActiveState;
-export declare function RichtextToolbar({ allowed, active, onCommand }: {
+export declare function RichtextToolbar({ allowed, active, canInsert, onCommand }: {
     allowed: Allowed;
     active: ActiveState;
+    /** Whether the toolset allows an image or an element — the "+" button. */
+    canInsert: boolean;
     onCommand(command: ToolbarCommand): void;
 }): import("react").JSX.Element | null;

package/dist/admin/forms/RichtextToolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bold, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Italic, Link, List, ListOrdered, Quote } from "lucide-react";
+import { Bold, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Italic, Link, List, ListOrdered, Plus, Quote } from "lucide-react";
 import { IconButton } from "../ui/primitives.js";
 export const INACTIVE = {
     bold: false, italic: false, link: false, bulletList: false, orderedList: false, blockquote: false, heading: null,
@@ -9,7 +9,7 @@ const HEADING_ICONS = { 1: Heading1, 2: Heading2, 3: Heading3, 4: Heading4, 5: H
 const ICON = 14;
 /** Keep the editor's selection: a toolbar press must not blur the content. */
 const keepFocus = (e) => e.preventDefault();
-export function RichtextToolbar({ allowed, active, onCommand }) {
+export function RichtextToolbar({ allowed, active, canInsert, onCommand }) {
     const button = (label, pressed, command, Icon) => (_jsx(IconButton, { label: label, "aria-pressed": pressed, onMouseDown: keepFocus, onClick: () => onCommand(command), children: _jsx(Icon, { size: ICON, "aria-hidden": "true" }) }, label));
     const groups = [];
     const marks = [
@@ -31,6 +31,8 @@ export function RichtextToolbar({ allowed, active, onCommand }) {
     ].filter(Boolean);
     if (blocks.length > 0)
         groups.push(blocks);
+    if (canInsert)
+        groups.push([button("Insert", false, "insert", Plus)]);
     if (groups.length === 0)
         return null;
     return (_jsx("div", { className: "sm-richtext__bar", role: "toolbar", "aria-label": "Formatting", children: groups.map((group, i) => (_jsxs("span", { style: { display: "contents" }, children: [i > 0 && _jsx("span", { className: "sm-richtext__sep", "aria-hidden": "true" }), group] }, i))) }));

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

@@ -1,5 +1,8 @@
-export declare function RichtextWidget({ value, toolset, onChange }: {
+export declare function RichtextWidget({ value, toolset, onChange, errors, path }: {
     value: unknown;
     toolset: unknown;
     onChange(doc: unknown): void;
+    /** The enclosing form's errors and this field's dotted path, for the cards. */
+    errors?: Record<string, string>;
+    path?: string;
 }): import("react").JSX.Element;

package/dist/admin/forms/RichtextWidget.js

@@ -1,123 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The richtext field widget (spec 2026-09-08 §3): a TipTap editor under a
-// fixed toolbar. The editor owns its document and emits TipTap JSON on
-// every change; the parent stores the emitted document by reference, so
-// a value that is not the last emitted document is a change from outside
-// (load, locale switch, a list row moving) and re-seeds the editor. The
-// schema is always full; `allowed` gates creation (extensions, paste,
-// toolbar). Only this file and richtext-extensions.ts import TipTap.
-import { useEffect, useMemo, useRef, useState } from "react";
-import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
-import { Slice } from "@tiptap/pm/model";
-import { allowedOf } from "../../toolset.js";
-import { plainDoc } from "../richtext-doc.js";
-import { Button } from "../ui/primitives.js";
-import { richtextExtensions } from "./richtext-extensions.js";
-import { gatePastedSlice } from "./richtext-paste.js";
-import { INACTIVE, RichtextToolbar } from "./RichtextToolbar.js";
-const EMPTY = { type: "doc", content: [{ type: "paragraph" }] };
-const LEVELS = [1, 2, 3, 4, 5, 6];
-const isDoc = (v) => !!v && typeof v === "object" && v.type === "doc";
-export function RichtextWidget({ value, toolset, onChange }) {
-    const allowed = useMemo(() => allowedOf(toolset), [toolset]);
-    // The parent's onChange closes over its render; the editor's onUpdate is
-    // created once, so read the latest through a ref.
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    // The last document this widget emitted — anything else arriving as
-    // `value` came from outside and re-seeds the editor.
-    const emitted = useRef(value);
-    const [link, setLink] = useState({ open: false, href: "" });
-    const openLinkRef = useRef(() => { });
-    const editor = useEditor({
-        immediatelyRender: false,
-        extensions: richtextExtensions(allowed, { onLink: () => openLinkRef.current() }),
-        content: isDoc(value) ? value : EMPTY,
-        editorProps: {
-            attributes: { class: "sm-richtext__content" },
-            transformPasted: (slice, view) => Slice.fromJSON(view.state.schema, gatePastedSlice(slice.toJSON(), allowed)),
-        },
-        onUpdate: ({ editor }) => {
-            const doc = plainDoc(editor.getJSON());
-            emitted.current = doc;
-            onChangeRef.current(doc);
-        },
-    }, [allowed]);
-    useEffect(() => {
-        if (!editor || value === emitted.current)
-            return;
-        emitted.current = value;
-        editor.commands.setContent(isDoc(value) ? value : EMPTY, { emitUpdate: false });
-    }, [editor, value]);
-    const active = useEditorState({
-        editor,
-        selector: ({ editor }) => editor
-            ? {
-                bold: editor.isActive("bold"),
-                italic: editor.isActive("italic"),
-                link: editor.isActive("link"),
-                bulletList: editor.isActive("bulletList"),
-                orderedList: editor.isActive("orderedList"),
-                blockquote: editor.isActive("blockquote"),
-                heading: LEVELS.find((level) => editor.isActive("heading", { level })) ?? null,
-            }
-            : INACTIVE,
-    });
-    // Read the caret's link from the editor at open time, not from the last
-    // render: a selection change and the press can land in the same tick.
-    const openLink = () => setLink({ open: true, href: editor?.getAttributes("link").href ?? "" });
-    openLinkRef.current = openLink;
-    const closeLink = () => {
-        setLink({ open: false, href: "" });
-        editor?.commands.focus();
-    };
-    const applyLink = () => {
-        if (!editor)
-            return;
-        const href = link.href.trim();
-        const chain = editor.chain().focus().extendMarkRange("link");
-        if (href === "")
-            chain.unsetLink().run();
-        else
-            chain.setLink({ href }).run();
-        setLink({ open: false, href: "" });
-    };
-    const removeLink = () => {
-        editor?.chain().focus().extendMarkRange("link").unsetLink().run();
-        setLink({ open: false, href: "" });
-    };
-    const run = (command) => {
-        if (!editor)
-            return;
-        if (command === "link") {
-            openLink();
-            return;
-        }
-        const chain = editor.chain().focus();
-        if (typeof command === "object")
-            chain.toggleHeading({ level: command.heading }).run();
-        else if (command === "bold")
-            chain.toggleBold().run();
-        else if (command === "italic")
-            chain.toggleItalic().run();
-        else if (command === "bulletList")
-            chain.toggleBulletList().run();
-        else if (command === "orderedList")
-            chain.toggleOrderedList().run();
-        else if (command === "blockquote")
-            chain.toggleBlockquote().run();
-    };
-    return (_jsxs("div", { className: "sm-richtext", children: [_jsx(RichtextToolbar, { allowed: allowed, active: active ?? INACTIVE, onCommand: run }), link.open && (_jsxs("div", { className: "sm-richtext__link", children: [_jsx("input", { className: "sm-input", placeholder: "https://\u2026 or /path", value: link.href, autoFocus: true, "aria-label": "Link URL", onChange: (e) => setLink({ open: true, href: e.target.value }), onKeyDown: (e) => {
-                            // Escape must not reach the editor's window handler, which clears the block selection.
-                            if (e.key === "Enter") {
-                                e.preventDefault();
-                                applyLink();
-                            }
-                            if (e.key === "Escape") {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                closeLink();
-                            }
-                        } }), _jsx(Button, { onClick: applyLink, children: "Apply" }), _jsx(Button, { variant: "secondary", onClick: removeLink, children: "Remove" })] })), _jsx(EditorContent, { editor: editor })] }));
+// The richtext field widget (spec 2026-09-08 §3): the shared editor
+// (useRichtextEditor) under a fixed toolbar, the "+" menu floating under
+// the toolbar (never pushing the content), the slash menu under the
+// caret, the picker as a modal. Inside the canvas (spec 2026-09-10 §5) a
+// nested widget in an element card inherits the form context's `canvas`
+// flag, so its own cards stay admin-styled.
+import { useMemo } from "react";
+import { EditorContent } from "@tiptap/react";
+import { RichtextToolbar } from "./RichtextToolbar.js";
+import { RichtextInsertMenu } from "./RichtextInsertMenu.js";
+import { RichtextLinkRow, RichtextMenu } from "./RichtextPopovers.js";
+import { RichtextFormProvider, useRichtextForm } from "./richtext-form-context.js";
+import { MediaPicker } from "./MediaPicker.js";
+import { useRichtextEditor } from "./useRichtextEditor.js";
+export function RichtextWidget({ value, toolset, onChange, errors, path = "" }) {
+    const rt = useRichtextEditor({ value, toolset, onChange, contentClass: "sm-richtext__content" });
+    const parent = useRichtextForm();
+    const formInfo = useMemo(() => ({ errors, path, canvas: parent.canvas }), [errors, path, parent.canvas]);
+    return (_jsx(RichtextFormProvider, { value: formInfo, children: _jsxs("div", { className: "sm-richtext", children: [_jsxs("div", { className: "sm-richtext__head", children: [_jsx(RichtextToolbar, { allowed: rt.allowed, active: rt.active, canInsert: rt.canInsert, onCommand: rt.run }), rt.menu.open && _jsx(RichtextMenu, { menu: rt.menu })] }), rt.link.open && _jsx(RichtextLinkRow, { link: rt.link }), _jsxs("div", { className: "sm-richtext__body", children: [_jsx(EditorContent, { editor: rt.editor }), rt.slash && (_jsx("div", { className: "sm-richtext__slash", style: { top: rt.slash.state.rect ? rt.slash.state.rect.bottom - (editorTop(rt.editor) ?? 0) + 4 : 0 }, children: _jsx(RichtextInsertMenu, { items: rt.slash.state.items, active: rt.slash.active, onPick: (item) => rt.slash?.state.pick(item) }) }))] }), rt.picker.open && _jsx(MediaPicker, { kinds: ["image"], onPick: rt.picker.pick, onClose: rt.picker.close })] }) }));
+}
+/** The editor's top in viewport coordinates, to place the slash menu relative to the body wrapper. */
+function editorTop(editor) {
+    return editor?.view.dom.parentElement?.getBoundingClientRect().top;
 }

package/dist/admin/forms/elements-context.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { AdminElement } from "../serialize.ts";
+export declare function ElementsProvider({ elements, children }: {
+    elements: AdminElement[];
+    children: ReactNode;
+}): ReactElement;
+export declare function useElements(): AdminElement[];

package/dist/admin/forms/elements-context.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The serialized element descriptors, for the richtext widget's insert
+// menu and element cards. Defaults to none, so a form rendered without
+// the shell (tests, a bare page) still works.
+import { createContext, useContext } from "react";
+const Ctx = createContext([]);
+export function ElementsProvider({ elements, children }) {
+    return _jsx(Ctx.Provider, { value: elements, children: children });
+}
+export function useElements() {
+    return useContext(Ctx);
+}

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

@@ -0,0 +1,5 @@
+export declare const REVEAL_CLASS = "sm-field--reveal";
+export declare const PATH_ATTR = "data-sm-path";
+/** The path, then each enclosing path, outermost last. */
+export declare function ancestorsOf(path: string): string[];
+export declare function revealField(root: ParentNode, path: string): void;