smoodly 0.0.11 → 0.0.13

package/dist/admin/editor/EditorView.js

@@ -8,7 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // the geometry the bridge reports map 1:1 onto the overlay layer above
 // it. Every gesture mutates client tree state through Task 4's pure ops;
 // a debounced saveDraft persists, and the bridge refreshes the iframe on
-// the save ack (refresh-on-change preview, DESIGN.md §3). Every load,
+// the save ack (refresh-on-change preview, DESIGN.md §3). Inline editing
+// (spec 2026-09-10) runs beside it: `useInlineSession` owns the sessions
+// in the iframe's document, `InlineRichtext` the canvas editor, and the
+// save-ack refresh waits for a session to end. Every load,
 // edit, autosave and publish targets ONE locale — the page's own tree in
 // that locale (spec 2026-09-06 §6); switching flushes the pending save
 // first.
@@ -26,11 +29,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // that knows about Next, and it ships to the site, not the admin.
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SHARED_NODE_TYPE } from "../../shared.js";
+import { descriptorAt, getAtPath } from "../field-paths.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
-import { tabsFor } from "../forms/tabs.js";
-import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
+import { revealField } from "../forms/reveal.js";
+import { tabOf, tabsFor } from "../forms/tabs.js";
+import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, moveNodeTo, newNodeId, nodeFromSample, patchNode, patchNodePath, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
 import { useDraftAutosave } from "./autosave.js";
 import { CanvasOverlay } from "./CanvasOverlay.js";
+import { InlineRichtext } from "./InlineRichtext.js";
 import { InsertPicker } from "./InsertPicker.js";
 import { NoticePane } from "./NoticePane.js";
 import { Outline } from "./Outline.js";
@@ -38,13 +44,15 @@ import { PageSettings } from "./PageSettings.js";
 import { localeFromUrl } from "./locale-url.js";
 import { plusButtonsFor } from "./overlay-geometry.js";
 import { useCanvasBridge } from "./useCanvasBridge.js";
+import { useInlineSession } from "./useInlineSession.js";
 import { usePageLocale } from "./usePageLocale.js";
 import { BASE } from "../shell/base.js";
 import { RouteLink } from "../shell/RouteLink.js";
 import { isFixedNode, localeStatusOf, sourceLocaleOf } from "../shell/pages-tree.js";
 import { entryTitle } from "../shell/entries-list.js";
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
-import { Banner as BannerBox, Breadcrumb, Button, Divider, IconButton, LinkButton, SaveIndicator, StatusBadge, Tabs, TopBar, } from "../ui/primitives.js";
+import { ResizeHandle } from "../ui/ResizeHandle.js";
+import { Banner as BannerBox, Breadcrumb, Button, IconButton, LinkButton, SaveIndicator, StatusBadge, Tabs, TopBar, } from "../ui/primitives.js";
 export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-editor=1` : `${url}?smoodly-editor=1`);
 export function EditorView({ ops, registry, id }) {
     const [record, setRecord] = useState(null);
@@ -59,6 +67,11 @@ export function EditorView({ ops, registry, id }) {
     const [parentLocales, setParentLocales] = useState([]);
     const [selectedId, setSelectedId] = useState(null);
     const [hoverId, setHoverId] = useState(null);
+    const [hoverField, setHoverField] = useState(null);
+    const [revealReq, setRevealReq] = useState(null);
+    const inspectorRef = useRef(null);
+    // The session hook is created after `mutate`; the autosave and the bridge reach it through this ref.
+    const inlineRef = useRef(null);
     const [picker, setPicker] = useState(null);
     const [tab, setTab] = useState("Content");
     const [banner, setBanner] = useState(null);
@@ -76,11 +89,12 @@ export function EditorView({ ops, registry, id }) {
     // flushes first (switchLocale), so the ref and the tree always agree.
     const treeLocaleRef = useRef(localeFromUrl(registry));
     // Every edit marks the draft dirty; a debounced saveDraft persists, with
-    // retry on failure, and the bridge refreshes the iframe on the save ack.
+    // retry on failure, and the bridge refreshes the iframe on the save ack —
+    // now, or once an inline session ends (spec 2026-09-10 §7).
     const { saveState, mark, flush } = useDraftAutosave({
         read: () => treeRef.current,
         persist: (t) => ops.pages.saveDraft(id, treeLocaleRef.current, t),
-        onSaved: () => postToCanvas({ source: "smoodly", kind: "refresh" }),
+        onSaved: () => inlineRef.current?.onSaved(),
     });
     const { locale, adding, switchLocale, doAddLocale, doRemoveLocale } = usePageLocale({
         registry, ops, id, record, setRecord, flush,
@@ -97,8 +111,15 @@ export function EditorView({ ops, registry, id }) {
     const iframeSrc = ready ? withEditorParam(siteUrl) : null;
     // Canvas-originated selection: the node is under the cursor already, so
     // this path deliberately skips the scroll every other selection does.
-    const { rects, emptyZones, docH, geometry, postToCanvas } = useCanvasBridge({
-        iframeRef, iframeSrc, onSelect: setSelectedId, onHover: setHoverId,
+    // (`onCanvasSelect` is declared further down; the handler runs at event time.)
+    const { rects, emptyZones, fields: fieldRects, docH, geometry, postToCanvas } = useCanvasBridge({
+        iframeRef, iframeSrc,
+        onSelect: (id, path, x, y) => onCanvasSelect(id, path, x, y),
+        onHover: (id, path) => {
+            setHoverId(id);
+            setHoverField((prev) => (prev && prev.node === id && prev.path === path ? prev : id && path ? { node: id, path } : null));
+        },
+        onRendered: () => inlineRef.current?.onRendered(),
     });
     // ── load: draft mode FIRST, then the record; only then point the iframe
     // at the site route (an iframe loaded before the cookie exists would
@@ -291,6 +312,71 @@ export function EditorView({ ops, registry, id }) {
         });
         mark();
     }, [mark]);
+    // ── inline editing (spec 2026-09-10) ──────────────────────────────────
+    const inline = useInlineSession({
+        iframeRef, postToCanvas,
+        patch: (node, path, value) => {
+            mutate((t) => patchNodePath(t, node, path, value));
+            // A second element marked with the same field follows the one being typed in.
+            if (typeof value === "string")
+                inlineRef.current?.writeText(node, path, value);
+        },
+    });
+    inlineRef.current = inline;
+    // A different selection ends the session; a new canvas drops everything.
+    useEffect(() => { inline.onSelection(selectedId); }, [selectedId]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => { inline.onCanvasChange(); }, [iframeSrc]); // eslint-disable-line react-hooks/exhaustive-deps
+    /** Inspector edits of text fields land in the canvas the same tick (spec §7): every
+     *  marked text element of the node, by its reported path, from the fields after the patch. */
+    const syncTexts = (id, section, fields) => {
+        for (const f of fieldRects) {
+            if (f.node !== id)
+                continue;
+            const d = descriptorAt(section, f.path);
+            const v = getAtPath(fields, f.path);
+            if (d?.type === "text" && typeof v === "string")
+                inline.writeText(id, f.path, v);
+        }
+    };
+    /** Scroll the inspector to a field's widget, pulse it, focus it (spec §8). The field's tab first —
+     *  marks address content fields, and the projection puts a content image on Media. */
+    const reveal = (path, section) => setRevealReq((r) => ({ path, tab: tabOf(section, path) ?? "Content", n: (r?.n ?? 0) + 1 }));
+    useEffect(() => {
+        if (!revealReq)
+            return;
+        setTab(revealReq.tab);
+        const frame = requestAnimationFrame(() => { if (inspectorRef.current)
+            revealField(inspectorRef.current, revealReq.path); });
+        return () => cancelAnimationFrame(frame);
+    }, [revealReq]);
+    /** A click in the canvas: on a marked field of the selected section it acts on the field (spec §2), else it selects. */
+    const onCanvasSelect = (id, path, x, y) => {
+        if (id && id === selectedId && path) {
+            onFieldClick(id, path, x, y);
+            return;
+        }
+        setSelectedId(id);
+    };
+    const onFieldClick = (id, path, x, y) => {
+        const node = tree ? findNode(tree, id) : null;
+        const section = node ? sectionOf(node.type) : null;
+        if (!node || !section)
+            return; // a shared placement is edited under Globals — nothing inline here
+        const descriptor = descriptorAt(section, path);
+        if (!descriptor) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn(`smoodly: "${section.name}" has no field at "${path}" — check its data-smd-field / data-smd-item marks.`);
+            }
+            return;
+        }
+        if (inline.session && inline.session.node === id && inline.session.path === path)
+            return;
+        const kind = descriptor.type === "text" ? "text" : descriptor.type === "richtext" ? "richtext" : null;
+        if (kind && inline.start({ node: id, path, kind }, { x, y }))
+            return;
+        // Any other field, or a text mark on a container: the inspector reveals its widget.
+        reveal(path, section);
+    };
     // A zone bound to a shared item needs the item's row id (ops.shared.list),
     // which can land after the draft did. Fill then; nothing else changes.
     useEffect(() => {
@@ -350,6 +436,7 @@ export function EditorView({ ops, registry, id }) {
         setSelectedId((current) => (current === id ? null : current));
     };
     const doMove = (id, dir) => mutate((t) => moveNode(t, id, dir));
+    const doMoveTo = (id, index) => mutate((t) => moveNodeTo(t, id, index));
     const doPatch = (id, ns, key, value) => mutate((t) => patchNode(t, id, ns, key, value));
     // ── publish ──────────────────────────────────────────────────────────
     const doPublish = async () => {
@@ -396,7 +483,7 @@ export function EditorView({ ops, registry, id }) {
         return _jsx(NoticePane, { children: _jsx(BannerBox, { tone: "error", children: loadError }) });
     }
     if (folder) {
-        return (_jsx(NoticePane, { children: _jsx(BannerBox, { tone: "warn", children: "This is a folder \u2014 it has a title and a place in the tree, but no page. Use \u201CAdd page here\u201D in the Pages list to give it one." }) }));
+        return (_jsx(NoticePane, { children: _jsx(BannerBox, { tone: "warn", children: "This is a path \u2014 it has a title and a place in the tree, but no page. Use \u201CAdd page here\u201D in the Pages list to give it one." }) }));
     }
     if (record && !record.locales[locale]) {
         const from = sourceLocaleOf(record, registry);
@@ -410,7 +497,10 @@ export function EditorView({ ops, registry, id }) {
     const rectById = new Map(rects.map((r) => [r.id, r]));
     const selRect = selected ? rectById.get(selected.id) : undefined;
     const hoverRect = hoverId && hoverId !== selectedId ? rectById.get(hoverId) : undefined;
-    const blockCount = tree ? Object.values(tree.zones).reduce((n, list) => n + list.length, 0) : 0;
+    const fieldRectOf = (f) => f ? fieldRects.find((r) => r.node === f.node && r.path === f.path) : undefined;
+    const fieldHover = hoverField && hoverField.node === selectedId ? fieldRectOf(hoverField) : undefined;
+    const editing = fieldRectOf(inline.session);
+    const pageWidth = rects.reduce((w, r) => Math.max(w, r.x + r.w), 320);
     const selection = selected && selRect && (selectedSection || selectedShared)
         ? {
             node: selected, rect: selRect,
@@ -436,21 +526,36 @@ export function EditorView({ ops, registry, id }) {
     const tabs = selectedSection ? tabsFor(selectedSection) : [];
     const activeTab = tabs.some((t) => t.tab === tab) ? tab : tabs[0]?.tab;
     const entries = tabs.find((t) => t.tab === activeTab)?.entries ?? [];
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(Breadcrumb, { backHref: `${BASE}/pages`, items: [{ label: "Pages", href: `${BASE}/pages` }, { label }] }), right: _jsxs(_Fragment, { children: [_jsx(SaveIndicator, { state: saveState }), ready && (_jsx(LinkButton, { href: siteUrl, target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), record?.locales[locale] && (_jsx(StatusBadge, { status: localeStatusOf(record.locales[locale]) })), _jsx(Button, { variant: published ? "ok" : "primary", onClick: () => { void doPublish(); }, children: published ? "Published ✓" : "Publish" })] }) }), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-canvas", children: [_jsxs("div", { className: "sm-canvas__meta", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { children: label }), registry.locales.supported.length > 1 ? (_jsx(LocaleSwitcher, { registry: registry, present: record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale], parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => { void doAddLocale(l); } })) : (_jsxs("span", { children: ["\u00B7 ", locale] }))] }), _jsxs("span", { children: [blockCount, " BLOCK", blockCount === 1 ? "" : "S"] })] }), (banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), banner.fields && banner.fields.length > 0 && (_jsx("ul", { className: "sm-mono", style: { margin: "6px 0 0", paddingLeft: 18, fontSize: "var(--text-sm)" }, children: banner.fields.map((f) => _jsxs("li", { children: [f.field, ": ", f.message] }, f.field)) }))] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-mono", style: {
-                                                height: 240, display: "grid", placeItems: "center",
-                                                color: "var(--gray-500)", fontSize: "var(--text-xs)", letterSpacing: ".04em",
-                                            }, children: "LOADING CANVAS\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, selection: selection, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove })] }) })] }), _jsxs("aside", { className: "sm-inspector", children: [selected && (selectedSection || selectedShared) ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sm-inspector__head", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-blockglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedSection?.title ?? selectedShared?.title })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : (_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-label", children: "Nothing selected \u2014 page settings below" }) })), _jsxs("div", { className: "sm-inspector__body", children: [!selected && record && (_jsxs(_Fragment, { children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onRemoveLocale: Object.keys(record.locales).length > 1 &&
-                                                    !isFixedNode(record, registry) &&
-                                                    !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
-                                                    ? () => { void doRemoveLocale(); }
-                                                    : undefined }), _jsx(Divider, { bleed: 14 })] })), selected && selectedSection && entries.map(({ key, ns, descriptor }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: selected[ns]?.[key], refOptions: refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor), onChange: (value) => doPatch(selected.id, ns, key, value) }, `${selected.id}.${ns}.${key}`))), selected && selectedShared && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [_jsx("p", { className: "sm-hint", children: "This is shared content. Editing it changes every page it is placed on." }), _jsx(RouteLink, { className: "sm-nav-item", href: `${BASE}/shared/${encodeURIComponent(selectedShared.name)}?locale=${encodeURIComponent(locale)}`, children: "Edit shared item \u2192" })] })), _jsx(Divider, { bleed: 14 }), _jsx(Outline, { selectedId: selectedId, onSelect: select, onMove: doMove, onRemove: doRemove, zones: zoneOrder.map((zone) => ({
-                                            zone, locked: policyOf(zone)?.kind === "locked", canTake: zoneCanTake(zone),
-                                            nodes: nodesIn(zone).map((node) => ({ node, label: labelOf(node) })),
-                                        })), onAddFirst: (zone) => {
-                                            const first = allowedSections(policyOf(zone), registry.sections)[0];
-                                            if (first)
-                                                doInsert(zone, 0, first);
-                                        } })] })] })] }), picker && (_jsx(InsertPicker, { at: picker, policy: policyOf(picker.zone), registry: registry, sharedIds: sharedIds ?? {}, onInsert: (section) => doInsert(picker.zone, picker.index, section), onInsertShared: (item) => doInsertShared(picker.zone, picker.index, item), onClose: () => setPicker(null) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/pages`, items: [
+                            {
+                                label: "Pages", href: `${BASE}/pages`,
+                                trailing: registry.locales.supported.length > 1 && (_jsx(LocaleSwitcher, { registry: registry, present: record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale], parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => { void doAddLocale(l); } })),
+                            },
+                            { label },
+                        ] }) }), right: _jsxs(_Fragment, { children: [_jsx(SaveIndicator, { state: saveState }), ready && (_jsx(LinkButton, { href: siteUrl, target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), record?.locales[locale] && (_jsx(StatusBadge, { status: localeStatusOf(record.locales[locale]) })), _jsx(Button, { variant: published ? "ok" : "primary", onClick: () => { void doPublish(); }, children: published ? "Published ✓" : "Publish" })] }) }), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-canvas", children: [(banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), banner.fields && banner.fields.length > 0 && (_jsx("ul", { className: "sm-mono", style: { margin: "6px 0 0", paddingLeft: 18, fontSize: "var(--text-sm)" }, children: banner.fields.map((f) => _jsxs("li", { children: [f.field, ": ", f.message] }, f.field)) }))] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && tree && (() => {
+                                            const { session } = inline.richtext;
+                                            const node = findNode(tree, session.node);
+                                            const section = node ? sectionOf(node.type) : null;
+                                            if (!node || !section)
+                                                return null;
+                                            return (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(node.fields, session.path), toolset: descriptorAt(section, session.path)?.toolset, onChange: (doc) => { inline.markChanged(); mutate((t) => patchNodePath(t, session.node, session.path, doc)); }, onEscape: inline.end }));
+                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [selected && (selectedSection || selectedShared) ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sm-inspector__head", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-blockglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedSection?.title ?? selectedShared?.title })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : (_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-label", children: "Nothing selected \u2014 page settings below" }) })), _jsxs("div", { className: "sm-inspector__body", children: [!selected && record && (_jsx(_Fragment, { children: _jsx(PageSettings, { record: record, locale: locale, registry: registry, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                                        !isFixedNode(record, registry) &&
+                                                        !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
+                                                        ? () => { void doRemoveLocale(); }
+                                                        : undefined }) })), selected && selectedSection && entries.map(({ key, ns, descriptor }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: selected[ns]?.[key], refOptions: refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor), inlinePath: ns === "fields" && inline.session?.node === selected.id ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
+                                                    reveal(p, selectedSection); }, onChange: (value) => {
+                                                    doPatch(selected.id, ns, key, value);
+                                                    if (ns === "fields")
+                                                        syncTexts(selected.id, selectedSection, { ...selected.fields, [key]: value });
+                                                } }, `${selected.id}.${ns}.${key}`))), selected && selectedShared && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [_jsx("p", { className: "sm-hint", children: "This is shared content. Editing it changes every page it is placed on." }), _jsx(RouteLink, { className: "sm-nav-item", href: `${BASE}/shared/${encodeURIComponent(selectedShared.name)}?locale=${encodeURIComponent(locale)}`, children: "Edit shared item \u2192" })] }))] })] }), _jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, onMove: doMove, onMoveTo: doMoveTo, onRemove: doRemove, zones: zoneOrder.map((zone) => ({
+                                        zone, locked: policyOf(zone)?.kind === "locked", canTake: zoneCanTake(zone),
+                                        nodes: nodesIn(zone).map((node) => ({ node, label: labelOf(node) })),
+                                    })), onAddFirst: (zone) => {
+                                        const first = allowedSections(policyOf(zone), registry.sections)[0];
+                                        if (first)
+                                            doInsert(zone, 0, first);
+                                    } }) })] })] }), picker && (_jsx(InsertPicker, { at: picker, policy: policyOf(picker.zone), registry: registry, sharedIds: sharedIds ?? {}, onInsert: (section) => doInsert(picker.zone, picker.index, section), onInsertShared: (item) => doInsertShared(picker.zone, picker.index, item), onClose: () => setPicker(null) }))] }));
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { Allowed } from "../../toolset.ts";
+import { type ActiveState, type ToolbarCommand } from "../forms/RichtextToolbar.tsx";
+export declare const FLOATBAR_W = 340;
+export declare function FloatingToolbar({ x, top, bottom, pageWidth, allowed, active, canInsert, onCommand, popover }: {
+    /** The caret's left, top and bottom in overlay coordinates. */
+    x: number;
+    top: number;
+    bottom: number;
+    pageWidth: number;
+    allowed: Allowed;
+    active: ActiveState;
+    canInsert: boolean;
+    onCommand(command: ToolbarCommand): void;
+    popover?: ReactNode;
+}): import("react").JSX.Element;

package/dist/admin/editor/FloatingToolbar.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RichtextToolbar } from "../forms/RichtextToolbar.js";
+export const FLOATBAR_W = 340;
+const GAP = 10;
+const FLIP_AT = 56;
+export function FloatingToolbar({ x, top, bottom, pageWidth, allowed, active, canInsert, onCommand, popover }) {
+    const left = Math.max(8, Math.min(x, pageWidth - FLOATBAR_W - 8));
+    const below = top < FLIP_AT;
+    const style = below
+        ? { left, top: bottom + 8 }
+        : { left, top: top - GAP, transform: "translateY(-100%)" };
+    return (_jsxs("div", { className: "sm-floatbar", style: style, children: [_jsx(RichtextToolbar, { allowed: allowed, active: active, canInsert: canInsert, onCommand: onCommand }), popover] }));
+}

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

@@ -0,0 +1,9 @@
+import type { RichtextMount } from "./useInlineSession.ts";
+export declare function InlineRichtext({ mount, value, toolset, pageWidth, onChange, onEscape }: {
+    mount: RichtextMount;
+    value: unknown;
+    toolset: unknown;
+    pageWidth: number;
+    onChange(doc: unknown): void;
+    onEscape(): void;
+}): import("react").JSX.Element;

package/dist/admin/editor/InlineRichtext.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A richtext session in the canvas (spec 2026-09-10 §5): the TipTap
+// editor portalled into the root useInlineSession appended inside the
+// marked container — the same extensions, gating and node views as the
+// sidebar widget, through useRichtextEditor — and the chrome in the
+// admin: the floating toolbar above the selection, the slash menu at the
+// caret, the media picker. The form context's `canvas` flag gives the
+// cards inside the admin's classes and the light theme. Rendered inside
+// the page box, so the toolbar's coordinates are the caret's.
+import { useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { EditorContent, useEditorState } from "@tiptap/react";
+import { MediaPicker } from "../forms/MediaPicker.js";
+import { RichtextInsertMenu } from "../forms/RichtextInsertMenu.js";
+import { RichtextLinkRow, RichtextMenu } from "../forms/RichtextPopovers.js";
+import { RichtextFormProvider } from "../forms/richtext-form-context.js";
+import { useRichtextEditor } from "../forms/useRichtextEditor.js";
+import { FloatingToolbar } from "./FloatingToolbar.js";
+export function InlineRichtext({ mount, value, toolset, pageWidth, onChange, onEscape }) {
+    const rt = useRichtextEditor({ value, toolset, onChange, contentClass: "sm-inline-richtext", onEscape });
+    const { editor } = rt;
+    const formInfo = useMemo(() => ({ path: mount.session.path, canvas: true }), [mount.session.path]);
+    // The caret where the click landed, once the editor exists.
+    useEffect(() => {
+        if (!editor)
+            return;
+        const pos = mount.at ? editor.view.posAtCoords({ left: mount.at.x, top: mount.at.y })?.pos : undefined;
+        editor.commands.focus(pos ?? "end");
+    }, [editor, mount.at]);
+    // The container's flex/grid layout lands on the element that holds the blocks — the
+    // ProseMirror root — and every wrapper between it and the mount root is made
+    // transparent, so a flex column's gap still separates the paragraphs (spec §5).
+    useEffect(() => {
+        if (!editor)
+            return;
+        const dom = editor.view.dom;
+        for (let el = dom.parentElement; el && el !== mount.root; el = el.parentElement)
+            el.style.display = "contents";
+        for (const [prop, value] of Object.entries(mount.layout))
+            dom.style.setProperty(prop, value);
+    }, [editor, mount.root, mount.layout]);
+    // Read-only while the refresh that carries its edits renders (spec §5).
+    useEffect(() => { editor?.setEditable(!mount.closing); }, [editor, mount.closing]);
+    // The selection's start, in iframe document coordinates = overlay coordinates.
+    const from = useEditorState({ editor, selector: ({ editor }) => editor?.state.selection.from ?? null });
+    const caret = editor && from !== null && editor.view.dom.isConnected ? editor.view.coordsAtPos(from) : null;
+    const slashRect = rt.slash?.state.rect ?? null;
+    return (_jsxs(RichtextFormProvider, { value: formInfo, children: [createPortal(_jsx(EditorContent, { editor: editor }), mount.root), !mount.closing && caret && (_jsx(FloatingToolbar, { x: caret.left, top: caret.top, bottom: caret.bottom, pageWidth: pageWidth, allowed: rt.allowed, active: rt.active, canInsert: rt.canInsert, onCommand: rt.run, popover: rt.menu.open ? _jsx(RichtextMenu, { menu: rt.menu }) : rt.link.open ? _jsx(RichtextLinkRow, { link: rt.link }) : null })), !mount.closing && rt.slash && (_jsx("div", { className: "sm-richtext__slash", style: { left: slashRect?.left ?? 0, top: (slashRect?.bottom ?? 0) + 4, pointerEvents: "auto" }, 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 })] }));
+}

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

@@ -1,18 +1,24 @@
 import type { TreeNode } from "../../render.tsx";
-export declare function Outline({ zones, selectedId, onSelect, onAddFirst, onMove, onRemove }: {
-    zones: {
-        zone: string;
-        locked: boolean;
-        canTake: boolean;
-        nodes: {
-            node: TreeNode;
-            label: string;
-        }[];
+type ZoneRows = {
+    zone: string;
+    locked: boolean;
+    canTake: boolean;
+    nodes: {
+        node: TreeNode;
+        label: string;
     }[];
+};
+type Handlers = {
     selectedId: string | null;
     onSelect(id: string): void;
     /** The empty row of an insertable zone was clicked. */
     onAddFirst(zone: string): void;
     onMove(id: string, dir: -1 | 1): void;
+    /** The drop and the grip's arrow keys: `index` in the resulting order. */
+    onMoveTo(id: string, index: number): void;
     onRemove(id: string): void;
-}): import("react").JSX.Element;
+};
+export declare function Outline({ zones, ...handlers }: {
+    zones: ZoneRows[];
+} & Handlers): import("react").JSX.Element;
+export {};

package/dist/admin/editor/Outline.js

@@ -1,12 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconButton, SectionLabel, cx } from "../ui/primitives.js";
-export function Outline({ zones, selectedId, onSelect, onAddFirst, onMove, onRemove }) {
-    return (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Outline" }), zones.map(({ zone, locked, canTake, nodes }) => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { mono: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", canTake && "sm-outline-row--clickable"), onClick: () => { if (canTake)
-                            onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { style: { color: "var(--accent)", fontWeight: 600 }, children: "+ Add block" })] })), nodes.map(({ node, label }, i) => {
-                        if (locked) {
-                            return (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { style: { fontSize: "var(--text-xs)", fontWeight: 600, letterSpacing: ".06em" }, children: "LOCKED" })] }, node.id));
-                        }
-                        return (_jsxs("div", { onClick: () => onSelect(node.id), className: cx("sm-outline-row", "sm-outline-row--clickable", node.id === selectedId && "sm-outline-row--selected"), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); onMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); onMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] })] }, node.id));
-                    })] }, zone)))] }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grip, IconButton, SectionLabel, cx } from "../ui/primitives.js";
+import { useSortable } from "../ui/useSortable.js";
+export function Outline({ zones, ...handlers }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Outline" }), zones.map((z) => _jsx(OutlineZone, { ...z, ...handlers }, z.zone))] }));
+}
+function OutlineZone({ zone, locked, canTake, nodes, selectedId, onSelect, onAddFirst, onMove, onMoveTo, onRemove }) {
+    const sortable = useSortable({
+        count: locked ? 0 : nodes.length,
+        onDrop: (from, to) => onMoveTo(nodes[from].node.id, to),
+    });
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { mono: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", canTake && "sm-outline-row--clickable"), onClick: () => { if (canTake)
+                    onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { className: "sm-outline-row__add", children: "+ Add" })] })), locked && nodes.map(({ node, label }) => (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { className: "sm-outline-row__note", children: "Locked" })] }, node.id))), !locked && nodes.length > 0 && (_jsx("div", { ref: sortable.containerRef, style: { display: "flex", flexDirection: "column", gap: 4 }, children: nodes.map(({ node, label }, i) => (_jsxs("div", { onClick: () => onSelect(node.id), style: sortable.rowStyle(i), className: cx("sm-outline-row", "sm-outline-row--clickable", "sm-outline-row--grip", node.id === selectedId && "sm-outline-row--selected", sortable.rowClass(i)), children: [_jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-outline-row__label", children: label }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); onMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); onMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] })] }, node.id))) }))] }));
 }

package/dist/admin/editor/inline-dom.d.ts

@@ -0,0 +1,27 @@
+/** What the text helpers need from an element — a DOM Element satisfies it. */
+export type TextHost = {
+    childElementCount: number;
+    firstChild: {
+        nodeType: number;
+        nodeValue: string | null;
+        nextSibling: unknown;
+    } | null;
+    textContent: string | null;
+};
+/** A marked element the text session may edit: no child elements. A mark
+ *  on a container (an <a> inside a <p>) falls through to the inspector. */
+export declare const isPlainTextHost: (el: {
+    childElementCount: number;
+}) => boolean;
+/** Write `value` in place: into the one existing text node when there is
+ *  one, so the site's React keeps pointing at the node it rendered and a
+ *  refresh reconciles into it; else as new text content. False when the
+ *  element is not a plain text host. */
+export declare function writeTextInto(el: TextHost, value: string): boolean;
+/** The container's layout the richtext editor root copies (spec §5), so a
+ *  flex-column or grid container keeps its block spacing while its
+ *  children are hidden behind the editor. Kebab-cased, for setProperty. */
+export declare const LAYOUT_PROPS: readonly ["display", "flex-direction", "gap", "row-gap", "column-gap", "grid-template-columns", "grid-auto-flow", "align-items", "justify-content"];
+export declare function layoutToCopy(computed: {
+    getPropertyValue(name: string): string;
+}): Record<string, string>;

package/dist/admin/editor/inline-dom.js

@@ -0,0 +1,43 @@
+// The DOM rules of a session (spec 2026-09-10 §3–§5), pure over structural
+// types so they run under bare node: what a text session may edit, how a
+// value is written in place, and which layout the richtext editor root
+// copies from its container.
+/** A marked element the text session may edit: no child elements. A mark
+ *  on a container (an <a> inside a <p>) falls through to the inspector. */
+export const isPlainTextHost = (el) => el.childElementCount === 0;
+/** Write `value` in place: into the one existing text node when there is
+ *  one, so the site's React keeps pointing at the node it rendered and a
+ *  refresh reconciles into it; else as new text content. False when the
+ *  element is not a plain text host. */
+export function writeTextInto(el, value) {
+    if (!isPlainTextHost(el))
+        return false;
+    const first = el.firstChild;
+    if (first && first.nodeType === 3 && first.nextSibling === null) {
+        if (first.nodeValue !== value)
+            first.nodeValue = value;
+    }
+    else {
+        el.textContent = value;
+    }
+    return true;
+}
+/** The container's layout the richtext editor root copies (spec §5), so a
+ *  flex-column or grid container keeps its block spacing while its
+ *  children are hidden behind the editor. Kebab-cased, for setProperty. */
+export const LAYOUT_PROPS = [
+    "display", "flex-direction", "gap", "row-gap", "column-gap",
+    "grid-template-columns", "grid-auto-flow", "align-items", "justify-content",
+];
+export function layoutToCopy(computed) {
+    const display = computed.getPropertyValue("display");
+    if (display !== "flex" && display !== "grid")
+        return {};
+    const out = {};
+    for (const prop of LAYOUT_PROPS) {
+        const v = computed.getPropertyValue(prop);
+        if (v)
+            out[prop] = v;
+    }
+    return out;
+}

package/dist/admin/editor/inline-session.d.ts

@@ -0,0 +1,30 @@
+export type SessionKind = "text" | "richtext";
+export type Session = {
+    node: string;
+    path: string;
+    kind: SessionKind;
+};
+export type InlineState = {
+    session: Session | null;
+    pendingRefresh: boolean;
+};
+export type InlineEvent = {
+    type: "start";
+    session: Session;
+} | {
+    type: "end";
+}
+/** The autosave's save ack arrived. */
+ | {
+    type: "saved";
+}
+/** The iframe points at a new URL: nothing from the old canvas survives. */
+ | {
+    type: "canvas";
+};
+export declare const INITIAL_INLINE: InlineState;
+/** The next state, and whether to post a refresh to the bridge now. */
+export declare function reduceInline(state: InlineState, event: InlineEvent): {
+    state: InlineState;
+    refresh: boolean;
+};

package/dist/admin/editor/inline-session.js

@@ -0,0 +1,19 @@
+export const INITIAL_INLINE = { session: null, pendingRefresh: false };
+/** The next state, and whether to post a refresh to the bridge now. */
+export function reduceInline(state, event) {
+    switch (event.type) {
+        case "start":
+            // A pending refresh stays pending: it fires only once no session is active.
+            return { state: { session: event.session, pendingRefresh: state.pendingRefresh }, refresh: false };
+        case "end":
+            if (!state.session)
+                return { state, refresh: false };
+            return { state: INITIAL_INLINE, refresh: state.pendingRefresh };
+        case "saved":
+            return state.session
+                ? { state: { session: state.session, pendingRefresh: true }, refresh: false }
+                : { state, refresh: true };
+        case "canvas":
+            return { state: INITIAL_INLINE, refresh: false };
+    }
+}

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

@@ -12,20 +12,41 @@ export type ZoneRect = {
     w: number;
     h: number;
 };
+/** A marked element (spec 2026-09-10 §6): its section node and its resolved dotted path. */
+export type FieldRect = {
+    node: string;
+    path: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
 export type FromBridge = {
     source: "smoodly";
     kind: "rects";
     nodes: BridgeRect[];
     emptyZones: ZoneRect[];
+    fields: FieldRect[];
     docH: number;
-} | {
+}
+/** A click: the node under it, the marked field under it, and where (iframe client coordinates). */
+ | {
     source: "smoodly";
     kind: "select";
     id: string | null;
+    path: string | null;
+    x: number;
+    y: number;
 } | {
     source: "smoodly";
     kind: "hover";
     id: string | null;
+    path: string | null;
+}
+/** The bridge committed a render — after a refresh, the new markup is in the DOM. */
+ | {
+    source: "smoodly";
+    kind: "rendered";
 };
 export type ToBridge = {
     source: "smoodly";

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

@@ -1,14 +1,18 @@
 import { type RefObject } from "react";
-import type { BridgeRect, ToBridge, ZoneRect } from "./protocol.ts";
+import type { BridgeRect, FieldRect, ToBridge, ZoneRect } from "./protocol.ts";
 export type Geometry = "waiting" | "ok" | "missing";
-export declare function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover }: {
+export declare function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover, onRendered }: {
     iframeRef: RefObject<HTMLIFrameElement | null>;
     iframeSrc: string | null;
-    onSelect(id: string | null): void;
-    onHover(id: string | null): void;
+    /** A click in the canvas: the node, the marked field under it (or null), and where in the iframe. */
+    onSelect(id: string | null, path: string | null, x: number, y: number): void;
+    onHover(id: string | null, path: string | null): void;
+    /** The bridge committed a render (the mount, then every refresh). */
+    onRendered(): void;
 }): {
     rects: BridgeRect[];
     emptyZones: ZoneRect[];
+    fields: FieldRect[];
     docH: number;
     geometry: Geometry;
     postToCanvas: (m: ToBridge) => void;