smoodly 0.0.16 → 0.0.17

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/{shared-edit.d.ts → global-edit.d.ts}

@@ -1,27 +1,27 @@
 import type { EntryRecord, EntryUsage } from "../../entry-store.ts";
 import type { AdminOps, OpResult } from "../ops.ts";
 import { type SaveState } from "./autosave.ts";
-export type SharedEditItem = {
+export type GlobalEditItem = {
     name: string;
     locale: string;
     record: EntryRecord;
-    /** The merged draft fields; a visual item's styles under `$styles`. */
+    /** 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 SharedEditState = {
-    items: Record<string, SharedEditItem>;
+export type GlobalEditState = {
+    items: Record<string, GlobalEditItem>;
     saveState: SaveState;
     loadError: string | null;
 };
-export type SharedEdit = {
-    getState(): SharedEditState;
+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`, `$styles.tone`, `columns.1.title`); a debounced save follows. */
+    /** 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. */
@@ -30,10 +30,10 @@ export type SharedEdit = {
     reset(): void;
     dispose(): void;
 };
-export declare function createSharedEdit(opts: {
-    ops: Pick<AdminOps, "shared">;
+export declare function createGlobalEdit(opts: {
+    ops: Pick<AdminOps, "globals">;
     onSaved?: () => void;
     debounceMs?: number;
     retryBaseMs?: number;
     retryCapMs?: number;
-}): SharedEdit;
+}): GlobalEdit;

package/dist/admin/editor/{shared-edit.js → global-edit.js}

@@ -1,6 +1,6 @@
 import { setAtPath } from "../field-paths.js";
 import { createDraftAutosave } from "./autosave.js";
-export function createSharedEdit(opts) {
+export function createGlobalEdit(opts) {
     let items = {};
     let loadError = null;
     let generation = 0;
@@ -20,7 +20,7 @@ export function createSharedEdit(opts) {
                 const at = rev.get(item.name) ?? 0;
                 let r;
                 try {
-                    r = await opts.ops.shared.save(item.name, item.locale, item.fields);
+                    r = await opts.ops.globals.save(item.name, item.locale, item.fields);
                 }
                 catch {
                     r = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -62,7 +62,7 @@ export function createSharedEdit(opts) {
             const gen = generation;
             let r;
             try {
-                r = await opts.ops.shared.get(name, locale);
+                r = await opts.ops.globals.get(name, locale);
             }
             catch {
                 r = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -98,7 +98,7 @@ export function createSharedEdit(opts) {
             }
             let r;
             try {
-                r = await opts.ops.shared.setStatus(name, item.locale, status);
+                r = await opts.ops.globals.setStatus(name, item.locale, status);
             }
             catch {
                 r = { ok: false, code: "internal", message: "Couldn't reach the server." };

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/{useSharedEdit.js → useGlobalEdit.js}

@@ -1,13 +1,13 @@
-// React glue for `createSharedEdit`: one controller per editor mount, the
+// 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 { createSharedEdit } from "./shared-edit.js";
-export function useSharedEdit({ ops, onSaved }) {
+import { createGlobalEdit } from "./global-edit.js";
+export function useGlobalEdit({ ops, onSaved }) {
     const latest = useRef(onSaved);
     latest.current = onSaved;
-    const [controller] = useState(() => createSharedEdit({ ops, onSaved: () => latest.current?.() }));
+    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 {

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

package/dist/admin/forms/RichtextElementCard.js

@@ -2,16 +2,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The element node view (spec 2026-09-08 block nodes §3): the node view IS
 // the form — a header (icon, title, collapse, delete) and the element's
-// fields then styles through FieldWidget, reading and writing attrs.
+// fields then settings through FieldWidget, reading and writing attrs.
 // A richtext field inside mounts a nested RichtextWidget with its own
-// toolset. Errors come from the enclosing form under
+// toolset. Settings sit under a divider; a field hidden by a condition
+// leaves the card — the element's own values are the scope (spec
+// 2026-09-14 §12). Errors come from the enclosing form under
 // `<path>.elements.<i>.<key>`, i being this node's index among the
 // document's element nodes. Collapse is component state only: a card
 // starts collapsed (2026-09-09) unless it holds nothing yet — a freshly
 // inserted element opens, so its fields can be filled straight away.
 import { useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
-import { IconButton } from "../ui/primitives.js";
+import { isHidden } from "../../conditions.js";
+import { IconButton, SectionLabel } from "../ui/primitives.js";
 import { FieldWidget } from "./FieldWidget.js";
 import { useElements } from "./elements-context.js";
 import { cardClass, useRichtextForm } from "./richtext-form-context.js";
@@ -26,12 +29,15 @@ export function RichtextElementCard({ node, editor, getPos, updateAttributes, de
     const name = String(node.attrs.name ?? "");
     const element = elements.find((e) => e.name === name);
     const fields = (node.attrs.fields && typeof node.attrs.fields === "object" ? node.attrs.fields : {});
-    const styles = (node.attrs.styles && typeof node.attrs.styles === "object" ? node.attrs.styles : {});
+    const settings = (node.attrs.settings && typeof node.attrs.settings === "object" ? node.attrs.settings : {});
     const [open, setOpen] = useState(() => isBlank(fields));
     const pos = getPos();
     const index = typeof pos === "number" ? elementIndexAt(editor.state.doc, pos) : 0;
     const base = `${form.path}.elements.${index}`;
     const select = () => { if (typeof pos === "number")
         editor.commands.setNodeSelection(pos); };
-    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [Object.entries(element.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), Object.entries(element.styles).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: styles[key], path: `${base}.styles.${key}`, onChange: (v) => updateAttributes({ styles: { ...styles, [key]: v } }) }, `style-${key}`)))] }))] }));
+    const scope = { fields, settings };
+    const visibleFields = Object.entries(element?.fields ?? {}).filter(([, d]) => !isHidden(d, { self: fields, ...scope }));
+    const visibleSettings = Object.entries(element?.settings ?? {}).filter(([, d]) => !isHidden(d, { self: settings, ...scope }));
+    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [visibleFields.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, scope: scope, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), visibleSettings.length > 0 && _jsx(SectionLabel, { mono: true, children: "Settings" }), visibleSettings.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: settings[key], errors: form.errors, path: `${base}.settings.${key}`, scope: scope, onChange: (v) => updateAttributes({ settings: { ...settings, [key]: v } }) }, `setting-${key}`)))] }))] }));
 }

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

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { AdminField } from "../serialize.ts";
+import { type CustomRow } from "../../custom/index.ts";
+export declare function RowsWidget({ descriptor, value, onChange, errors, path, inlinePath, onEditHere }: {
+    descriptor: AdminField;
+    value: unknown;
+    onChange(rows: CustomRow[]): void;
+    errors?: Record<string, string>;
+    path: string;
+    /** The path of the column being edited in the canvas: its widget yields to a note. */
+    inlinePath?: string;
+    onEditHere?(): void;
+}): ReactElement;

package/dist/admin/forms/RowsWidget.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Field, IconButton, Switch } from "../ui/primitives.js";
+import { FieldWidget, InlineNote } from "./FieldWidget.js";
+import { RichtextWidget } from "./RichtextWidget.js";
+import { SpanBar } from "./SpanBar.js";
+import { moveItem, removeItem } from "./list.js";
+import { MAX_COLUMNS, defaultRow, presetsFor, setColumnCount } from "../../custom/index.js";
+const isRow = (r) => typeof r === "object" && r !== null && Array.isArray(r.columns) && Array.isArray(r.spans);
+export function RowsWidget({ descriptor, value, onChange, errors, path, inlinePath, onEditHere }) {
+    const rows = Array.isArray(value) ? value.filter(isRow) : [];
+    const item = descriptor.item?.fields ?? {};
+    const columnDescriptor = (item.columns?.item ?? { type: "richtext" });
+    const patch = (i, row) => onChange(rows.map((r, j) => (j === i ? row : r)));
+    return (_jsxs("div", { className: "sm-rowcards", children: [rows.map((row, i) => {
+                const n = row.columns.length;
+                const base = `${path}.${i}`;
+                const presets = presetsFor(n);
+                return (_jsxs("div", { className: "sm-rowcard", "data-sm-path": base, children: [_jsxs("div", { className: "sm-rowcard__head", children: [_jsxs("span", { className: "sm-rowcard__title", children: ["Row ", i + 1] }), _jsx(IconButton, { label: "Move up", disabled: i === 0, onClick: () => onChange(moveItem(rows, i, i - 1)), children: "\u2191" }), _jsx(IconButton, { label: "Move down", disabled: i === rows.length - 1, onClick: () => onChange(moveItem(rows, i, i + 1)), children: "\u2193" }), _jsx(IconButton, { label: "Remove row", disabled: rows.length === 1, onClick: () => onChange(removeItem(rows, i)), children: "\u00D7" })] }), _jsx(Field, { label: "Columns", asDiv: true, error: errors?.[`${base}.columns`] ?? errors?.[`${base}.spans`], children: _jsxs("div", { className: "sm-stepper", children: [_jsx(IconButton, { label: "Fewer columns", disabled: n <= 1, onClick: () => patch(i, setColumnCount(row, n - 1)), children: "\u2212" }), _jsx("span", { className: "sm-stepper__value", children: n }), _jsx(IconButton, { label: "More columns", disabled: n >= MAX_COLUMNS, onClick: () => patch(i, setColumnCount(row, n + 1)), children: "+" })] }) }), n > 1 && (_jsxs(_Fragment, { children: [_jsxs(Field, { label: "Widths", asDiv: true, path: `${base}.spans`, children: [_jsx(SpanBar, { spans: row.spans, onChange: (spans) => patch(i, { ...row, spans }) }), presets.length > 0 && (_jsx("div", { className: "sm-rowcard__presets", children: presets.map((p) => (_jsx(Button, { variant: "secondary", onClick: () => patch(i, { ...row, spans: p.spans }), children: p.label }, p.label))) }))] }), _jsx(FieldWidget, { fieldKey: "gap", descriptor: item.gap, value: row.gap, path: `${base}.gap`, onChange: (v) => patch(i, { ...row, gap: v }) }), _jsx(FieldWidget, { fieldKey: "verticalAlign", descriptor: item.align, value: row.align, path: `${base}.align`, onChange: (v) => patch(i, { ...row, align: v }) }), _jsx(Field, { label: "Reverse on mobile", asDiv: true, path: `${base}.reverse`, children: _jsx(Switch, { checked: row.reverse === true, onChange: (v) => patch(i, { ...row, reverse: v }), label: "Reverse on mobile" }) })] })), row.columns.map((doc, j) => {
+                            const colPath = `${base}.columns.${j}`;
+                            return (_jsx(Field, { label: `Column ${j + 1}`, asDiv: true, path: colPath, error: errors?.[colPath], children: inlinePath === colPath
+                                    ? _jsx(InlineNote, { onEditHere: onEditHere })
+                                    : _jsx(RichtextWidget, { value: doc, toolset: columnDescriptor.toolset, errors: errors, path: colPath, onChange: (next) => patch(i, { ...row, columns: row.columns.map((c, k) => (k === j ? next : c)) }) }) }, j));
+                        })] }, i));
+            }), _jsx(Button, { variant: "secondary", onClick: () => onChange([...rows, defaultRow()]), children: "+ Add row" })] }));
+}

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

@@ -0,0 +1,5 @@
+import { type ReactElement } from "react";
+export declare function SpanBar({ spans, onChange }: {
+    spans: number[];
+    onChange(spans: number[]): void;
+}): ReactElement;

package/dist/admin/forms/SpanBar.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The width bar (spec 2026-09-14 §6): one box per column sized by its
+// span, a handle on each boundary dragged in twelfths (pointer events on
+// the bar's own width — no library) or nudged with the arrow keys.
+import { useRef } from "react";
+import { setSpan, spanAtX } from "../../custom/index.js";
+export function SpanBar({ spans, onChange }) {
+    const bar = useRef(null);
+    const drag = (handle) => (e) => {
+        const el = bar.current;
+        if (!el)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rect = el.getBoundingClientRect();
+        let current = spans;
+        const move = (ev) => {
+            const next = setSpan(current, handle, spanAtX(ev.clientX - rect.left, rect.width, current, handle));
+            if (next[handle] !== current[handle]) {
+                current = next;
+                onChange(next);
+            }
+        };
+        const up = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+    };
+    const key = (handle) => (e) => {
+        const delta = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
+        if (delta === 0)
+            return;
+        e.preventDefault();
+        onChange(setSpan(spans, handle, spans[handle] + delta));
+    };
+    return (_jsx("div", { className: "sm-spanbar", ref: bar, children: spans.map((s, i) => (_jsxs("div", { className: "sm-spanbar__col", style: { flex: s }, children: [s, i < spans.length - 1 && (_jsx("button", { type: "button", className: "sm-spanbar__handle", role: "slider", "aria-label": `Resize columns ${i + 1} and ${i + 2}`, "aria-valuemin": 1, "aria-valuemax": s + spans[i + 1] - 1, "aria-valuenow": s, onPointerDown: drag(i), onKeyDown: key(i) }))] }, `c${i}`))) }));
+}

package/dist/admin/forms/richtext-insert.d.ts

@@ -18,7 +18,7 @@ export type ElementNodeJSON = {
     attrs: {
         name: string;
         fields: Record<string, unknown>;
-        styles: Record<string, unknown>;
+        settings: Record<string, unknown>;
     };
 };
 export type ImageNodeJSON = {
@@ -31,7 +31,7 @@ export type ImageNodeJSON = {
         caption: string;
     };
 };
-/** A fresh element: sample first, then the empties, styles from their defaults — as a section insertion does. */
+/** A fresh element: sample first, then the empties, settings from their defaults — as a section insertion does. */
 export declare function elementNode(element: AdminElement): ElementNodeJSON;
 export declare function imageNode(assetId: string): ImageNodeJSON;
 /** How many element nodes precede `pos` — the validator's `elements.<i>` index. */

package/dist/admin/forms/richtext-insert.js

@@ -15,10 +15,10 @@ export function filterItems(items, query) {
     const q = query.trim().toLowerCase();
     return q === "" ? items : items.filter((i) => i.title.toLowerCase().includes(q));
 }
-/** A fresh element: sample first, then the empties, styles from their defaults — as a section insertion does. */
+/** A fresh element: sample first, then the empties, settings from their defaults — as a section insertion does. */
 export function elementNode(element) {
-    const { fields, styles } = nodeFromSample(element, "");
-    return { type: "element", attrs: { name: element.name, fields, styles: styles ?? {} } };
+    const { fields, settings } = nodeFromSample(element, "");
+    return { type: "element", attrs: { name: element.name, fields, settings: settings ?? {} } };
 }
 export function imageNode(assetId) {
     return { type: "image", attrs: { image: { asset: assetId }, caption: "" } };

package/dist/admin/forms/richtext-nodes.js

@@ -36,7 +36,7 @@ export const ElementNode = Node.create({
     atom: true,
     draggable: true,
     addAttributes() {
-        return { name: { default: "" }, fields: jsonAttr("fields", {}), styles: jsonAttr("styles", {}) };
+        return { name: { default: "" }, fields: jsonAttr("fields", {}), settings: jsonAttr("settings", {}) };
     },
     parseHTML() { return [{ tag: "div[data-smoodly-element]" }]; },
     renderHTML({ HTMLAttributes }) { return ["div", mergeAttributes({ "data-smoodly-element": "" }, HTMLAttributes)]; },