smoodly 0.0.14 → 0.0.16

package/dist/admin/editor/EditorView.js

@@ -28,7 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Core code: no next/* imports live here — the bridge is the only piece
 // 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 { SHARED_NODE_TYPE, STYLES_KEY, sharedNameOf } from "../../shared.js";
 import { descriptorAt, getAtPath } from "../field-paths.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { revealField } from "../forms/reveal.js";
@@ -41,19 +41,24 @@ import { InsertPicker } from "./InsertPicker.js";
 import { NoticePane } from "./NoticePane.js";
 import { Outline } from "./Outline.js";
 import { PageInspector } from "./PageInspector.js";
+import { SharedInspector } from "./SharedInspector.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 { useSharedEdit } from "./useSharedEdit.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 { ResizeHandle } from "../ui/ResizeHandle.js";
-import { Banner as BannerBox, Breadcrumb, Button, IconButton, LinkButton, SaveIndicator, StatusBadge, Tabs, TopBar, } from "../ui/primitives.js";
+import { PublishControl } from "../ui/PublishControl.js";
+import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
+import { Banner as BannerBox, Breadcrumb, Button, FieldErrorList, IconButton, LinkButton, SaveIndicator, Tabs, TopBar, } from "../ui/primitives.js";
 export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-editor=1` : `${url}?smoodly-editor=1`);
+/** The site URL of a stored version — History's iframe (spec 2026-09-13 history §5); no editor parameter, so no bridge. */
+export const withVersionParam = (url, versionId) => `${url}${url.includes("?") ? "&" : "?"}smoodly-version=${encodeURIComponent(versionId)}`;
 export function EditorView({ ops, registry, id }) {
     const [record, setRecord] = useState(null);
     const [tree, setTree] = useState(null);
@@ -76,6 +81,18 @@ export function EditorView({ ops, registry, id }) {
     const [tab, setTab] = useState("Content");
     const [banner, setBanner] = useState(null);
     const [published, setPublished] = useState(false);
+    /** An action of the page's control in flight. */
+    const [pageBusy, setPageBusy] = useState(null);
+    /** History's rows while the modal is open (spec 2026-09-13 history §5). */
+    const [history, setHistory] = useState(null);
+    /** An edit since the last save ack — Publish wakes on it, before the autosave runs (spec 2026-09-13 publish flow §2). */
+    const [dirty, setDirty] = useState(false);
+    /** Any edit on this canvas yet: the autosave indicator stays hidden until the first one (§6). */
+    const [touched, setTouched] = useState(false);
+    const [sharedBusy, setSharedBusy] = useState(null);
+    /** A shared edit since the item's last save ack; and any shared edit on this canvas yet. */
+    const [sharedDirty, setSharedDirty] = useState(false);
+    const [sharedTouched, setSharedTouched] = useState(false);
     const [refOptions, setRefOptions] = useState({});
     // Shared item name → row id, loaded once per editor mount: the picker's
     // Shared group and a bound locked zone need the id to place a node.
@@ -93,11 +110,33 @@ export function EditorView({ ops, registry, id }) {
     // 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),
+        persist: async (t) => {
+            const target = treeLocaleRef.current;
+            const r = await ops.pages.saveDraft(id, target, t);
+            if (r.ok) {
+                // The badge and Publish follow each save without a re-get: saveDraft answers with the version id.
+                setRecord((rec) => rec?.locales[target]
+                    ? { ...rec, locales: { ...rec.locales, [target]: { ...rec.locales[target], draftVersionId: r.data.versionId } } }
+                    : rec);
+                setDirty(false);
+            }
+            return r;
+        },
         onSaved: () => inlineRef.current?.onSaved(),
     });
+    // Edits to a shared block go to the shared entry through their own
+    // autosave (spec 2026-09-13 §4); the save ack refreshes the canvas
+    // through the same inline-session deferral as the page's.
+    const sharedEdit = useSharedEdit({ ops, onSaved: () => { setSharedDirty(false); inlineRef.current?.onSaved(); } });
+    const patchShared = (name, path, value) => {
+        sharedEdit.patch(name, path, value);
+        setSharedDirty(true);
+        setSharedTouched(true);
+    };
+    /** Both targets, page first: a locale switch must leave nothing pending on either. Page Publish keeps `flush()` — it never touches a shared item. */
+    const flushAll = useCallback(async () => (await flush()) && (await sharedEdit.flush()), [flush, sharedEdit.flush]);
     const { locale, adding, switchLocale, doAddLocale, doRemoveLocale } = usePageLocale({
-        registry, ops, id, record, setRecord, flush,
+        registry, ops, id, record, setRecord, flush: flushAll,
         fail: (text) => setBanner({ text }),
         clearBanner: () => setBanner(null),
         reload: () => setReloadKey((k) => k + 1),
@@ -134,6 +173,11 @@ export function EditorView({ ops, registry, id }) {
             setSelectedId(null);
             setHoverId(null);
             setFolder(false);
+            sharedEdit.reset(); // a new locale or a reload is a new canvas; the switch flushed first
+            setDirty(false);
+            setTouched(false);
+            setSharedDirty(false);
+            setSharedTouched(false);
             // ops is a server action — it can reject outright (offline, 500,
             // aborted), not just resolve to a typed error. Either failure mode
             // must land on the same full-pane error, never a hung load.
@@ -232,6 +276,15 @@ export function EditorView({ ops, registry, id }) {
             return null;
         return registry.shared.find((s) => s.name === node.fields?.item) ?? null;
     }, [registry]);
+    /** The shared item behind a node id: a placement's, by the tree, or a layout-rendered
+     *  item's, by its `shared:` id (spec 2026-09-13 §1). Reads the refs — safe at event time. */
+    const sharedItemOf = useCallback((id) => {
+        const node = treeRef.current ? findNode(treeRef.current, id) : null;
+        if (node)
+            return sharedOf(node);
+        const name = sharedNameOf(id);
+        return name ? registryRef.current.shared.find((s) => s.name === name) ?? null : null;
+    }, [sharedOf]);
     // ── ref fields inside sections: same option loading as EntryForm ──────
     const refTargets = useMemo(() => {
         const out = {};
@@ -292,6 +345,16 @@ export function EditorView({ ops, registry, id }) {
             setSharedIds({}); });
         return () => { cancelled = true; };
     }, [ops]);
+    // A selected shared block loads its item for the canvas locale, once (spec 2026-09-13 §3).
+    const selectedItemName = selectedId ? sharedItemOf(selectedId)?.name ?? null : null;
+    useEffect(() => {
+        if (selectedItemName)
+            void sharedEdit.load(selectedItemName, locale);
+    }, [selectedItemName, locale]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (sharedEdit.loadError)
+            setBanner({ text: sharedEdit.loadError });
+    }, [sharedEdit.loadError]);
     // Selecting from the outline must reveal the block. The canvas column is
     // the scroller now (the iframe has no scrollbar of its own — it is sized to
     // the full document), so scroll it to the rect the bridge reported.
@@ -311,12 +374,18 @@ export function EditorView({ ops, registry, id }) {
             return next;
         });
         mark();
+        setDirty(true);
+        setTouched(true);
     }, [mark]);
     // ── inline editing (spec 2026-09-10) ──────────────────────────────────
     const inline = useInlineSession({
         iframeRef, postToCanvas,
         patch: (node, path, value) => {
-            mutate((t) => patchNodePath(t, node, path, value));
+            const item = sharedItemOf(node);
+            if (item)
+                patchShared(item.name, path, value);
+            else
+                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);
@@ -359,13 +428,15 @@ export function EditorView({ ops, registry, 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);
+        // A shared block's fields are the item's — the section's own (spec 2026-09-13 §5); any other block's are its section's.
+        const item = sharedItemOf(id);
+        const schema = item ?? (node ? sectionOf(node.type) : null);
+        if (!schema)
+            return;
+        const descriptor = descriptorAt(schema, 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.`);
+                console.warn(`smoodly: "${item?.name ?? node?.type}" has no field at "${path}" — check its data-smd-field / data-smd-item marks.`);
             }
             return;
         }
@@ -375,7 +446,7 @@ export function EditorView({ ops, registry, id }) {
         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);
+        reveal(path, schema);
     };
     // 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.
@@ -443,11 +514,13 @@ export function EditorView({ ops, registry, id }) {
     // ── publish ──────────────────────────────────────────────────────────
     const doPublish = async () => {
         setBanner(null);
+        setPageBusy("publish");
         // Never publish behind a pending debounce.
         const flushed = await flush();
         if (!flushed) {
             // The pre-publish flush failed (or is still behind, mid-retry) —
             // publishing now would ship a stale draft. Bail instead.
+            setPageBusy(null);
             setBanner({ text: "Couldn't save your latest changes — publish cancelled." });
             return;
         }
@@ -461,6 +534,7 @@ export function EditorView({ ops, registry, id }) {
             // outright instead of resolving to a typed error.
             result = { ok: false, code: "internal", message: "Publish failed — check your connection and try again." };
         }
+        setPageBusy(null);
         if (result.ok) {
             setRecord(result.data);
             setPublished(true);
@@ -470,6 +544,135 @@ export function EditorView({ ops, registry, id }) {
             setBanner({ text: result.message, fields: result.fields });
         }
     };
+    /** Discard (spec 2026-09-13 publish flow §4): confirm, flush so a late save cannot re-dirty the row, restore, reload the canvas. */
+    const doDiscard = async () => {
+        if (!window.confirm("Discard your changes and restore the published version?"))
+            return;
+        setBanner(null);
+        setPageBusy("discard");
+        if (!(await flushAll())) {
+            setPageBusy(null);
+            setBanner({ text: "Couldn't save your latest changes — discard cancelled." });
+            return;
+        }
+        let result;
+        try {
+            result = await ops.pages.discardDraft(id, locale);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setPageBusy(null);
+        if (!result.ok) {
+            setBanner({ text: result.message });
+            return;
+        }
+        setRecord(result.data);
+        setReloadKey((k) => k + 1); // the tree and the canvas come back from the store
+    };
+    /** Unpublish (§5): the locale goes off the site; the draft stays for a later Publish. */
+    const doUnpublish = async () => {
+        setBanner(null);
+        setPageBusy("unpublish");
+        let result;
+        try {
+            result = await ops.pages.unpublish(id, locale);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setPageBusy(null);
+        if (!result.ok) {
+            setBanner({ text: result.message });
+            return;
+        }
+        setRecord(result.data);
+    };
+    /** History: flush first so the list's draft row is current, then list the locale's versions. */
+    const doHistory = async () => {
+        setBanner(null);
+        const row = record?.locales[locale];
+        if (!row)
+            return;
+        if (!(await flushAll())) {
+            setBanner({ text: "Couldn't save your latest changes — history not opened." });
+            return;
+        }
+        let r;
+        try {
+            r = await ops.pages.listVersions(id, locale);
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!r.ok) {
+            setBanner({ text: r.message });
+            return;
+        }
+        setHistory(historyRows(r.data, row));
+    };
+    /** Restore: the version's tree becomes the draft; the canvas reloads from the store, as after Discard. */
+    const doRestore = async (versionId) => {
+        let result;
+        try {
+            result = await ops.pages.restore(id, locale, versionId);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!result.ok) {
+            setBanner({ text: result.message });
+            return false;
+        }
+        setRecord(result.data);
+        setReloadKey((k) => k + 1);
+        return true;
+    };
+    /** The shared card's own actions (spec 2026-09-13 §5, publish flow §2): the item in the canvas locale, never the page. */
+    const doPublishShared = async (name) => {
+        setBanner(null);
+        setSharedBusy("publish");
+        const r = await sharedEdit.setStatus(name, "published");
+        setSharedBusy(null);
+        if (!r.ok)
+            setBanner({ text: r.message, fields: r.fields });
+    };
+    const doUnpublishShared = async (name) => {
+        setBanner(null);
+        setSharedBusy("unpublish");
+        const r = await sharedEdit.setStatus(name, "draft");
+        setSharedBusy(null);
+        if (!r.ok)
+            setBanner({ text: r.message, fields: r.fields });
+    };
+    const doDiscardShared = async (name) => {
+        if (!window.confirm("Discard your changes and restore the published version?"))
+            return;
+        setBanner(null);
+        setSharedBusy("discard");
+        if (!(await sharedEdit.flush())) {
+            setSharedBusy(null);
+            setBanner({ text: "Couldn't save your latest changes — discard cancelled." });
+            return;
+        }
+        let r;
+        try {
+            r = await ops.shared.discardDraft(name, locale);
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setSharedBusy(null);
+        if (!r.ok) {
+            setBanner({ text: r.message });
+            return;
+        }
+        // The item reloads from the store; the canvas refreshes through the same path as a save ack.
+        sharedEdit.reset();
+        setSharedDirty(false);
+        void sharedEdit.load(name, locale);
+        inlineRef.current?.onSaved();
+    };
     // ── keyboard ─────────────────────────────────────────────────────────
     useEffect(() => {
         const onKey = (e) => {
@@ -494,11 +697,15 @@ export function EditorView({ ops, registry, id }) {
     const selected = tree && selectedId ? findNode(tree, selectedId) : null;
     const selectedSection = selected ? sectionOf(selected.type) : null;
     const selectedShared = selected ? sharedOf(selected) : null;
+    // A layout-rendered item: selected by its `shared:` id, in no zone (spec 2026-09-13 §1).
+    const layoutItem = selectedId && !selected ? sharedItemOf(selectedId) : null;
+    const selectedItem = selectedShared ?? layoutItem;
     const selZone = tree && selected ? zoneOf(tree, selected.id) : null;
     const selLocked = policyOf(selZone)?.kind === "locked";
     const rectById = new Map(rects.map((r) => [r.id, r]));
-    const selRect = selected ? rectById.get(selected.id) : undefined;
+    const selRect = selectedId ? rectById.get(selectedId) : undefined;
     const hoverRect = hoverId && hoverId !== selectedId ? rectById.get(hoverId) : undefined;
+    const hoverShared = hoverId ? sharedItemOf(hoverId) !== null : false;
     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);
@@ -509,7 +716,12 @@ export function EditorView({ ops, registry, id }) {
             title: selectedSection?.title ?? selectedShared?.title ?? selected.type,
             shared: Boolean(selectedShared), locked: selLocked,
         }
-        : null;
+        : layoutItem && selectedId && selRect
+            ? {
+                node: { id: selectedId, type: SHARED_NODE_TYPE, fields: { item: layoutItem.name } },
+                rect: selRect, title: layoutItem.title, shared: true, locked: false, layout: true,
+            }
+            : null;
     const labelOf = (node) => {
         const shared = sharedOf(node);
         return sectionOf(node.type)?.title ?? (shared ? `${shared.title} · shared` : node.type);
@@ -525,7 +737,7 @@ export function EditorView({ ops, registry, id }) {
         scroller.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
     };
     const plusButtons = plusButtonsFor({ zoneOrder, canTake: zoneCanTake, nodesIn, rects: rectById, emptyZones });
-    const tabs = selectedSection ? tabsFor(selectedSection) : [];
+    const tabs = selectedSection ? tabsFor(selectedSection) : selectedItem ? tabsFor(selectedItem) : [];
     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(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/pages`, items: [
@@ -534,23 +746,39 @@ export function EditorView({ ops, registry, id }) {
                                 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 && (() => {
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _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" })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _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: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), 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, hoverShared: hoverShared, 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 && (() => {
                                             const { session } = inline.richtext;
-                                            const node = findNode(tree, session.node);
-                                            const section = node ? sectionOf(node.type) : null;
-                                            if (!node || !section)
+                                            const item = sharedItemOf(session.node);
+                                            const node = !item && tree ? findNode(tree, session.node) : null;
+                                            const schema = item ?? (node ? sectionOf(node.type) : null);
+                                            const fields = item ? sharedEdit.items[item.name]?.fields : node?.fields;
+                                            if (!schema || !fields)
                                                 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) }))] })) : record ? (_jsx(PageInspector, { record: record, locale: locale, registry: registry, tree: tree, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                            return (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(fields, session.path), toolset: descriptorAt(schema, session.path)?.toolset, onChange: (doc) => {
+                                                    inline.markChanged();
+                                                    if (item)
+                                                        patchShared(item.name, session.path, doc);
+                                                    else
+                                                        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: [selectedSection || selectedItem ? (_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 ?? selectedItem?.title }), selectedItem && (sharedTouched || sharedEdit.saveState === "error") && _jsx(SaveIndicator, { state: sharedEdit.saveState })] }), _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) }))] })) : record ? (_jsx(PageInspector, { record: record, locale: locale, registry: registry, tree: tree, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
                                             !isFixedNode(record, registry) &&
                                             !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
                                             ? () => { void doRemoveLocale(); }
-                                            : undefined })) : null, selected && (selectedSection || selectedShared) && (_jsxs("div", { className: "sm-inspector__body", children: [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)
+                                            : undefined })) : null, (selectedSection || selectedItem) && (_jsxs("div", { className: "sm-inspector__body", children: [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}`))), 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) => ({
+                                                } }, `${selected.id}.${ns}.${key}`))), selectedItem && selectedId && (_jsx(SharedInspector, { item: selectedItem, edit: sharedEdit.items[selectedItem.name] ?? null, locale: locale, entries: entries, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, pending: sharedDirty || sharedEdit.saveState !== "saved", busy: sharedBusy, inlinePath: inline.session?.node === selectedId ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
+                                                    reveal(p, selectedItem); }, onChange: (ns, key, value) => {
+                                                    patchShared(selectedItem.name, ns === "fields" ? key : `${STYLES_KEY}.${key}`, value);
+                                                    if (ns === "fields") {
+                                                        const current = sharedEdit.items[selectedItem.name];
+                                                        if (current)
+                                                            syncTexts(selectedId, selectedItem, { ...current.fields, [key]: value });
+                                                    }
+                                                }, onPublish: () => { void doPublishShared(selectedItem.name); }, onDiscard: () => { void doDiscardShared(selectedItem.name); }, onUnpublish: () => { void doUnpublishShared(selectedItem.name); } }))] }))] }), _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) => {

package/dist/admin/editor/PageSettings.js

@@ -8,7 +8,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // tab and the remove-from-locale button live there (spec 2026-09-10 page
 // fields §5).
 import { useEffect, useState } from "react";
-import { Field, SectionLabel } from "../ui/primitives.js";
+import { updatedLine } from "../ui/format.js";
+import { Field, InfoRow, SectionLabel } from "../ui/primitives.js";
 export function PageSettings({ record, locale, registry, path, fixed, onRename }) {
     const row = record.locales[locale];
     const [draft, setDraft] = useState({ title: row?.title ?? "", slug: row?.slug ?? "" });
@@ -37,5 +38,5 @@ export function PageSettings({ record, locale, registry, path, fixed, onRename }
             void commit(key);
         }
     };
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsxs(SectionLabel, { children: ["Page \u00B7 ", locale] }), fixed && _jsx("span", { className: "sm-hint", children: "Owned by code \u2014 change it in the registration." }), error && _jsx("span", { className: "sm-error", children: error }), _jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", disabled: fixed, value: draft.title, onChange: (e) => setDraft((d) => ({ ...d, title: e.target.value })), onBlur: () => void commit("title"), onKeyDown: onKey("title") }) }), _jsx(Field, { label: "Slug", hint: path ?? "", children: _jsx("input", { className: "sm-input sm-input--mono", disabled: fixed || isHome, value: draft.slug, onChange: (e) => setDraft((d) => ({ ...d, slug: e.target.value })), onBlur: () => void commit("slug"), onKeyDown: onKey("slug") }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsxs(SectionLabel, { children: ["Page \u00B7 ", locale] }), fixed && _jsx("span", { className: "sm-hint", children: "Owned by code \u2014 change it in the registration." }), error && _jsx("span", { className: "sm-error", children: error }), _jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", disabled: fixed, value: draft.title, onChange: (e) => setDraft((d) => ({ ...d, title: e.target.value })), onBlur: () => void commit("title"), onKeyDown: onKey("title") }) }), _jsx(Field, { label: "Slug", hint: path ?? "", children: _jsx("input", { className: "sm-input sm-input--mono", disabled: fixed || isHome, value: draft.slug, onChange: (e) => setDraft((d) => ({ ...d, slug: e.target.value })), onBlur: () => void commit("slug"), onKeyDown: onKey("slug") }) }), _jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] }));
 }

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

@@ -0,0 +1,23 @@
+import type { AdminShared } from "../serialize.ts";
+import type { TabEntry } from "../forms/tabs.ts";
+import type { SharedEditItem } from "./shared-edit.ts";
+import { type RefOption } from "../shell/SharedFields.tsx";
+import { type PublishBusy } from "../ui/PublishControl.tsx";
+export declare function SharedInspector({ item, edit, locale, entries, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, }: {
+    item: AdminShared;
+    /** null while the item loads. */
+    edit: SharedEditItem | null;
+    locale: string;
+    entries: TabEntry[];
+    multilingual: boolean;
+    refOptions: Record<string, RefOption[]>;
+    inlinePath?: string;
+    onEditHere?(): void;
+    onChange(ns: "fields" | "styles", key: string, value: unknown): void;
+    /** An edit the store has not confirmed (dirty, or the item's autosave not in `saved`). */
+    pending: boolean;
+    busy: PublishBusy;
+    onPublish(): void;
+    onDiscard(): void;
+    onUnpublish(): void;
+}): import("react").JSX.Element;

package/dist/admin/editor/SharedInspector.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BASE } from "../shell/base.js";
+import { localeStatusOf } from "../shell/pages-tree.js";
+import { SharedFields } from "../shell/SharedFields.js";
+import { PublishControl } from "../ui/PublishControl.js";
+export function SharedInspector({ item, edit, locale, entries, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, }) {
+    const row = edit?.record.locales[locale];
+    // The same three states the shared list shows; the control decides what applies.
+    const status = row ? localeStatusOf(row) : "draft";
+    const pages = edit ? [...new Set(edit.usage.filter((u) => u.sourceKind === "page").map((u) => u.sourceId))] : [];
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsx("p", { className: "sm-hint", children: "Shared content \u2014 changes every page it is used on." }), edit && (_jsxs("p", { className: "sm-hint", children: [pages.length === 0 ? "Not placed on any page." : `Used on ${pages.length} page${pages.length === 1 ? "" : "s"}: `, pages.map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`, children: id })] }, id)))] })), _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: _jsx(PublishControl, { status: row ? status : null, pending: pending, busy: busy, disabled: !edit, onPublish: onPublish, onDiscard: onDiscard, onUnpublish: onUnpublish }) }), edit ? (_jsx(SharedFields, { item: item, entries: entries, fields: edit.fields, errors: edit.errors, refOptions: refOptions, multilingual: multilingual, inlinePath: inlinePath, onEditHere: onEditHere, onChange: onChange })) : (_jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" }))] }));
+}

package/dist/admin/editor/shared-edit.d.ts

@@ -0,0 +1,39 @@
+import type { EntryRecord, EntryUsage } from "../../entry-store.ts";
+import type { AdminOps, OpResult } from "../ops.ts";
+import { type SaveState } from "./autosave.ts";
+export type SharedEditItem = {
+    name: string;
+    locale: string;
+    record: EntryRecord;
+    /** The merged draft fields; a visual item's styles under `$styles`. */
+    fields: Record<string, unknown>;
+    usage: EntryUsage[];
+    /** The last save's field errors by dotted path; cleared by a successful save. */
+    errors: Record<string, string>;
+};
+export type SharedEditState = {
+    items: Record<string, SharedEditItem>;
+    saveState: SaveState;
+    loadError: string | null;
+};
+export type SharedEdit = {
+    getState(): SharedEditState;
+    subscribe(listener: () => void): () => void;
+    /** Load an item for a locale once; a repeat while loaded or loading is a no-op. */
+    load(name: string, locale: string): Promise<void>;
+    /** Set the value at a dotted path (`tagline`, `$styles.tone`, `columns.1.title`); a debounced save follows. */
+    patch(name: string, path: string, value: unknown): void;
+    flush(): Promise<boolean>;
+    /** Flush, then set the item's status in its locale; the record updates on success. */
+    setStatus(name: string, status: "draft" | "published"): Promise<OpResult<EntryRecord>>;
+    /** Drop every item (a new locale, a new canvas). Flush BEFORE calling this. */
+    reset(): void;
+    dispose(): void;
+};
+export declare function createSharedEdit(opts: {
+    ops: Pick<AdminOps, "shared">;
+    onSaved?: () => void;
+    debounceMs?: number;
+    retryBaseMs?: number;
+    retryCapMs?: number;
+}): SharedEdit;