smoodly 0.0.28 → 0.0.29

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";
@@ -63,6 +63,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 +89,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([]);
@@ -251,6 +257,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 +297,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]);
@@ -513,6 +521,21 @@ export function EditorView({ ops, registry, id }) {
     // ── 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));
@@ -794,10 +817,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 +830,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,7 +856,7 @@ 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)
+                        ] }) }), 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 || 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 && (() => {
                                             const { session } = inline.richtext;
                                             const item = globalItemOf(session.node);
@@ -848,11 +872,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 +884,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 +894,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 +918,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/field-paths.d.ts

@@ -11,3 +11,6 @@ export declare function getAtPath(fields: Record<string, unknown> | undefined, p
  *  siblings keep their identity — and keeps arrays arrays. Missing
  *  objects along the way are created. */
 export declare function setAtPath(fields: Record<string, unknown> | undefined, path: string, value: unknown): Record<string, unknown>;
+/** `fields` without the key at `path` (spec 2026-09-27 editor safety §5: an orphan's Clear).
+ *  Copies only the spine; a missing path returns an equal copy. */
+export declare function unsetAtPath(fields: Record<string, unknown> | undefined, path: string): Record<string, unknown>;

package/dist/admin/field-paths.js

@@ -47,3 +47,29 @@ export function setAtPath(fields, path, value) {
     };
     return set(fields ?? {}, splitPath(path));
 }
+/** `fields` without the key at `path` (spec 2026-09-27 editor safety §5: an orphan's Clear).
+ *  Copies only the spine; a missing path returns an equal copy. */
+export function unsetAtPath(fields, path) {
+    const unset = (obj, segments) => {
+        if (obj === null || typeof obj !== "object")
+            return obj;
+        const [head, ...rest] = segments;
+        if (Array.isArray(obj)) {
+            const i = Number(head);
+            if (rest.length === 0 || !(i in obj))
+                return obj;
+            const copy = obj.slice();
+            copy[i] = unset(obj[i], rest);
+            return copy;
+        }
+        const o = obj;
+        if (!(head in o))
+            return o;
+        if (rest.length === 0) {
+            const { [head]: _gone, ...keep } = o;
+            return keep;
+        }
+        return { ...o, [head]: unset(o[head], rest) };
+    };
+    return unset(fields ?? {}, splitPath(path));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { Finding } from "../drift.ts";
+export declare function OrphanFields({ orphans, strip, onClear }: {
+    orphans: Finding[];
+    /** The node-id prefix to drop from the shown key and from the path Clear gets. */
+    strip?: string;
+    onClear(path: string): void;
+}): ReactElement | null;

package/dist/admin/forms/OrphanFields.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/primitives.js";
+const shown = (v) => (typeof v === "string" ? v : JSON.stringify(v));
+export function OrphanFields({ orphans, strip, onClear }) {
+    const rows = orphans.filter((f) => f.kind === "orphan-field");
+    if (rows.length === 0)
+        return null;
+    const local = (p) => (strip && p.startsWith(`${strip}.`) ? p.slice(strip.length + 1) : p);
+    return (_jsxs("details", { className: "sm-orphans", "data-testid": "orphan-fields", children: [_jsx("summary", { className: "sm-orphans__head", children: "No longer in the schema" }), rows.map((f) => (_jsxs("div", { className: "sm-orphans__row", children: [_jsx("code", { children: local(f.path) }), _jsx("span", { className: "sm-orphans__value", children: shown(f.value) }), _jsx(Button, { variant: "secondary", onClick: () => { void navigator.clipboard?.writeText(shown(f.value)); }, children: "Copy" }), _jsx(Button, { variant: "secondary", onClick: () => onClear(local(f.path)), children: "Clear" })] }, f.path)))] }));
+}

package/dist/admin/forms/RefPicker.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // One widget for f.ref and f.refList (spec 2026-09-17 §2): a search input,
-// the picked entries under it. A refList's rows drag like a list's.
+// the picked entries under it. A refList's rows drag like a list's; a single
+// ref shows its pick inside the input, open and remove beside it (2026-09-27).
 import { ExternalLink } from "lucide-react";
 import { Combobox } from "../ui/Combobox.js";
 import { Grip, IconButton, cx } from "../ui/primitives.js";
@@ -10,6 +11,7 @@ import { useSortable } from "../ui/useSortable.js";
 import { useAdminHref } from "../shell/base.js";
 import { moveItem } from "./list.js";
 import { pickRef, refCandidates, refIds, refRows, refValue, statusTone } from "./ref-picker.js";
+const ABSENT = "Not available in this locale";
 const titleCase = (name) => name.replace(/^./, (c) => c.toUpperCase());
 function StatusDot({ status }) {
     if (status === "")
@@ -26,5 +28,7 @@ export function RefPicker({ value, onChange, options, multiple, max, target }) {
     const set = (next) => onChange(refValue(next, multiple));
     const sortable = useSortable({ count: multiple ? rows.length : 0, onDrop: (from, to) => set(moveItem(ids, from, to)) });
     const present = (options ?? []).filter((o) => !o.absent).length;
-    return (_jsxs("div", { className: "sm-refpicker", children: [_jsx(Combobox, { label: `Search ${titleCase(target)}`, keepOpen: multiple, options: candidates.map((o) => ({ value: o.id, label: o.title })), disabled: options === undefined || atMax, placeholder: atMax ? `Maximum ${max}` : options === undefined ? "Loading…" : "Type to search", emptyText: present === 0 ? `No entries in ${titleCase(target)} yet` : "Every entry is already picked", renderOption: (o) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "sm-refpicker__title", children: o.label }), _jsx(StatusDot, { status: byId.get(o.value)?.status ?? "" })] })), onPick: (id) => set(pickRef(ids, id, multiple, max)) }), rows.length > 0 && (_jsx("div", { className: "sm-refpicker__rows", ref: sortable.containerRef, children: rows.map((r, i) => (_jsxs("div", { style: multiple ? sortable.rowStyle(i) : undefined, className: cx("sm-refrow", r.state !== "ok" && "sm-refrow--muted", multiple && sortable.rowClass(i)), children: [multiple && _jsx(Grip, { ...sortable.handleProps(i) }), _jsxs("span", { className: "sm-refpicker__title", children: [r.title, r.state === "absent" && _jsx("span", { className: "sm-refrow__note", children: " \u00B7 Not available in this locale" })] }), _jsx(StatusDot, { status: r.status }), (r.state === "ok" || r.state === "absent") && (_jsx("a", { className: "sm-iconbtn", href: adminHref(`/${target}/${r.id}`), target: "_blank", rel: "noreferrer", "aria-label": "Open entry", title: "Open entry", children: _jsx(ExternalLink, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsx(IconButton, { label: "Remove", onClick: () => set(ids.filter((_, j) => j !== i)), children: "\u00D7" })] }, `${r.id}-${i}`))) }))] }));
+    const openLink = (r) => (r.state === "ok" || r.state === "absent") && (_jsx("a", { className: "sm-iconbtn", href: adminHref(`/${target}/${r.id}`), target: "_blank", rel: "noreferrer", "aria-label": "Open entry", title: "Open entry", children: _jsx(ExternalLink, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) }));
+    const single = multiple ? undefined : rows[0];
+    return (_jsxs("div", { className: "sm-refpicker", children: [_jsx(Combobox, { label: `Search ${titleCase(target)}`, keepOpen: multiple, options: candidates.map((o) => ({ value: o.id, label: o.title })), disabled: options === undefined || atMax, placeholder: atMax ? `Maximum ${max}` : options === undefined ? "Loading…" : "Type to search", emptyText: present === 0 ? `No entries in ${titleCase(target)} yet` : "Every entry is already picked", renderOption: (o) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "sm-refpicker__title", children: o.label }), _jsx(StatusDot, { status: byId.get(o.value)?.status ?? "" })] })), selected: single && `${single.title}${single.state === "absent" ? ` · ${ABSENT}` : ""}`, suffix: single && (_jsxs(_Fragment, { children: [_jsx(StatusDot, { status: single.status }), openLink(single), _jsx(IconButton, { label: "Remove", onClick: () => set([]), children: "\u00D7" })] })), onPick: (id) => set(pickRef(ids, id, multiple, max)) }), multiple && rows.length > 0 && (_jsx("div", { className: "sm-refpicker__rows", ref: sortable.containerRef, children: rows.map((r, i) => (_jsxs("div", { style: multiple ? sortable.rowStyle(i) : undefined, className: cx("sm-refrow", r.state !== "ok" && "sm-refrow--muted", multiple && sortable.rowClass(i)), children: [multiple && _jsx(Grip, { ...sortable.handleProps(i) }), _jsxs("span", { className: "sm-refpicker__title", children: [r.title, r.state === "absent" && _jsxs("span", { className: "sm-refrow__note", children: [" \u00B7 ", ABSENT] })] }), _jsx(StatusDot, { status: r.status }), openLink(r), _jsx(IconButton, { label: "Remove", onClick: () => set(ids.filter((_, j) => j !== i)), children: "\u00D7" })] }, `${r.id}-${i}`))) }))] }));
 }

package/dist/admin/forms/RichtextElementCard.js

@@ -11,13 +11,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // document's element nodes. Collapse is component state only: a card
 // starts collapsed (2026-09-09) unless it holds nothing yet — a freshly
 // inserted element opens, so its fields can be filled straight away.
+// Drift (spec 2026-09-27 editor safety §5): an unregistered element's card
+// takes the broken stripe and lists its stored fields read-only; a
+// registered one the field's toolset leaves out says so in its head.
 import { useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 import { isHidden } from "../../conditions.js";
-import { IconButton, SectionLabel } from "../ui/primitives.js";
+import { IconButton, SectionLabel, cx } from "../ui/primitives.js";
 import { FieldWidget } from "./FieldWidget.js";
 import { useElements } from "./elements-context.js";
-import { cardClass, useRichtextForm } from "./richtext-form-context.js";
+import { cardClass, elementCardState, useRichtextForm } from "./richtext-form-context.js";
 import { elementIndexAt } from "./richtext-insert.js";
 /** No field holds a value yet — the state right after an insert. */
 function isBlank(fields) {
@@ -31,6 +34,9 @@ export function RichtextElementCard({ node, editor, getPos, updateAttributes, de
     const fields = (node.attrs.fields && typeof node.attrs.fields === "object" ? node.attrs.fields : {});
     const settings = (node.attrs.settings && typeof node.attrs.settings === "object" ? node.attrs.settings : {});
     const [open, setOpen] = useState(() => isBlank(fields));
+    // As drift decides it: an element whose contexts dropped "richtext" is outside every toolset.
+    const allowed = form.elements?.filter((n) => elements.find((e) => e.name === n)?.contexts.includes("richtext"));
+    const state = elementCardState(name, Boolean(element), allowed);
     const pos = getPos();
     const index = typeof pos === "number" ? elementIndexAt(editor.state.doc, pos) : 0;
     const base = `${form.path}.elements.${index}`;
@@ -39,5 +45,5 @@ export function RichtextElementCard({ node, editor, getPos, updateAttributes, de
     const scope = { fields, settings };
     const visibleFields = Object.entries(element?.fields ?? {}).filter(([, d]) => !isHidden(d, { self: fields, ...scope }));
     const visibleSettings = Object.entries(element?.settings ?? {}).filter(([, d]) => !isHidden(d, { self: settings, ...scope }));
-    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [visibleFields.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, scope: scope, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), visibleSettings.length > 0 && _jsx(SectionLabel, { caps: true, children: "Settings" }), visibleSettings.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: settings[key], errors: form.errors, path: `${base}.settings.${key}`, scope: scope, onChange: (v) => updateAttributes({ settings: { ...settings, [key]: v } }) }, `setting-${key}`)))] }))] }));
+    return (_jsxs(NodeViewWrapper, { className: cx(cardClass(selected, form.canvas), state.unknown && "sm-rtcard--broken"), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), state.outside && _jsx("span", { className: "sm-hint", children: "Not in this field's toolset" }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && !element && (_jsx("div", { className: "sm-rtcard__body", contentEditable: false, children: Object.entries(fields).map(([key, value]) => (_jsxs("div", { className: "sm-orphans__row", children: [_jsx("code", { children: key }), _jsx("span", { className: "sm-orphans__value", children: typeof value === "string" ? value : JSON.stringify(value) })] }, key))) })), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [visibleFields.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, scope: scope, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), visibleSettings.length > 0 && _jsx(SectionLabel, { caps: true, children: "Settings" }), visibleSettings.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: settings[key], errors: form.errors, path: `${base}.settings.${key}`, scope: scope, onChange: (v) => updateAttributes({ settings: { ...settings, [key]: v } }) }, `setting-${key}`)))] }))] }));
 }

package/dist/admin/forms/RichtextWidget.js

@@ -8,6 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // flag, so its own cards stay admin-styled.
 import { useMemo } from "react";
 import { EditorContent } from "@tiptap/react";
+import { allowedOf } from "../../toolset.js";
 import { RichtextToolbar } from "./RichtextToolbar.js";
 import { RichtextInsertMenu } from "./RichtextInsertMenu.js";
 import { RichtextLinkRow, RichtextMenu } from "./RichtextPopovers.js";
@@ -17,7 +18,8 @@ import { useRichtextEditor } from "./useRichtextEditor.js";
 export function RichtextWidget({ value, toolset, onChange, errors, path = "" }) {
     const rt = useRichtextEditor({ value, toolset, onChange, contentClass: "sm-richtext__content" });
     const parent = useRichtextForm();
-    const formInfo = useMemo(() => ({ errors, path, canvas: parent.canvas }), [errors, path, parent.canvas]);
+    const allowed = useMemo(() => allowedOf(toolset).elements, [toolset]);
+    const formInfo = useMemo(() => ({ errors, path, canvas: parent.canvas, elements: allowed }), [errors, path, parent.canvas, allowed]);
     return (_jsx(RichtextFormProvider, { value: formInfo, children: _jsxs("div", { className: "sm-richtext", children: [_jsxs("div", { className: "sm-richtext__head", children: [_jsx(RichtextToolbar, { allowed: rt.allowed, active: rt.active, canInsert: rt.canInsert, onCommand: rt.run }), rt.menu.open && _jsx(RichtextMenu, { menu: rt.menu })] }), rt.link.open && _jsx(RichtextLinkRow, { link: rt.link }), _jsxs("div", { className: "sm-richtext__body", children: [_jsx(EditorContent, { editor: rt.editor }), rt.slash && (_jsx("div", { className: "sm-richtext__slash", style: { top: rt.slash.state.rect ? rt.slash.state.rect.bottom - (editorTop(rt.editor) ?? 0) + 4 : 0 }, children: _jsx(RichtextInsertMenu, { items: rt.slash.state.items, active: rt.slash.active, onPick: (item) => rt.slash?.state.pick(item) }) }))] }), rt.picker.open && _jsx(MediaPicker, { kinds: ["image"], onPick: rt.picker.pick, onClose: rt.picker.close })] }) }));
 }
 /** The editor's top in viewport coordinates, to place the slash menu relative to the body wrapper. */

package/dist/admin/forms/TagsField.js

@@ -27,7 +27,7 @@ export function TagsField({ value, onChange, max, suggestions, label, initialAdd
             timer.current = setTimeout(() => setFlash(null), 600);
         }
     };
-    return (_jsxs("div", { className: "sm-tags", children: [tags.map((t, i) => (_jsxs("span", { className: cx("sm-tag", flash === t && "sm-tag--flash"), children: [t, _jsx("button", { type: "button", className: "sm-tag__x", "aria-label": `Remove ${t}`, onClick: () => onChange(tags.filter((_, j) => j !== i)), children: "\u00D7" })] }, t))), adding && !atMax && (_jsx(Combobox, { className: "sm-combo--tag", label: `Add to ${label}`, placeholder: "Add a tag", autoFocus: true, keepOpen: true, initialOpen: true, options: (suggestions ?? []).filter((s) => !tags.some((t) => sameTag(t, s))).map((s) => ({ value: s, label: s })), onPick: commit, onSubmit: commit, createRow: suggestions !== undefined, onQueryChange: (next) => { if (!next.includes(","))
+    return (_jsxs("div", { className: "sm-tags", children: [tags.map((t, i) => (_jsxs("span", { className: cx("sm-tag", flash === t && "sm-tag--flash"), children: [t, _jsx("button", { type: "button", className: "sm-tag__x", "aria-label": `Remove ${t}`, onClick: () => onChange(tags.filter((_, j) => j !== i)), children: "\u00D7" })] }, t))), adding && !atMax && (_jsx(Combobox, { className: "sm-combo--tag", listClassName: "sm-combo__list--tag", label: `Add to ${label}`, placeholder: "Add a tag", autoFocus: true, keepOpen: true, initialOpen: true, options: (suggestions ?? []).filter((s) => !tags.some((t) => sameTag(t, s))).map((s) => ({ value: s, label: s })), onPick: commit, onSubmit: commit, createRow: suggestions !== undefined, onQueryChange: (next) => { if (!next.includes(","))
                     return next; commit(next); return ""; }, onInputKey: (e, query) => {
                     if (e.key !== "Backspace" || query !== "" || tags.length === 0)
                         return false;