smoodly 0.0.28 → 0.0.30

package/dist/admin/editor/CanvasWarning.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The warning above a canvas Smoodly could not show (spec 2026-09-27
+// shadowed-page detector §5): the editor's sentence, then the line for
+// whoever fixes it, so the editor can forward it as is.
+import { Banner } from "../ui/primitives.js";
+import { canvasMessage } from "./canvas-diagnosis.js";
+export function CanvasWarning({ cause, path }) {
+    const { editor, developer } = canvasMessage(cause, path);
+    return (_jsxs(Banner, { tone: "warn", children: [_jsx("p", { children: editor }), _jsxs("p", { children: [_jsx("strong", { children: "For your developer:" }), " ", developer] })] }));
+}

package/dist/admin/editor/EditorView.js

@@ -30,13 +30,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Eye } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CSS_KEY, GLOBAL_NODE_TYPE, SETTINGS_KEY, STYLES_KEY, globalNameOf } from "../../global.js";
-import { descriptorAt, getAtPath } from "../field-paths.js";
+import { descriptorAt, getAtPath, unsetAtPath } from "../field-paths.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { revealField } from "../forms/reveal.js";
 import { useRefOptions } from "../forms/useRefOptions.js";
 import { tabOf, tabsFor } from "../forms/tabs.js";
 import { InspectorFields, valueOf } from "./InspectorFields.js";
-import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, moveNodeTo, newNodeId, nodeFromSample, patchNode, patchNodeCss, patchNodePath, patchPage, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
+import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, moveNodeTo, newNodeId, nodeFromSample, patchNode, patchNodeCss, patchNodePath, patchPage, placementNode, removeNode, zoneOf, clearZone, unsetNodePath, } from "../tree-ops.js";
 import { useDraftAutosave } from "./autosave.js";
 import { CanvasOverlay } from "./CanvasOverlay.js";
 import { InlineRichtext } from "./InlineRichtext.js";
@@ -50,6 +50,9 @@ import { GlobalInspector } from "./GlobalInspector.js";
 import { localeFromUrl } from "./locale-url.js";
 import { plusButtonsFor } from "./overlay-geometry.js";
 import { useCanvasBridge } from "./useCanvasBridge.js";
+import { useCanvasDiagnosis } from "./useCanvasDiagnosis.js";
+import { CanvasWarning } from "./CanvasWarning.js";
+import { crashLines, publishCrashConfirm } from "./crash-copy.js";
 import { useInlineSession } from "./useInlineSession.js";
 import { usePageLocale } from "./usePageLocale.js";
 import { useGlobalEdit } from "./useGlobalEdit.js";
@@ -63,6 +66,11 @@ import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
 import { draftToken } from "../../draft-token.js";
 import { isStale, staleInfoOf } from "../shell/stale.js";
 import { StaleBanner } from "../ui/StaleBanner.js";
+import { DriftNotice } from "../ui/DriftNotice.js";
+import { OrphanFields } from "../forms/OrphanFields.js";
+import { UnknownNode } from "./UnknownNode.js";
+import { isBroken, pageDrift } from "../drift.js";
+import { driftMessage, misfitErrors } from "../drift-copy.js";
 import { usePresence, usePresenceState, useSavedElsewhere, useTrackPresence } from "../shell/presence-context.js";
 import { editorsOf } from "../shell/presence.js";
 import { PresenceLine } from "../ui/PresenceLine.js";
@@ -84,6 +92,7 @@ export function EditorView({ ops, registry, id }) {
     const [reloadKey, setReloadKey] = useState(0);
     const [paths, setPaths] = useState({});
     const [redirects, setRedirects] = useState({});
+    const [liveFindings, setLiveFindings] = useState([]);
     const [urls, setUrls] = useState({});
     // The locales the parent exists in — "Add locale" offers only these.
     const [parentLocales, setParentLocales] = useState([]);
@@ -112,6 +121,10 @@ export function EditorView({ ops, registry, id }) {
     /** A global edit since the item's last save ack; and any global edit on this canvas yet. */
     const [globalDirty, setGlobalDirty] = useState(false);
     const [globalTouched, setGlobalTouched] = useState(false);
+    /** The editor changed something on this canvas. The locked-zone fill on load is not such a change: when
+     *  another editor's fill landed first, the refusal and their saved broadcast load their version quietly. */
+    const editedRef = useRef(false);
+    editedRef.current = touched || globalTouched;
     // Global item name → row id, loaded once per editor mount: the picker's
     // Global group and a bound locked zone need the id to place a node.
     const [globalIds, setGlobalIds] = useState(null);
@@ -143,8 +156,8 @@ export function EditorView({ ops, registry, id }) {
                 setDirty(false);
                 presence?.announce(pageTarget(target), r.data.draft?.savedAt ?? null);
             }
-            else if (isStale(r))
-                setStale(staleInfoOf(r));
+            else if (isStale(r) && editedRef.current)
+                setStale(staleInfoOf(r)); // untouched: the effect below reloads quietly
             return r;
         },
         onSaved: () => inlineRef.current?.onSaved(),
@@ -182,7 +195,7 @@ export function EditorView({ ops, registry, id }) {
     // Canvas-originated selection: the node is under the cursor already, so
     // this path deliberately skips the scroll every other selection does.
     // (`onCanvasSelect` is declared further down; the handler runs at event time.)
-    const { rects, emptyZones, fields: fieldRects, docH, geometry, postToCanvas } = useCanvasBridge({
+    const { rects, emptyZones, fields: fieldRects, docH, geometry, postToCanvas, onFrameLoad, crashed } = useCanvasBridge({
         iframeRef, iframeSrc,
         onSelect: (id, path, x, y) => onCanvasSelect(id, path, x, y),
         onHover: (id, path) => {
@@ -191,6 +204,8 @@ export function EditorView({ ops, registry, id }) {
         },
         onRendered: () => inlineRef.current?.onRendered(),
     });
+    // A canvas the bridge never spoke from is diagnosed and named (spec 2026-09-27 shadowed-page detector).
+    const diagnosis = useCanvasDiagnosis(iframeSrc, geometry);
     // ── load: draft mode FIRST, then the record; only then point the iframe
     // at the site route (an iframe loaded before the cookie exists would
     // render the published tree).
@@ -251,6 +266,7 @@ export function EditorView({ ops, registry, id }) {
             setRecord(result.data.record);
             setPaths(result.data.paths);
             setRedirects(result.data.redirects);
+            setLiveFindings(result.data.liveFindings);
             setUrls(result.data.urls);
             setParentLocales(result.data.parentLocales);
             // Absent in this locale: the "Add <locale>" pane, derived from the record.
@@ -290,6 +306,7 @@ export function EditorView({ ops, registry, id }) {
         setRecord(result.data.record);
         setPaths(result.data.paths);
         setRedirects(result.data.redirects);
+        setLiveFindings(result.data.liveFindings);
         setUrls(result.data.urls);
         setParentLocales(result.data.parentLocales);
     }, [ops, id, locale]);
@@ -326,6 +343,15 @@ export function EditorView({ ops, registry, id }) {
         const name = globalNameOf(id);
         return name ? registryRef.current.globals.find((s) => s.name === name) ?? null : null;
     }, [globalOf]);
+    // The crashed sections' banner lines (spec 2026-09-27 section guard §6): the section's title from the
+    // registry, a placed global's item title, the node type when the registry has no name for it.
+    const crashTitleOf = (id) => {
+        const node = treeRef.current ? findNode(treeRef.current, id) : null;
+        if (!node)
+            return "Section";
+        return globalItemOf(id)?.title ?? sectionOf(node.type)?.title ?? node.type;
+    };
+    const crashedLines = crashLines(crashed, crashTitleOf);
     // ── ref fields inside sections: same option loading as EntryForm ──────
     const refTargets = useMemo(() => {
         const out = {};
@@ -390,16 +416,26 @@ export function EditorView({ ops, registry, id }) {
     }, [globalEdit.stale]);
     /** Load their version (§4): drop the frozen state; the load effect resets the tree, the globals and the flags. */
     const loadTheirs = () => { setStale(null); reset(); setReloadKey((k) => k + 1); };
-    // Someone else saved this page (§5): clean → their version silently; unsaved edits anywhere → the freeze at once.
+    /** Their version without the freeze: for a view with nothing of the editor's own to lose. */
+    const loadTheirsQuietly = useCallback(() => { reset(); keepSelectionRef.current = true; setReloadKey((k) => k + 1); }, [reset]);
+    // A refused save the editor never made — the locked-zone fill, when another editor's fill landed first.
+    // Decided by editedRef, not by `stale`: the refusal's setStale and the autosave's state can render apart.
+    useEffect(() => {
+        if (saveState === "stale" && !editedRef.current)
+            loadTheirsQuietly();
+    }, [saveState, loadTheirsQuietly]);
+    // Someone else saved this page (§5): clean or untouched → their version silently; the editor's own unsaved edits → the freeze at once.
     useSavedElsewhere(target, (event) => {
         if (stale)
             return;
-        if (dirty || globalDirty || saveState !== "saved" || globalEdit.saveState !== "saved")
-            setStale({ by: event.email, at: Date.now() });
-        else {
+        if (!(dirty || globalDirty || saveState !== "saved" || globalEdit.saveState !== "saved")) {
             keepSelectionRef.current = true;
             setReloadKey((k) => k + 1);
         }
+        else if (editedRef.current)
+            setStale({ by: event.email, at: Date.now() });
+        else
+            loadTheirsQuietly(); // only the fill is pending: drop it
     });
     // 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
@@ -504,15 +540,34 @@ export function EditorView({ ops, registry, id }) {
             return;
         const template = registryRef.current.pages.find((p) => p.name === record.template);
         const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, globalIds);
-        if (filled !== tree)
-            mutate(() => filled);
+        // Saved like the fill on load, and like it not an edit of the editor's (editedRef).
+        if (filled !== tree) {
+            setTree(filled);
+            treeRef.current = filled;
+            mark();
+        }
         // `tree` is deliberately not a dependency: this runs when the ids land
         // or a new draft loads, not on every keystroke.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [globalIds, record, mutate, tree === null]);
+    }, [globalIds, record, mark, tree === null]);
     // ── tree gestures ────────────────────────────────────────────────────
     const nodesIn = useCallback((zone) => tree?.zones[zone] ?? [], [tree]);
     const zoneCanTake = useCallback((zone) => canInsert(policyOf(zone), nodesIn(zone).length), [policyOf, nodesIn]);
+    // Drift (spec 2026-09-27 editor safety §5): the draft on screen against the registry, grouped by
+    // the first path segment — a node id, `zone:<name>` or `page`.
+    const findings = useMemo(() => (record && tree ? pageDrift(registry, record.template, tree) : []), [record, tree, registry]);
+    const findingsAt = useMemo(() => {
+        const by = new Map();
+        for (const f of findings) {
+            const key = f.path.split(".")[0];
+            by.set(key, [...(by.get(key) ?? []), f]);
+        }
+        return by;
+    }, [findings]);
+    const markOf = (nodeId) => {
+        const fs = findingsAt.get(nodeId);
+        return !fs ? undefined : fs.some(isBroken) ? "broken" : "orphan";
+    };
     const doInsert = (zone, index, section) => {
         const node = nodeFromSample(section, newNodeId(section.name));
         mutate((t) => insertNode(t, zone, index, node));
@@ -579,6 +634,9 @@ export function EditorView({ ops, registry, id }) {
     const doPatchPage = (ns, key, value) => mutate((t) => patchPage(t, ns, key, value));
     // ── publish ──────────────────────────────────────────────────────────
     const doPublish = async () => {
+        // A section the preview shows as crashed (spec 2026-09-27 section guard §6): ask before it goes live.
+        if (crashedLines.length > 0 && !(await confirm(publishCrashConfirm(crashedLines))))
+            return;
         setBanner(null);
         setPageBusy("publish");
         // Never publish behind a pending debounce.
@@ -794,10 +852,11 @@ export function EditorView({ ops, registry, id }) {
     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 || selectedGlobal)
+    const selection = selected && selRect
         ? {
+            // An unknown node is selectable in place too (spec 2026-09-27 editor safety §5), titled as the Outline labels it.
             node: selected, rect: selRect,
-            title: selectedSection?.title ?? selectedGlobal?.title ?? selected.type,
+            title: selectedSection?.title ?? selectedGlobal?.title ?? labelOf(selected),
             global: Boolean(selectedGlobal), locked: selLocked,
         }
         : layoutItem && selectedId && selRect
@@ -806,12 +865,12 @@ export function EditorView({ ops, registry, id }) {
                 rect: selRect, title: layoutItem.title, global: true, locked: false, layout: true,
             }
             : null;
-    const labelOf = (node) => {
+    function labelOf(node) {
         if (node.type === CUSTOM_NODE_TYPE)
             return customNodeLabel(node);
         const global = globalOf(node);
-        return sectionOf(node.type)?.title ?? (global ? `${global.title} · global` : node.type);
-    };
+        return sectionOf(node.type)?.title ?? (global ? `${global.title} · global` : `Unknown section \`${node.type}\``);
+    }
     // Reveal is defined here, where the rect map exists; select() calls it
     // through the ref so its own identity stays stable.
     revealRef.current = (id) => {
@@ -832,8 +891,8 @@ 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: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), ready && (_jsx(LinkButton, { icon: true, href: siteUrl, target: "_blank", rel: "noreferrer", "aria-label": "View live", title: "View live \u2014 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: _jsx(Eye, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })), _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(); } })] }) }), target && _jsx(PresenceLine, { names: editorsOf(others, target), noun: "page" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), 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", inert: stale ? true : undefined, 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, onClick: (e) => { if (e.target === e.currentTarget)
-                                    setSelectedId(null); }, 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, hoverGlobal: hoverGlobal, 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 && (() => {
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), ready && (_jsx(LinkButton, { icon: true, href: siteUrl, target: "_blank", rel: "noreferrer", "aria-label": "View live", title: "View live \u2014 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: _jsx(Eye, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })), _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(); } })] }) }), target && _jsx(PresenceLine, { names: editorsOf(others, target), noun: "page" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsx(DriftNotice, { draft: findings, live: liveFindings }), 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", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-canvas", children: [(banner || diagnosis || crashedLines.length > 0) && (_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 ?? [] })] })), diagnosis && _jsx(CanvasWarning, { cause: diagnosis.cause, path: diagnosis.path }), crashedLines.length > 0 && (_jsx(BannerBox, { tone: "warn", children: crashedLines.map((line, i) => _jsx("p", { children: line }, i)) }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, onClick: (e) => { if (e.target === e.currentTarget)
+                                    setSelectedId(null); }, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", onLoad: onFrameLoad, 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, hoverGlobal: hoverGlobal, 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 item = globalItemOf(session.node);
                                             const node = !item && tree ? findNode(tree, session.node) : null;
@@ -848,11 +907,11 @@ export function EditorView({ ops, registry, id }) {
                                                     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 ? `${selectedItem.title} · global` : null) }), selectedItem && (globalTouched || globalEdit.saveState === "error") && _jsx(SaveIndicator, { state: globalEdit.saveState, pending: globalDirty })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && selectedSection && (_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], redirects: redirects[locale] ?? [], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [selected && !selectedSection && !selectedItem ? (_jsx(UnknownNode, { node: selected, label: labelOf(selected), onRemove: () => { void doRemove(selected.id, true); } })) : 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 ? `${selectedItem.title} · global` : null) }), selectedItem && (globalTouched || globalEdit.saveState === "error") && _jsx(SaveIndicator, { state: globalEdit.saveState, pending: globalDirty })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && selectedSection && (_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], redirects: redirects[locale] ?? [], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, drift: findingsAt.get("page") ?? [], onClearPageField: (key) => mutate((t) => ({ ...t, fields: unsetAtPath(t.fields ?? {}, key) })), 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, (selectedSection || selectedItem) && (_jsxs("div", { className: "sm-inspector__body", children: [selected && selectedSection && (_jsx(InspectorFields, { groups: activeGroups, values: selected, render: ({ key, ns, descriptor }, { emptyLabel, scope }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: valueOf(selected, { key, ns, descriptor }), emptyLabel: emptyLabel, scope: scope, refOptions: ns === "fields" || ns === "settings" ? refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor) : undefined, 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 && findingsAt.get(selected.id)?.filter((f) => f.kind === "zone-disallowed").map((f) => (_jsx("p", { className: "sm-outline-note", children: driftMessage(f) }, f.path))), selected && selectedSection && (_jsx(InspectorFields, { groups: activeGroups, values: selected, render: ({ key, ns, descriptor }, { emptyLabel, scope }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: valueOf(selected, { key, ns, descriptor }), emptyLabel: emptyLabel, scope: scope, errors: ns === "css" ? undefined : misfitErrorsIn(findingsAt.get(selected.id) ?? [], selected.id, ns), refOptions: ns === "fields" || ns === "settings" ? refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor) : undefined, 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) => {
                                                         if (ns === "css")
                                                             doPatchCss(selected.id, value);
@@ -860,7 +919,9 @@ export function EditorView({ ops, registry, id }) {
                                                             doPatch(selected.id, ns, key, value);
                                                         if (ns === "fields")
                                                             syncTexts(selected.id, selectedSection, { ...selected.fields, [key]: value });
-                                                    } }, `${selected.id}.${ns}.${key}`)) })), selectedItem && selectedId && (_jsx(GlobalInspector, { item: selectedItem, edit: globalEdit.items[selectedItem.name] ?? null, locale: locale, groups: activeGroups, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, tabs: tabs.length > 0 ? _jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }) : undefined, pending: globalDirty || globalEdit.saveState !== "saved", busy: globalBusy, inlinePath: inline.session?.node === selectedId ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
+                                                    } }, `${selected.id}.${ns}.${key}`)) })), selected && selectedSection && (
+                                            // Element findings sit under the node id too, but their paths are the element card's (Task 10), not node keys.
+                                            _jsx(OrphanFields, { orphans: (findingsAt.get(selected.id) ?? []).filter((f) => !f.path.includes(".elements.")), strip: selected.id, onClear: (path) => mutate((t) => unsetNodePath(t, selected.id, path)) })), selectedItem && selectedId && (_jsx(GlobalInspector, { item: selectedItem, edit: globalEdit.items[selectedItem.name] ?? null, locale: locale, groups: activeGroups, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, tabs: tabs.length > 0 ? _jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }) : undefined, pending: globalDirty || globalEdit.saveState !== "saved", busy: globalBusy, 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) => {
                                                     patchGlobal(selectedItem.name, globalPath(ns, key), value);
                                                     if (ns === "fields") {
@@ -868,10 +929,23 @@ export function EditorView({ ops, registry, id }) {
                                                         if (current)
                                                             syncTexts(selectedId, selectedItem, { ...current.fields, [key]: value });
                                                     }
-                                                }, onPublish: () => { void doPublishGlobal(selectedItem.name); }, onDiscard: () => { void doDiscardGlobal(selectedItem.name); }, onUnpublish: () => { void doUnpublishGlobal(selectedItem.name); } }))] }))] }), _jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, 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) => {
+                                                }, onPublish: () => { void doPublishGlobal(selectedItem.name); }, onDiscard: () => { void doDiscardGlobal(selectedItem.name); }, onUnpublish: () => { void doUnpublishGlobal(selectedItem.name); } }))] }))] }), _jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, onMoveTo: doMoveTo, onRemove: doRemove, zones: [
+                                        ...zoneOrder.map((zone) => ({
+                                            zone, locked: policyOf(zone)?.kind === "locked", canTake: zoneCanTake(zone),
+                                            note: findingsAt.get(`zone:${zone}`)?.map(driftMessage)[0],
+                                            nodes: nodesIn(zone).map((node) => ({ node, label: labelOf(node), mark: markOf(node.id) })),
+                                        })),
+                                        // Stored zones the page type no longer declares (spec 2026-09-27 editor safety §5): listed after the real ones.
+                                        ...Object.keys(tree?.zones ?? {}).filter((z) => !zoneOrder.includes(z) && (tree.zones[z]?.length ?? 0) > 0).map((zone) => ({
+                                            zone, locked: false, canTake: false, removed: true,
+                                            nodes: tree.zones[zone].map((node) => ({ node, label: labelOf(node) })),
+                                        })),
+                                    ], onClearZone: async (zone) => {
+                                        const count = tree?.zones[zone]?.length ?? 0;
+                                        if (!(await confirm({ title: "Clear this zone?", body: `Its ${count === 1 ? "section is" : `${count} sections are`} removed from the draft. The live page keeps ${count === 1 ? "it" : "them"} until you publish.`, confirmLabel: "Clear zone", destructive: true })))
+                                            return;
+                                        mutate((t) => clearZone(t, zone));
+                                    }, onAddFirst: (zone) => {
                                         const first = allowedSections(policyOf(zone), registry.sections)[0];
                                         if (first)
                                             doInsert(zone, 0, first);
@@ -879,6 +953,19 @@ export function EditorView({ ops, registry, id }) {
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */
+/** A node's misfit markers for one namespace's widgets (spec 2026-09-27 editor safety §5): a widget's
+ *  path is its key within the namespace, so `settings.` / `styles.` come off and the rest stay fields'. */
+function misfitErrorsIn(findings, nodeId, ns) {
+    const all = misfitErrors(findings, nodeId);
+    const out = {};
+    for (const [path, message] of Object.entries(all)) {
+        if (ns === "fields" && !path.startsWith("settings.") && !path.startsWith("styles."))
+            out[path] = message;
+        else if (ns !== "fields" && path.startsWith(`${ns}.`))
+            out[path.slice(ns.length + 1)] = message;
+    }
+    return out;
+}
 /** Where a global item's widget writes (spec 2026-09-13 §3, 2026-09-14 §5): fields at the key, the other namespaces under their reserved keys. */
 function globalPath(ns, key) {
     if (ns === "fields")

package/dist/admin/editor/InlineRichtext.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { EditorContent, useEditorState } from "@tiptap/react";
+import { allowedOf } from "../../toolset.js";
 import { MediaPicker } from "../forms/MediaPicker.js";
 import { RichtextInsertMenu } from "../forms/RichtextInsertMenu.js";
 import { RichtextLinkRow, RichtextMenu } from "../forms/RichtextPopovers.js";
@@ -20,7 +21,8 @@ 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]);
+    const allowed = useMemo(() => allowedOf(toolset).elements, [toolset]);
+    const formInfo = useMemo(() => ({ path: mount.session.path, canvas: true, elements: allowed }), [mount.session.path, allowed]);
     // The caret where the click landed, once the editor exists.
     useEffect(() => {
         if (!editor)

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

@@ -6,7 +6,12 @@ type ZoneRows = {
     nodes: {
         node: TreeNode;
         label: string;
+        mark?: "broken" | "orphan";
     }[];
+    /** A stored zone the page type no longer declares: one row with Clear zone. */
+    removed?: boolean;
+    /** A zone rule the stored nodes break — "Zone `main` allows 3 sections and has 5." */
+    note?: string;
 };
 type Handlers = {
     selectedId: string | null;
@@ -16,6 +21,8 @@ type Handlers = {
     /** The drop and the grip's arrow keys: `index` in the resulting order. */
     onMoveTo(id: string, index: number): void;
     onRemove(id: string): void;
+    /** A removed zone's Clear zone. */
+    onClearZone?(zone: string): void;
 };
 export declare function Outline({ zones, ...handlers }: {
     zones: ZoneRows[];

package/dist/admin/editor/Outline.js

@@ -1,15 +1,18 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grip, IconButton, SectionLabel, cx } from "../ui/primitives.js";
+import { Button, 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: "Page Outline" }), zones.map((z) => _jsx(OutlineZone, { ...z, ...handlers }, z.zone))] }));
 }
-function OutlineZone({ zone, locked, canTake, nodes, selectedId, onSelect, onAddFirst, onMoveTo, onRemove }) {
+function OutlineZone({ zone, locked, canTake, nodes, removed, note, selectedId, onSelect, onAddFirst, onMoveTo, onRemove, onClearZone }) {
     const sortable = useSortable({
-        count: locked ? 0 : nodes.length,
+        count: locked || removed ? 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, { caps: 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", "data-testid": "outline-row", 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), "data-testid": "outline-row", 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 }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] }, node.id))) }))] }));
+    if (removed) {
+        return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, "data-testid": "removed-zone", children: _jsxs("div", { className: "sm-outline-row sm-outline-row--orphan sm-outline-row--removed", children: [_jsxs("span", { className: "sm-outline-row__label", children: ["Removed zone `", zone, "` \u00B7 ", nodes.length, " ", nodes.length === 1 ? "section" : "sections"] }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => onClearZone?.(zone), children: "Clear zone" })] }) }));
+    }
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { caps: true, children: [zone, locked && " · locked"] }), note && _jsx("p", { className: "sm-outline-note", children: note }), 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, mark }) => (_jsxs("div", { className: cx("sm-outline-row sm-outline-row--locked sm-outline-row--clickable", mark && `sm-outline-row--${mark}`), "data-testid": "outline-row", 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, mark }, i) => (_jsxs("div", { onClick: () => onSelect(node.id), style: sortable.rowStyle(i), "data-testid": "outline-row", className: cx("sm-outline-row", "sm-outline-row--clickable", "sm-outline-row--grip", node.id === selectedId && "sm-outline-row--selected", mark && `sm-outline-row--${mark}`, sortable.rowClass(i)), children: [_jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-outline-row__label", children: label }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] }, node.id))) }))] }));
 }

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

@@ -1,9 +1,10 @@
 import type { PageTree } from "../../render.tsx";
 import type { PageRecord } from "../../store.ts";
 import type { AdminPageTemplate, AdminRegistry } from "../serialize.ts";
+import type { Finding } from "../drift.ts";
 export type PageTab = "SEO & Social" | "Settings";
 export declare function pageTabsFor(template: AdminPageTemplate | undefined): PageTab[];
-export declare function PageInspector({ record, locale, registry, tree, path, fixed, redirects, onRename, onRemoveLocale, onPatch }: {
+export declare function PageInspector({ record, locale, registry, tree, path, fixed, redirects, drift, onRename, onRemoveLocale, onPatch, onClearPageField }: {
     record: PageRecord;
     locale: string;
     registry: AdminRegistry;
@@ -21,4 +22,8 @@ export declare function PageInspector({ record, locale, registry, tree, path, fi
     /** Absent when the locale cannot be removed: a fixed node, the site root, or the page's last locale. */
     onRemoveLocale?: () => void;
     onPatch(ns: "fields" | "meta", key: string, value: unknown): void;
+    /** The page fields' drift (spec 2026-09-27 editor safety §5): paths under `page.fields.`. */
+    drift?: Finding[];
+    /** An orphan page field's Clear. */
+    onClearPageField?(key: string): void;
 }): import("react").JSX.Element;

package/dist/admin/editor/PageInspector.js

@@ -7,18 +7,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // reset when the page changes.
 import { useEffect, useState } from "react";
 import { FieldWidget } from "../forms/FieldWidget.js";
+import { OrphanFields } from "../forms/OrphanFields.js";
+import { misfitErrors } from "../drift-copy.js";
 import { Button, Tabs } from "../ui/primitives.js";
 import { PageSettings } from "./PageSettings.js";
 import { SeoSettings } from "./SeoSettings.js";
 export function pageTabsFor(template) {
     return template?.seo ? ["SEO & Social", "Settings"] : ["Settings"];
 }
-export function PageInspector({ record, locale, registry, tree, path, fixed, redirects, onRename, onRemoveLocale, onPatch }) {
+export function PageInspector({ record, locale, registry, tree, path, fixed, redirects, drift = [], onRename, onRemoveLocale, onPatch, onClearPageField }) {
     const template = registry.pages.find((p) => p.name === record.template);
     const tabs = pageTabsFor(template);
     const [tab, setTab] = useState(tabs[0]);
     useEffect(() => { setTab(pageTabsFor(template)[0]); }, [record.id]); // eslint-disable-line react-hooks/exhaustive-deps
     const active = tabs.includes(tab) ? tab : tabs[0];
     const title = record.locales[locale]?.title ?? "";
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sm-inspector__head", children: _jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-pageglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: title })] }) }), tabs.length > 1 && _jsx(Tabs, { tabs: tabs, value: active, onChange: setTab }), _jsx("div", { className: "sm-inspector__body", children: active === "SEO & Social" ? (_jsx(SeoSettings, { meta: tree?.meta ?? {}, onPatch: (key, value) => onPatch("meta", key, value) })) : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: path, fixed: fixed, redirects: redirects, onRename: onRename }), Object.entries(template?.fields ?? {}).map(([key, descriptor]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: tree?.fields?.[key], onChange: (value) => onPatch("fields", key, value) }, key))), onRemoveLocale && _jsxs(Button, { variant: "secondary", onClick: onRemoveLocale, children: ["Remove from ", locale] })] })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sm-inspector__head", children: _jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-pageglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: title })] }) }), tabs.length > 1 && _jsx(Tabs, { tabs: tabs, value: active, onChange: setTab }), _jsx("div", { className: "sm-inspector__body", children: active === "SEO & Social" ? (_jsx(SeoSettings, { meta: tree?.meta ?? {}, onPatch: (key, value) => onPatch("meta", key, value) })) : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: path, fixed: fixed, redirects: redirects, onRename: onRename }), Object.entries(template?.fields ?? {}).map(([key, descriptor]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: tree?.fields?.[key], errors: misfitErrors(drift, "page.fields"), onChange: (value) => onPatch("fields", key, value) }, key))), onClearPageField && _jsx(OrphanFields, { orphans: drift, strip: "page.fields", onClear: onClearPageField }), onRemoveLocale && _jsxs(Button, { variant: "secondary", onClick: onRemoveLocale, children: ["Remove from ", locale] })] })) })] }));
 }

package/dist/admin/editor/PageSettings.js

@@ -7,7 +7,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // the Settings tab of PageInspector while no block is selected; the SEO
 // tab and the remove-from-locale button live there (spec 2026-09-10 page
 // fields §5).
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { updatedLine } from "../ui/format.js";
 import { Field, InfoRow, SectionLabel } from "../ui/primitives.js";
 import { confirmLiveUrl } from "../shell/live-url.js";
@@ -18,6 +18,8 @@ export function PageSettings({ record, locale, registry, path, fixed, redirects,
     const [draft, setDraft] = useState({ title: row?.title ?? "", slug: row?.slug ?? "" });
     const [error, setError] = useState(null);
     const adminHref = useAdminHref();
+    /** One commit at a time: Enter commits, then the confirm's autofocus blurs the input, and that blur must not ask again. */
+    const committing = useRef(false);
     const isHome = record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug;
     // The record changes identity on every rename; re-seed the inputs from it.
     useEffect(() => {
@@ -26,25 +28,33 @@ export function PageSettings({ record, locale, registry, path, fixed, redirects,
     if (!row)
         return null;
     const commit = async (key) => {
-        setError(null);
-        const next = draft[key];
-        if (next === row[key])
+        if (committing.current)
             return;
-        if (next === "") {
-            setError(`A ${key} is required — nothing falls back to another locale.`);
-            return;
-        }
-        // A published slug is a live URL: one confirm with the redirect box, Cancel restores the input (members management §5, redirects §6).
-        let redirect = true;
-        if (key === "slug") {
-            const live = await confirmLiveUrl({ status: row.status, from: row.slug, to: next }, { name: row.title, path });
-            if (!live.ok) {
-                setDraft((d) => ({ ...d, slug: row.slug }));
+        committing.current = true;
+        try {
+            setError(null);
+            const next = draft[key];
+            if (next === row[key])
+                return;
+            if (next === "") {
+                setError(`A ${key} is required — nothing falls back to another locale.`);
                 return;
             }
-            redirect = live.redirect;
+            // A published slug is a live URL: one confirm with the redirect box, Cancel restores the input (members management §5, redirects §6).
+            let redirect = true;
+            if (key === "slug") {
+                const live = await confirmLiveUrl({ status: row.status, from: row.slug, to: next }, { name: row.title, path });
+                if (!live.ok) {
+                    setDraft((d) => ({ ...d, slug: row.slug }));
+                    return;
+                }
+                redirect = live.redirect;
+            }
+            setError(await onRename(key === "slug" ? { slug: next, redirect } : { title: next }));
+        }
+        finally {
+            committing.current = false;
         }
-        setError(await onRename(key === "slug" ? { slug: next, redirect } : { title: next }));
     };
     const onKey = (key) => (e) => {
         if (e.key === "Enter") {

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

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import type { TreeNode } from "../../render.tsx";
+export declare function UnknownNode({ node, label, onRemove }: {
+    node: TreeNode;
+    label: string;
+    onRemove(): void;
+}): ReactElement;

package/dist/admin/editor/UnknownNode.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "../ui/primitives.js";
+const shown = (v) => (typeof v === "string" ? v : JSON.stringify(v));
+export function UnknownNode({ node, label, onRemove }) {
+    const values = Object.entries(node.fields ?? {});
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-title", children: label }) }), _jsxs("div", { className: "sm-inspector__body", "data-testid": "unknown-node", children: [_jsxs("p", { className: "sm-hint", children: ["The code no longer registers `", node.type, "`, so it can't be edited or shown on the site."] }), values.map(([key, value]) => (_jsxs("div", { className: "sm-orphans__row", children: [_jsx("code", { children: key }), _jsx("span", { className: "sm-orphans__value", children: shown(value) }), _jsx(Button, { variant: "secondary", onClick: () => { void navigator.clipboard?.writeText(shown(value)); }, children: "Copy" })] }, key))), _jsx(Button, { variant: "danger", style: { alignSelf: "flex-start" }, onClick: onRemove, children: "Remove section" })] })] }));
+}

package/dist/admin/editor/canvas-diagnosis.d.ts

@@ -0,0 +1,49 @@
+/** The meta Smoodly's page renderer writes in draft mode (§3). */
+export declare const DRAFT_META_NAME = "smoodly-draft";
+/** The attribute on the <style> the editor bridge server-renders. */
+export declare const BRIDGE_ATTR = "data-smoodly-bridge";
+export type CanvasProbe = {
+    kind: "failed";
+} | {
+    kind: "response";
+    requested: string;
+    url: string;
+    status: number;
+    redirected: boolean;
+    html: string;
+    frameOptions: string | null;
+    csp: string | null;
+};
+export type CanvasCause = {
+    kind: "unreachable";
+} | {
+    kind: "redirect";
+    to: string;
+} | {
+    kind: "notFound";
+} | {
+    kind: "crashed";
+    status: number;
+} | {
+    kind: "refused";
+    status: number;
+} | {
+    kind: "shadowed";
+} | {
+    kind: "noSearchParams";
+} | {
+    kind: "framing";
+    header: string;
+    value: string;
+} | {
+    kind: "script";
+};
+/** Read a fetch Response into a probe. A constructed Response has no url; the requested one stands in. */
+export declare function probeOf(requested: string, res: Response): Promise<CanvasProbe>;
+/** The first matching cause, in the spec's order (§4). */
+export declare function diagnoseCanvas(probe: CanvasProbe): CanvasCause;
+/** The warning's two lines for a cause (§5, verbatim). */
+export declare function canvasMessage(cause: CanvasCause, path: string): {
+    editor: string;
+    developer: string;
+};