smoodly 0.0.62 → 0.0.63

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

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode } from "react";
-import type { AssetRecord } from "../../media.ts";
+import { type AssetRecord } from "../../media.ts";
 import type { AdminField } from "../serialize.ts";
 export declare function MediaWidget({ descriptor, value, onChange, asset: preloaded, label, mark, hint, error: fieldError, path }: {
     descriptor: AdminField;

package/dist/admin/forms/MediaWidget.js

@@ -8,9 +8,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // actions in the field's head, right of the label (2026-09-25; the same
 // row a richtext image card shows). The widget renders its own Field so
 // the actions can sit in the head.
+// A fresh section's image placeholder (spec 2026-11-14 filled samples) is shown for what it is: the picture the
+// canvas draws, marked "Placeholder", with Choose image and Remove; a dropped file replaces it.
 // The record comes from the assets context (cached per id); `asset`
 // preloads it for static renders.
 import { useEffect, useState } from "react";
+import { isImagePlaceholder, placeholderImage } from "../../media.js";
 import { Button, Field, UploadProgress } from "../ui/primitives.js";
 import { acceptFor, formatBytes } from "../shell/media-list.js";
 import { useAssets } from "./assets-context.js";
@@ -25,6 +28,7 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
     const assets = useAssets();
     const kind = descriptor.type;
     const id = typeof value?.asset === "string" ? value.asset : null;
+    const placeholder = kind === "image" && isImagePlaceholder(value);
     const [asset, setAsset] = useState(preloaded ?? null);
     /** The fraction sent while a file uploads; null when none is. */
     const [progress, setProgress] = useState(null);
@@ -69,7 +73,11 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
     const accept = acceptFor([kind], assets.media.accept);
     const fileInput = (label, variant = "secondary") => (_jsxs("label", { className: `sm-btn sm-btn--${variant}`, children: [progress !== null ? `Uploading… ${Math.round(progress * 100)}%` : label, _jsx("input", { type: "file", accept: accept, hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] }));
     let body;
-    if (!id) {
+    if (placeholder) {
+        const picture = placeholderImage(descriptor);
+        body = (_jsxs("div", { className: "sm-media", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: [_jsx("div", { className: "sm-media__canvas", children: _jsxs("div", { className: "sm-media__thumb sm-media__thumb--placeholder", style: { aspectRatio: `${picture.width} / ${picture.height}`, width: `calc(${CANVAS_H}px * ${picture.width / picture.height})` }, children: [_jsx("img", { src: picture.url, alt: "" }), progress !== null && _jsx(UploadProgress, { fraction: progress })] }) }), _jsx("span", { className: "sm-media__alt", children: "Placeholder: shown in the editor only" })] }));
+    }
+    else if (!id) {
         body = (_jsx("div", { className: "sm-dropzone", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: progress !== null ? _jsx(UploadProgress, { fraction: progress }) : _jsxs(_Fragment, { children: [_jsx("span", { children: "Drop a file here" }), _jsxs("div", { className: "sm-media__actions", children: [fileInput("Upload", "primary"), _jsx(Button, { variant: "secondary", onClick: () => setPicker(true), children: "Choose from library" })] })] }) }));
     }
     else if (!asset) {
@@ -87,6 +95,6 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
         body = (_jsxs("div", { className: "sm-media", children: [preview, asset.kind === "image" && _jsx("span", { className: "sm-media__alt", children: v.alt ?? asset.alt ?? "No alt text" })] }));
     }
     // Edit only for an image that has its dimensions (the crop editor's frame needs them).
-    const actions = id && asset ? (_jsxs("span", { className: "sm-field__actions", children: [asset.kind === "image" && asset.width && asset.height && (_jsx("button", { type: "button", className: "sm-field__action", onClick: () => setCrop(true), children: "Edit" })), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => setPicker(true), children: "Replace" }), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => onChange(undefined), children: "Remove" })] })) : undefined;
+    const actions = placeholder ? (_jsxs("span", { className: "sm-field__actions", children: [_jsx("button", { type: "button", className: "sm-field__action", onClick: () => setPicker(true), children: "Choose image" }), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => onChange(undefined), children: "Remove" })] })) : id && asset ? (_jsxs("span", { className: "sm-field__actions", children: [asset.kind === "image" && asset.width && asset.height && (_jsx("button", { type: "button", className: "sm-field__action", onClick: () => setCrop(true), children: "Edit" })), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => setPicker(true), children: "Replace" }), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => onChange(undefined), children: "Remove" })] })) : undefined;
     return (_jsxs(Field, { label: label, mark: mark, hint: hint, error: fieldError, path: path, action: actions, asDiv: true, children: [body, error && _jsx("span", { className: "sm-error", children: error }), picker && _jsx(MediaPicker, { kinds: [kind], onPick: select, onClose: () => setPicker(false) }), crop && asset && (_jsx(CropEditor, { asset: asset, descriptor: descriptor, value: value, onSave: (next) => { onChange(next); setCrop(false); }, onClose: () => setCrop(false) }))] }));
 }

package/dist/admin/ops.d.ts

@@ -4,6 +4,7 @@ import type { EntryRecord, EntryUsage } from "../entry-store.ts";
 import type { AssetRecord, AssetMeta } from "../media.ts";
 import type { AssetPage, AssetQuery } from "../asset-store.ts";
 import type { MemberRecord } from "../member-store.ts";
+import type { SamplePicks } from "../sample-fill.ts";
 import type { MemberRole } from "../permissions.ts";
 import type { FieldError } from "./validate.ts";
 import type { DeployState } from "../deploy-state.ts";
@@ -217,6 +218,10 @@ export type AdminOps = {
             entries: EntryRecord[];
             total: number;
         }>>;
+        /** The reference picks of a fresh node (spec 2026-11-14 filled samples): for each named collection the ids of its
+         *  first three PUBLISHED entries in `locale`, as the site's `getEntries(collection, { locale, limit: 3 })` returns
+         *  them, so an insert references what the picker's picture showed. A name that is no collection is left out. */
+        samplePicks(collections: string[], locale: string): Promise<OpResult<SamplePicks>>;
         create(collection: string, input: EntryCreateInput): Promise<OpResult<EntryRecord>>;
         /** `expected` as on pages: the token the client last saw; `undefined` skips the check. */
         save(collection: string, id: string, locale: string, fields: Record<string, unknown>, expected?: DraftToken | null, options?: {

package/dist/admin/shell/GlobalForm.js

@@ -391,7 +391,7 @@ export function GlobalForm({ ops, registry, name }) {
     };
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: adminHref("/globals"), items: [
                             {
-                                label: "Sections", href: adminHref("/globals"),
+                                label: "Globals", href: adminHref("/globals"),
                                 trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: (l) => { void switchLocale(l); }, onAdd: () => undefined })),
                             },
                             { label: item.title },

package/dist/admin/shell/GlobalList.js

@@ -38,7 +38,7 @@ export function GlobalList({ ops, registry }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const rows = items ? globalRows(items, registry, locale) : [];
-    return (_jsx(ListView, { title: "Sections", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
+    return (_jsx(ListView, { title: "Globals", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
             { label: "Title", width: "minmax(160px,1fr)" },
             { label: "Kind", width: "90px" },
             { label: "Updated", width: "minmax(110px,160px)" },

package/dist/admin/shell/NavBar.js

@@ -106,7 +106,7 @@ export function NavBar({ registry, active, email, settings = true, deploy, onSig
     const collectionsOpen = open === "collections" || (hovered && open === null);
     // What ⋮ holds, in the rail's order.
     const more = [
-        ...(registry.globals.length > 0 ? [{ key: "globals", label: "Sections", icon: _jsx(LayoutPanelTop, { ...ICON }), href: adminHref("/globals") }] : []),
+        ...(registry.globals.length > 0 ? [{ key: "globals", label: "Globals", icon: _jsx(LayoutPanelTop, { ...ICON }), href: adminHref("/globals") }] : []),
         ...(settings ? [{ key: "settings", label: "Settings", icon: _jsx(Settings, { ...ICON }), href: adminHref("/settings") }] : []),
     ];
     const moreActive = more.some((m) => m.key === active);

package/dist/admin/shell/PagesList.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useState } from "react";
 import { ListView } from "./ListView.js";
 import { canDragRow, codeAddressNote, openTemplates, pagesTreeRows, projectDrop, sourceLocaleOf, subtreeHeight } from "./pages-tree.js";
-import { Button, StatusBadge } from "../ui/primitives.js";
+import { Button, StatusBadge, cx } from "../ui/primitives.js";
 import { statusLabel } from "../ui/status-label.js";
 import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { useSortable } from "../ui/useSortable.js";
@@ -238,7 +238,7 @@ export function PagesList({ ops, registry }) {
         // A record no longer in code (spec 2026-09-29 nested paths §5): deleting it is all that is open.
         if (row.orphan) {
             if (!row.hasChildren)
-                items.push({ label: "Delete", run: () => destroy(row) });
+                items.push({ label: "Delete", run: () => destroy(row), danger: true });
             return items;
         }
         if (!row.present) {
@@ -262,7 +262,7 @@ export function PagesList({ ops, registry }) {
             items.push({ label: `Remove from ${locale}`, run: () => removeLocale(row) });
         }
         if (!row.fixed && !row.isHome && !row.hasChildren)
-            items.push({ label: "Delete", run: () => destroy(row) });
+            items.push({ label: "Delete", run: () => destroy(row), danger: true });
         return items;
     };
     // A mount row is a page like any other when a fixed page claims the
@@ -322,7 +322,7 @@ export function PagesList({ ops, registry }) {
                         position: "absolute",
                         left: Math.max(12, Math.min(menu.x - 280, window.innerWidth - 312)),
                         top: Math.min(menu.y + 8, Math.max(12, window.innerHeight - 300)),
-                    }, children: [items.map((item) => (_jsx("button", { type: "button", className: "sm-picker__item", onClick: () => { setMenu(null); item.run(); }, children: item.label }, item.label))), items.length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: menu?.row.orphan ? "No longer in code — move its child pages out, then delete it." : "Owned by code — nothing to change here." }))] }) })), dialog?.kind === "new" && (_jsx(PageFormDialog, { title: dialog.node === "page" ? (dialog.parentId ? "New subpage" : "New page") : (dialog.parentId ? "New subpath" : "New path"), submitLabel: dialog.node === "page" ? "Create page" : "Create path", fields: { title: true, slug: true, template: dialog.node === "page" }, templates: creatable, parentPath: dialog.parentId ? (rows.find((r) => r.id === dialog.parentId)?.path ?? "/") : "/", onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
+                    }, children: [items.map((item) => (_jsx("button", { type: "button", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), onClick: () => { setMenu(null); item.run(); }, children: item.label }, item.label))), items.length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: menu?.row.orphan ? "No longer in code — move its child pages out, then delete it." : "Owned by code — nothing to change here." }))] }) })), dialog?.kind === "new" && (_jsx(PageFormDialog, { title: dialog.node === "page" ? (dialog.parentId ? "New subpage" : "New page") : (dialog.parentId ? "New subpath" : "New path"), submitLabel: dialog.node === "page" ? "Create page" : "Create path", fields: { title: true, slug: true, template: dialog.node === "page" }, templates: creatable, parentPath: dialog.parentId ? (rows.find((r) => r.id === dialog.parentId)?.path ?? "/") : "/", onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
                     closeDialog(); return message; }) })), dialog?.kind === "template" && (_jsx(PageFormDialog, { title: "Add page here", submitLabel: "Add page", fields: { template: true }, templates: creatable, onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
                     closeDialog(); return message; }) })), dialog?.kind === "rename" && (_jsx(PageFormDialog, { title: "Rename page", submitLabel: "Rename", fields: { title: true, slug: !dialog.row.isHome }, initial: { title: dialog.row.record.locales[locale]?.title ?? "", slug: dialog.row.record.locales[locale]?.slug ?? "" }, parentPath: dialog.row.isHome ? undefined : parentPathOf(dialog.row.path), onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
                     closeDialog(); return message; }) })), dialog?.kind === "duplicate" && (_jsx(PageFormDialog, { title: "Duplicate page", submitLabel: "Duplicate", fields: { title: true, slug: true }, initial: { title: `${dialog.row.title} copy`, slug: `${dialog.row.record.locales[locale]?.slug ?? ""}-copy` }, parentPath: dialog.row.isHome ? "/" : parentPathOf(dialog.row.path), onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)

package/dist/admin/shell/console-links.js

@@ -2,7 +2,7 @@
 // (this site, the docs; 2026-10-23), the account menu's "My Account" and the Members page's "Manage members at
 // smoodly.io". The dashboard links are deep links into the console the service names (`GET /v1/auth`'s consoleUrl),
 // set once by the entry from the page's data; the docs are smoodly.io itself.
-let console = { url: "https://smoodly.io", spaceId: "" };
+let console = { url: "https://app.smoodly.io", spaceId: "" };
 export function setConsole(url, spaceId) {
     console = { url: url.replace(/\/+$/, ""), spaceId };
 }

package/dist/admin/shell/health-list.js

@@ -2,7 +2,7 @@ import { SEVERITY, groupKey } from "../drift.js";
 import { driftHeadline } from "../drift-copy.js";
 /** A group shows this many rows, then "Show all N". */
 export const GROUP_PREVIEW = 10;
-const kindLabel = (doc, registry) => doc.kind === "page" ? "Page" : doc.kind === "global" ? "Sections" : registry.collections.find((c) => c.name === doc.collection)?.title ?? doc.collection ?? "";
+const kindLabel = (doc, registry) => doc.kind === "page" ? "Page" : doc.kind === "global" ? "Globals" : registry.collections.find((c) => c.name === doc.collection)?.title ?? doc.collection ?? "";
 const href = (doc, locale) => {
     const q = `?locale=${encodeURIComponent(locale)}`;
     if (doc.kind === "page")

package/dist/admin/tree-ops.d.ts

@@ -1,6 +1,7 @@
 import type { PageTree, TreeNode } from "../page-context.ts";
 import type { ZonePolicy } from "../zones.ts";
 import type { AdminSection, AdminGlobal } from "./serialize.ts";
+import { type FreshOptions } from "../sample-fill.ts";
 export declare function zoneOf(tree: PageTree, id: string): string | null;
 export declare function findNode(tree: PageTree, id: string): TreeNode | null;
 export declare function insertNode(tree: PageTree, zone: string, index: number, node: TreeNode): PageTree;
@@ -24,15 +25,21 @@ export declare function allowedGlobals(policy: ZonePolicy | undefined, globals:
 /** A page places a visual item as this node (spec 2026-09-07 §6): `item`
  *  names the registration, `ref` is the item's row id. */
 export declare function placementNode(item: AdminGlobal, ref: string, id: string): TreeNode;
-/** Also fills an element node (an `AdminElement` is a section shape plus contexts). Never seeds `styles` or `css`: Default stores nothing (spec 2026-09-14 §2). */
-export declare function nodeFromSample(section: Pick<AdminSection, "name" | "fields" | "settings" | "sample">, id: string): TreeNode;
+/** The one builder of a fresh node (spec 2026-11-14 filled samples): the insert, a locked zone, a richtext element and
+ *  the picker's sample tree all take it from here, so the picture is the insert. Per field: the `sample` (taken whole,
+ *  nothing generated on it or inside it), then the `default`, a required choice's first option and a boolean's false,
+ *  then the generated value (sample-fill.ts), then the empty value by type. `empty` skips the sample and the generated
+ *  value. Settings are choices: sampled or defaulted, never generated.
+ *  Also fills an element node (an `AdminElement` is a section shape plus contexts). Never seeds `styles` or `css`: Default stores nothing (spec 2026-09-14 §2). */
+export declare function nodeFromSample(section: Pick<AdminSection, "name" | "fields" | "settings" | "sample">, id: string, options?: FreshOptions): TreeNode;
 /** A locked zone holds exactly one node the editor can never insert or
  * remove — so someone has to put it there. This does, from the component's
  * sample (or, for a zone bound to a global item, a placement), for every
  * locked zone that is empty or missing. Runs when the editor loads a draft,
  * which also covers pages that predate a locked zone being added to their
- * schema. Returns the same tree when nothing changed. */
-export declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[], globalIds?: Record<string, string>): PageTree;
+ * schema. Returns the same tree when nothing changed. `fresh` carries the
+ * space's reference picks and whether the service takes an image placeholder. */
+export declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[], globalIds?: Record<string, string>, fresh?: FreshOptions): PageTree;
 export declare function newNodeId(type: string): string;
 /** A page-level value — the template's page fields or the SEO meta (spec 2026-09-10 page fields §5). */
 export declare function patchPage(tree: PageTree, ns: "fields" | "meta", key: string, value: unknown): PageTree;

package/dist/admin/tree-ops.js

@@ -1,6 +1,6 @@
 import { GLOBAL_NODE_TYPE } from "../global.js";
 import { setAtPath, unsetAtPath } from "./field-paths.js";
-import { optionsOf } from "../fields.js";
+import { firstChoice, generated, starting } from "../sample-fill.js";
 export function zoneOf(tree, id) {
     for (const [zone, nodes] of Object.entries(tree.zones)) {
         if (nodes.some((n) => n.id === id))
@@ -119,32 +119,41 @@ export function placementNode(item, ref, id) {
 /** The empty value a fresh node's field starts at, by descriptor type.
  * Shape matters: a list-valued field seeded with "" is a type lie that
  * crashes the first section view that maps over it. */
-const EMPTY_BY_TYPE = { refList: [], object: {} };
+const EMPTY_BY_TYPE = { refList: () => [], list: () => [], tags: () => [], checkboxes: () => [], object: () => ({}) };
 /** Media/number fields have no honest empty value — "" renders as a
- * broken-image icon or a stray zero, worse than nothing at all. With no
- * sample, leave the key out of `fields` entirely rather than seed a lie. */
+ * broken-image icon or a stray zero, worse than nothing at all. With
+ * nothing to start from, leave the key out of `fields` entirely rather than seed a lie. */
 const ABSENT_WHEN_UNSAMPLED = new Set(["image", "video", "file", "number"]);
-/** A required choice shows its first option (FieldWidget renders no blank one), so a new node stores it too — as a
- *  list item does (forms/list.ts) — and publish never says Required for a choice the editor sees made. */
-const firstChoice = (d) => (d.type === "select" || d.type === "radio") && d.optional !== true ? optionsOf(d.options)[0]?.value : undefined;
-/** Also fills an element node (an `AdminElement` is a section shape plus contexts). Never seeds `styles` or `css`: Default stores nothing (spec 2026-09-14 §2). */
-export function nodeFromSample(section, id) {
+/** What the section's `sample` sets for a key: an empty array counts as left out (spec 2026-11-14 filled samples),
+ *  since "start with nothing" for a list is what leaving it out already means. */
+const sampledOf = (sample, key) => {
+    const v = sample?.[key];
+    return Array.isArray(v) && v.length === 0 ? undefined : v;
+};
+/** The one builder of a fresh node (spec 2026-11-14 filled samples): the insert, a locked zone, a richtext element and
+ *  the picker's sample tree all take it from here, so the picture is the insert. Per field: the `sample` (taken whole,
+ *  nothing generated on it or inside it), then the `default`, a required choice's first option and a boolean's false,
+ *  then the generated value (sample-fill.ts), then the empty value by type. `empty` skips the sample and the generated
+ *  value. Settings are choices: sampled or defaulted, never generated.
+ *  Also fills an element node (an `AdminElement` is a section shape plus contexts). Never seeds `styles` or `css`: Default stores nothing (spec 2026-09-14 §2). */
+export function nodeFromSample(section, id, options = {}) {
     const fields = {};
     const settings = {};
+    const sample = options.empty ? undefined : section.sample;
     for (const [key, d] of Object.entries(section.fields)) {
-        const sampled = section.sample?.[key] ?? d.default ?? firstChoice(d) ?? (d.type === "boolean" ? false : undefined);
-        if (sampled !== undefined)
-            fields[key] = sampled;
+        const value = sampledOf(sample, key) ?? starting(d) ?? (options.empty ? undefined : generated(key, d, options));
+        if (value !== undefined)
+            fields[key] = value;
         else if (ABSENT_WHEN_UNSAMPLED.has(d.type))
             continue;
         // An optional object with no sample is absent: `{}` would read as present, its members required at publish.
         else if (d.type === "object" && d.optional === true)
             continue;
         else
-            fields[key] = EMPTY_BY_TYPE[d.type] ?? "";
+            fields[key] = EMPTY_BY_TYPE[d.type]?.() ?? "";
     }
     for (const [key, d] of Object.entries(section.settings)) {
-        const v = section.sample?.[key] ?? d.default ?? firstChoice(d);
+        const v = sampledOf(sample, key) ?? d.default ?? firstChoice(d);
         if (v !== undefined)
             settings[key] = v;
     }
@@ -155,8 +164,9 @@ export function nodeFromSample(section, id) {
  * sample (or, for a zone bound to a global item, a placement), for every
  * locked zone that is empty or missing. Runs when the editor loads a draft,
  * which also covers pages that predate a locked zone being added to their
- * schema. Returns the same tree when nothing changed. */
-export function fillLockedZones(tree, policies, sections, globalIds = {}) {
+ * schema. Returns the same tree when nothing changed. `fresh` carries the
+ * space's reference picks and whether the service takes an image placeholder. */
+export function fillLockedZones(tree, policies, sections, globalIds = {}, fresh) {
     let next = null;
     for (const [zone, policy] of Object.entries(policies)) {
         if (policy.kind !== "locked")
@@ -177,7 +187,8 @@ export function fillLockedZones(tree, policies, sections, globalIds = {}) {
             const section = sections.find((s) => s.name === policy.component);
             if (!section)
                 continue;
-            node = nodeFromSample(section, newNodeId(section.name));
+            // Always the filled node (spec 2026-11-14 filled samples): a locked zone has no picker and no switch.
+            node = nodeFromSample(section, newNodeId(section.name), { ...fresh, empty: false });
         }
         next ?? (next = { ...tree, zones: { ...tree.zones } });
         next.zones[zone] = [node];

package/dist/admin/ui/theme.js

@@ -26,7 +26,8 @@ const TOKENS_LIGHT = `
   /* The shell: navy frame, white sheet, grey tiles on the sheet, white fields on the tiles. */
   --frame:#151727; --sheet:${SHEET_LIGHT};
   --bg:var(--sheet); --canvas:#ECEDF1; --surface:#F6F6F6; --surface-form:#F6F6F6; --surface-inset:#FFFFFF;
-  --menu-bg:#FFFFFF;
+  --menu-bg:#FFFFFF; --menu-hover:var(--hover);
+  --avatar-hover:color-mix(in srgb,var(--accent-soft),#fff 60%);
   --input-bg:#FFFFFF; --input-hover-bg:#FFFFFF; --input-focus-bg:#FFFFFF; --input-border:var(--line);
   --line:#E4E5EA; --line-dashed:#CFD1D9; --line-soft:#ECEDF1;
   --text:#151727; --text-secondary:#454A5C; --text-muted:#6B6F80; --text-subtle:#9A9EAB; --text-disabled:#C5C8D2;
@@ -61,6 +62,7 @@ const TOKENS_LIGHT = `
   --status-saved-dot:var(--green-500);
   --warn:var(--amber-700); --warn-soft:var(--amber-50);
   --danger:var(--red-700); --danger-soft:var(--red-50);
+  --destructive-bg:var(--red-700); /* the filled destructive button: white text on it in both themes (2026-11-14) */
 
   /* The edited page inside the canvas stays light in both themes. */
   --page-bg:#FFFFFF; --page-text:#151727;
@@ -80,11 +82,11 @@ const TOKENS_LIGHT = `
    and sheet a step darker, tiles a step lighter, fields in the sheet tone;
    the bar and the logo unchanged. */
 const TOKENS_DARK = `
-  --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --accent-line:#6CC4A6; --on-accent:#151727;
+  --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --avatar-hover:rgba(108,196,166,.26); /* a step up from accent-soft: white over the tint read grey (2026-11-14) */ --accent-line:#6CC4A6; --on-accent:#151727;
   --selection-global:#F09A5C;
   --frame:#0F1120; --sheet:${SHEET_DARK};
   --canvas:#131526; --surface:#242840; --surface-form:#242840; --surface-inset:#1B1E30;
-  --menu-bg:#242840;
+  --menu-bg:#242840; --menu-hover:#2A2E47; /* a step off the menu, not the brighter --hover (2026-11-14) */
   /* A field's edge is drawn in dark: a dialog's fields take the card's own tone there (2026-11-13). */
   --input-bg:#1B1E30; --input-hover-bg:#1B1E30; --input-focus-bg:#1B1E30; --input-border:var(--line-dashed);
   --line:#33384F; --line-dashed:#444A63; --line-soft:#33384F;
@@ -126,7 +128,7 @@ const SCALE = `
 
   --radius-xs:2px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
   --radius-card:16px; --radius-card-lg:16px; --radius-modal:20px; --radius-btn:999px; --radius-round:999px;
-  --page-radius:8px 8px 0 0; --selection-radius:2px; /* the canvas hover/selection ring: 2px (asked for 2026-09-26; 8px before) */
+  --page-radius:0; --selection-radius:2px; /* the canvas hover/selection ring: 2px (asked for 2026-09-26; 8px before) */
   --outline-row-radius:6px; --tabs-radius:10px; --tab-radius:6px; --row-radius:2px; --tag-radius:999px; /* list row hover fill: 2px (same day; 10px before) */
   --plus-radius:8px; --toolbar-radius:8px;
   --rtcard-bg:var(--surface); --rtcard-border:var(--line);
@@ -135,10 +137,10 @@ const SCALE = `
   --plus-h:32px; --plus-pad:0 14px 0 6px; --plus-label:inline;
   --inspector-w:360px; --gutter:20px;
   /* The frame is 8px left of, right of and below the sheet (6px in the handoff, +2px 2026-10-23); the bar fills the top edge. */
-  --frame-pad:8px; --shell-gap:0px; --sheet-radius:20px; --sheet-pad:0 24px 24px;
+  --frame-pad:8px; --shell-gap:0px; --sheet-radius:12px; --sheet-pad:0 24px 24px;
   --navbar-h:64px; --navbar-pad-x:12px; --navbar-item-h:40px; --navbar-item-radius:10px;
   --topbar-pad:0; --back-size:32px; --back-bg:var(--surface);
-  --table-pad:8px 12px; --table-top:80px; --canvas-pad:28px 40px 0; --card-pad:16px 18px; --card-gap:12px; --form-pad:32px 40px;
+  --table-pad:8px 12px; --table-top:80px; --canvas-pad:28px 28px 0; --card-pad:16px 18px; --card-gap:12px; --form-pad:32px 40px;
   --border:1px solid var(--line);
   --outline-selection:2px solid var(--selection);
   --outline-selection-global:2px solid var(--selection-global);
@@ -220,7 +222,7 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
   width:32px;height:32px;border-radius:var(--radius-round);background:var(--accent-soft);color:var(--accent);
   display:grid;place-items:center;font-size:var(--text-xs);font-weight:600;border:0;cursor:pointer;padding:0;transition:background .15s;
 }
-.sm-navbar__user:hover{background:color-mix(in srgb,var(--accent-soft),#fff 60%)}
+.sm-navbar__user:hover{background:var(--avatar-hover)}
 .sm-navbar__user:focus-visible{outline:2px solid var(--navbar-active-fg);outline-offset:2px;box-shadow:none}
 .sm-navbar__ext{width:13px;height:13px;flex:none;margin-left:12px;opacity:.45}
 .sm-navbar__menu-item:hover .sm-navbar__ext,.sm-navbar__menu-item:focus-visible .sm-navbar__ext{opacity:.8}
@@ -272,7 +274,7 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
   appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;
   padding:7px 10px;border-radius:var(--radius-sm);color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;
 }
-.sm-navbar__menu-item:hover,.sm-navbar__menu-item:focus-visible{background:var(--hover);color:inherit;outline:0;box-shadow:none}
+.sm-navbar__menu-item:hover,.sm-navbar__menu-item:focus-visible{background:var(--menu-hover);color:inherit;outline:0;box-shadow:none}
 .sm-navbar__menu-item[aria-current="page"],.sm-navbar__menu-item[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
 .sm-navbar__menu-label{display:flex;align-items:center;gap:10px;min-width:0}
 .sm-navbar__menu-label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -336,7 +338,7 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
 .sm-btn--danger{background:var(--btn-secondary-bg);color:var(--danger)}
 .sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}
 /* The confirm dialog's destructive primary: filled red (ConfirmModal.html). */
-.sm-btn--destructive{background:var(--danger);color:#fff;font-weight:600;padding:0 18px}
+.sm-btn--destructive{background:var(--destructive-bg);color:#fff;font-weight:600;padding:0 18px}
 .sm-btn--destructive:hover{filter:brightness(.94);color:#fff}
 .sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 18px}
 .sm-btn:disabled,.sm-btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
@@ -455,12 +457,12 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
 .sm-richtext__content ul,.sm-richtext__content ol{padding-left:20px}
 .sm-richtext__content li+li{margin-top:.25em}
 .sm-richtext__body{position:relative}
-/* The "+" menu floats under the toolbar's right end (the "+" is its last
+/* The "+" menu hangs right under the toolbar's right end, no gap (2026-11-14; the "+" is its last
    button) instead of pushing the content down; the picker inside drops
    its own chrome. The slash menu floats under the caret the same way. */
-.sm-richtext__head{position:relative}
+.sm-richtext__head{position:relative;width:fit-content;max-width:100%} /* as wide as the toolbar, so the menu hangs from the "+" (2026-11-14) */
 .sm-richtext__menu{
-  position:absolute;top:calc(100% + 6px);right:0;z-index:65;width:300px;max-width:100%;
+  position:absolute;top:100%;right:0;z-index:65;width:300px;max-width:calc(100vw - 32px);
   display:flex;flex-direction:column;gap:6px;padding:6px;
   background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
 }
@@ -564,7 +566,7 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
 .sm-listnotice:empty{display:none}
 /* The rows sit in a centred column of at most 1200px inside the card,
    under --table-top of air reserved for the coming search and filters. */
-.sm-table{display:flex;flex-direction:column;padding:var(--table-pad);padding-top:var(--table-top);max-width:1200px;margin:0 auto}
+.sm-table{display:flex;flex-direction:column;padding:var(--table-pad);padding-top:var(--table-top);padding-bottom:100px;max-width:1200px;margin:0 auto}
 /* The filter sits in that air, so the column heads stay where they are on a list without one (2026-11-13). */
 .sm-table--tools{padding-top:20px}
 .sm-table__tools{display:flex;align-items:center;gap:12px;height:40px;margin-bottom:20px;padding:0 8px}
@@ -963,6 +965,22 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
   width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);
   color:var(--accent);display:grid;place-items:center;font-size:13px;
 }
+/* The insert picker as a modal (spec 2026-11-14 add section previews): the rows keep the picker's item styles in a
+   plain column; beside them the current row as the site draws it, in one scaled, cropped frame. */
+.sm-insert{display:flex;flex:1;min-height:0}
+.sm-insert__list{width:auto;flex:1;min-width:0;overflow-y:auto;background:transparent;border:0;border-radius:0;box-shadow:none;padding:8px}
+.sm-insert__side{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
+.sm-insert--pane .sm-insert__side{flex:none;width:300px;border-right:var(--card-divider)}
+.sm-insert__foot{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:var(--card-divider);font-size:var(--text-sm);color:var(--text-muted);cursor:pointer}
+/* The preview pane is a small canvas (2026-11-14): the canvas tone, inset from the dialog's edges, its corners rounded. */
+.sm-insert__pane{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:20px;margin:0 16px 16px 0;border-radius:12px;background:var(--canvas)}
+.sm-insert__preview{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:4px 4px 10px} /* room for the crop's shadow */
+.sm-insert__crop{position:relative;width:100%;overflow:hidden;border-radius:var(--radius-md);max-height:100%}
+/* A hairline and a small shadow keep a light section off a light pane. */
+.sm-insert__crop--shown{background:#fff;box-shadow:0 0 0 1px rgba(21,23,39,.1),0 2px 8px rgba(21,23,39,.1)}
+.sm-insert__fallback{flex:1;display:grid;place-items:center;border-radius:var(--radius-md);border:1px dashed var(--line)}
+.sm-insert__icon{width:72px;height:72px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:32px}
+.sm-insert__caption{flex:none;min-height:40px}
 /* Combobox (spec 2026-09-17 §1): the input owns the width, the list hangs under it —
    portaled and fixed at the input's width (--combo-w), above modals and below
    the confirm scrim (2026-09-27); inline under the input in static markup. */
@@ -1114,6 +1132,7 @@ html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
 }
 .sm-media__thumb{position:relative;overflow:hidden;max-width:100%;max-height:300px;background:var(--surface-inset)}
 .sm-media__thumb>img,.sm-media__thumb>video{position:absolute;max-width:none;display:block}
+.sm-media__thumb--placeholder>img{inset:0;width:100%;height:100%}
 .sm-media__alt{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-media>.sm-media__alt{text-align:center}
 .sm-media__actions{display:flex;gap:6px}

package/dist/admin/validate.js

@@ -15,7 +15,7 @@ import { isCalendarDay, isInstant } from "./forms/date-picker.js";
 import { fits, misfitMessage } from "./drift.js";
 import { isSegment } from "../paths.js";
 import { safeHref } from "../richtext-href.js";
-import { isCrop } from "../media.js";
+import { isCrop, isImagePlaceholder } from "../media.js";
 /** A slug outside the path grammar, at publish (spec 2026-09-28 ASCII slugs §3). */
 export const SLUG_GRAMMAR_MESSAGE = "Use lowercase letters, digits and single hyphens, like my-post.";
 /** A link field takes only what the site renders (richtext-href.ts's rule): the widget says so as the editor types,
@@ -36,7 +36,8 @@ function validateValue(path, value, d, errors, elements, scope) {
     // An optional object with nothing filled in is absent (drafts inserted before 2026-09-26 carry `{}`).
     if (d.type === "object" && d.optional === true && isBlankObject(value))
         return;
-    if (isEmpty(value)) {
+    // An image placeholder is unset to publish (spec 2026-11-14 filled samples): Required on a required image.
+    if (isEmpty(value) || (d.type === "image" && isImagePlaceholder(value))) {
         if (!mayBeAbsent(d))
             errors.push({ field: path, message: "Required." });
         return;

package/dist/api-client.js

@@ -29,7 +29,8 @@ export function createSmoodlyApi(options) {
      *  server pushes its schema to the space it reads, so the developer must see when that space is production. */
     let pushed = null;
     const pushOnce = (body) => (pushed ?? (pushed = pushSchema({ apiUrl, spaceId: options.spaceId, key: options.key, fetch: doFetch }, body).then((result) => { const line = pushLine(options.spaceId, result); console.log(`smoodly: ${line[0].toLowerCase()}${line.slice(1)}`); }, (e) => console.error(`smoodly: the schema push failed — ${e instanceof Error ? e.message : String(e)}; the site runs against the schema the space has.`))));
-    async function call(path, params) {
+    /** `send`: a read that carries a body (the picker's samples) goes as a POST; every other read is a GET. */
+    async function call(path, params, send) {
         if (push)
             await pushOnce(push);
         countRead();
@@ -39,7 +40,9 @@ export function createSmoodlyApi(options) {
                 url.searchParams.set(k, v);
         let res;
         try {
-            res = await doFetch(url.toString(), { headers: { authorization: `Bearer ${options.key}`, accept: "application/json" } });
+            res = await doFetch(url.toString(), send === undefined
+                ? { headers: { authorization: `Bearer ${options.key}`, accept: "application/json" } }
+                : { method: "POST", headers: { authorization: `Bearer ${options.key}`, accept: "application/json", "content-type": "application/json" }, body: JSON.stringify(send) });
         }
         catch (e) {
             throw new TypeError(`smoodly: can't reach SMOODLY_API_URL (${apiUrl}): ${e instanceof Error ? e.message : String(e)}`);
@@ -60,6 +63,8 @@ export function createSmoodlyApi(options) {
         styles: statics.styles,
         custom: statics.custom,
         codePage: statics.codePage,
+        sampleTree: statics.sampleTree,
+        sampleCollections: statics.sampleCollections,
         async locate(locale, path) {
             return (await call("/locate", { locale, path })).data;
         },
@@ -71,6 +76,11 @@ export function createSmoodlyApi(options) {
             const r = await call("/load", { kind: target.kind, id: target.id, locale, path, draft: o?.draft ? "1" : undefined, version: o?.version });
             return withTags(r.data, r.tags, draft);
         },
+        async loadSamples(target, locale, path, tree) {
+            if (target.kind !== "page")
+                return null;
+            return (await call("/load-samples", {}, { id: target.id, locale, path, tree })).data;
+        },
         async lookup(locale, path) {
             const r = await call("/lookup", { locale, path });
             return withTags(r.data.hit, r.tags, false);

package/dist/astro/middleware.js

@@ -5,6 +5,7 @@
 // for the body is what makes a late read count. A preview response gains the draft marker and, in the
 // canvas, the bridge, when the shell rendered it; a live page gains nothing. Nothing under the preview
 // address is ever stored, and neither is a render a publish overtook or one a read failed in.
+import { SAMPLES_PARAM } from "../canvas-marker.js";
 import { defineMiddleware } from "astro:middleware";
 import { loadAdminFiles } from "../admin/files.js";
 import { ADMIN_INTERNAL } from "../admin/page-data.js";
@@ -32,6 +33,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
         draft,
         editor: draft && searchParams.get("smoodly-editor") === "1",
         version: (draft && searchParams.get("smoodly-version")) || undefined,
+        samples: (draft && searchParams.get(SAMPLES_PARAM)) || undefined,
         cacheable: false,
         shell: false,
     };

package/dist/astro/shell.d.ts

@@ -14,6 +14,9 @@ export type SmoodlyLocals = {
     editor: boolean;
     /** History's stored version, inside a preview only. */
     version?: string;
+    /** The picker's zone (`smoodly-samples`), inside a preview only: its rows are drawn from their samples in place of
+     *  the page's content (spec 2026-11-14 add section previews). */
+    samples?: string;
     /** Set by the shell when it rendered a page read from the service: the response may be cached under its tags. */
     cacheable: boolean;
     /** Set by the shell when it rendered a page at all: in a preview, only that response is a canvas. */

package/dist/astro/shell.js

@@ -1,6 +1,7 @@
 import { addressWithGlobalsUnit, globalUnit } from "../reads.js";
 import { toEntryItem } from "../read-shapes.js";
 import { pageContextOf } from "../site.js";
+import { samplesHit } from "../sample-tree.js";
 import { headOf } from "./head.js";
 import { redirectsRoot, splitLocale } from "./locale-paths.js";
 const NOT_FOUND = { kind: "notFound" };
@@ -55,9 +56,15 @@ export async function resolveShell(deps, pathname, search, state, views) {
     // Only a page read from the service has a tag to expire it by.
     state.cacheable = !hit.record.id.startsWith("code:") && !state.draft;
     state.shell = true;
+    // The picker's samples: the same page with the zone's sample tree in place of its content. A code-owned page
+    // has no record for the service to answer with, so its zones are empty.
+    const shown = state.draft && state.samples !== undefined
+        ? await samplesHit(site, hit, hit.record.id.startsWith("code:") ? null : { kind: "page", id: hit.record.id }, locale, path, state.samples)
+        : hit;
+    const tree = shown.kind === "page" ? shown.tree : hit.tree;
     const zoneNames = Object.keys(schema.zones ?? {});
     const zones = Object.fromEntries(zoneNames.map((name) => [
-        name, { name, nodes: hit.tree.zones?.[name] ?? [], editor: state.editor, styleValues: site.styles },
+        name, { name, nodes: tree.zones?.[name] ?? [], editor: state.editor, styleValues: site.styles },
     ]));
     return { kind: "page", template: hit.template, page: pageContextOf(hit, deps.href), zones, head };
 }

package/dist/canvas-marker.d.ts

@@ -2,13 +2,18 @@ export type CanvasFlags = {
     editor: true;
 } | {
     version: string;
+} | {
+    samples: string;
 };
+/** The samples flag in the query, where a host keeps it (Astro; Next off Vercel). */
+export declare const SAMPLES_PARAM = "smoodly-samples";
 /** `path` with the marker as its last segment, before any query or hash. */
 export declare function markCanvasPath(path: string, flags: CanvasFlags): string;
 export type CanvasMarker = {
     segments: string[];
     editor: boolean;
     version?: string;
+    samples?: string;
 };
 /** The marker taken off a catch-all's segments, which a host may hand over encoded or not. */
 export declare function readCanvasMarker(segments: string[]): CanvasMarker;

package/dist/canvas-marker.js

@@ -3,13 +3,18 @@
 // on Next the flags ride the path's last segment: `~editor` (mount the editor bridge) or `~version~<id>` (render a
 // stored version). The admin writes it (admin/editor/canvas-address.ts), the Next renderer reads it inside draft
 // mode only; outside draft mode a marked address is an ordinary miss. A slug never starts with `~`.
+// `~samples~<zone>` (spec 2026-11-14 add section previews) asks for the zone's picker rows drawn from their samples
+// in place of the page's content; where the host keeps the query it rides there as `smoodly-samples`.
+/** The samples flag in the query, where a host keeps it (Astro; Next off Vercel). */
+export const SAMPLES_PARAM = "smoodly-samples";
 const EDITOR = "~editor";
 const VERSION = "~version~";
+const SAMPLES = "~samples~";
 /** `path` with the marker as its last segment, before any query or hash. */
 export function markCanvasPath(path, flags) {
     const cut = path.search(/[?#]/);
     const [pathname, rest] = cut === -1 ? [path, ""] : [path.slice(0, cut), path.slice(cut)];
-    const segment = "editor" in flags ? EDITOR : VERSION + encodeURIComponent(flags.version);
+    const segment = "editor" in flags ? EDITOR : "version" in flags ? VERSION + encodeURIComponent(flags.version) : SAMPLES + encodeURIComponent(flags.samples);
     return `${pathname.replace(/\/+$/, "")}/${segment}${rest}`;
 }
 /** The marker taken off a catch-all's segments, which a host may hand over encoded or not. */
@@ -18,12 +23,19 @@ export function readCanvasMarker(segments) {
     const rest = segments.slice(0, -1);
     if (last === EDITOR)
         return { segments: rest, editor: true };
-    if (last.startsWith(VERSION) && last.length > VERSION.length) {
+    // The value was encoded once when the marker was written; a host that decoded the segment already handed it over plain.
+    const valueAfter = (prefix) => {
+        if (!last.startsWith(prefix) || last.length === prefix.length)
+            return undefined;
         const raw = segments[segments.length - 1];
-        // The id was encoded once when the marker was written; a host that decoded the segment already handed it over plain.
-        const id = raw.startsWith(VERSION) ? safeDecode(raw.slice(VERSION.length)) : last.slice(VERSION.length);
-        return { segments: rest, editor: false, version: id };
-    }
+        return raw.startsWith(prefix) ? safeDecode(raw.slice(prefix.length)) : last.slice(prefix.length);
+    };
+    const version = valueAfter(VERSION);
+    if (version !== undefined)
+        return { segments: rest, editor: false, version };
+    const samples = valueAfter(SAMPLES);
+    if (samples !== undefined)
+        return { segments: rest, editor: false, samples };
     return { segments, editor: false };
 }
 function safeDecode(segment) {