smoodly 0.0.53 → 0.0.54

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

@@ -10,7 +10,7 @@ export type OverlaySelection = {
     /** Rendered by the site's layout, not placed in a zone: no tree gestures (spec 2026-09-13 §2). */
     layout?: boolean;
 };
-export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }: {
+export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onCopy, onRemove, }: {
     emptyZones: ZoneRect[];
     hoverRect: BridgeRect | undefined;
     /** The hovered block is a global item: the ring takes the global colour. */
@@ -25,5 +25,7 @@ export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, sele
     onPlus(button: PlusButton, clientX: number, clientY: number): void;
     onMove(id: string, dir: -1 | 1): void;
     onDuplicate(node: TreeNode): void;
+    /** Copy to the section clipboard (spec 2026-10-19 editor at launch §3). */
+    onCopy(node: TreeNode): void;
     onRemove(id: string): void;
 }): import("react").JSX.Element;

package/dist/admin/editor/CanvasOverlay.js

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { cx, IconButton } from "../ui/primitives.js";
 /** Pixels above a block the riding pill needs (half its height); less and it moves inside. */
 const TAG_CLEARANCE = 14;
-export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }) {
+export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onCopy, onRemove, }) {
     const [hoverPlus, setHoverPlus] = useState(null);
     return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed", style: {
                     position: "absolute", left: z.x + 12, top: z.y, width: Math.max(0, z.w - 24),
@@ -27,7 +27,7 @@ export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, p
                         } }), _jsxs("span", { className: cx("sm-blocktag", selection.global && "sm-blocktag--global", selection.rect.y < TAG_CLEARANCE && "sm-blocktag--inside"), style: { position: "absolute", left: selection.rect.x, top: selection.rect.y }, children: [selection.title, selection.global && " · global", selection.locked && " · locked"] }), !selection.layout && (_jsx("div", { className: "sm-blocktoolbar", style: {
                             position: "absolute", left: selection.rect.x + selection.rect.w - 8, top: selection.rect.y + 8,
                             transform: "translateX(-100%)", pointerEvents: "auto",
-                        }, children: selection.locked ? (_jsx("span", { className: "sm-blocktoolbar__note", children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => onMove(selection.node.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => onMove(selection.node.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => onDuplicate(selection.node), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => onRemove(selection.node.id), children: "\u00D7" })] })) }))] })), plusButtons.map((p) => {
+                        }, children: selection.locked ? (_jsx("span", { className: "sm-blocktoolbar__note", children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => onMove(selection.node.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => onMove(selection.node.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => onDuplicate(selection.node), children: "\u29C9" }), _jsx(IconButton, { label: "Copy", tone: "inverse", onClick: () => onCopy(selection.node), children: "\u2398" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => onRemove(selection.node.id), children: "\u00D7" })] })) }))] })), plusButtons.map((p) => {
                 const key = `${p.zone}-${p.index}`;
                 const hot = hoverPlus === key;
                 return (_jsxs("div", { style: { position: "absolute", left: 0, right: 0, top: p.y }, children: [hot && _jsx("div", { className: "sm-guide", style: { margin: "0 12px" } }), _jsx("div", { style: {

package/dist/admin/editor/EditorView.js

@@ -27,8 +27,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //
 // Core code: no next/* imports live here — the bridge is the only piece
 // that knows about Next, and it ships to the site, not the admin.
-import { Eye } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AppWindow, Eye, Redo2, Rows3, Undo2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { notePublished } from "../delivery-mode.js";
 import { CSS_KEY, GLOBAL_NODE_TYPE, SETTINGS_KEY, STYLES_KEY, globalNameOf } from "../../global.js";
 import { descriptorAt, getAtPath, unsetAtPath } from "../field-paths.js";
@@ -48,6 +48,12 @@ import { customNode, customNodeLabel, customSection } from "../custom-section.js
 import { CUSTOM_NODE_TYPE } from "../../custom/index.js";
 import { NoticePane } from "./NoticePane.js";
 import { Outline } from "./Outline.js";
+import { StructureView } from "./StructureView.js";
+import { cardPreview } from "./card-preview.js";
+import { rememberView, rememberedView } from "./view-memory.js";
+import { createHistory } from "./history.js";
+import { takesUndoKeys, undoKeyOf } from "./undo-keys.js";
+import { canPaste, clipOf, clipboardSpace, pastedNode, readClip, subscribeClip, writeClip } from "./section-clipboard.js";
 import { PageInspector } from "./PageInspector.js";
 import { GlobalInspector } from "./GlobalInspector.js";
 import { localeFromUrl } from "./locale-url.js";
@@ -78,7 +84,18 @@ 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";
-import { Banner as BannerBox, Breadcrumb, Button, FieldErrorList, IconButton, LinkButton, SaveIndicator, Tabs, TopBar, } from "../ui/primitives.js";
+import { Banner as BannerBox, Breadcrumb, Button, FieldErrorList, IconButton, LinkButton, SaveIndicator, Segmented, Tabs, TopBar, cx, } from "../ui/primitives.js";
+/** Cmd on a Mac, Ctrl elsewhere, for the undo keys (spec 2026-10-19 editor at launch §2). */
+const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** The site's storage for the section clipboard; a browser that refuses the property reads as empty and refuses the write. */
+const clipStorage = () => {
+    try {
+        return window.localStorage;
+    }
+    catch {
+        return { getItem: () => null, setItem: () => { throw new Error("blocked"); } };
+    }
+};
 export function EditorView({ ops, registry, id }) {
     const adminHref = useAdminHref();
     const [record, setRecord] = useState(null);
@@ -108,6 +125,18 @@ export function EditorView({ ops, registry, id }) {
     const inlineRef = useRef(null);
     const [picker, setPicker] = useState(null);
     const [tab, setTab] = useState("Content");
+    /** Canvas or Structure (spec 2026-10-19 editor at launch §1): one tree, two renderers; remembered per browser. */
+    const [view, setView] = useState(() => rememberedView());
+    /** Undo and redo (spec 2026-10-19 editor at launch §2): the steps since the page opened, in the tab. */
+    const [undoHistory] = useState(() => createHistory());
+    const undoState = useSyncExternalStore(undoHistory.subscribe, () => `${undoHistory.canUndo()}:${undoHistory.canRedo()}`, () => "false:false");
+    const canUndo = undoState.startsWith("true");
+    const canRedo = undoState.endsWith("true");
+    /** The frame's load count: the undo keys are attached to each new frame document. */
+    const [frameLoads, setFrameLoads] = useState(0);
+    /** The section clipboard (spec 2026-10-19 editor at launch §3): this space's clip in the site's storage, every tab's. */
+    const [clip, setClip] = useState(() => readClip(clipStorage(), clipboardSpace()));
+    useEffect(() => subscribeClip(window, () => setClip(readClip(clipStorage(), clipboardSpace()))), []);
     const [banner, setBanner] = useState(null);
     const [published, setPublished] = useState(false);
     /** An action of the page's control in flight. */
@@ -173,7 +202,11 @@ export function EditorView({ ops, registry, id }) {
     // through the same inline-session deferral as the page's.
     const globalEdit = useGlobalEdit({ ops, onSaved: (name) => { setGlobalDirty(false); inlineRef.current?.onSaved(); presence?.announce({ kind: "global", id: name, locale }, null); } });
     useUnloadGuard(dirty || saveState !== "saved" || globalDirty || globalEdit.saveState !== "saved");
-    const patchGlobal = (name, path, value) => {
+    const patchGlobal = (name, path, value, opts = {}) => {
+        // A global step (spec 2026-10-19 editor at launch §2): the value before and after at the path, coalesced by `name:path`
+        // (an inline session passes its group's key, so the whole session stays one step).
+        if (opts.record !== false)
+            undoHistory.record({ kind: "global", name, path, before: getAtPath(globalEdit.items[name]?.fields, path), after: value, key: opts.key ?? `${name}:${path}`, at: Date.now(), focus: selectedId ?? undefined });
         globalEdit.patch(name, path, value);
         setGlobalDirty(true);
         setGlobalTouched(true);
@@ -223,6 +256,7 @@ export function EditorView({ ops, registry, id }) {
             setReady(false);
             setTree(null);
             treeRef.current = null;
+            undoHistory.clear(); // a tree loaded from the server starts the history over (a locale switch, a reload, Discard, a restore, Load their version)
             const keepSelection = keepSelectionRef.current;
             keepSelectionRef.current = false;
             if (!keepSelection) {
@@ -294,7 +328,8 @@ export function EditorView({ ops, registry, id }) {
         })();
         return () => { cancelled = true; };
     }, [ops, id, locale, reloadKey]);
-    useEffect(() => { treeRef.current = tree; }, [tree]);
+    // No lagging `treeRef.current = tree` effect: every writer (the load, the fill, mutate, applyTree) sets the ref synchronously,
+    // and a passive effect could move it back between a commit and a later mutate (review 2026-10-20).
     // After a rename only the record and the URL indexes are stale — never
     // re-read the tree here: the draft in memory may be ahead of the store.
     const reload = useCallback(async () => {
@@ -446,33 +481,115 @@ export function EditorView({ ops, registry, id }) {
             revealRef.current(id);
     }, []);
     // ── persistence ──────────────────────────────────────────────────────
-    const mutate = useCallback((fn) => {
-        setTree((t) => {
-            if (!t)
-                return t;
-            const next = fn(t);
-            treeRef.current = next;
-            return next;
-        });
+    /** Every edit of the tree: the op over the current tree, a history step when it changed (`key` coalesces a field's
+     *  burst, `focus` is the node the gesture concerned), then the marking the autosave debounces on. */
+    const mutate = useCallback((fn, opts) => {
+        const t = treeRef.current;
+        if (!t)
+            return;
+        const next = fn(t);
+        if (next !== t)
+            undoHistory.record({ kind: "tree", before: t, after: next, key: opts?.key, focus: opts?.focus, at: Date.now() });
+        treeRef.current = next;
+        setTree(next);
         mark();
         setDirty(true);
         setTouched(true);
-    }, [mark]);
+    }, [mark, undoHistory]);
     // ── inline editing (spec 2026-09-10) ──────────────────────────────────
     const inline = useInlineSession({
         iframeRef, postToCanvas,
+        // An inline session is one step: its key stays grouped from start to end (spec 2026-10-19 editor at launch §2).
+        onSession: (s) => undoHistory.group(`inline:${s.node}:${s.path}`),
         patch: (node, path, value) => {
             const item = globalItemOf(node);
+            // The session's steps carry its group's key (`inline:<node>:<path>`), so every change it dispatches merges into one step.
             if (item)
-                patchGlobal(item.name, path, value);
+                patchGlobal(item.name, path, value, { key: `inline:${node}:${path}` });
             else
-                mutate((t) => patchNodePath(t, node, path, value));
+                mutate((t) => patchNodePath(t, node, path, value), { key: `inline:${node}:${path}`, focus: node });
             // A second element marked with the same field follows the one being typed in.
             if (typeof value === "string")
                 inlineRef.current?.writeText(node, path, value);
         },
     });
     inlineRef.current = inline;
+    /** The switch: an inline session ends on it (the closing editor waits for the refresh), the picker closes, the choice is remembered. */
+    const switchView = (v) => {
+        if (v === view)
+            return;
+        inline.end();
+        setPicker(null);
+        setView(v);
+        rememberView(v);
+    };
+    // ── undo and redo (spec 2026-10-19 editor at launch §2) ─────────────
+    /** A tree step's side, set through the path `mutate` marks by, without recording; the focus node selected when it exists. */
+    const applyTree = (tree, focus) => {
+        treeRef.current = tree;
+        setTree(tree);
+        mark();
+        setDirty(true);
+        setTouched(true);
+        setSelectedId(focus && findNode(tree, focus) ? focus : null);
+    };
+    /** A global step's side through the item's own save; an item not loaded (the editor switched locale and back) is loaded first, never skipped. */
+    const applyGlobal = async (step, dir) => {
+        if (!globalEdit.items[step.name])
+            await globalEdit.load(step.name, locale);
+        patchGlobal(step.name, step.path, dir === "undo" ? step.before : step.after, { record: false });
+        const focus = step.focus;
+        const t = treeRef.current;
+        setSelectedId(focus && ((t && findNode(t, focus)) || globalItemOf(focus)) ? focus : null);
+    };
+    const doUndo = () => {
+        if (stale)
+            return;
+        const step = undoHistory.undo();
+        if (!step)
+            return;
+        inline.end();
+        if (step.kind === "tree")
+            applyTree(step.before, step.focus);
+        else
+            void applyGlobal(step, "undo");
+    };
+    const doRedo = () => {
+        if (stale)
+            return;
+        const step = undoHistory.redo();
+        if (!step)
+            return;
+        inline.end();
+        if (step.kind === "tree")
+            applyTree(step.after, step.focus);
+        else
+            void applyGlobal(step, "redo");
+    };
+    const undoRef = useRef({ doUndo, doRedo });
+    undoRef.current = { doUndo, doRedo };
+    /** Cmd+Z / Shift+Cmd+Z (Ctrl elsewhere): the editor's outside text controls and inside the inspector's field widgets. */
+    const onUndoKey = useCallback((e) => {
+        if (e.defaultPrevented)
+            return; // a widget with its own undo (the sidebar richtext) took the key
+        const k = undoKeyOf(e, IS_MAC);
+        if (!k || !takesUndoKeys(e.target))
+            return;
+        e.preventDefault();
+        if (k === "undo")
+            undoRef.current.doUndo();
+        else
+            undoRef.current.doRedo();
+    }, []);
+    // The same keys from the canvas frame's document (a click on a block leaves the focus there): attached on every frame
+    // load, detached while an inline session is open, so inside a session the field's own undo runs.
+    useEffect(() => {
+        const d = iframeRef.current?.contentDocument;
+        if (!d || inline.session)
+            return;
+        d.addEventListener("keydown", onUndoKey);
+        return () => d.removeEventListener("keydown", onUndoKey);
+    }, [frameLoads, inline.session, onUndoKey]);
     // A different selection ends the session; a new canvas drops everything.
     useEffect(() => { inline.onSelection(selectedId); }, [selectedId]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => { inline.onCanvasChange(); }, [iframeSrc]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -569,13 +686,13 @@ export function EditorView({ ops, registry, id }) {
     };
     const doInsert = (zone, index, section) => {
         const node = nodeFromSample(section, newNodeId(section.name));
-        mutate((t) => insertNode(t, zone, index, node));
+        mutate((t) => insertNode(t, zone, index, node), { focus: node.id });
         setPicker(null);
         select(node.id);
     };
     const doInsertCustom = (zone, index) => {
         const node = customNode(registry, newNodeId(CUSTOM_NODE_TYPE));
-        mutate((t) => insertNode(t, zone, index, node));
+        mutate((t) => insertNode(t, zone, index, node), { focus: node.id });
         setPicker(null);
         select(node.id);
     };
@@ -584,7 +701,7 @@ export function EditorView({ ops, registry, id }) {
         if (!ref)
             return;
         const node = placementNode(item, ref, newNodeId(GLOBAL_NODE_TYPE));
-        mutate((t) => insertNode(t, zone, index, node));
+        mutate((t) => insertNode(t, zone, index, node), { focus: node.id });
         setPicker(null);
         select(node.id);
     };
@@ -605,7 +722,7 @@ export function EditorView({ ops, registry, id }) {
         };
         if (node.css === undefined)
             delete copy.css;
-        mutate((t) => insertNode(t, zone, index, copy));
+        mutate((t) => insertNode(t, zone, index, copy), { focus: copy.id });
         select(copy.id);
     };
     const doRemove = async (id, ask = true) => {
@@ -622,15 +739,53 @@ export function EditorView({ ops, registry, id }) {
             subject: node ? { name: labelOf(node) } : undefined,
         })))
             return;
-        mutate((t) => removeNode(t, id));
+        mutate((t) => removeNode(t, id), { focus: id }); // undo selects the restored node again
         setSelectedId((current) => (current === id ? null : current));
     };
-    const doMove = (id, dir) => mutate((t) => moveNode(t, id, dir));
-    const doMoveTo = (id, index) => mutate((t) => moveNodeTo(t, id, index));
-    const doPatch = (id, ns, key, value) => mutate((t) => patchNode(t, id, ns, key, value));
-    const doPatchCss = (id, css) => mutate((t) => patchNodeCss(t, id, css));
+    const doMove = (id, dir) => mutate((t) => moveNode(t, id, dir), { focus: id });
+    const doMoveTo = (id, index) => mutate((t) => moveNodeTo(t, id, index), { focus: id });
+    const doPatch = (id, ns, key, value) => mutate((t) => patchNode(t, id, ns, key, value), { key: `${id}:${ns === "fields" ? key : `${ns}.${key}`}`, focus: id });
+    const doPatchCss = (id, css) => mutate((t) => patchNodeCss(t, id, css), { key: `${id}:css`, focus: id });
     /** A page-level value (page fields, SEO meta) — same dirty/debounce path as a node's (spec 2026-09-10 page fields §5). */
-    const doPatchPage = (ns, key, value) => mutate((t) => patchPage(t, ns, key, value));
+    const doPatchPage = (ns, key, value) => mutate((t) => patchPage(t, ns, key, value), { key: `page:${ns}.${key}` });
+    // ── the section clipboard (spec 2026-10-19 editor at launch §3) ──────
+    const doCopy = (node) => {
+        const next = clipOf(node, globalOf(node)?.title ?? labelOf(node), clipboardSpace()); // a placement's title without the outline's suffix, as its card reads
+        if (!writeClip(clipStorage(), next)) {
+            setBanner({ text: "Couldn't copy — this browser blocks site storage." });
+            return;
+        }
+        setClip(next);
+    };
+    /** Whether `zone` takes the clip, the picker's own check; null without a clip. */
+    const pasteCheck = (zone) => clip ? canPaste(clip, policyOf(zone), nodesIn(zone).length, registry, globalIds ?? {}) : null;
+    /** One mutate, one undo step, the new node selected. */
+    const doPaste = (zone, index) => {
+        if (!clip || !pasteCheck(zone)?.ok)
+            return;
+        const node = pastedNode(clip, globalIds ?? {});
+        mutate((t) => insertNode(t, zone, index, node), { focus: node.id });
+        setPicker(null);
+        select(node.id);
+    };
+    const pasteEntry = (zone, label, index) => {
+        const check = pasteCheck(zone);
+        return check ? { label, run: () => doPaste(zone, index), disabled: !check.ok, title: check.ok ? undefined : check.reason } : null;
+    };
+    /** The structure card's ⋯ beyond Remove: Copy, then Paste before and after when a clip exists; a locked zone's card gets Copy only. */
+    const cardActions = (node, zone, index) => {
+        const copy = { label: "Copy", run: () => doCopy(node) };
+        if (!clip || policyOf(zone)?.kind === "locked")
+            return [copy];
+        return [copy, pasteEntry(zone, `Paste "${clip.title}" before`, index), pasteEntry(zone, `Paste "${clip.title}" after`, index + 1)].filter((e) => e !== null);
+    };
+    /** The zone heading's ⋯: Paste at the zone's end, when a clip exists and the zone is not locked. */
+    const zoneActions = (zone) => {
+        if (!clip || policyOf(zone)?.kind === "locked")
+            return [];
+        const entry = pasteEntry(zone, `Paste "${clip.title}"`, nodesIn(zone).length);
+        return entry ? [entry] : [];
+    };
     // ── publish ──────────────────────────────────────────────────────────
     const doPublish = async () => {
         // A section the preview shows as crashed (spec 2026-09-27 section guard §6): ask before it goes live.
@@ -816,6 +971,7 @@ export function EditorView({ ops, registry, id }) {
         }
         // The item reloads from the store; the canvas refreshes through the same path as a save ack.
         globalEdit.reset();
+        undoHistory.forget((s) => s.kind === "global" && s.name === name); // the item's steps alone (spec 2026-10-19 editor at launch §2)
         setGlobalDirty(false);
         void globalEdit.load(name, locale);
         inlineRef.current?.onSaved();
@@ -826,11 +982,13 @@ export function EditorView({ ops, registry, id }) {
             if (e.key === "Escape") {
                 setPicker(null);
                 setSelectedId(null);
+                return;
             }
+            onUndoKey(e);
         };
         window.addEventListener("keydown", onKey);
         return () => window.removeEventListener("keydown", onKey);
-    }, []);
+    }, [onUndoKey]);
     if (loadError) {
         return _jsx(NoticePane, { children: _jsx(BannerBox, { tone: "error", children: loadError }) });
     }
@@ -879,6 +1037,8 @@ export function EditorView({ ops, registry, id }) {
     // Reveal is defined here, where the rect map exists; select() calls it
     // through the ref so its own identity stays stable.
     revealRef.current = (id) => {
+        if (view === "structure")
+            return; // the card clicked is in view; the hidden frame is not scrolled under it
         const rect = rectById.get(id);
         const scroller = scrollerRef.current;
         if (!rect || !scroller)
@@ -886,6 +1046,40 @@ export function EditorView({ ops, registry, id }) {
         const top = rect.y - Math.max(0, (scroller.clientHeight - rect.h) / 2);
         scroller.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
     };
+    // The outline's view model (spec 2026-09-27 editor safety §5), shared with the structure view (spec 2026-10-19 editor at
+    // launch §1): the declared zones in order, then stored zones the page type no longer declares, listed after the real ones.
+    const outlineZones = [
+        ...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) })),
+        })),
+        ...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) })),
+        })),
+    ];
+    // A card: the section's icon, its preview line; a placed global item's title carries the badge instead of the outline's suffix.
+    const structureZones = view !== "structure" ? [] : outlineZones.map((z) => ({
+        ...z,
+        nodes: z.nodes.map((n) => {
+            const global = globalOf(n.node);
+            const section = sectionOf(n.node.type);
+            return {
+                ...n,
+                label: global ? global.title : n.label,
+                icon: section?.icon ?? (global ? "⛓" : "▤"),
+                preview: global ? { text: null, image: null } : cardPreview(n.node, section),
+                global: global !== null,
+            };
+        }),
+    }));
+    const clearZoneAsked = 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));
+    };
     const plusButtons = plusButtonsFor({ zoneOrder, canTake: zoneCanTake, nodesIn, rects: rectById, emptyZones });
     const tabs = selectedSection ? tabsFor(selectedSection) : selectedItem ? tabsFor(selectedItem) : [];
     const activeTab = tabs.some((t) => t.tab === tab) ? tab : tabs[0]?.tab;
@@ -896,23 +1090,25 @@ 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" || saveState === "refused") && _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: versionAddress(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;
-                                            const schema = item ?? (node ? sectionOf(node.type) : null);
-                                            const fields = item ? globalEdit.items[item.name]?.fields : node?.fields;
-                                            if (!schema || !fields)
-                                                return null;
-                                            return (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(fields, session.path), toolset: descriptorAt(schema, session.path)?.toolset, onChange: (doc) => {
-                                                    inline.markChanged();
-                                                    if (item)
-                                                        patchGlobal(item.name, session.path, doc);
-                                                    else
-                                                        mutate((t) => patchNodePath(t, session.node, session.path, doc));
-                                                }, onEscape: inline.end }));
-                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [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" || globalEdit.saveState === "refused") && _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] ?? [], 
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error" || saveState === "refused") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), ready && tree && (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Undo", disabled: !canUndo || !!stale, onClick: doUndo, children: _jsx(Undo2, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Redo", disabled: !canRedo || !!stale, onClick: doRedo, children: _jsx(Redo2, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })] })), ready && tree && (_jsx(Segmented, { options: ["canvas", "structure"], value: view, onChange: switchView, className: "sm-seg--view", label: (o) => o === "canvas"
+                                ? _jsx(AppWindow, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" })
+                                : _jsx(Rows3, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }), option: (o) => ({ title: o === "canvas" ? "Canvas" : "Structure", "aria-label": o === "canvas" ? "Canvas" : "Structure" }) })), 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: versionAddress(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)) }))] })), _jsxs("div", { className: cx("sm-canvas__scroll", view === "structure" && "sm-canvas__scroll--structure"), ref: scrollerRef, onClick: (e) => { if (e.target === e.currentTarget)
+                                    setSelectedId(null); }, children: [view === "structure" && !(ready && tree) && _jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" }), view === "structure" && ready && tree && (_jsx(StructureView, { zones: structureZones, selectedId: selectedId, onSelect: select, onMoveTo: doMoveTo, onRemove: doRemove, onClearZone: clearZoneAsked, cardActions: cardActions, zoneActions: zoneActions, onAdd: (zone, index, x, y) => setPicker({ zone, index, x: x - 150, y: y + 12 }) })), _jsxs("div", { className: cx("sm-page", view === "structure" && "sm-canvas__hidden"), style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", onLoad: () => { onFrameLoad(); setFrameLoads((n) => n + 1); }, 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, onCopy: doCopy, onRemove: doRemove }), inline.richtext && (() => {
+                                                const { session } = inline.richtext;
+                                                const item = globalItemOf(session.node);
+                                                const node = !item && tree ? findNode(tree, session.node) : null;
+                                                const schema = item ?? (node ? sectionOf(node.type) : null);
+                                                const fields = item ? globalEdit.items[item.name]?.fields : node?.fields;
+                                                if (!schema || !fields)
+                                                    return null;
+                                                return (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(fields, session.path), toolset: descriptorAt(schema, session.path)?.toolset, onChange: (doc) => {
+                                                        inline.markChanged();
+                                                        if (item)
+                                                            patchGlobal(item.name, session.path, doc, { key: `inline:${session.node}:${session.path}` });
+                                                        else
+                                                            mutate((t) => patchNodePath(t, session.node, session.path, doc), { key: `inline:${session.node}:${session.path}`, focus: session.node });
+                                                    }, onEscape: inline.end }));
+                                            })()] })] })] }), _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" || globalEdit.saveState === "refused") && _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] ?? [], 
                                         // Code-owned, or no longer in code (only deleting is open then): either way the URL is not the editor's.
                                         fixed: isFixedNode(record, registry) || !!record.fixed, 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 &&
                                             !record.fixed &&
@@ -928,7 +1124,7 @@ export function EditorView({ ops, registry, id }) {
                                                             syncTexts(selected.id, selectedSection, { ...selected.fields, [key]: value });
                                                     } }, `${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)
+                                            _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), { focus: selected.id }) })), 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") {
@@ -936,27 +1132,11 @@ 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),
-                                            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) => {
+                                                }, onPublish: () => { void doPublishGlobal(selectedItem.name); }, onDiscard: () => { void doDiscardGlobal(selectedItem.name); }, onUnpublish: () => { void doUnpublishGlobal(selectedItem.name); } }))] }))] }), view === "canvas" && (_jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, onMoveTo: doMoveTo, onRemove: doRemove, zones: outlineZones, onClearZone: clearZoneAsked, onAddFirst: (zone) => {
                                         const first = allowedSections(policyOf(zone), registry.sections)[0];
                                         if (first)
                                             doInsert(zone, 0, first);
-                                    } }) })] })] }), picker && (_jsx(InsertPicker, { at: picker, policy: policyOf(picker.zone), registry: registry, globalIds: globalIds ?? {}, onInsert: (section) => doInsert(picker.zone, picker.index, section), onInsertGlobal: (item) => doInsertGlobal(picker.zone, picker.index, item), onInsertCustom: () => doInsertCustom(picker.zone, picker.index), onClose: () => setPicker(null) }))] }));
+                                    } }) }))] })] }), picker && (_jsx(InsertPicker, { at: picker, policy: policyOf(picker.zone), registry: registry, globalIds: globalIds ?? {}, paste: clip ? { title: clip.title, check: pasteCheck(picker.zone), onPaste: () => doPaste(picker.zone, picker.index) } : undefined, onInsert: (section) => doInsert(picker.zone, picker.index, section), onInsertGlobal: (item) => doInsertGlobal(picker.zone, picker.index, item), onInsertCustom: () => doInsertCustom(picker.zone, picker.index), onClose: () => setPicker(null) }))] }));
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */

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

@@ -1,5 +1,6 @@
 import type { ZonePolicy } from "../../zones.ts";
 import type { AdminRegistry, AdminSection, AdminGlobal } from "../serialize.ts";
+import type { PasteCheck } from "./section-clipboard.ts";
 /** Where the "+" put the panel: `y` is 12px under the button's centre (EditorView). */
 export type PickerAt = {
     zone: string;
@@ -20,8 +21,14 @@ export declare function placePicker(at: PickerAt, height: number, viewport: {
     width: number;
     height: number;
 }): PickerPlace;
-export declare function InsertPicker({ at, policy, registry, globalIds, onInsert, onInsertGlobal, onInsertCustom, onClose }: {
+export declare function InsertPicker({ at, policy, registry, globalIds, paste, onInsert, onInsertGlobal, onInsertCustom, onClose }: {
     at: PickerAt;
+    /** The section clipboard's entry, first in the list (spec 2026-10-19 editor at launch §3): disabled with the reason when the zone refuses. */
+    paste?: {
+        title: string;
+        check: PasteCheck;
+        onPaste(): void;
+    };
     policy: ZonePolicy | undefined;
     registry: AdminRegistry;
     /** Global item name → row id; an item without one cannot be placed. */

package/dist/admin/editor/InsertPicker.js

@@ -33,7 +33,7 @@ function firstPlace(at) {
         return { left: at.x, top: at.y };
     return placePicker(at, 0, { width: window.innerWidth, height: window.innerHeight });
 }
-export function InsertPicker({ at, policy, registry, globalIds, onInsert, onInsertGlobal, onInsertCustom, onClose }) {
+export function InsertPicker({ at, policy, registry, globalIds, paste, onInsert, onInsertGlobal, onInsertCustom, onClose }) {
     const sections = allowedSections(policy, registry.sections);
     const globals = allowedGlobals(policy, registry.globals, globalIds);
     const custom = allowsCustom(policy);
@@ -46,5 +46,5 @@ export function InsertPicker({ at, policy, registry, globalIds, onInsert, onInse
             return;
         setPlace(placePicker(at, el.scrollHeight + 2, { width: window.innerWidth, height: window.innerHeight }));
     }, [at]);
-    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { ref: panel, className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", overflowY: "auto", ...place }, children: [_jsxs(SectionLabel, { caps: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { caps: true, style: { padding: "8px 8px 4px" }, children: "Site" }), globals.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertGlobal(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Global \u00B7 edited in one place" })] })] }, `global-${item.name}`)))] })), sections.length === 0 && globals.length === 0 && !custom && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { ref: panel, className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", overflowY: "auto", ...place }, children: [_jsxs(SectionLabel, { caps: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), paste && (_jsxs("button", { type: "button", className: "sm-picker__item sm-picker__item--paste", disabled: !paste.check.ok, title: paste.check.ok ? undefined : paste.check.reason, onClick: paste.onPaste, children: [_jsx("span", { className: "sm-picker__icon", children: "\u2398" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsxs("span", { style: { display: "block", fontWeight: 600 }, children: ["Paste \"", paste.title, "\""] }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: paste.check.ok ? "From the clipboard" : paste.check.reason })] })] })), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { caps: true, style: { padding: "8px 8px 4px" }, children: "Site" }), globals.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertGlobal(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Global \u00B7 edited in one place" })] })] }, `global-${item.name}`)))] })), sections.length === 0 && globals.length === 0 && !custom && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
 }

package/dist/admin/editor/InspectorFields.js

@@ -17,6 +17,6 @@ export function InspectorFields({ groups, values, render }) {
             const entries = visibleEntries(g.entries, values);
             if (entries.length === 0)
                 return null;
-            return (_jsxs("div", { className: "sm-inspector__group", children: [g.title && _jsx(SectionLabel, { caps: true, children: g.title }), entries.map((e) => render(e, { emptyLabel: e.ns === "styles" ? "Default" : undefined, scope }))] }, g.title ?? i));
+            return (_jsxs("div", { className: "sm-inspector__group", "data-smd-undo": "", children: [g.title && _jsx(SectionLabel, { caps: true, children: g.title }), entries.map((e) => render(e, { emptyLabel: e.ns === "styles" ? "Default" : undefined, scope }))] }, g.title ?? i));
         }) }));
 }

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

@@ -1,5 +1,5 @@
 import type { TreeNode } from "../../render.tsx";
-type ZoneRows = {
+export type ZoneRows = {
     zone: string;
     locked: boolean;
     canTake: boolean;
@@ -13,7 +13,7 @@ type ZoneRows = {
     /** A zone rule the stored nodes break — "Zone `main` allows 3 sections and has 5." */
     note?: string;
 };
-type Handlers = {
+export type Handlers = {
     selectedId: string | null;
     onSelect(id: string): void;
     /** The empty row of an insertable zone was clicked. */
@@ -27,4 +27,3 @@ type Handlers = {
 export declare function Outline({ zones, ...handlers }: {
     zones: ZoneRows[];
 } & Handlers): import("react").JSX.Element;
-export {};