smoodly 0.0.16 → 0.0.18

package/dist/admin/tree-ops.js

@@ -1,4 +1,4 @@
-import { SHARED_NODE_TYPE } from "../shared.js";
+import { GLOBAL_NODE_TYPE } from "../global.js";
 import { setAtPath } from "./field-paths.js";
 export function zoneOf(tree, id) {
     for (const [zone, nodes] of Object.entries(tree.zones)) {
@@ -64,6 +64,18 @@ export function patchNode(tree, id, ns, key, value) {
         return tree;
     return withZone(tree, zone, tree.zones[zone].map((n) => (n.id === id ? { ...n, [ns]: { ...(n[ns] ?? {}), [key]: value } } : n)));
 }
+/** The node's custom CSS (spec 2026-09-14 §4); undefined or "" removes the key. */
+export function patchNodeCss(tree, id, css) {
+    const zone = zoneOf(tree, id);
+    if (!zone)
+        return tree;
+    return withZone(tree, zone, tree.zones[zone].map((n) => {
+        if (n.id !== id)
+            return n;
+        const { css: _old, ...rest } = n;
+        return css === undefined || css === "" ? rest : { ...rest, css };
+    }));
+}
 /** patchNode for a dotted path inside `fields` (spec 2026-09-10 §1):
  *  `points.2.heading` sets one item's heading and copies only the spine. */
 export function patchNodePath(tree, id, path, value) {
@@ -89,11 +101,11 @@ export function allowedSections(policy, all) {
 }
 /** The visual items the picker offers in a zone: materialized (an id is
  *  known) and rendering a section the zone's policy allows. */
-export function allowedShared(policy, shared, sharedIds) {
+export function allowedGlobals(policy, globals, globalIds) {
     if (!policy || policy.kind === "locked")
         return [];
-    return shared.filter((s) => {
-        if (s.section === undefined || sharedIds[s.name] === undefined)
+    return globals.filter((s) => {
+        if (s.section === undefined || globalIds[s.name] === undefined)
             return false;
         return policy.allow === "*" || policy.allow.includes(s.section);
     });
@@ -101,7 +113,7 @@ export function allowedShared(policy, shared, sharedIds) {
 /** 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 function placementNode(item, ref, id) {
-    return { id, type: SHARED_NODE_TYPE, fields: { item: item.name, ref } };
+    return { id, type: GLOBAL_NODE_TYPE, fields: { item: item.name, ref } };
 }
 /** 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
@@ -111,10 +123,10 @@ const EMPTY_BY_TYPE = { refList: [], object: {} };
  * 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. */
 const ABSENT_WHEN_UNSAMPLED = new Set(["image", "video", "file", "number"]);
-/** Also fills an element node (an `AdminElement` is a section shape plus contexts). */
+/** 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) {
     const fields = {};
-    const styles = {};
+    const settings = {};
     for (const [key, d] of Object.entries(section.fields)) {
         const sampled = section.sample?.[key] ?? d.default ?? (d.type === "boolean" ? false : undefined);
         if (sampled !== undefined)
@@ -124,20 +136,20 @@ export function nodeFromSample(section, id) {
         else
             fields[key] = EMPTY_BY_TYPE[d.type] ?? "";
     }
-    for (const [key, d] of Object.entries(section.styles)) {
+    for (const [key, d] of Object.entries(section.settings)) {
         const v = section.sample?.[key] ?? d.default;
         if (v !== undefined)
-            styles[key] = v;
+            settings[key] = v;
     }
-    return { id, type: section.name, fields, styles };
+    return { id, type: section.name, fields, settings };
 }
 /** 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 shared item, a placement), for every
+ * 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, sharedIds = {}) {
+export function fillLockedZones(tree, policies, sections, globalIds = {}) {
     let next = null;
     for (const [zone, policy] of Object.entries(policies)) {
         if (policy.kind !== "locked")
@@ -145,14 +157,14 @@ export function fillLockedZones(tree, policies, sections, sharedIds = {}) {
         if ((tree.zones[zone] ?? []).length > 0)
             continue;
         let node = null;
-        if (policy.shared !== undefined) {
-            // Bound to a shared item (spec 2026-09-07 §4): a placement, once
+        if (policy.global !== undefined) {
+            // Bound to a global item (spec 2026-09-07 §4): a placement, once
             // the editor has loaded the item's row id; until then leave the
             // zone empty rather than seed a plain section there.
-            const ref = sharedIds[policy.shared];
+            const ref = globalIds[policy.global];
             if (ref === undefined)
                 continue;
-            node = placementNode({ name: policy.shared }, ref, newNodeId(SHARED_NODE_TYPE));
+            node = placementNode({ name: policy.global }, ref, newNodeId(GLOBAL_NODE_TYPE));
         }
         else {
             const section = sections.find((s) => s.name === policy.component);

package/dist/admin/ui/ActionMenu.d.ts

@@ -4,8 +4,10 @@ export type ActionMenuItem = {
     disabled?: boolean;
     danger?: boolean;
 };
-export declare function ActionMenu({ label, items, disabled }: {
+export declare function ActionMenu({ label, items, disabled, small }: {
     label: string;
     items: ActionMenuItem[];
     disabled?: boolean;
+    /** The smaller round button, next to a small Publish. */
+    small?: boolean;
 }): import("react").JSX.Element;

package/dist/admin/ui/ActionMenu.js

@@ -4,10 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // publish flow §2). Items are always rendered and disabled when they do
 // not apply — the layout never shifts and the editor learns what exists.
 // The popover is the Pages list's row menu shape (`.sm-picker`), anchored
-// under the button instead of at the pointer.
+// under the button instead of at the pointer, hanging from the button's
+// right edge (every control sits at its bar's or card's right).
 import { useEffect, useRef, useState } from "react";
 import { cx } from "./primitives.js";
-export function ActionMenu({ label, items, disabled }) {
+export function ActionMenu({ label, items, disabled, small = false }) {
     const [open, setOpen] = useState(false);
     const ref = useRef(null);
     useEffect(() => {
@@ -21,5 +22,5 @@ export function ActionMenu({ label, items, disabled }) {
         document.addEventListener("keydown", onKey);
         return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
     }, [open]);
-    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { type: "button", className: "sm-dotmenu", "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, onClick: () => setOpen((o) => !o), children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { role: "menu", className: "sm-picker sm-picker--menu", children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(false); item.run(); }, children: item.label }, item.label))) }))] }));
+    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, onClick: () => setOpen((o) => !o), children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { role: "menu", className: "sm-picker sm-picker--menu", children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(false); item.run(); }, children: item.label }, item.label))) }))] }));
 }

package/dist/admin/ui/HistoryModal.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // the left — newest first, the unpublished draft tagged Draft and the row
 // the site serves Live — and the selected version on the right, rendered
 // by the screen that opened it (an iframe of the site's draft route for a
-// page, a disabled form for an entry or a shared item). Restore confirms,
+// page, a disabled form for an entry or a global item). Restore confirms,
 // hands the id to the screen, and closes once the restore landed.
 import { useEffect, useState } from "react";
 import { versionTime } from "./format.js";

package/dist/admin/ui/PublishControl.d.ts

@@ -13,7 +13,7 @@ export declare function publishMenu(opts: {
     onUnpublish(): void;
     onHistory?(): void;
 }): ActionMenuItem[];
-export declare function PublishControl({ status, pending, busy, flash, disabled, onPublish, onDiscard, onUnpublish, onHistory, }: {
+export declare function PublishControl({ status, pending, busy, flash, disabled, compact, onPublish, onDiscard, onUnpublish, onHistory, }: {
     /** The locale's stored state; null while the document loads or before it exists. */
     status: LocaleStatus | null;
     /** The editor holds a change the store has not confirmed (dirty, or a save pending / in flight / failed). */
@@ -28,4 +28,6 @@ export declare function PublishControl({ status, pending, busy, flash, disabled,
     onUnpublish(): void;
     /** Opens History (spec 2026-09-13 history §5). Absent = no History item (the canvas card). */
     onHistory?(): void;
+    /** The small button and menu — the global inspector's control, so it never reads as the page's Publish. */
+    compact?: boolean;
 }): import("react").JSX.Element;

package/dist/admin/ui/PublishControl.js

@@ -16,9 +16,9 @@ export function publishMenu(opts) {
         { label: "Unpublish", disabled: !opts.can.unpublish, run: opts.onUnpublish },
     ];
 }
-export function PublishControl({ status, pending = false, busy = null, flash = false, disabled = false, onPublish, onDiscard, onUnpublish, onHistory, }) {
+export function PublishControl({ status, pending = false, busy = null, flash = false, disabled = false, compact = false, onPublish, onDiscard, onUnpublish, onHistory, }) {
     const can = publishActions(status, pending);
     const inert = disabled || busy !== null;
     const word = busy ? BUSY_WORD[busy] : flash ? "Published ✓" : "Publish";
-    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [status && _jsx(StatusBadge, { status: statusLabel(status) }), _jsx(Button, { variant: flash && !busy ? "ok" : "primary", disabled: inert || !can.publish, onClick: onPublish, children: word }), _jsx(ActionMenu, { label: "More actions", disabled: inert || status === null, items: publishMenu({ can, onDiscard, onUnpublish, onHistory }) })] }));
+    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [status && _jsx(StatusBadge, { status: statusLabel(status) }), _jsx(Button, { variant: flash && !busy ? "ok" : "primary", size: compact ? "sm" : "md", disabled: inert || !can.publish, onClick: onPublish, children: word }), _jsx(ActionMenu, { label: "More actions", disabled: inert || status === null, small: compact, items: publishMenu({ can, onDiscard, onUnpublish, onHistory }) })] }));
 }

package/dist/admin/ui/primitives.d.ts

@@ -14,7 +14,7 @@ export declare function Logo({ height }: {
 export declare function ThemeToggle(): import("react").JSX.Element;
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: "primary" | "secondary" | "ghost" | "danger" | "ok";
-    size?: "md" | "lg";
+    size?: "sm" | "md" | "lg";
 };
 export declare function Button({ variant, size, className, ...rest }: ButtonProps): import("react").JSX.Element;
 /** The same shape as Button, for navigations that must stay real links. */
@@ -44,11 +44,13 @@ export declare function Grip(props: ButtonHTMLAttributes<HTMLButtonElement>): im
 /** Label + optional counter above a control — the handoff's Input/Textarea head.
  *  `asDiv` for groups holding more than one control: an implicit <label>
  *  activates its first labelable descendant, so wrapping several is a trap. */
-export declare function Field({ label, mark, counter, hint, error, asDiv, children, style, className, path }: {
+export declare function Field({ label, mark, counter, action, hint, error, asDiv, children, style, className, path }: {
     label?: ReactNode;
     /** A small glyph after the label — the field's "same in every language" mark. */
     mark?: ReactNode;
     counter?: ReactNode;
+    /** A small text action at the head's right end, after the counter (a list's Collapse all). */
+    action?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
     asDiv?: boolean;

package/dist/admin/ui/primitives.js

@@ -42,7 +42,7 @@ export function ThemeToggle() {
     return (_jsxs("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: toggle, children: [_jsxs("span", { className: "sm-when-light", children: [_jsx(Moon, { ...ICON }), "Dark mode"] }), _jsxs("span", { className: "sm-when-dark", children: [_jsx(Sun, { ...ICON }), "Light mode"] })] }));
 }
 export function Button({ variant = "primary", size = "md", className, ...rest }) {
-    return (_jsx("button", { type: "button", className: cx("sm-btn", `sm-btn--${variant}`, size === "lg" && "sm-btn--lg", className), ...rest }));
+    return (_jsx("button", { type: "button", className: cx("sm-btn", `sm-btn--${variant}`, size === "lg" && "sm-btn--lg", size === "sm" && "sm-btn--sm", className), ...rest }));
 }
 /** The same shape as Button, for navigations that must stay real links. */
 export function LinkButton({ variant = "secondary", children, ...rest }) {
@@ -66,9 +66,9 @@ export function Grip(props) {
 /** Label + optional counter above a control — the handoff's Input/Textarea head.
  *  `asDiv` for groups holding more than one control: an implicit <label>
  *  activates its first labelable descendant, so wrapping several is a trap. */
-export function Field({ label, mark, counter, hint, error, asDiv, children, style, className, path }) {
+export function Field({ label, mark, counter, action, hint, error, asDiv, children, style, className, path }) {
     const Tag = asDiv ? "div" : "label";
-    return (_jsxs(Tag, { className: cx("sm-field", className), style: style, "data-sm-path": path, children: [(label || counter) && (_jsxs("span", { className: "sm-field__head", children: [_jsxs("span", { className: "sm-label", children: [label, mark] }), counter && _jsx("span", { className: "sm-counter", children: counter })] })), children, hint && _jsx("span", { className: "sm-hint", children: hint }), error && _jsx("span", { className: "sm-error", children: error })] }));
+    return (_jsxs(Tag, { className: cx("sm-field", className), style: style, "data-sm-path": path, children: [(label || counter || action) && (_jsxs("span", { className: "sm-field__head", children: [_jsxs("span", { className: "sm-label", children: [label, mark] }), (counter || action) && (_jsxs("span", { className: "sm-field__aside", children: [counter && _jsx("span", { className: "sm-counter", children: counter }), action] }))] })), children, hint && _jsx("span", { className: "sm-hint", children: hint }), error && _jsx("span", { className: "sm-error", children: error })] }));
 }
 /** The mark beside a field that is NOT `.localized()`: a globe-off, so a
  *  multilingual form needs no "shared across languages" grouping. */

package/dist/admin/ui/theme.js

@@ -25,7 +25,7 @@ const TOKENS_LIGHT = `
   --line:#E8E3DA; --line-dashed:#D8D1C4; --line-soft:#EFEBE3;
   --text:#1F1D1A; --text-secondary:#4E4942; --text-muted:#7A746A; --text-subtle:#A39C90; --text-disabled:#C4BDB1;
   --selection:var(--accent); --nav-active-bg:var(--accent-soft); --nav-active-fg:var(--accent);
-  --selection-shared:#C4620C;
+  --selection-global:#C4620C;
   --hover:rgba(31,29,26,.05); --press:rgba(31,29,26,.09); --control-hover:#F8F6F1;
   --btn-secondary-bg:var(--surface); --btn-secondary-hover:#F8F6F1; --tile-hover:var(--surface);
   --bar-bg:transparent; --bar-border:0; --menu-border:0; --card-divider:0;
@@ -63,7 +63,7 @@ const TOKENS_LIGHT = `
 `;
 const TOKENS_DARK = `
   --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --accent-line:#6CC4A6; --on-accent:#0B1F18;
-  --selection-shared:#F09A5C;
+  --selection-global:#F09A5C;
   --bg:#1C1A17; --canvas:#141210; --surface:#27241F; --surface-form:#27241F; --surface-inset:#1C1A17;
   --input-bg:#211E1A; --input-hover-bg:#211E1A; --input-focus-bg:#211E1A;
   --line:#3A3630; --line-dashed:#4A453D; --line-soft:#3A3630;
@@ -96,13 +96,13 @@ const SCALE = `
   --title-font:var(--font-sans); --title-size:18px; --title-weight:600; --title-tracking:-0.01em;
   --doc-title-size:30px;
   --blocktag-font:var(--font-sans); --blocktag-size:11px; --blocktag-transform:none; --blocktag-tracking:0;
-  --blocktag-radius:var(--radius-round); --blocktag-shift:translate(16px,-50%);
+  --blocktag-radius:var(--radius-round); --blocktag-shift:translate(16px,-50%); --blocktag-shift-inside:translate(16px,8px);
   --badge-h:24px; --badge-dot:inline-block;
 
   --radius-xs:2px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px;
   --radius-card:14px; --radius-card-lg:16px; --radius-btn:999px; --radius-round:999px;
   --page-radius:4px 4px 0 0; --selection-radius:4px;
-  --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --row-h:48px; --topbar-h:64px;
+  --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --button-h-sm:28px; --row-h:48px; --topbar-h:64px;
   --outline-row-h:36px; --seg-pad-y:7px; --tabs-pad:3px;
   --plus-h:32px; --plus-pad:0 14px 0 6px; --plus-label:inline;
   --nav-w:72px; --inspector-w:360px; --gutter:20px; --frame-pad:24px;
@@ -110,7 +110,7 @@ const SCALE = `
   --table-pad:8px 12px; --table-top:80px; --canvas-pad:24px 40px 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-shared:2px solid var(--selection-shared);
+  --outline-selection-global:2px solid var(--selection-global);
 `;
 /* ── TEMPORARY: the original look, kept for side-by-side comparison while
    the warm restyle lands. Frozen copies of the three strings above as they
@@ -133,7 +133,7 @@ const TECHNICAL_LIGHT = `
   --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);
   --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);
   --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);
-  --selection-shared:#D2610A;
+  --selection-global:#D2610A;
   --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);
   --control-hover:var(--gray-100);
 
@@ -162,7 +162,7 @@ const TECHNICAL_DARK = `
   --line:#2A2F3B; --line-dashed:#2A2F3B;
   --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;
   --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);
-  --selection-shared:#F2A35F;
+  --selection-global:#F2A35F;
   --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);
   --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);
   --control-hover:var(--input-bg);
@@ -190,7 +190,7 @@ const TECHNICAL_SCALE = `
   --nav-w:72px; --inspector-w:380px;
   --border:1px solid var(--line);
   --outline-selection:1.5px solid var(--selection);
-  --outline-selection-shared:1.5px solid var(--selection-shared);
+  --outline-selection-global:1.5px solid var(--selection-global);
 `;
 /* The tokens the warm restyle added, with the values the technical look
    implied, so the frozen block above renders the old shapes too. */
@@ -202,11 +202,11 @@ const TECHNICAL_SHAPE = `
   --title-font:var(--font-sans); --title-size:var(--text-xl); --title-weight:600; --title-tracking:0;
   --doc-title-size:var(--text-2xl);
   --blocktag-font:var(--font-mono); --blocktag-size:var(--text-2xs); --blocktag-transform:uppercase; --blocktag-tracking:var(--tracking-tag);
-  --blocktag-radius:var(--radius-sm) 0 var(--radius-sm) 0; --blocktag-shift:none;
+  --blocktag-radius:var(--radius-sm) 0 var(--radius-sm) 0; --blocktag-shift:none; --blocktag-shift-inside:none;
   --badge-h:20px; --badge-dot:none;
   --radius-lg:var(--radius-md); --radius-card:var(--radius-md); --radius-card-lg:var(--radius-md); --radius-btn:var(--radius-md);
   --page-radius:var(--radius-md); --selection-radius:var(--radius-sm);
-  --control-h-sm:24px; --button-h:var(--control-h);
+  --control-h-sm:24px; --button-h:var(--control-h); --button-h-sm:24px;
   --outline-row-h:var(--control-h); --seg-pad-y:3px; --tabs-pad:0 14px;
   --plus-h:24px; --plus-pad:0; --plus-label:none;
   --gutter:0px; --frame-pad:0px;
@@ -304,8 +304,6 @@ body:has(.sm-admin){margin:0}
 .sm-rail__btn[aria-current="page"]:hover,.sm-rail__btn[aria-expanded="true"]:hover{color:var(--nav-active-fg)}
 .sm-rail__btn[aria-current="page"] .sm-rail__tile,.sm-rail__btn[aria-expanded="true"] .sm-rail__tile{background:var(--nav-active-bg)}
 .sm-rail__tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.sm-rail__chev{position:absolute;right:4px;bottom:3px;width:8px;height:8px}
-.sm-rail__chev svg{width:8px;height:8px;stroke-width:3}
 .sm-rail__label{letter-spacing:.01em;white-space:nowrap}
 /* Not greyed: the reference renders every inactive item at --text and marks
    the unavailable ones only by being inert (no pointer, no hover). */
@@ -325,6 +323,11 @@ body:has(.sm-admin){margin:0}
 }
 .sm-rail__menu[data-open="true"]{display:flex}
 .sm-rail__menu--up{top:auto;bottom:0}
+/* The Collections flyout opens on hover, so it is roomier (the names at --text-lg) and an invisible
+   bridge spans the 6px gap so the pointer can cross from the rail without closing it. */
+.sm-rail__menu--collections{width:208px;padding:8px;gap:2px;font-size:var(--text-lg)}
+.sm-rail__menu--collections::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:8px}
+.sm-rail__menu--collections .sm-rail__menu-item{padding:9px 12px}
 .sm-rail__menu-title{font-size:9px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding:6px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-rail__menu-item{
   appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;
@@ -374,6 +377,7 @@ body:has(.sm-admin){margin:0}
   text-decoration:none;
 }
 .sm-btn--lg{height:var(--control-h-lg);padding:0 20px}
+.sm-btn--sm,.sm-btn--sm.sm-btn--primary,.sm-btn--sm.sm-btn--ok{height:var(--button-h-sm);padding:0 12px;font-size:var(--text-sm)}
 .sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 18px}
 .sm-btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
 .sm-btn--secondary{background:var(--btn-secondary-bg);color:var(--text)}
@@ -385,7 +389,7 @@ body:has(.sm-admin){margin:0}
 .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}
 .sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,
-.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{
+.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-pill:focus-visible,.sm-row:focus-visible{
   outline:2px solid var(--accent);outline-offset:1px
 }
 
@@ -413,6 +417,10 @@ body:has(.sm-admin){margin:0}
 .sm-label__mark{display:inline-flex;color:var(--text-subtle);cursor:help}
 .sm-label__mark svg{width:13px;height:13px}
 .sm-counter{font-size:var(--text-sm);color:var(--text-subtle)}
+.sm-field__aside{display:flex;align-items:baseline;gap:10px;flex:none}
+/* A head's text action (a list's Collapse all / Expand all): a small accent link. */
+.sm-field__action{background:none;border:0;padding:0;font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--accent);cursor:pointer}
+.sm-field__action:hover{color:var(--accent-hover)}
 .sm-hint{font-size:var(--text-sm);color:var(--text-muted)}
 .sm-input,.sm-textarea,.sm-select{
   width:100%;min-width:0;border:1px solid var(--input-border);border-radius:var(--radius-md);
@@ -504,7 +512,8 @@ body:has(.sm-admin){margin:0}
 .sm-rtcard__icon{width:18px;height:18px;flex:none;border-radius:var(--radius-xs);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:11px}
 .sm-rtcard__title{flex:1;min-width:0;font-weight:600;font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-rtcard__body{display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;border-top:1px solid var(--line)}
-.sm-rtcard__thumb{display:block;width:100%;max-height:160px;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-inset)}
+/* The whole image, letterboxed on the inset tone, never cropped: the card is a preview, not a crop. */
+.sm-rtcard__thumb{display:block;width:100%;height:160px;object-fit:contain;border-radius:var(--radius-sm);background:var(--surface-inset)}
 .sm-rtcard__file{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-richtext__content blockquote{padding-left:12px;border-left:2px solid var(--line);color:var(--text-muted)}
 .sm-richtext__content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-line)}
@@ -533,6 +542,23 @@ body:has(.sm-admin){margin:0}
   display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--control-h);padding:0 6px 0 14px;
   border-radius:var(--radius-md);background:var(--surface-inset);color:var(--text-muted);font-size:var(--text-sm);
 }
+/* The custom section's row cards and the width bar (spec 2026-09-14 §6). */
+.sm-rowcards{display:flex;flex-direction:column;gap:12px;align-items:stretch}
+.sm-rowcard{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:0}
+.sm-rowcard__head{display:flex;align-items:center;gap:4px}
+.sm-rowcard__title{flex:1;font-weight:600}
+.sm-rowcard__presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+/* Secondary buttons sit on the white card: an outline so they read as buttons. */
+.sm-rowcard__presets .sm-btn{height:var(--control-h-sm);padding:0 10px;font-size:var(--text-sm);border:1px solid var(--line)}
+.sm-rowcards > .sm-btn{align-self:flex-start;border:1px solid var(--line)}
+.sm-stepper{display:flex;align-items:center;gap:8px}
+.sm-stepper__value{min-width:20px;text-align:center;font-weight:600}
+.sm-spanbar{display:flex;gap:2px;height:32px;background:var(--seg-bg);border-radius:var(--radius-md);padding:3px;user-select:none}
+.sm-spanbar__col{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--surface);border-radius:6px;font-size:var(--text-sm);color:var(--text-muted)}
+.sm-spanbar__handle{position:absolute;right:-6px;top:0;bottom:0;width:10px;padding:0;border:0;background:transparent;cursor:col-resize;touch-action:none;z-index:1}
+.sm-spanbar__handle::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--text-muted)}
+.sm-spanbar__handle:focus-visible{outline:none}
+.sm-spanbar__handle:focus-visible::after,.sm-spanbar__handle:hover::after{background:var(--accent)}
 /* A field revealed from a canvas click: one pulse of the accent, then nothing. */
 .sm-field--reveal{animation:sm-reveal .9s ease-out;border-radius:var(--radius-sm)}
 @keyframes sm-reveal{0%{outline:2px solid var(--selection);outline-offset:4px}100%{outline:2px solid transparent;outline-offset:4px}}
@@ -610,6 +636,7 @@ body:has(.sm-admin){margin:0}
 .sm-dotmenu:hover{background:var(--btn-secondary-hover);color:var(--text)}
 .sm-dotmenu:disabled{opacity:.4;cursor:default}
 .sm-dotmenu:disabled:hover{background:var(--btn-secondary-bg);color:var(--text-muted)}
+.sm-dotmenu--sm{width:var(--button-h-sm);height:var(--button-h-sm);font-size:var(--text-sm)}
 .sm-picker--menu{position:absolute;top:calc(100% + 6px);right:0;width:220px;z-index:60}
 
 /* Status pill: a dot before the word in the warm look (none in the technical). */
@@ -656,6 +683,18 @@ body:has(.sm-admin){margin:0}
 .sm-seg__opt[aria-pressed="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}
 /* A locale the record does not have yet: subtle, still a button (it opens the add pane). */
 .sm-seg__opt--absent{color:var(--text-subtle)}
+/* f.radio as a pill row (spec 2026-09-14 §5): small chips a step below the tabs and the
+   segmented control — no track, the chosen pill filled in the soft accent, the rest bare.
+   Wraps when the labels need it. */
+.sm-pills{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}
+.sm-pill{
+  height:var(--control-h-sm);padding:0 10px;border:0;border-radius:var(--radius-btn);background:transparent;
+  color:var(--text-muted);font:inherit;font-size:var(--text-sm);font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;
+}
+.sm-pill:hover{color:var(--text);background:var(--surface-inset)}
+.sm-pill[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
+/* The custom-CSS box: code, no wrapping, no spellcheck. */
+.sm-css{font-family:var(--font-mono);font-size:12px;line-height:1.5;white-space:pre;overflow-x:auto}
 /* Switch (f.boolean, the SEO noindex toggle): a pill track, knob slides right when on. */
 .sm-switch{width:36px;height:20px;padding:2px;border:0;border-radius:var(--radius-round);background:var(--seg-bg);cursor:pointer;display:inline-flex;align-items:center;flex:none}
 .sm-switch[aria-checked="true"]{background:var(--accent)}
@@ -687,7 +726,7 @@ body:has(.sm-admin){margin:0}
 .sm-fielderr__field{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
 
 /* ── cards ─────────────────────────────────────────────────────────── */
-/* The inspector column (editor, entry and shared forms) is a stack of
+/* The inspector column (editor, entry and global forms) is a stack of
    cards; the technical look draws them flush with a hairline between. */
 .sm-inspector{
   display:flex;flex-direction:column;gap:var(--card-gap);min-height:0;overflow:auto;
@@ -704,7 +743,10 @@ body:has(.sm-admin){margin:0}
 }
 .sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
 .sm-inspector__body{display:flex;flex-direction:column;gap:14px}
-/* The form card: the main column of the entry and shared forms. Every
+/* A tab's groups (spec 2026-09-14 §5): the section's own settings untitled, then Spacing & layout and Advanced under a hairline. */
+.sm-inspector__group{display:flex;flex-direction:column;gap:12px}
+.sm-inspector__group+.sm-inspector__group{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
+/* The form card: the main column of the entry and global forms. Every
    field (and the banner) is a centred 680px column — a reading width —
    while the card itself still fills the main area. */
 .sm-form{
@@ -753,13 +795,14 @@ body:has(.sm-admin){margin:0}
   letter-spacing:var(--blocktag-tracking);text-transform:var(--blocktag-transform);padding:3px 10px;
   border-radius:var(--blocktag-radius);white-space:nowrap;
 }
-.sm-blocktag--shared{background:var(--selection-shared)}
+.sm-blocktag--global{background:var(--selection-global)}
+.sm-blocktag--inside{transform:var(--blocktag-shift-inside)}
 .sm-blocktoolbar{
   display:flex;gap:2px;padding:3px;background:var(--toolbar-bg);border-radius:var(--radius-btn);
   box-shadow:var(--shadow-float);
 }
 .sm-blocktoolbar__note{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--toolbar-fg);opacity:.7;padding:4px 8px}
-/* The insert affordance between blocks: a labelled pill (the label is
+/* The insert affordance between sections: a labelled pill (the label is
    hidden in the technical look, leaving the 24px circle). */
 .sm-plus{
   display:inline-flex;align-items:center;gap:8px;height:var(--plus-h);min-width:var(--plus-h);padding:var(--plus-pad);

package/dist/admin/validate.d.ts

@@ -10,11 +10,36 @@ type Desc = {
     min?: unknown;
     fields?: unknown;
     item?: unknown;
+    hidden?: unknown;
+};
+/** What conditions read beyond the current level: the node's two namespaces. */
+export type ValidationScope = {
+    fields?: Record<string, unknown>;
+    settings?: Record<string, unknown>;
 };
 /** The element schemas an element node is validated against (spec 2026-09-08 block nodes §2). */
 export type ElementDescs = Record<string, {
     fields: Record<string, Desc>;
-    styles?: Record<string, Desc>;
+    settings?: Record<string, Desc>;
 }>;
-export declare function validateFields(values: Record<string, unknown>, descriptors: Record<string, Desc>, elements?: ElementDescs): FieldError[];
+/** Validate one value map. Without `scope.fields` the values ARE the fields (an entry, a page, an object global). */
+export declare function validateFields(values: Record<string, unknown>, descriptors: Record<string, Desc>, elements?: ElementDescs, scope?: ValidationScope): FieldError[];
+/** A tree node (or a visual global, in node shape) against its schema: fields, settings (prefixed), css (spec 2026-09-14 §3, §4). */
+export declare function validateNode(node: {
+    fields?: Record<string, unknown>;
+    settings?: Record<string, unknown>;
+    css?: unknown;
+    [other: string]: unknown;
+}, schema: {
+    fields: Record<string, Desc>;
+    settings?: Record<string, Desc>;
+}, elements?: ElementDescs): FieldError[];
+/** A custom section node (spec 2026-09-14 §6): the columns' richtext (element nodes included), the row structure, the css.
+ *  The generic walk's own words on `rows.<i>.spans` are dropped (`spans` is no descriptor type it knows) so rowsProblems
+ *  is the one voice on structure; the columns' richtext errors keep their paths. */
+export declare function validateCustomNode(node: {
+    fields?: Record<string, unknown>;
+    css?: unknown;
+    [other: string]: unknown;
+}, fields: Record<string, Desc>, elements?: ElementDescs): FieldError[];
 export {};

package/dist/admin/validate.js

@@ -2,9 +2,15 @@
 // lives admin/server-side). Entry saves validate; page drafts do NOT
 // (drafts must save freely) — publish validates every node. Objects and
 // lists recurse; error paths are dotted (`cta.href`, `points.2.heading`).
+// A field whose `.hidden()` condition holds is skipped entirely — a hidden
+// required field is not required (spec 2026-09-14 §12); the same isHidden
+// the form uses decides, over the same scope.
 import { optionValues } from "../fields.js";
+import { isHidden } from "../conditions.js";
+import { cssProblem } from "../css.js";
 import { hasContent } from "./richtext-doc.js";
 import { ELEMENT_NODE, richtextBlocks } from "../richtext-walk.js";
+import { rowsProblems } from "../custom/rows.js";
 const subfields = (d) => d.fields && typeof d.fields === "object" ? d.fields : {};
 const itemOf = (d) => d.item && typeof d.item === "object" ? d.item : undefined;
 const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArray(v) && v.length === 0);
@@ -12,7 +18,7 @@ const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArr
  *  may be absent — may be absent altogether. */
 const mayBeAbsent = (d) => d.optional === true || d.type === "boolean" || (d.type === "object" && Object.values(subfields(d)).every(mayBeAbsent));
 const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
-function validateValue(path, value, d, errors, elements) {
+function validateValue(path, value, d, errors, elements, scope) {
     if (isEmpty(value)) {
         if (!mayBeAbsent(d))
             errors.push({ field: path, message: "Required." });
@@ -34,8 +40,9 @@ function validateValue(path, value, d, errors, elements) {
             const el = typeof a.name === "string" ? elements[a.name] : undefined;
             if (el) {
                 const fields = (a.fields && typeof a.fields === "object" ? a.fields : {});
-                for (const [k, sub] of Object.entries(el.fields))
-                    validateValue(`${path}.elements.${i}.${k}`, fields[k], sub, errors, elements);
+                const settings = (a.settings && typeof a.settings === "object" ? a.settings : {});
+                validateMap(`${path}.elements.${i}`, fields, el.fields, errors, elements, { self: fields, fields, settings });
+                validateMap(`${path}.elements.${i}.settings`, settings, el.settings ?? {}, errors, elements, { self: settings, fields, settings });
             }
             i++;
         }
@@ -57,8 +64,9 @@ function validateValue(path, value, d, errors, elements) {
         if (typeof d.max === "number" && value.length > d.max)
             errors.push({ field: path, message: `At most ${plural(d.max, "item")}.` });
         const item = itemOf(d);
-        if (item)
-            value.forEach((v, i) => validateValue(`${path}.${i}`, v, item, errors, elements));
+        // A scalar item's condition reads the list's own level; an object item reads itself (the object branch).
+        if (item && !isHidden(item, scope))
+            value.forEach((v, i) => validateValue(`${path}.${i}`, v, item, errors, elements, scope));
         return;
     }
     if (d.type === "object") {
@@ -66,8 +74,7 @@ function validateValue(path, value, d, errors, elements) {
             errors.push({ field: path, message: "Must be an object." });
             return;
         }
-        for (const [k, sub] of Object.entries(subfields(d)))
-            validateValue(`${path}.${k}`, value[k], sub, errors, elements);
+        validateMap(path, value, subfields(d), errors, elements, { ...scope, self: value });
         return;
     }
     if (d.type === "boolean") {
@@ -97,9 +104,39 @@ function validateValue(path, value, d, errors, elements) {
         errors.push({ field: path, message: `Must be at most ${d.max} characters.` });
     }
 }
-export function validateFields(values, descriptors, elements = {}) {
+/** One descriptor map at one level: hidden entries are skipped. `prefix` is the dotted path above it ("" at the top). */
+function validateMap(prefix, values, descriptors, errors, elements, scope) {
+    for (const [key, d] of Object.entries(descriptors)) {
+        if (isHidden(d, scope))
+            continue;
+        validateValue(prefix === "" ? key : `${prefix}.${key}`, values[key], d, errors, elements, scope);
+    }
+}
+/** Validate one value map. Without `scope.fields` the values ARE the fields (an entry, a page, an object global). */
+export function validateFields(values, descriptors, elements = {}, scope = {}) {
     const errors = [];
-    for (const [field, d] of Object.entries(descriptors))
-        validateValue(field, values[field], d, errors, elements);
+    validateMap("", values, descriptors, errors, elements, { self: values, fields: scope.fields ?? values, settings: scope.settings });
+    return errors;
+}
+/** A tree node (or a visual global, in node shape) against its schema: fields, settings (prefixed), css (spec 2026-09-14 §3, §4). */
+export function validateNode(node, schema, elements = {}) {
+    const fields = node.fields ?? {};
+    const settings = node.settings ?? {};
+    const scope = { fields, settings };
+    const errors = validateFields(fields, schema.fields, elements, scope);
+    for (const e of validateFields(settings, schema.settings ?? {}, elements, scope))
+        errors.push({ field: `settings.${e.field}`, message: e.message });
+    if (typeof node.css === "string" && node.css !== "") {
+        const problem = cssProblem(node.css);
+        if (problem)
+            errors.push({ field: "css", message: problem });
+    }
     return errors;
 }
+/** A custom section node (spec 2026-09-14 §6): the columns' richtext (element nodes included), the row structure, the css.
+ *  The generic walk's own words on `rows.<i>.spans` are dropped (`spans` is no descriptor type it knows) so rowsProblems
+ *  is the one voice on structure; the columns' richtext errors keep their paths. */
+export function validateCustomNode(node, fields, elements = {}) {
+    const errors = validateNode(node, { fields }, elements).filter((e) => !e.field.startsWith("rows.") || e.field.includes(".columns."));
+    return [...rowsProblems(node.fields?.rows), ...errors];
+}

package/dist/collections.d.ts

@@ -9,10 +9,10 @@ export type EntryOrder = "manual" | {
 export declare const DEFAULT_ORDER: EntryOrder;
 export declare const BUILT_IN_ORDER_FIELDS: readonly ["createdAt", "updatedAt"];
 export type CollectionSchema<F extends BuilderMap = BuilderMap, N extends string = string> = {
-    /** "shared" marks a code-declared singleton (spec 2026-09-07 decision
-     *  4): a shared item IS a collection with one entry, so both entry
+    /** "global" marks a code-declared singleton (spec 2026-09-07 decision
+     *  4): a global item IS a collection with one entry, so both entry
      *  stores accept it in the same list and branch on this. */
-    kind: "collection" | "shared";
+    kind: "collection" | "global";
     /** Literal when declared inline (spec 2026-09-11 §6), so a queries object can check names. */
     name: N;
     title: string;

package/dist/collections.js

@@ -5,7 +5,7 @@ export const collectionDepth = (c) => c.tree?.depth ?? 1;
 export function collection(input) {
     if (!input?.name)
         throw new Error("smoodly: a collection requires a name.");
-    if (["shared", "asset", "media"].includes(input.name))
+    if (["global", "asset", "media"].includes(input.name))
         throw new Error(`smoodly: "${input.name}" is a reserved name.`);
     if (input.tree !== undefined && (!Number.isInteger(input.tree.depth) || input.tree.depth < 1)) {
         throw new Error(`smoodly: collection "${input.name}" declares an invalid tree depth.`);