smoodly 0.0.61 → 0.0.63

package/dist/admin/client-ops.js

@@ -1,6 +1,6 @@
 const GROUPS = {
     pages: ["list", "get", "create", "saveDraft", "publish", "unpublish", "discardDraft", "delete", "rename", "move", "setTemplate", "addLocale", "removeLocale", "listVersions", "restore"],
-    entries: ["list", "page", "distinct", "get", "create", "save", "setStatus", "discardDraft", "delete", "move", "addLocale", "removeLocale", "listVersions", "getVersion", "restore"],
+    entries: ["list", "page", "distinct", "samplePicks", "get", "create", "save", "setStatus", "discardDraft", "delete", "move", "addLocale", "removeLocale", "listVersions", "getVersion", "restore"],
     globals: ["list", "get", "save", "setStatus", "discardDraft", "listVersions", "getVersion", "restore"],
     assets: ["list", "get", "update", "delete", "usage"],
     members: ["list", "me"],

package/dist/admin/drift.js

@@ -1,4 +1,5 @@
 import { optionValues } from "../fields.js";
+import { isImagePlaceholder } from "../media.js";
 import { isHidden } from "../conditions.js";
 import { allowedOf } from "../toolset.js";
 import { CUSTOM_NODE_TYPE } from "../custom/schema.js";
@@ -38,7 +39,8 @@ export function fits(d, value) {
             const allowed = optionValues(d.options);
             return Array.isArray(value) && value.every((v) => typeof v === "string" && allowed.includes(v));
         }
-        case "image":
+        // A fresh node's image placeholder is a value of an image field (spec 2026-11-14 filled samples), of no other.
+        case "image": return isObject(value) && (typeof value.asset === "string" || isImagePlaceholder(value));
         case "video":
         case "file": return isObject(value) && typeof value.asset === "string";
         case "ref": return typeof value === "string";

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, onCopy, onRemove, }: {
+export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, dimOutside, onPlus, onMove, onDuplicate, onCopy, onRemove, }: {
     emptyZones: ZoneRect[];
     hoverRect: BridgeRect | undefined;
     /** The hovered block is a global item: the ring takes the global colour. */
@@ -21,6 +21,9 @@ export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, sele
     fieldHover?: FieldRect;
     /** The field with an active inline session. */
     editing?: FieldRect;
+    /** The page above and below the selection is dimmed: the selection is the one subject (a global's own canvas,
+     *  spec 2026-11-14). A section is a full-width band, so two bands cover the rest. */
+    dimOutside?: boolean;
     /** A "+" was clicked, at these viewport coordinates. */
     onPlus(button: PlusButton, clientX: number, clientY: number): void;
     onMove(id: string, dir: -1 | 1): void;

package/dist/admin/editor/CanvasOverlay.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // The overlay layer above the canvas iframe — every pixel of chrome is
 // ours: empty-zone placeholders, the hover and selection outlines, the
 // selected block's tag and toolbar, and a "+" per insertable boundary.
@@ -9,9 +9,9 @@ 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, onCopy, onRemove, }) {
+export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, dimOutside, 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: {
+    return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [dimOutside && selection && (_jsxs(_Fragment, { children: [_jsx("div", { "data-dim": "above", className: "sm-dim", style: { position: "absolute", left: 0, right: 0, top: 0, height: Math.max(0, selection.rect.y) } }), _jsx("div", { "data-dim": "below", className: "sm-dim", style: { position: "absolute", left: 0, right: 0, top: selection.rect.y + selection.rect.h, bottom: 0 } })] })), 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),
                     height: Math.max(56, z.h),
                 }, children: [z.zone, " \u00B7 empty"] }, `empty-${z.zone}`))), hoverRect && (_jsx("div", { style: {

package/dist/admin/editor/EditorView.js

@@ -44,13 +44,14 @@ import { enableDraft } from "./preview-grant.js";
 import { CanvasOverlay } from "./CanvasOverlay.js";
 import { InlineRichtext } from "./InlineRichtext.js";
 import { InsertPicker } from "./InsertPicker.js";
+import { insertStands, loadPicks, picksCache } from "./sample-picks.js";
 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 { rememberFilled, rememberView, rememberedFilled, 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";
@@ -123,6 +124,7 @@ export function EditorView({ ops, registry, id }) {
     const inspectorRef = useRef(null);
     // The session hook is created after `mutate`; the autosave and the bridge reach it through this ref.
     const inlineRef = useRef(null);
+    /** The open insert picker: where the pick lands. */
     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. */
@@ -162,6 +164,17 @@ export function EditorView({ ops, registry, id }) {
     const scrollerRef = useRef(null);
     const treeRef = useRef(null);
     const registryRef = useRef(registry);
+    // A fresh node's reference picks and whether the service takes an image placeholder (spec 2026-11-14 filled
+    // samples): asked once per locale for this editor's life, on the first picker open, insert or locked-zone fill.
+    const picksRef = useRef(null);
+    // Counts the draft's loads and the editor's leaving: an insert that waited across one is dropped.
+    const loadCountRef = useRef(0);
+    useEffect(() => () => { loadCountRef.current++; }, []);
+    const picksFor = useCallback((forLocale) => {
+        if (picksRef.current?.ops !== ops)
+            picksRef.current = { ops, cache: picksCache() };
+        return picksRef.current.cache.get(forLocale, () => loadPicks(ops, registryRef.current.sections, forLocale));
+    }, [ops]);
     registryRef.current = registry;
     // The tree in memory belongs to the locale it was loaded for; a switch
     // flushes first (switchLocale), so the ref and the tree always agree.
@@ -253,6 +266,7 @@ export function EditorView({ ops, registry, id }) {
         let cancelled = false;
         (async () => {
             // A new locale (or a reload) is a new canvas: nothing from the previous one may survive.
+            loadCountRef.current++;
             setReady(false);
             setTree(null);
             treeRef.current = null;
@@ -318,7 +332,16 @@ export function EditorView({ ops, registry, id }) {
             // effect: a load runs for a new page, locale or reload, nothing else.
             const reg = registryRef.current;
             const template = reg.pages.find((p) => p.name === result.data.record.template);
-            const draft = fillLockedZones(result.data.draft, template?.zones ?? {}, reg.sections);
+            // A zone that will be filled waits for the picks, so its references and its placeholder are the picker's; any
+            // other load asks nothing.
+            const stored = result.data.draft;
+            let draft = stored;
+            if (fillLockedZones(stored, template?.zones ?? {}, reg.sections) !== stored) {
+                const fresh = await picksFor(locale);
+                if (cancelled)
+                    return;
+                draft = fillLockedZones(stored, template?.zones ?? {}, reg.sections, {}, fresh);
+            }
             treeLocaleRef.current = locale;
             setTree(draft);
             treeRef.current = draft;
@@ -655,7 +678,8 @@ export function EditorView({ ops, registry, id }) {
         if (!tree || !globalIds || !record)
             return;
         const template = registryRef.current.pages.find((p) => p.name === record.template);
-        const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, globalIds);
+        // The answer in hand, if any: the load already waited for it where a section fills a zone.
+        const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, globalIds, picksRef.current?.cache.known(locale));
         // Saved like the fill on load, and like it not an edit of the editor's (editedRef).
         if (filled !== tree) {
             setTree(filled);
@@ -684,8 +708,40 @@ export function EditorView({ ops, registry, id }) {
         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));
+    const pickerOpen = picker !== null;
+    useEffect(() => { if (pickerOpen)
+        void picksFor(locale); }, [pickerOpen, locale, picksFor]);
+    // An insert waits for the picks (asked when the picker opened, so they are usually there). One at a time: a second
+    // click while the first waits inserts nothing, and an answer that lands on another locale's canvas is dropped.
+    const insertingRef = useRef(false);
+    const pickerRef = useRef(picker);
+    pickerRef.current = picker;
+    const idRef = useRef(id);
+    idRef.current = id;
+    /** Where the editor stands now, as an insert's answer is checked against (sample-picks.ts insertStands). */
+    const standing = (fromPicker) => ({ page: idRef.current, locale: treeLocaleRef.current, load: loadCountRef.current, picker: fromPicker ? pickerRef.current : null });
+    const [filled, setFilled] = useState(() => rememberedFilled());
+    const filledRef = useRef(filled);
+    filledRef.current = filled;
+    const changeFilled = (next) => { setFilled(next); rememberFilled(next); };
+    const doInsert = async (zone, index, section, fromPicker = true) => {
+        if (insertingRef.current)
+            return;
+        insertingRef.current = true;
+        const asked = standing(fromPicker);
+        let fresh;
+        try {
+            fresh = await picksFor(asked.locale);
+        }
+        finally {
+            insertingRef.current = false;
+        }
+        // The editor moved on while the answer was on its way: nothing is inserted behind its back.
+        if (!treeRef.current || !insertStands(asked, standing(fromPicker)))
+            return;
+        // The switch is read when the node is built: off, neither the sample nor generated values (spec 2026-11-14 filled
+        // samples). It is the picker's: a gesture with no modal (the outline's "add first") always inserts filled.
+        const node = nodeFromSample(section, newNodeId(section.name), { picks: fresh.picks, images: fresh.images, empty: fromPicker && !filledRef.current });
         mutate((t) => insertNode(t, zone, index, node), { focus: node.id });
         setPicker(null);
         select(node.id);
@@ -1068,7 +1124,7 @@ export function EditorView({ ops, registry, id }) {
             return {
                 ...n,
                 label: global ? global.title : n.label,
-                icon: section?.icon ?? (global ? "⛓" : "▤"),
+                ...(section?.icon ? { icon: section.icon } : global ? { icon: "⛓" } : {}),
                 preview: global ? { text: null, image: null } : cardPreview(n.node, section),
                 global: global !== null,
             };
@@ -1093,7 +1149,7 @@ export function EditorView({ ops, registry, id }) {
                         ] }) }), 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 && (() => {
+                                    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) => setPicker({ zone, index }) })), _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) => setPicker({ zone: p.zone, index: p.index }), 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;
@@ -1135,8 +1191,8 @@ export function EditorView({ ops, registry, id }) {
                                                 }, 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, cardActions: cardActions, 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 ?? {}, 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) }))] }));
+                                            void doInsert(zone, 0, first, false);
+                                    } }) }))] })] }), picker && (_jsx(InsertPicker, { zone: picker.zone, siteUrl: siteUrl, policy: policyOf(picker.zone), registry: registry, globalIds: globalIds ?? {}, paste: clip ? { title: clip.title, check: pasteCheck(picker.zone), onPaste: () => doPaste(picker.zone, picker.index) } : undefined, filled: filled, onFilledChange: changeFilled, onInsert: (section) => { void 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/GlobalCanvas.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement, type Ref } from "react";
+import type { AdminOps } from "../ops.ts";
+import type { AdminGlobal } from "../serialize.ts";
+export type GlobalCanvasHandle = {
+    /** A save of the item landed: the frame renders again (after an open inline session ends, as in the page editor). */
+    refresh(): void;
+    /** End an open inline session (the stale freeze, a reload of the item). */
+    endInline(): void;
+    /** A text value typed in the inspector, written into its marked element at once (the refresh follows the save). */
+    writeText(path: string, value: string): void;
+};
+export declare function GlobalCanvas({ ops, item, pageId, locale, fields, onPatch, onMissing, onInlinePath, ref }: {
+    ops: Pick<AdminOps, "pages" | "preview">;
+    /** A visual item. */
+    item: AdminGlobal;
+    pageId: string;
+    locale: string;
+    /** The form's draft fields: the canvas richtext editor reads its value here. */
+    fields: Record<string, unknown>;
+    /** A value typed in the frame, by dotted path inside the item's fields. */
+    onPatch(path: string, value: unknown): void;
+    /** The frame settled without drawing the item, or the page could not be loaded. Once per mount. */
+    onMissing(): void;
+    /** The content field with an open inline session, or null. */
+    onInlinePath?(path: string | null): void;
+    ref?: Ref<GlobalCanvasHandle>;
+}): ReactElement;

package/dist/admin/editor/GlobalCanvas.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The canvas of one global item (spec 2026-11-14 sections and the global canvas §2): a real page of the site
+// that draws the item, in the page editor's frame, with the item selected for good and the rest of the page
+// dimmed. The site has no address that draws a global alone, and the admin holds none of the site's
+// components, so the picture is always a page. Composed from the page editor's pieces — the bridge, the
+// overlay, the inline session — and it owns nothing of the page: it reads the page's draft tree to find a
+// placement and never writes a page. The item's values, its save and its publish stay with the form
+// (shell/GlobalForm.tsx); this reports what was typed in the frame and is told when a save landed.
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { descriptorAt, getAtPath } from "../field-paths.js";
+import { MISS_QUIET_MS, globalNodeIn, missing, settled } from "../shell/global-canvas.js";
+import { canvasAddress, previewUrl } from "./canvas-address.js";
+import { CanvasOverlay } from "./CanvasOverlay.js";
+import { CanvasWarning } from "./CanvasWarning.js";
+import { InlineRichtext } from "./InlineRichtext.js";
+import { enableDraft } from "./preview-grant.js";
+import { useCanvasBridge } from "./useCanvasBridge.js";
+import { useCanvasDiagnosis } from "./useCanvasDiagnosis.js";
+import { useInlineSession } from "./useInlineSession.js";
+/** The gap kept above the item when the frame first scrolls to it. */
+const REVEAL_GAP = 24;
+const noop = () => { };
+export function GlobalCanvas({ ops, item, pageId, locale, fields, onPatch, onMissing, onInlinePath, ref }) {
+    const iframeRef = useRef(null);
+    const scrollerRef = useRef(null);
+    const [page, setPage] = useState(null);
+    const [hoverField, setHoverField] = useState(null);
+    const [seen, setSeen] = useState({ rendered: false, rectsAfterRendered: false });
+    const inlineRef = useRef(null);
+    const nodeRef = useRef(null);
+    const missed = useRef(false);
+    const followRef = useRef(true);
+    const latest = useRef({ onMissing, onPatch, onInlinePath });
+    latest.current = { onMissing, onPatch, onInlinePath };
+    const miss = () => { if (!missed.current) {
+        missed.current = true;
+        latest.current.onMissing();
+    } };
+    // Draft mode FIRST, then the page; only then the frame — a frame loaded before the cookie exists renders the
+    // published page (EditorView's order). A refusal, a folder or a page with no address here is "missing".
+    useEffect(() => {
+        let live = true;
+        (async () => {
+            const draft = await enableDraft(() => ops.preview.enable(), previewUrl());
+            if (!live)
+                return;
+            if (!draft.ok) {
+                miss();
+                return;
+            }
+            let got;
+            try {
+                got = await ops.pages.get(pageId, locale);
+            }
+            catch {
+                got = null;
+            }
+            if (!live)
+                return;
+            const url = got?.ok ? got.data.urls[locale] : undefined;
+            if (!got?.ok || !got.data.draft || !url) {
+                miss();
+                return;
+            }
+            setPage({ src: canvasAddress(url), tree: got.data.draft });
+        })();
+        return () => { live = false; };
+        // The form keys this component by page and locale: one mount, one page.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const iframeSrc = page?.src ?? null;
+    const { rects, fields: fieldRects, docH, geometry, postToCanvas, onFrameLoad } = useCanvasBridge({
+        iframeRef, iframeSrc,
+        // Only the item answers a click: with a marked field under it, the inline session; anywhere else, nothing.
+        onSelect: (id, path, x, y) => {
+            if (id && id === nodeRef.current)
+                followRef.current = false;
+            if (!id || id !== nodeRef.current || !path)
+                return;
+            const descriptor = descriptorAt(item, path);
+            const kind = descriptor?.type === "text" ? "text" : descriptor?.type === "richtext" ? "richtext" : null;
+            const inline = inlineRef.current;
+            if (!kind || !inline)
+                return;
+            if (inline.session && inline.session.path === path)
+                return;
+            inline.start({ node: id, path, kind }, { x, y });
+        },
+        onHover: (id, path) => setHoverField(id && id === nodeRef.current ? path : null),
+        onRendered: () => {
+            inlineRef.current?.onRendered();
+            setSeen((s) => (s.rendered ? s : { rendered: true, rectsAfterRendered: false }));
+        },
+    });
+    // A geometry report after the first committed render: only then may "no node" be believed (global-canvas `settled`).
+    useEffect(() => {
+        setSeen((s) => (s.rendered && !s.rectsAfterRendered ? { rendered: true, rectsAfterRendered: true } : s));
+    }, [rects]);
+    const diagnosis = useCanvasDiagnosis(iframeSrc, geometry);
+    const nodeId = page ? globalNodeIn(item.name, rects, page.tree) : null;
+    nodeRef.current = nodeId;
+    const rect = nodeId ? rects.find((r) => r.id === nodeId) : undefined;
+    // "This page does not draw the item" is believed only once the frame's reports have gone quiet without it
+    // (global-canvas `missing`): every report restarts the wait, and the item arriving cancels it.
+    useEffect(() => {
+        if (!settled(seen) || nodeId !== null)
+            return;
+        const timer = setTimeout(() => { if (missing(seen, nodeRef.current, MISS_QUIET_MS))
+            miss(); }, MISS_QUIET_MS);
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [seen, nodeId, rects]);
+    // The frame opens on the item and stays on it while the page settles: a footer's place moves as the images
+    // above it load and the document grows. The first scroll that is not this one — the editor's — ends it, and so
+    // does a click on the item: from then on the place under the editor is theirs.
+    const follow = followRef;
+    const lastTop = useRef(null);
+    const rectY = rect?.y;
+    useEffect(() => {
+        const scroller = scrollerRef.current;
+        if (!follow.current || rectY === undefined || !scroller)
+            return;
+        scroller.scrollTop = Math.max(0, rectY - REVEAL_GAP);
+        lastTop.current = scroller.scrollTop;
+    }, [rectY, docH]);
+    const onScroll = () => {
+        const scroller = scrollerRef.current;
+        if (scroller && lastTop.current !== null && Math.abs(scroller.scrollTop - lastTop.current) > 2)
+            follow.current = false;
+    };
+    const inline = useInlineSession({
+        iframeRef, postToCanvas,
+        patch: (node, path, value) => {
+            if (node !== nodeRef.current)
+                return;
+            latest.current.onPatch(path, value);
+            // A second element marked with the same field follows the one being typed in.
+            if (typeof value === "string")
+                inlineRef.current?.writeText(node, path, value);
+        },
+    });
+    inlineRef.current = inline;
+    const sessionPath = inline.session?.path ?? null;
+    useEffect(() => { latest.current.onInlinePath?.(sessionPath); }, [sessionPath]);
+    useImperativeHandle(ref, () => ({
+        refresh: () => inlineRef.current?.onSaved(),
+        endInline: () => inlineRef.current?.end(),
+        writeText: (path, value) => { if (nodeRef.current)
+            inlineRef.current?.writeText(nodeRef.current, path, value); },
+    }), []);
+    const fieldRectOf = (path) => (path && nodeId ? fieldRects.find((r) => r.node === nodeId && r.path === path) : undefined);
+    const selection = nodeId && rect
+        // `layout`: no tree gestures, whichever way the page draws the item — nothing here moves or removes a page's node.
+        ? { node: { id: nodeId, type: item.section ?? item.name, fields: {} }, rect, title: item.title, global: true, locked: false, layout: true }
+        : null;
+    const pageWidth = rects.reduce((w, r) => Math.max(w, r.x + r.w), 320);
+    return (_jsxs("div", { className: "sm-canvas", children: [diagnosis && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: _jsx(CanvasWarning, { cause: diagnosis.cause, path: diagnosis.path }) })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, onScroll: onScroll, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Global 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: [], hoverRect: undefined, selection: selection, plusButtons: [], dimOutside: true, fieldHover: fieldRectOf(hoverField), editing: fieldRectOf(sessionPath), onPlus: noop, onMove: noop, onDuplicate: noop, onCopy: noop, onRemove: noop }), inline.richtext && (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(fields, inline.richtext.session.path), toolset: descriptorAt(item, inline.richtext.session.path)?.toolset, onChange: (doc) => { inline.markChanged(); onPatch(inline.richtext.session.path, doc); }, onEscape: inline.end }))] }) })] }));
+}

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

@@ -1,38 +1,19 @@
 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 = {
+import { type PickerPaste } from "./picker-rows.ts";
+export declare function InsertPicker({ zone, siteUrl, policy, registry, globalIds, paste, filled, onFilledChange, onInsert, onInsertGlobal, onInsertCustom, onClose }: {
     zone: string;
-    index: number;
-    x: number;
-    y: number;
-};
-export type PickerPlace = {
-    left: number;
-    top?: number;
-    bottom?: number;
-    maxHeight?: number;
-};
-/** Where the panel sits, given its natural height and the viewport: under the
- *  anchor when it fits there, above it when that side has more room, and never
- *  taller than the room on its side (the panel scrolls). Pure. */
-export declare function placePicker(at: PickerAt, height: number, viewport: {
-    width: number;
-    height: number;
-}): PickerPlace;
-export declare function InsertPicker({ at, policy, registry, globalIds, paste, onInsert, onInsertGlobal, onInsertCustom, onClose }: {
-    at: PickerAt;
+    /** The page's address in the edited locale, as the canvas takes it: the samples frame is that page. */
+    siteUrl: string;
     /** 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;
-    };
+    paste?: PickerPaste;
     policy: ZonePolicy | undefined;
     registry: AdminRegistry;
     /** Global item name → row id; an item without one cannot be placed. */
     globalIds: Record<string, string>;
+    /** The switch's state, held by the editor (remembered per browser); the editor reads it when a section is inserted. */
+    filled: boolean;
+    onFilledChange(filled: boolean): void;
     onInsert(section: AdminSection): void;
     onInsertGlobal(item: AdminGlobal): void;
     onInsertCustom(): void;

package/dist/admin/editor/InsertPicker.js

@@ -1,50 +1,59 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// The insert picker a "+" opens: the sections the zone's policy allows,
-// then the Custom section where the zone allows it (spec 2026-09-14 §6),
-// then the global items that can be placed there, or a note that the
-// zone takes nothing. Clicking outside closes it. The panel hangs under
-// the "+" when it fits, opens upward when there is more room above, and
-// scrolls inside the room it has (2026-09-25) — a long section list near
-// the bottom of the window used to run off screen.
-import { useLayoutEffect, useRef, useState } from "react";
-import { allowedSections, allowedGlobals } from "../tree-ops.js";
-import { allowsCustom } from "../custom-section.js";
-import { SectionLabel } from "../ui/primitives.js";
-const PICKER_W = 300;
-const MARGIN = 12;
-/** From `y` back up to the panel's bottom edge when it opens upward: the 12px the
- *  anchor sits under the button's centre, and the same 12px above it. */
-const ABOVE_GAP = 24;
-/** Where the panel sits, given its natural height and the viewport: under the
- *  anchor when it fits there, above it when that side has more room, and never
- *  taller than the room on its side (the panel scrolls). Pure. */
-export function placePicker(at, height, viewport) {
-    const left = Math.max(MARGIN, Math.min(at.x, viewport.width - PICKER_W - MARGIN));
-    const below = viewport.height - MARGIN - at.y;
-    const above = at.y - ABOVE_GAP - MARGIN;
-    if (height <= below || below >= above)
-        return { left, top: at.y, maxHeight: Math.max(below, 0) };
-    return { left, bottom: viewport.height - (at.y - ABOVE_GAP), maxHeight: above };
-}
-/** The first paint, before the panel is measured; a static render (no window) leaves it where it was asked. */
-function firstPlace(at) {
-    if (typeof window === "undefined")
-        return { left: at.x, top: at.y };
-    return placePicker(at, 0, { width: window.innerWidth, height: window.innerHeight });
-}
-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);
-    const panel = useRef(null);
-    const [place, setPlace] = useState(() => firstPlace(at));
-    // Measure the panel's full height (scrollHeight ignores a max-height already set), then place it.
-    useLayoutEffect(() => {
-        const el = panel.current;
-        if (!el)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The insert picker a "+" opens (spec 2026-11-14 add section previews): a modal with the zone's rows on the left —
+// the clipboard's Paste, the sections the zone's policy allows, the Custom section where the zone allows it (spec
+// 2026-09-14 §6), then the global items that can be placed there — and on the right the current row drawn by the
+// site itself from its sample (SamplePreview). A click on a row inserts, as it always did; hovering a row, or
+// stepping to it with the arrow keys, only moves the picture. A zone that takes nothing says so and has no frame.
+// Under the rows the "Insert filled" switch (spec 2026-11-14 filled samples): off, a section arrives with neither
+// its sample nor generated values. The picture never follows it: it always shows the filled section.
+import { useRef, useState } from "react";
+import { Modal } from "../ui/Modal.js";
+import { cx, SectionLabel, Switch } from "../ui/primitives.js";
+import { samplesAddress } from "./canvas-address.js";
+import { firstRow, pickerRows, stepRow } from "./picker-rows.js";
+import { SamplePreview } from "./SamplePreview.js";
+import { SectionIcon } from "./SectionIcon.js";
+/** Below this window width the picture would be too small to read: the modal is the list alone, and no frame loads. */
+const PANE_MIN_WINDOW = 820;
+export function InsertPicker({ zone, siteUrl, policy, registry, globalIds, paste, filled, onFilledChange, onInsert, onInsertGlobal, onInsertCustom, onClose }) {
+    const rows = pickerRows({ policy, registry, globalIds, paste });
+    const [current, setCurrent] = useState(() => firstRow(rows));
+    const [wide] = useState(() => typeof window === "undefined" || window.innerWidth >= PANE_MIN_WINDOW);
+    const list = useRef(null);
+    const row = rows[current];
+    // Something to insert: a zone that takes nothing (a refused paste alone included) gets no picture.
+    const insertable = rows.some((r) => !r.disabled);
+    const pane = wide && insertable;
+    const pick = (r) => {
+        if (r.disabled)
+            return;
+        if (r.kind === "paste")
+            paste?.onPaste();
+        else if (r.kind === "section")
+            onInsert(r.section);
+        else if (r.kind === "custom")
+            onInsertCustom();
+        else
+            onInsertGlobal(r.item);
+    };
+    const onKeyDown = (e) => {
+        if (e.key !== "ArrowDown" && e.key !== "ArrowUp")
             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] }), 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." }))] }) }));
+        e.preventDefault();
+        const next = stepRow(rows, current, e.key === "ArrowDown" ? 1 : -1);
+        setCurrent(next);
+        list.current?.querySelectorAll(".sm-picker__item")[next]?.focus();
+    };
+    const firstGlobal = rows.findIndex((r) => r.kind === "global");
+    const empty = !rows.some((r) => r.kind !== "paste");
+    // The switch speaks for the section rows and the Custom section; Paste and a global item carry their own content.
+    const switchable = rows.some((r) => !r.disabled && (r.kind === "section" || r.kind === "custom"));
+    return (_jsx(Modal, { title: `Add to ${zone}`, width: pane ? 980 : 380, height: pane ? "min(640px, 85vh)" : undefined, flush: true, onClose: onClose, children: _jsxs("div", { className: cx("sm-insert", pane && "sm-insert--pane"), onKeyDown: onKeyDown, children: [_jsxs("div", { className: "sm-insert__side", children: [_jsxs("div", { ref: list, className: "sm-picker sm-insert__list", children: [rows.map((r, i) => (_jsxs("div", { style: { display: "contents" }, children: [i === firstGlobal && _jsx(SectionLabel, { caps: true, style: { padding: "8px 8px 4px" }, children: "Global" }), _jsxs("button", { type: "button", autoFocus: i === current, "data-kind": r.kind, className: cx("sm-picker__item", r.kind === "paste" && "sm-picker__item--paste", i === current && "sm-picker__item--active"), disabled: r.disabled, title: r.disabled ? r.description : undefined, 
+                                            // The pointer takes the focus with it, as in a menu: the arrow keys then step from the row under it.
+                                            onMouseEnter: (e) => { if (!r.disabled) {
+                                                setCurrent(i);
+                                                e.currentTarget.focus({ preventScroll: true });
+                                            } }, onFocus: () => { if (!r.disabled)
+                                                setCurrent(i); }, onClick: () => pick(r), children: [_jsx("span", { className: "sm-picker__icon", children: _jsx(SectionIcon, { icon: r.icon }) }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: r.title }), r.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: r.description }))] })] })] }, r.key))), empty && _jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." })] }), switchable && (_jsxs("label", { className: "sm-insert__foot", title: "Off: a section is inserted empty, without its sample content", children: [_jsx(Switch, { checked: filled, onChange: onFilledChange, label: "Insert filled" }), _jsx("span", { "aria-hidden": "true", children: "Insert filled" })] }))] }), pane && row && (_jsxs("div", { className: "sm-insert__pane", children: [_jsx(SamplePreview, { src: samplesAddress(siteUrl, zone), nodeId: row.nodeId, fallback: _jsx("span", { className: "sm-insert__icon", children: _jsx(SectionIcon, { icon: row.icon, size: 32 }) }) }), _jsxs("div", { className: "sm-insert__caption", children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: row.title }), row.description && _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: row.description })] })] }))] }) }));
 }

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export declare function SamplePreview({ src, nodeId, fallback }: {
+    src: string;
+    /** The current row's sample node; null for a row that has none (Paste). */
+    nodeId: string | null;
+    fallback: ReactNode;
+}): import("react").JSX.Element;