smoodly 0.0.15 → 0.0.17

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

@@ -0,0 +1,24 @@
+import type { AdminGlobal } from "../serialize.ts";
+import type { Group } from "../forms/tabs.ts";
+import type { GlobalEditItem } from "./global-edit.ts";
+import { type RefOption } from "../shell/GlobalFields.tsx";
+import { type PublishBusy } from "../ui/PublishControl.tsx";
+export declare function GlobalInspector({ item, edit, locale, groups, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, }: {
+    item: AdminGlobal;
+    /** null while the item loads. */
+    edit: GlobalEditItem | null;
+    locale: string;
+    /** The active tab's groups (spec 2026-09-14 §5). */
+    groups: Group[];
+    multilingual: boolean;
+    refOptions: Record<string, RefOption[]>;
+    inlinePath?: string;
+    onEditHere?(): void;
+    onChange(ns: "fields" | "settings" | "styles" | "css", key: string, value: unknown): void;
+    /** An edit the store has not confirmed (dirty, or the item's autosave not in `saved`). */
+    pending: boolean;
+    busy: PublishBusy;
+    onPublish(): void;
+    onDiscard(): void;
+    onUnpublish(): void;
+}): import("react").JSX.Element;

package/dist/admin/editor/GlobalInspector.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BASE } from "../shell/base.js";
+import { localeStatusOf } from "../shell/pages-tree.js";
+import { GlobalFields } from "../shell/GlobalFields.js";
+import { PublishControl } from "../ui/PublishControl.js";
+export function GlobalInspector({ item, edit, locale, groups, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, }) {
+    const row = edit?.record.locales[locale];
+    // The same three states the global list shows; the control decides what applies.
+    const status = row ? localeStatusOf(row) : "draft";
+    const pages = edit ? [...new Set(edit.usage.filter((u) => u.sourceKind === "page").map((u) => u.sourceId))] : [];
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsx("p", { className: "sm-hint", children: "Global content \u2014 changes every page it is used on." }), edit && (_jsxs("p", { className: "sm-hint", children: [pages.length === 0 ? "Not placed on any page." : `Used on ${pages.length} page${pages.length === 1 ? "" : "s"}: `, pages.map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`, children: id })] }, id)))] })), _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: _jsx(PublishControl, { status: row ? status : null, pending: pending, busy: busy, disabled: !edit, onPublish: onPublish, onDiscard: onDiscard, onUnpublish: onUnpublish }) }), edit ? (_jsx(GlobalFields, { item: item, groups: groups, fields: edit.fields, errors: edit.errors, refOptions: refOptions, multilingual: multilingual, inlinePath: inlinePath, onEditHere: onEditHere, onChange: onChange })) : (_jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" }))] }));
+}

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

@@ -1,18 +1,19 @@
 import type { ZonePolicy } from "../../zones.ts";
-import type { AdminRegistry, AdminSection, AdminShared } from "../serialize.ts";
+import type { AdminRegistry, AdminSection, AdminGlobal } from "../serialize.ts";
 export type PickerAt = {
     zone: string;
     index: number;
     x: number;
     y: number;
 };
-export declare function InsertPicker({ at, policy, registry, sharedIds, onInsert, onInsertShared, onClose }: {
+export declare function InsertPicker({ at, policy, registry, globalIds, onInsert, onInsertGlobal, onInsertCustom, onClose }: {
     at: PickerAt;
     policy: ZonePolicy | undefined;
     registry: AdminRegistry;
-    /** Shared item name → row id; an item without one cannot be placed. */
-    sharedIds: Record<string, string>;
+    /** Global item name → row id; an item without one cannot be placed. */
+    globalIds: Record<string, string>;
     onInsert(section: AdminSection): void;
-    onInsertShared(item: AdminShared): void;
+    onInsertGlobal(item: AdminGlobal): void;
+    onInsertCustom(): void;
     onClose(): void;
 }): import("react").JSX.Element;

package/dist/admin/editor/InsertPicker.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { allowedSections, allowedShared } from "../tree-ops.js";
+import { allowedSections, allowedGlobals } from "../tree-ops.js";
+import { allowsCustom } from "../custom-section.js";
 import { SectionLabel } from "../ui/primitives.js";
 /** Keep the panel on screen; a static render (no window) leaves it where it was asked. */
 function clamp(at) {
@@ -11,8 +12,9 @@ function clamp(at) {
         top: Math.min(at.y, Math.max(12, window.innerHeight - 240)),
     };
 }
-export function InsertPicker({ at, policy, registry, sharedIds, onInsert, onInsertShared, onClose }) {
+export function InsertPicker({ at, policy, registry, globalIds, onInsert, onInsertGlobal, onInsertCustom, onClose }) {
     const sections = allowedSections(policy, registry.sections);
-    const shared = allowedShared(policy, registry.shared, sharedIds);
-    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", ...clamp(at) }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), shared.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { mono: true, style: { padding: "8px 8px 4px" }, children: "Shared" }), shared.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertShared(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: "Shared \u00B7 edited in one place" })] })] }, `shared-${item.name}`)))] })), sections.length === 0 && shared.length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
+    const globals = allowedGlobals(policy, registry.globals, globalIds);
+    const custom = allowsCustom(policy);
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", ...clamp(at) }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { mono: 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." }))] }) }));
 }

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

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Group, TabEntry } from "../forms/tabs.ts";
+import type { WidgetScope } from "../forms/FieldWidget.tsx";
+export type NodeValues = {
+    fields: Record<string, unknown>;
+    settings?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
+    css?: string;
+};
+/** The entries whose condition does not hold: a bare path reads the entry's own namespace. */
+export declare function visibleEntries(entries: TabEntry[], values: NodeValues): TabEntry[];
+export declare function valueOf(values: NodeValues, entry: TabEntry): unknown;
+export declare function InspectorFields({ groups, values, render }: {
+    groups: Group[];
+    values: NodeValues;
+    /** One widget for one entry. */
+    render(entry: TabEntry, opts: {
+        emptyLabel?: string;
+        scope: WidgetScope;
+    }): ReactNode;
+}): ReactElement;

package/dist/admin/editor/InspectorFields.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isHidden } from "../../conditions.js";
+import { SectionLabel } from "../ui/primitives.js";
+/** The entries whose condition does not hold: a bare path reads the entry's own namespace. */
+export function visibleEntries(entries, values) {
+    return entries.filter(({ ns, descriptor }) => ns === "css" || !isHidden(descriptor, { self: values[ns], fields: values.fields, settings: values.settings }));
+}
+export function valueOf(values, entry) {
+    if (entry.ns === "css")
+        return values.css;
+    return values[entry.ns]?.[entry.key];
+}
+export function InspectorFields({ groups, values, render }) {
+    const scope = { fields: values.fields, settings: values.settings };
+    return (_jsx(_Fragment, { children: groups.map((g, i) => {
+            const entries = visibleEntries(g.entries, values);
+            if (entries.length === 0)
+                return null;
+            return (_jsxs("div", { className: "sm-inspector__group", children: [g.title && _jsx(SectionLabel, { mono: true, children: g.title }), entries.map((e) => render(e, { emptyLabel: e.ns === "styles" ? "Default" : undefined, scope }))] }, g.title ?? i));
+        }) }));
+}

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

@@ -13,7 +13,6 @@ type Handlers = {
     onSelect(id: string): void;
     /** The empty row of an insertable zone was clicked. */
     onAddFirst(zone: string): void;
-    onMove(id: string, dir: -1 | 1): void;
     /** The drop and the grip's arrow keys: `index` in the resulting order. */
     onMoveTo(id: string, index: number): void;
     onRemove(id: string): void;

package/dist/admin/editor/Outline.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Grip, IconButton, SectionLabel, cx } from "../ui/primitives.js";
 import { useSortable } from "../ui/useSortable.js";
 export function Outline({ zones, ...handlers }) {
-    return (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Outline" }), zones.map((z) => _jsx(OutlineZone, { ...z, ...handlers }, z.zone))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Page Outline" }), zones.map((z) => _jsx(OutlineZone, { ...z, ...handlers }, z.zone))] }));
 }
-function OutlineZone({ zone, locked, canTake, nodes, selectedId, onSelect, onAddFirst, onMove, onMoveTo, onRemove }) {
+function OutlineZone({ zone, locked, canTake, nodes, selectedId, onSelect, onAddFirst, onMoveTo, onRemove }) {
     const sortable = useSortable({
         count: locked ? 0 : nodes.length,
         onDrop: (from, to) => onMoveTo(nodes[from].node.id, to),
     });
     return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { mono: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", canTake && "sm-outline-row--clickable"), onClick: () => { if (canTake)
-                    onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { className: "sm-outline-row__add", children: "+ Add" })] })), locked && nodes.map(({ node, label }) => (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { className: "sm-outline-row__note", children: "Locked" })] }, node.id))), !locked && nodes.length > 0 && (_jsx("div", { ref: sortable.containerRef, style: { display: "flex", flexDirection: "column", gap: 4 }, children: nodes.map(({ node, label }, i) => (_jsxs("div", { onClick: () => onSelect(node.id), style: sortable.rowStyle(i), className: cx("sm-outline-row", "sm-outline-row--clickable", "sm-outline-row--grip", node.id === selectedId && "sm-outline-row--selected", sortable.rowClass(i)), children: [_jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-outline-row__label", children: label }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); onMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); onMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] })] }, node.id))) }))] }));
+                    onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { className: "sm-outline-row__add", children: "+ Add" })] })), locked && nodes.map(({ node, label }) => (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { className: "sm-outline-row__note", children: "Locked" })] }, node.id))), !locked && nodes.length > 0 && (_jsx("div", { ref: sortable.containerRef, style: { display: "flex", flexDirection: "column", gap: 4 }, children: nodes.map(({ node, label }, i) => (_jsxs("div", { onClick: () => onSelect(node.id), style: sortable.rowStyle(i), className: cx("sm-outline-row", "sm-outline-row--clickable", "sm-outline-row--grip", node.id === selectedId && "sm-outline-row--selected", sortable.rowClass(i)), children: [_jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-outline-row__label", children: label }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] }, node.id))) }))] }));
 }

package/dist/admin/editor/PageSettings.js

@@ -8,7 +8,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // tab and the remove-from-locale button live there (spec 2026-09-10 page
 // fields §5).
 import { useEffect, useState } from "react";
-import { Field, SectionLabel } from "../ui/primitives.js";
+import { updatedLine } from "../ui/format.js";
+import { Field, InfoRow, SectionLabel } from "../ui/primitives.js";
 export function PageSettings({ record, locale, registry, path, fixed, onRename }) {
     const row = record.locales[locale];
     const [draft, setDraft] = useState({ title: row?.title ?? "", slug: row?.slug ?? "" });
@@ -37,5 +38,5 @@ export function PageSettings({ record, locale, registry, path, fixed, onRename }
             void commit(key);
         }
     };
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsxs(SectionLabel, { children: ["Page \u00B7 ", locale] }), fixed && _jsx("span", { className: "sm-hint", children: "Owned by code \u2014 change it in the registration." }), error && _jsx("span", { className: "sm-error", children: error }), _jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", disabled: fixed, value: draft.title, onChange: (e) => setDraft((d) => ({ ...d, title: e.target.value })), onBlur: () => void commit("title"), onKeyDown: onKey("title") }) }), _jsx(Field, { label: "Slug", hint: path ?? "", children: _jsx("input", { className: "sm-input sm-input--mono", disabled: fixed || isHome, value: draft.slug, onChange: (e) => setDraft((d) => ({ ...d, slug: e.target.value })), onBlur: () => void commit("slug"), onKeyDown: onKey("slug") }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsxs(SectionLabel, { children: ["Page \u00B7 ", locale] }), fixed && _jsx("span", { className: "sm-hint", children: "Owned by code \u2014 change it in the registration." }), error && _jsx("span", { className: "sm-error", children: error }), _jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", disabled: fixed, value: draft.title, onChange: (e) => setDraft((d) => ({ ...d, title: e.target.value })), onBlur: () => void commit("title"), onKeyDown: onKey("title") }) }), _jsx(Field, { label: "Slug", hint: path ?? "", children: _jsx("input", { className: "sm-input sm-input--mono", disabled: fixed || isHome, value: draft.slug, onChange: (e) => setDraft((d) => ({ ...d, slug: e.target.value })), onBlur: () => void commit("slug"), onKeyDown: onKey("slug") }) }), _jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] }));
 }

package/dist/admin/editor/global-edit.d.ts

@@ -0,0 +1,39 @@
+import type { EntryRecord, EntryUsage } from "../../entry-store.ts";
+import type { AdminOps, OpResult } from "../ops.ts";
+import { type SaveState } from "./autosave.ts";
+export type GlobalEditItem = {
+    name: string;
+    locale: string;
+    record: EntryRecord;
+    /** The merged draft fields; a visual item's settings under `$settings`. */
+    fields: Record<string, unknown>;
+    usage: EntryUsage[];
+    /** The last save's field errors by dotted path; cleared by a successful save. */
+    errors: Record<string, string>;
+};
+export type GlobalEditState = {
+    items: Record<string, GlobalEditItem>;
+    saveState: SaveState;
+    loadError: string | null;
+};
+export type GlobalEdit = {
+    getState(): GlobalEditState;
+    subscribe(listener: () => void): () => void;
+    /** Load an item for a locale once; a repeat while loaded or loading is a no-op. */
+    load(name: string, locale: string): Promise<void>;
+    /** Set the value at a dotted path (`tagline`, `$settings.tone`, `columns.1.title`); a debounced save follows. */
+    patch(name: string, path: string, value: unknown): void;
+    flush(): Promise<boolean>;
+    /** Flush, then set the item's status in its locale; the record updates on success. */
+    setStatus(name: string, status: "draft" | "published"): Promise<OpResult<EntryRecord>>;
+    /** Drop every item (a new locale, a new canvas). Flush BEFORE calling this. */
+    reset(): void;
+    dispose(): void;
+};
+export declare function createGlobalEdit(opts: {
+    ops: Pick<AdminOps, "globals">;
+    onSaved?: () => void;
+    debounceMs?: number;
+    retryBaseMs?: number;
+    retryCapMs?: number;
+}): GlobalEdit;

package/dist/admin/editor/global-edit.js

@@ -0,0 +1,124 @@
+import { setAtPath } from "../field-paths.js";
+import { createDraftAutosave } from "./autosave.js";
+export function createGlobalEdit(opts) {
+    let items = {};
+    let loadError = null;
+    let generation = 0;
+    const loading = new Set();
+    const rev = new Map();
+    const savedRev = new Map();
+    const listeners = new Set();
+    let snapshot = null;
+    const emit = () => { snapshot = null; for (const l of listeners)
+        l(); };
+    const dirty = () => Object.values(items).filter((i) => (rev.get(i.name) ?? 0) > (savedRev.get(i.name) ?? 0));
+    const autosave = createDraftAutosave({
+        read: () => { const d = dirty(); return d.length > 0 ? d : null; },
+        persist: async (list) => {
+            let failed = null;
+            for (const item of list) {
+                const at = rev.get(item.name) ?? 0;
+                let r;
+                try {
+                    r = await opts.ops.globals.save(item.name, item.locale, item.fields);
+                }
+                catch {
+                    r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+                }
+                const current = items[item.name];
+                if (r.ok) {
+                    savedRev.set(item.name, at);
+                    if (current)
+                        items = { ...items, [item.name]: { ...current, record: r.data, errors: {} } };
+                }
+                else {
+                    failed ?? (failed = r);
+                    if (current) {
+                        items = { ...items, [item.name]: { ...current, errors: Object.fromEntries((r.fields ?? []).map((f) => [f.field, f.message])) } };
+                    }
+                }
+            }
+            emit();
+            return failed ?? { ok: true, data: null };
+        },
+        onSaved: opts.onSaved,
+        debounceMs: opts.debounceMs,
+        retryBaseMs: opts.retryBaseMs,
+        retryCapMs: opts.retryCapMs,
+    });
+    autosave.subscribe(emit);
+    const getState = () => (snapshot ?? (snapshot = { items, saveState: autosave.getState(), loadError }));
+    return {
+        getState,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => { listeners.delete(listener); };
+        },
+        async load(name, locale) {
+            const key = `${name}/${locale}`;
+            if (items[name]?.locale === locale || loading.has(key))
+                return;
+            loading.add(key);
+            const gen = generation;
+            let r;
+            try {
+                r = await opts.ops.globals.get(name, locale);
+            }
+            catch {
+                r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+            }
+            loading.delete(key);
+            if (gen !== generation)
+                return; // reset() ran meanwhile — this canvas is gone
+            if (!r.ok) {
+                loadError = r.message;
+                emit();
+                return;
+            }
+            items = { ...items, [name]: { name, locale, record: r.data.record, fields: r.data.fields, usage: r.data.usage, errors: {} } };
+            loadError = null;
+            emit();
+        },
+        patch(name, path, value) {
+            const item = items[name];
+            if (!item)
+                return;
+            items = { ...items, [name]: { ...item, fields: setAtPath(item.fields, path, value) } };
+            rev.set(name, (rev.get(name) ?? 0) + 1);
+            emit();
+            autosave.mark();
+        },
+        flush: autosave.flush,
+        async setStatus(name, status) {
+            const item = items[name];
+            if (!item)
+                return { ok: false, code: "not_found", message: "This item hasn't loaded yet." };
+            if (!(await autosave.flush())) {
+                return { ok: false, code: "internal", message: "Couldn't save your latest changes — publish cancelled." };
+            }
+            let r;
+            try {
+                r = await opts.ops.globals.setStatus(name, item.locale, status);
+            }
+            catch {
+                r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+            }
+            if (r.ok && items[name]) {
+                items = { ...items, [name]: { ...items[name], record: r.data } };
+                emit();
+            }
+            return r;
+        },
+        reset() {
+            generation += 1;
+            items = {};
+            rev.clear();
+            savedRev.clear();
+            loading.clear();
+            loadError = null;
+            autosave.dispose();
+            emit();
+        },
+        dispose: autosave.dispose,
+    };
+}

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

@@ -0,0 +1,6 @@
+import type { AdminOps } from "../ops.ts";
+import { type GlobalEdit, type GlobalEditState } from "./global-edit.ts";
+export declare function useGlobalEdit({ ops, onSaved }: {
+    ops: Pick<AdminOps, "globals">;
+    onSaved?: () => void;
+}): GlobalEditState & Pick<GlobalEdit, "load" | "patch" | "flush" | "setStatus" | "reset">;

package/dist/admin/editor/useGlobalEdit.js

@@ -0,0 +1,18 @@
+// React glue for `createGlobalEdit`: one controller per editor mount, the
+// latest `onSaved` through a ref (it closes over the inline session), the
+// state through useSyncExternalStore. On unmount a pending save is
+// flushed first — the server call outlives the view — then the timers stop.
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createGlobalEdit } from "./global-edit.js";
+export function useGlobalEdit({ ops, onSaved }) {
+    const latest = useRef(onSaved);
+    latest.current = onSaved;
+    const [controller] = useState(() => createGlobalEdit({ ops, onSaved: () => latest.current?.() }));
+    useEffect(() => () => { void controller.flush(); controller.dispose(); }, [controller]);
+    const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+    return {
+        ...state,
+        load: controller.load, patch: controller.patch, flush: controller.flush,
+        setStatus: controller.setStatus, reset: controller.reset,
+    };
+}

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

@@ -1,6 +1,11 @@
 import type { ReactElement, ReactNode } from "react";
 import type { AdminField } from "../serialize.ts";
-export declare function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions, fieldKey, prefix, mark, inlinePath, onEditHere, }: {
+/** The two namespaces a `fields.` / `settings.` condition reads (spec 2026-09-14 §12). */
+export type WidgetScope = {
+    fields?: Record<string, unknown>;
+    settings?: Record<string, unknown>;
+};
+export declare function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions, fieldKey, prefix, mark, inlinePath, onEditHere, scope, emptyLabel, }: {
     descriptor: AdminField;
     value: unknown;
     onChange(value: unknown): void;
@@ -21,4 +26,12 @@ export declare function FieldWidget({ descriptor: d, value: valueProp, onChange,
     /** The path of the field being edited in the canvas: its richtext widget yields to a note. */
     inlinePath?: string;
     onEditHere?(): void;
+    /** The node's top-level values, for a subfield hidden by `fields.x` / `settings.x`. */
+    scope?: WidgetScope;
+    /** An optional radio's empty pill; `None` unless the caller says otherwise (`Default` for a styles step). */
+    emptyLabel?: string;
 }): ReactElement;
+/** The richtext field while it is edited in the canvas (spec 2026-09-10 §5). */
+export declare function InlineNote({ onEditHere }: {
+    onEditHere?(): void;
+}): import("react").JSX.Element;

package/dist/admin/forms/FieldWidget.js

@@ -3,16 +3,25 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { RichtextWidget } from "./RichtextWidget.js";
 import { MediaWidget } from "./MediaWidget.js";
 import { ListField } from "./ListField.js";
+import { RowsWidget } from "./RowsWidget.js";
 import { optionsOf } from "../../fields.js";
+import { isHidden } from "../../conditions.js";
+import { cssProblem } from "../../css.js";
 import { Button, Field, IconButton, Switch } from "../ui/primitives.js";
 import { patchObject } from "./list.js";
-const label = (key) => key.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase());
-export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions = [], fieldKey, prefix, mark, inlinePath, onEditHere, }) {
+/** A key as a caption, sentence case: `spacingTop` → "Spacing top", `css` → "Custom CSS". */
+const label = (key) => key === "css" ? "Custom CSS" : key.replace(/([A-Z])/g, (c) => ` ${c.toLowerCase()}`).replace(/^./, (c) => c.toUpperCase());
+export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions = [], fieldKey, prefix, mark, inlinePath, onEditHere, scope, emptyLabel, }) {
     const path = pathProp ?? fieldKey;
     const message = errors?.[path];
     // The descriptor's default shows while the value is absent (spec 2026-09-10 page fields §1).
     const value = valueProp === undefined && d.default !== undefined ? d.default : valueProp;
     const optionTitle = (o) => o.status === "draft" ? `${o.title} (draft)` : o.title;
+    // The custom section's rows (spec 2026-09-14 §6): the row cards instead of the generic list.
+    if (d.widget === "rows") {
+        const rows = _jsx(RowsWidget, { descriptor: d, value: value, onChange: onChange, errors: errors, path: path, inlinePath: inlinePath, onEditHere: onEditHere });
+        return bare ? rows : _jsx(Field, { label: label(fieldKey), error: message, asDiv: true, path: path, children: rows });
+    }
     let control;
     let counter;
     let asDiv = d.type === "refList";
@@ -39,8 +48,23 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
             break;
         }
         case "radio": {
-            asDiv = true; // several inputs: never inside one implicit label
-            control = (_jsx("div", { className: "sm-choices", role: "radiogroup", children: optionsOf(d.options).map((o) => (_jsxs("label", { className: "sm-choice", children: [_jsx("input", { type: "radio", name: path, value: o.value, checked: value === o.value, onChange: () => onChange(o.value) }), o.label] }, o.value))) }));
+            asDiv = true; // a row of buttons: never inside one implicit label
+            // Pills (spec 2026-09-14 §5); an optional radio starts with the empty pill, which stores nothing.
+            const empty = value === undefined || value === "";
+            const pills = [
+                ...(d.optional === true ? [{ value: undefined, label: emptyLabel ?? "None" }] : []),
+                ...optionsOf(d.options),
+            ];
+            control = (_jsx("div", { className: "sm-pills", role: "radiogroup", children: pills.map((o) => (_jsx("button", { type: "button", className: "sm-pill", "aria-pressed": o.value === undefined ? empty : value === o.value, onClick: () => onChange(o.value), children: o.label }, o.value ?? ""))) }));
+            break;
+        }
+        case "css": {
+            // The custom-CSS box (spec 2026-09-14 §4): the refusal shows as it is typed; publish refuses it too.
+            const text = typeof value === "string" ? value : "";
+            const problem = text === "" ? null : cssProblem(text);
+            control = (_jsx("textarea", { className: "sm-textarea sm-css", rows: 6, spellCheck: false, value: text, onChange: (e) => onChange(e.target.value === "" ? undefined : e.target.value) }));
+            if (problem)
+                return _jsx(Field, { label: label(fieldKey), error: problem, path: path, children: control });
             break;
         }
         case "checkboxes": {
@@ -77,17 +101,20 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
         case "object": {
             asDiv = true;
             const obj = (value && typeof value === "object" && !Array.isArray(value) ? value : {});
-            control = (_jsx("div", { className: "sm-group", children: Object.entries(d.fields ?? {}).map(([k, sub]) => (_jsx(FieldWidget, { fieldKey: k, descriptor: sub, value: obj[k], errors: errors, path: `${path}.${k}`, inlinePath: inlinePath, onEditHere: onEditHere, onChange: (v) => onChange(patchObject(obj, k, v, d.optional === true)) }, k))) }));
+            control = (_jsx("div", { className: "sm-group", children: Object.entries(d.fields ?? {})
+                    .filter(([, sub]) => !isHidden(sub, { self: obj, fields: scope?.fields, settings: scope?.settings }))
+                    .map(([k, sub]) => (_jsx(FieldWidget, { fieldKey: k, descriptor: sub, value: obj[k], errors: errors, path: `${path}.${k}`, inlinePath: inlinePath, onEditHere: onEditHere, scope: scope, onChange: (v) => onChange(patchObject(obj, k, v, d.optional === true)) }, k))) }));
             break;
         }
         case "list": {
-            asDiv = true;
+            // The list renders its own head (label, counter, Collapse all) so the toggle sits beside the label.
             const items = Array.isArray(value) ? value : [];
             const item = d.item ?? { type: "text" };
-            if (typeof d.max === "number")
-                counter = `${items.length} of ${d.max}`;
-            control = (_jsx(ListField, { descriptor: d, items: items, onChange: onChange, path: path, renderItem: (it, i) => (_jsx(FieldWidget, { fieldKey: String(i), descriptor: item, value: it, errors: errors, path: `${path}.${i}`, bare: true, inlinePath: inlinePath, onEditHere: onEditHere, onChange: (v) => onChange(items.map((x, j) => (j === i ? v : x))) })) }));
-            break;
+            const count = typeof d.max === "number" ? `${items.length} of ${d.max}` : undefined;
+            const list = (_jsx(ListField, { descriptor: d, items: items, onChange: onChange, path: path, head: bare ? undefined : { label: label(fieldKey), mark, counter: count, error: message }, renderItem: (it, i) => (_jsx(FieldWidget, { fieldKey: String(i), descriptor: item, value: it, errors: errors, path: `${path}.${i}`, bare: true, inlinePath: inlinePath, onEditHere: onEditHere, scope: scope, onChange: (v) => onChange(items.map((x, j) => (j === i ? v : x))) })) }));
+            if (!bare)
+                return list;
+            return _jsxs(_Fragment, { children: [list, message && _jsx("span", { className: "sm-error", children: message })] });
         }
         default:
             control = _jsx("textarea", { className: "sm-textarea", disabled: true, value: JSON.stringify(value ?? null, null, 2), rows: 2 });
@@ -101,6 +128,6 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
     return (_jsx(Field, { label: label(fieldKey), mark: mark, counter: counter, error: message, asDiv: asDiv, path: path, children: control }));
 }
 /** The richtext field while it is edited in the canvas (spec 2026-09-10 §5). */
-function InlineNote({ onEditHere }) {
+export function InlineNote({ onEditHere }) {
     return (_jsxs("div", { className: "sm-inline-note", children: [_jsx("span", { children: "Editing in the canvas" }), _jsx(Button, { variant: "secondary", onClick: onEditHere, children: "Edit here" })] }));
 }

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

@@ -1,10 +1,18 @@
 import { type ReactNode } from "react";
 import type { AdminField } from "../serialize.ts";
-export declare function ListField({ descriptor: d, items, onChange, renderItem, path }: {
+export declare function ListField({ descriptor: d, items, onChange, renderItem, path, head }: {
     descriptor: AdminField;
     items: unknown[];
     onChange(value: unknown[]): void;
     renderItem(item: unknown, index: number): ReactNode;
     /** The list's dotted path; each row carries `<path>.<i>` for the canvas reveal. */
     path?: string;
+    /** The field head to render around the rows (label, mark, counter, error), so the
+     *  collapse toggle can sit in it; absent for a bare list (a list item). */
+    head?: {
+        label: ReactNode;
+        mark?: ReactNode;
+        counter?: ReactNode;
+        error?: ReactNode;
+    };
 }): import("react").JSX.Element;

package/dist/admin/forms/ListField.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// A list field's rows: collapse per row, add and remove, and reordering
-// by drag (useSortable), by the arrow keys on the grip, or by the ↑/↓
-// buttons — every path through the pure helpers in ./list.ts. The item
-// widget is rendered by the caller (FieldWidget), which keeps this file
-// free of the recursion.
+// A list field's rows: collapse per row (and all at once from the head's
+// Collapse all / Expand all), add and remove, and reordering by drag
+// (useSortable), by the arrow keys on the grip, or by the ↑/↓ buttons —
+// every path through the pure helpers in ./list.ts. The item widget is
+// rendered by the caller (FieldWidget), which keeps this file free of
+// the recursion.
 import { useState } from "react";
-import { Button, Grip, IconButton } from "../ui/primitives.js";
+import { Button, Field, Grip, IconButton } from "../ui/primitives.js";
 import { useSortable } from "../ui/useSortable.js";
 import { addItem, itemSummary, moveIndex, moveItem, removeIndex, removeItem } from "./list.js";
-export function ListField({ descriptor: d, items, onChange, renderItem, path }) {
+export function ListField({ descriptor: d, items, onChange, renderItem, path, head }) {
     // Keyed to the item's index rather than to `key={i}` position, so a move
     // or remove doesn't hand a row someone else's open/closed state.
     const [collapsed, setCollapsed] = useState(() => new Set());
@@ -22,7 +23,10 @@ export function ListField({ descriptor: d, items, onChange, renderItem, path })
         setCollapsed((prev) => moveIndex(prev, from, to));
     };
     const sortable = useSortable({ count: items.length, onDrop: move });
-    return (_jsxs("div", { className: "sm-list", ref: sortable.containerRef, children: [items.map((it, i) => (_jsx(ListRow, { index: i, count: items.length, summary: itemSummary(it, i), open: !collapsed.has(i), path: path === undefined ? undefined : `${path}.${i}`, style: sortable.rowStyle(i), className: sortable.rowClass(i), grip: _jsx(Grip, { ...sortable.handleProps(i) }), onToggle: () => setCollapsed((prev) => {
+    // One toggle for the whole list: Collapse all until every row is closed, then Expand all.
+    const allCollapsed = items.length > 0 && items.every((_, i) => collapsed.has(i));
+    const toggleAll = items.length > 1 && (_jsx("button", { type: "button", className: "sm-field__action", onClick: () => setCollapsed(allCollapsed ? new Set() : new Set(items.map((_, i) => i))), children: allCollapsed ? "Expand all" : "Collapse all" }));
+    const rows = (_jsxs("div", { className: "sm-list", ref: sortable.containerRef, children: [items.map((it, i) => (_jsx(ListRow, { index: i, count: items.length, summary: itemSummary(it, i), open: !collapsed.has(i), path: path === undefined ? undefined : `${path}.${i}`, style: sortable.rowStyle(i), className: sortable.rowClass(i), grip: _jsx(Grip, { ...sortable.handleProps(i) }), onToggle: () => setCollapsed((prev) => {
                     const next = new Set(prev);
                     if (next.has(i))
                         next.delete(i);
@@ -33,6 +37,10 @@ export function ListField({ descriptor: d, items, onChange, renderItem, path })
                     onChange(removeItem(items, i));
                     setCollapsed((prev) => removeIndex(prev, i));
                 }, children: renderItem(it, i) }, i))), _jsx(Button, { variant: "secondary", disabled: atMax, onClick: () => onChange(addItem(items, d)), children: "Add" })] }));
+    if (!head)
+        return rows;
+    // A div, not a label: a label would press the first row's button on any click.
+    return (_jsx(Field, { label: head.label, mark: head.mark, counter: head.counter, action: toggleAll || undefined, error: head.error, asDiv: true, path: path, children: rows }));
 }
 /** One list item: a header with the grip, the summary and the row
  *  controls, the item's widget underneath while expanded. Header is a