smoodly 0.0.62 → 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/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/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: "Global" }), 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;

package/dist/admin/editor/SamplePreview.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The picture in the insert picker (spec 2026-11-14 add section previews): ONE frame on the zone's samples address
+// (the site's own draft page with the zone's rows drawn from their samples), not interactive, scaled to the pane and
+// cropped to the current row's node. The frame is same-origin, so its document is read directly: no bridge, nothing
+// posted. Until it has loaded, and for a row the site drew no node for, the pane shows `fallback`.
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { SAMPLE_VIEWPORT, isSmoodlyDraft, isolationCss, sampleBox, sampleNode } from "./sample-frame.js";
+export function SamplePreview({ src, nodeId, fallback }) {
+    const pane = useRef(null);
+    const frame = useRef(null);
+    const [width, setWidth] = useState(0);
+    // Counts the frame's loads: a document Smoodly rendered as a draft, with its layout hidden. 0 = none yet.
+    const [loaded, setLoaded] = useState(0);
+    const [crop, setCrop] = useState(null);
+    // The pane's width decides the scale.
+    useLayoutEffect(() => {
+        const el = pane.current;
+        if (!el)
+            return;
+        // The content box: the pane's padding leaves the crop's shadow room (2026-11-14).
+        const measure = () => { const cs = getComputedStyle(el); setWidth(el.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight)); };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const onLoad = () => {
+        const doc = frame.current?.contentDocument;
+        if (!doc || !isSmoodlyDraft(doc)) {
+            setLoaded(0);
+            return;
+        }
+        // The layout around the samples goes, and the scrollbar with it (the frame is still scrolled from here). As a
+        // constructed stylesheet of the frame's own realm: no element of the site's document is written to.
+        const Sheet = frame.current?.contentWindow?.CSSStyleSheet;
+        if (Sheet) {
+            const sheet = new Sheet();
+            // `nextjs-portal`: Next's dev indicator, which sits fixed in a corner of the picture in development.
+            sheet.replaceSync(`html{overflow:hidden!important}nextjs-portal{display:none!important}${isolationCss(doc)}`);
+            doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+        }
+        setLoaded((n) => n + 1);
+    };
+    // A frame that finished loading before React attached the handler (a cached document).
+    useEffect(() => {
+        if (frame.current?.contentDocument?.readyState === "complete" && frame.current.contentWindow?.location.href !== "about:blank")
+            onLoad();
+    }, []);
+    // The current row's node: scroll the frame to it and crop to it, again whenever it or the page around it resizes
+    // (images and fonts arrive late).
+    useEffect(() => {
+        const win = frame.current?.contentWindow;
+        const doc = frame.current?.contentDocument;
+        if (!loaded || !nodeId || !win || !doc) {
+            setCrop(null);
+            return;
+        }
+        const node = sampleNode(doc, nodeId);
+        if (!node) {
+            setCrop(null);
+            return;
+        }
+        const measure = () => {
+            const box = sampleBox(node, win.scrollY);
+            win.scrollTo({ top: box.top, behavior: "instant" });
+            // A document too short to scroll that far leaves the node lower in the viewport.
+            const offset = Math.max(0, Math.round(node.getBoundingClientRect().top));
+            const height = Math.min(box.height, SAMPLE_VIEWPORT.height - offset);
+            setCrop((was) => (was && was.offset === offset && was.height === height ? was : height > 0 ? { offset, height } : null));
+        };
+        measure();
+        const Observer = win.ResizeObserver ?? ResizeObserver;
+        const observer = new Observer(measure);
+        observer.observe(node);
+        if (doc.body)
+            observer.observe(doc.body);
+        return () => observer.disconnect();
+    }, [loaded, nodeId]);
+    const scale = width > 0 ? width / SAMPLE_VIEWPORT.width : 0;
+    const shown = crop !== null && scale > 0;
+    return (_jsxs("div", { ref: pane, className: "sm-insert__preview", children: [_jsx("div", { className: shown ? "sm-insert__crop sm-insert__crop--shown" : "sm-insert__crop", style: { height: shown ? Math.round(crop.height * scale) : 0, visibility: shown ? "visible" : "hidden" }, children: _jsx("iframe", { ref: frame, src: src, title: "Section preview", "aria-hidden": "true", tabIndex: -1, width: SAMPLE_VIEWPORT.width, height: SAMPLE_VIEWPORT.height, onLoad: onLoad, style: {
+                        pointerEvents: "none", border: 0, display: "block", position: "absolute", left: 0, top: shown ? -Math.round(crop.offset * scale) : 0,
+                        width: SAMPLE_VIEWPORT.width, height: SAMPLE_VIEWPORT.height, transform: `scale(${scale})`, transformOrigin: "0 0",
+                    } }) }), !shown && _jsx("div", { className: "sm-insert__fallback", "data-testid": "sample-fallback", children: fallback })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function SectionIcon({ icon, size }: {
+    icon?: string | undefined;
+    size?: number;
+}): import("react").JSX.Element;

package/dist/admin/editor/SectionIcon.js

@@ -0,0 +1,8 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// A section's icon (2026-11-14): the schema's own `icon` when it sets one, else Lucide's rectangle-horizontal — the
+// one default for every section (and the Custom section) in the picker and on the Structure cards.
+import { RectangleHorizontal } from "lucide-react";
+export function SectionIcon({ icon, size = 14 }) {
+    return icon ? _jsx(_Fragment, { children: icon }) : _jsx(RectangleHorizontal, { size: size, strokeWidth: 1.75, "aria-hidden": "true" });
+}

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

@@ -3,9 +3,9 @@ import { type ActionMenuItem } from "../ui/ActionMenu.tsx";
 import type { CardPreview } from "./card-preview.ts";
 import { cardMenu, type Handlers, type ZoneRows } from "./Outline.tsx";
 export { cardMenu };
-/** A card: the outline's row plus the section's icon from the registry (`icon ?? "▤"`), its preview, and whether it is a placed global item. */
+/** A card: the outline's row plus the section's icon from the registry (none = SectionIcon's default), its preview, and whether it is a placed global item. */
 export type StructureNode = ZoneRows["nodes"][number] & {
-    icon: string;
+    icon?: string;
     preview: CardPreview;
     global: boolean;
 };

package/dist/admin/editor/StructureView.js

@@ -17,6 +17,7 @@ import { Button, Grip, SectionLabel, cx } from "../ui/primitives.js";
 import { useSortable } from "../ui/useSortable.js";
 import { AssetThumb } from "../forms/MediaGrid.js";
 import { useAssets } from "../forms/assets-context.js";
+import { SectionIcon } from "./SectionIcon.js";
 import { cardMenu } from "./Outline.js";
 export { cardMenu };
 export function StructureView({ zones, ...rest }) {
@@ -39,7 +40,7 @@ function StructureZoneView({ zone, locked, canTake, nodes, removed, note, select
     return (_jsxs("div", { className: "sm-structure__group", children: [_jsxs("div", { className: "sm-structure__zone", children: [_jsxs(SectionLabel, { caps: true, children: [zone, locked && " · locked"] }), actions.length > 0 && _jsx(ActionMenu, { small: true, label: "Zone actions", items: actions })] }), note && _jsx("p", { className: "sm-outline-note", children: note }), nodes.length === 0 && (_jsxs("div", { className: "sm-structure__empty", children: [_jsx("span", { children: "Empty" }), canTake && add(0)] })), nodes.length > 0 && (_jsx("div", { ref: sortable.containerRef, className: "sm-structure__rows", children: nodes.map(({ node, label, mark, icon, preview, global }, i) => (_jsx("div", { className: cx("sm-structure__row", sortable.rowClass(i)), style: sortable.rowStyle(i), children: _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "structure-card", "data-node": node.id, className: cx("sm-structure__card", node.id === selectedId && "sm-structure__card--selected", locked && "sm-structure__card--locked", mark && `sm-structure__card--${mark}`), onClick: () => onSelect(node.id), onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             onSelect(node.id);
-                        } }, children: [locked ? _jsx("span", { className: "sm-structure__gripslot", "aria-hidden": "true" }) : _jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-structure__icon", "aria-hidden": "true", children: icon }), _jsxs("span", { className: "sm-structure__text", children: [_jsxs("span", { className: "sm-structure__title", children: [label, global && _jsx("span", { className: "sm-structure__badge", children: "global" })] }), global
+                        } }, children: [locked ? _jsx("span", { className: "sm-structure__gripslot", "aria-hidden": "true" }) : _jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-structure__icon", "aria-hidden": "true", children: _jsx(SectionIcon, { icon: icon }) }), _jsxs("span", { className: "sm-structure__text", children: [_jsxs("span", { className: "sm-structure__title", children: [label, global && _jsx("span", { className: "sm-structure__badge", children: "global" })] }), global
                                         ? _jsx("span", { className: "sm-structure__preview", children: "Global \u00B7 edited in one place" })
                                         : preview.text !== null && _jsx("span", { className: "sm-structure__preview", children: preview.text })] }), !global && preview.image && _jsx(Thumb, { image: preview.image }), _jsx("span", { className: "sm-structure__menu", onClick: stop, onKeyDown: stopActivation, children: _jsx(ActionMenu, { small: true, label: "Section actions", items: cardMenu({ locked, onRemove: () => onRemove(node.id), actions: cardActions?.(node, zone, i) ?? [] }) }) })] }) }, node.id))) })), nodes.length > 0 && canTake && add(nodes.length)] }));
 }

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

@@ -5,6 +5,8 @@ export declare function setCanvasMarks(value: "path" | "query"): void;
 export declare const canvasAddress: (siteUrl: string) => string;
 /** History's frame (spec 2026-09-13 history §5): a stored version, no bridge. */
 export declare const versionAddress: (siteUrl: string, versionId: string) => string;
+/** The picker's samples frame (spec 2026-11-14 add section previews): the zone's rows drawn from their samples, no bridge. */
+export declare const samplesAddress: (siteUrl: string, zone: string) => string;
 /** The site's preview route, from the page data: where the grant goes. */
 export declare function setPreviewUrl(value: string): void;
 export declare function previewUrl(): string;

package/dist/admin/editor/canvas-address.js

@@ -3,7 +3,7 @@
 // they mark what they want: in the query, or in the path's last segment where the host strips the query
 // (Next on Vercel; canvas-marker.ts). Module state, set by the browser entry before the shell mounts: the
 // admin is one script on one page.
-import { markCanvasPath } from "../../canvas-marker.js";
+import { markCanvasPath, SAMPLES_PARAM } from "../../canvas-marker.js";
 let base = "";
 let marks = "query";
 export function setPreviewBase(value) {
@@ -18,6 +18,8 @@ const withQuery = (url, key, value) => `${url}${url.includes("?") ? "&" : "?"}${
 export const canvasAddress = (siteUrl) => marks === "path" ? markCanvasPath(draftAddress(siteUrl), { editor: true }) : withQuery(draftAddress(siteUrl), "smoodly-editor", "1");
 /** History's frame (spec 2026-09-13 history §5): a stored version, no bridge. */
 export const versionAddress = (siteUrl, versionId) => marks === "path" ? markCanvasPath(draftAddress(siteUrl), { version: versionId }) : withQuery(draftAddress(siteUrl), "smoodly-version", versionId);
+/** The picker's samples frame (spec 2026-11-14 add section previews): the zone's rows drawn from their samples, no bridge. */
+export const samplesAddress = (siteUrl, zone) => marks === "path" ? markCanvasPath(draftAddress(siteUrl), { samples: zone }) : withQuery(draftAddress(siteUrl), SAMPLES_PARAM, zone);
 let url = "";
 /** The site's preview route, from the page data: where the grant goes. */
 export function setPreviewUrl(value) { url = value; }

package/dist/admin/editor/picker-rows.d.ts

@@ -0,0 +1,33 @@
+import type { ZonePolicy } from "../../zones.ts";
+import type { AdminGlobal, AdminRegistry, AdminSection } from "../serialize.ts";
+import type { PasteCheck } from "./section-clipboard.ts";
+export type PickerPaste = {
+    title: string;
+    check: PasteCheck;
+    onPaste(): void;
+};
+export type PickerRow = {
+    key: string;
+    kind: "paste" | "section" | "custom" | "global";
+    title: string;
+    description?: string;
+    /** The schema's own icon; none = the default (SectionIcon). */
+    icon?: string;
+    /** The row's node in the samples frame; null for Paste, whose content is not a sample. */
+    nodeId: string | null;
+    /** A refused paste: shown, never picked. */
+    disabled?: boolean;
+    section?: AdminSection;
+    item?: AdminGlobal;
+};
+export declare function pickerRows({ policy, registry, globalIds, paste }: {
+    policy: ZonePolicy | undefined;
+    registry: AdminRegistry;
+    globalIds: Record<string, string>;
+    paste?: PickerPaste;
+}): PickerRow[];
+/** The row the modal opens on: the first that can be picked and is not Paste (its preview is a card, not a picture);
+ *  Paste when it is all there is; -1 when nothing can be picked. */
+export declare function firstRow(rows: PickerRow[]): number;
+/** The next row an arrow key lands on: the nearest one in `dir` that can be picked; the current one at an end. */
+export declare function stepRow(rows: PickerRow[], current: number, dir: -1 | 1): number;

package/dist/admin/editor/picker-rows.js

@@ -0,0 +1,38 @@
+import { sampleNodeId } from "../../sample-tree.js";
+import { allowedGlobals, allowedSections } from "../tree-ops.js";
+import { allowsCustom } from "../custom-section.js";
+export function pickerRows({ policy, registry, globalIds, paste }) {
+    const rows = [];
+    if (paste) {
+        rows.push({
+            key: "paste", kind: "paste", title: `Paste "${paste.title}"`, icon: "⎘", nodeId: null,
+            description: paste.check.ok ? "From the clipboard" : paste.check.reason, ...(paste.check.ok ? {} : { disabled: true }),
+        });
+    }
+    for (const section of allowedSections(policy, registry.sections)) {
+        rows.push({
+            key: `section-${section.name}`, kind: "section", title: section.title, ...(section.icon ? { icon: section.icon } : {}), section,
+            nodeId: sampleNodeId("section", section.name),
+        });
+    }
+    if (allowsCustom(policy)) {
+        rows.push({ key: "custom", kind: "custom", title: registry.custom.title, nodeId: sampleNodeId("custom") });
+    }
+    for (const item of allowedGlobals(policy, registry.globals, globalIds)) {
+        rows.push({ key: `global-${item.name}`, kind: "global", title: item.title, icon: "⛓", item, nodeId: sampleNodeId("global", item.name) });
+    }
+    return rows;
+}
+/** The row the modal opens on: the first that can be picked and is not Paste (its preview is a card, not a picture);
+ *  Paste when it is all there is; -1 when nothing can be picked. */
+export function firstRow(rows) {
+    const insertable = rows.findIndex((r) => !r.disabled && r.kind !== "paste");
+    return insertable !== -1 ? insertable : rows.findIndex((r) => !r.disabled);
+}
+/** The next row an arrow key lands on: the nearest one in `dir` that can be picked; the current one at an end. */
+export function stepRow(rows, current, dir) {
+    for (let i = current + dir; i >= 0 && i < rows.length; i += dir)
+        if (!rows[i].disabled)
+            return i;
+    return current;
+}