smoodly 0.0.7 → 0.0.9

package/dist/admin/shell/SharedForm.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// One shared item, one locale (spec 2026-09-07 §6): the entry form's
+// shape without what a singleton never has — no slug, no "new", no
+// delete, no add/remove locale (every supported locale exists by
+// construction). Shared fields above, the locale's own below, and for a
+// visual item a Styles group edited under the reserved `$styles` key.
+// Status is per locale and immediate. "Used on N pages" is the refs
+// index's answer.
+import { useEffect, useMemo, useState } from "react";
+import { STYLES_KEY } from "../../shared.js";
+import { FieldWidget } from "../forms/FieldWidget.js";
+import { relativeTime } from "../ui/format.js";
+import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
+import { Banner, Breadcrumb, Button, Divider, SectionLabel, Segmented, TopBar } from "../ui/primitives.js";
+import { entryTitle } from "./entries-list.js";
+import { BASE } from "./base.js";
+const STATUSES = ["Draft", "Published"];
+function localeFromUrl(registry) {
+    try {
+        const l = new URLSearchParams(window.location.search).get("locale");
+        if (l && registry.locales.supported.includes(l))
+            return l;
+    }
+    catch {
+        // no window — the default is fine
+    }
+    return registry.locales.default;
+}
+function writeLocaleToUrl(next) {
+    try {
+        const u = new URL(window.location.href);
+        u.searchParams.set("locale", next);
+        window.history.replaceState(null, "", u);
+    }
+    catch {
+        // the URL is cosmetic here
+    }
+}
+export function SharedForm({ ops, registry, name }) {
+    const item = registry.shared.find((s) => s.name === name);
+    const multilingual = registry.locales.supported.length > 1;
+    const [locale, setLocale] = useState(() => localeFromUrl(registry));
+    const [record, setRecord] = useState(null);
+    const [fields, setFields] = useState(null);
+    const [usage, setUsage] = useState([]);
+    const [refOptions, setRefOptions] = useState({});
+    const [banner, setBanner] = useState(null);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [dirty, setDirty] = useState(false);
+    const refTargets = useMemo(() => {
+        const out = {};
+        for (const [key, d] of Object.entries(item?.fields ?? {})) {
+            if ((d.type === "ref" || d.type === "refList") && typeof d.target === "string")
+                out[key] = d.target;
+        }
+        return out;
+    }, [item]);
+    const localeKeys = useMemo(() => Object.entries(item?.fields ?? {}).filter(([, d]) => d.localized === true).map(([key]) => key), [item]);
+    useEffect(() => {
+        let cancelled = false;
+        setFields(null);
+        setFieldErrors({});
+        ops.shared.get(name, locale).then((r) => {
+            if (cancelled)
+                return;
+            if (r.ok) {
+                setRecord(r.data.record);
+                setFields(r.data.fields);
+                setUsage(r.data.usage);
+                setDirty(false);
+            }
+            else
+                setBanner({ tone: "error", text: r.message });
+        }).catch(() => { if (!cancelled)
+            setBanner({ tone: "error", text: "Couldn't reach the server." }); });
+        return () => { cancelled = true; };
+    }, [ops, name, locale]);
+    // Ref options in the locale being edited — the entry form's rule.
+    useEffect(() => {
+        let cancelled = false;
+        for (const target of new Set(Object.values(refTargets))) {
+            const targetMeta = registry.collections.find((c) => c.name === target);
+            ops.entries.list(target).then((r) => {
+                if (cancelled || !r.ok)
+                    return;
+                const options = r.data
+                    .filter((e) => e.locales[locale])
+                    .map((e) => ({ id: e.id, title: targetMeta ? entryTitle(e, targetMeta, registry, locale) : e.id, status: e.locales[locale].status }));
+                setRefOptions((prev) => ({ ...prev, [target]: options }));
+            }).catch(console.error);
+        }
+        return () => { cancelled = true; };
+    }, [ops, refTargets, registry, locale]);
+    if (!item)
+        return _jsx("p", { style: { padding: 32 }, children: "No such shared item." });
+    const applyResult = (r, okText) => {
+        if (r.ok) {
+            setBanner({ tone: "ok", text: okText });
+            setFieldErrors({});
+            return true;
+        }
+        setBanner({ tone: "error", text: r.message });
+        setFieldErrors(Object.fromEntries((r.fields ?? []).map((f) => [f.field, f.message])));
+        return false;
+    };
+    const save = async () => {
+        if (!fields)
+            return;
+        const r = await ops.shared.save(name, locale, fields);
+        if (applyResult(r, "Saved.") && r.ok) {
+            setRecord(r.data);
+            setDirty(false);
+        }
+    };
+    const row = record?.locales[locale];
+    const status = row?.status ?? "draft";
+    const setPublished = async (next) => {
+        if (next === status)
+            return;
+        const r = await ops.shared.setStatus(name, locale, next);
+        if (applyResult(r, next === "published" ? "Published." : "Unpublished.") && r.ok)
+            setRecord(r.data);
+    };
+    const switchLocale = (next) => {
+        if (next === locale)
+            return;
+        if (dirty && !window.confirm("Discard unsaved changes?"))
+            return;
+        writeLocaleToUrl(next);
+        setBanner(null);
+        setLocale(next);
+    };
+    const shared = Object.entries(item.fields).filter(([key]) => !localeKeys.includes(key));
+    const own = Object.entries(item.fields).filter(([key]) => localeKeys.includes(key));
+    const styles = (fields?.[STYLES_KEY] ?? {});
+    const pages = new Set(usage.filter((u) => u.sourceKind === "page").map((u) => u.sourceId));
+    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], errors: fieldErrors, refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, onChange: (value) => { setFields((f) => ({ ...(f ?? {}), [key]: value })); setDirty(true); } }, key));
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx(Breadcrumb, { backHref: `${BASE}/shared`, items: [{ label: "Shared content", href: `${BASE}/shared` }, { label: item.title }] }), multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: switchLocale, onAdd: () => undefined }))] }), right: _jsx(Button, { onClick: save, disabled: fields === null, children: "Save" }) }), _jsxs("div", { style: { flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "1fr var(--inspector-w)" }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 18, padding: "24px 32px", minWidth: 0, overflow: "auto" }, children: [banner && _jsx(Banner, { tone: banner.tone, onDismiss: () => setBanner(null), children: banner.text }), record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`, children: id })] }, id)))] })), fields !== null ? (_jsxs(_Fragment, { children: [shared.length > 0 && (_jsxs(_Fragment, { children: [multilingual && _jsx(SectionLabel, { children: "Shared across languages" }), shared.map(widget)] })), own.length > 0 && (_jsxs(_Fragment, { children: [multilingual && _jsxs(SectionLabel, { children: ["In ", locale] }), own.map(widget)] })), item.section !== undefined && Object.keys(item.styles).length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Styles" }), Object.entries(item.styles).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: styles[key], onChange: (value) => {
+                                                    setFields((f) => ({ ...(f ?? {}), [STYLES_KEY]: { ...(f?.[STYLES_KEY] ?? {}), [key]: value } }));
+                                                    setDirty(true);
+                                                } }, key)))] }))] })) : !banner && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsxs("aside", { style: { display: "flex", flexDirection: "column", gap: 16, padding: "16px 14px", minHeight: 0, overflow: "auto", borderLeft: "var(--border)" }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsxs(SectionLabel, { children: ["Status", multilingual ? ` · ${locale}` : ""] }), _jsx(Segmented, { options: STATUSES, stretch: true, disabled: !row, value: status === "published" ? "Published" : "Draft", onChange: (v) => { void setPublished(v === "Published" ? "published" : "draft"); } })] }), record && row && (_jsxs(_Fragment, { children: [_jsx(Divider, { bleed: 14 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: relativeTime(row.updatedAt) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] })] }))] })] })] }));
+}
+function InfoRow({ label, value, mono }) {
+    return (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 10, fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: [_jsx("span", { children: label }), _jsx("span", { style: { color: "var(--text)", fontFamily: mono ? "var(--font-mono)" : undefined, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: value })] }));
+}

package/dist/admin/shell/SharedList.d.ts

@@ -0,0 +1,6 @@
+import type { AdminOps } from "../ops.ts";
+import type { AdminRegistry } from "../serialize.ts";
+export declare function SharedList({ ops, registry }: {
+    ops: AdminOps;
+    registry: AdminRegistry;
+}): import("react").JSX.Element;

package/dist/admin/shell/SharedList.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The Shared content list (spec 2026-09-07 §6): every registered item is
+// a row, edited on its own page. Nothing here is created or deleted by
+// editors — the registry declares the items and ops.shared.list
+// materializes them — so there is no "+ New".
+import { useCallback, useEffect, useState } from "react";
+import { ListView } from "./ListView.js";
+import { sharedRows } from "./shared-list.js";
+import { Segmented, StatusBadge } from "../ui/primitives.js";
+import { relativeTime } from "../ui/format.js";
+import { BASE } from "./base.js";
+import { ErrorPane } from "./ErrorPane.js";
+const LOCALE_KEY = "smoodly.entries.locale"; // the same choice the collection lists remember
+function rememberedLocale(registry) {
+    try {
+        const stored = window.sessionStorage.getItem(LOCALE_KEY);
+        if (stored && registry.locales.supported.includes(stored))
+            return stored;
+    }
+    catch {
+        // storage unavailable — the default is fine
+    }
+    return registry.locales.default;
+}
+export function SharedList({ ops, registry }) {
+    const [items, setItems] = useState(null);
+    const [error, setError] = useState(null);
+    const [locale, setLocale] = useState(() => rememberedLocale(registry));
+    const multilingual = registry.locales.supported.length > 1;
+    const pickLocale = (next) => {
+        setLocale(next);
+        try {
+            window.sessionStorage.setItem(LOCALE_KEY, next);
+        }
+        catch { /* see rememberedLocale */ }
+    };
+    const load = useCallback(() => {
+        ops.shared.list()
+            .then((r) => (r.ok ? setItems(r.data) : setError(r.message)))
+            .catch(() => setError("Couldn't reach the server."));
+    }, [ops]);
+    useEffect(load, [load]);
+    if (error)
+        return _jsx(ErrorPane, { message: error });
+    const rows = items ? sharedRows(items, registry, locale) : [];
+    return (_jsx(ListView, { title: "Shared content", count: items ? rows.length : undefined, actions: multilingual ? _jsx(Segmented, { options: registry.locales.supported, value: locale, onChange: pickLocale }) : undefined, columns: [
+            { label: "Title", width: "minmax(160px,1fr)" },
+            { label: "Kind", width: "90px" },
+            { label: "Updated", width: "minmax(110px,160px)" },
+            { label: "Status", width: "120px" },
+        ], empty: items ? "No shared content is registered." : "Loading…", rows: rows.map((row) => ({
+            key: row.name,
+            href: `${BASE}/shared/${encodeURIComponent(row.name)}?locale=${encodeURIComponent(locale)}`,
+            cells: [
+                _jsx("span", { className: "sm-cell sm-cell--title", children: row.title }, "t"),
+                _jsx("span", { className: "sm-cell sm-cell--muted", children: row.flavour }, "k"),
+                _jsx("span", { className: "sm-cell sm-cell--muted", children: relativeTime(row.updatedAt) }, "u"),
+                _jsx(StatusBadge, { status: row.status }, "s"),
+            ],
+        })) }));
+}

package/dist/admin/shell/shared-list.d.ts

@@ -0,0 +1,14 @@
+import type { EntryRecord } from "../../entry-store.ts";
+import type { AdminRegistry } from "../serialize.ts";
+import { type LocaleStatus } from "./pages-tree.ts";
+export type SharedRow = {
+    name: string;
+    title: string;
+    flavour: "Visual" | "Fields";
+    status: LocaleStatus;
+    updatedAt: number;
+};
+export declare function sharedRows(items: {
+    name: string;
+    record: EntryRecord;
+}[], registry: AdminRegistry, locale: string): SharedRow[];

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

@@ -0,0 +1,17 @@
+import { localeStatusOf } from "./pages-tree.js";
+export function sharedRows(items, registry, locale) {
+    const byName = new Map(items.map((i) => [i.name, i.record]));
+    return registry.shared.flatMap((item) => {
+        const record = byName.get(item.name);
+        const row = record?.locales[locale];
+        if (!record || !row)
+            return [];
+        return [{
+                name: item.name,
+                title: item.title,
+                flavour: item.section !== undefined ? "Visual" : "Fields",
+                status: localeStatusOf(row),
+                updatedAt: row.updatedAt,
+            }];
+    });
+}

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

@@ -1,6 +1,6 @@
 import type { PageTree, TreeNode } from "../render.tsx";
 import type { ZonePolicy } from "../zones.ts";
-import type { AdminSection } from "./serialize.ts";
+import type { AdminSection, AdminShared } from "./serialize.ts";
 export declare function zoneOf(tree: PageTree, id: string): string | null;
 export declare function findNode(tree: PageTree, id: string): TreeNode | null;
 export declare function insertNode(tree: PageTree, zone: string, index: number, node: TreeNode): PageTree;
@@ -9,11 +9,18 @@ export declare function moveNode(tree: PageTree, id: string, dir: -1 | 1): PageT
 export declare function patchNode(tree: PageTree, id: string, ns: "fields" | "styles" | "meta", key: string, value: unknown): PageTree;
 export declare function canInsert(policy: ZonePolicy | undefined, count: number): boolean;
 export declare function allowedSections(policy: ZonePolicy | undefined, all: AdminSection[]): AdminSection[];
+/** The visual items the picker offers in a zone: materialized (an id is
+ *  known) and rendering a section the zone's policy allows. */
+export declare function allowedShared(policy: ZonePolicy | undefined, shared: AdminShared[], sharedIds: Record<string, string>): AdminShared[];
+/** A page places a visual item as this node (spec 2026-09-07 §6): `item`
+ *  names the registration, `ref` is the item's row id. */
+export declare function placementNode(item: AdminShared, ref: string, id: string): TreeNode;
 export declare function nodeFromSample(section: AdminSection, id: string): TreeNode;
 /** A locked zone holds exactly one node the editor can never insert or
  * remove — so someone has to put it there. This does, from the component's
- * sample, for every locked zone that is empty or missing. Runs when the
- * editor loads a draft, which also covers pages that predate a locked zone
- * being added to their schema. Returns the same tree when nothing changed. */
-export declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[]): PageTree;
+ * sample (or, for a zone bound to a shared item, a placement), for every
+ * locked zone that is empty or missing. Runs when the editor loads a draft,
+ * which also covers pages that predate a locked zone being added to their
+ * schema. Returns the same tree when nothing changed. */
+export declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[], sharedIds?: Record<string, string>): PageTree;
 export declare function newNodeId(type: string): string;

package/dist/admin/tree-ops.js

@@ -1,3 +1,4 @@
+import { SHARED_NODE_TYPE } from "../shared.js";
 export function zoneOf(tree, id) {
     for (const [zone, nodes] of Object.entries(tree.zones)) {
         if (nodes.some((n) => n.id === id))
@@ -60,6 +61,22 @@ export function allowedSections(policy, all) {
     const allow = new Set(policy.allow);
     return all.filter((s) => allow.has(s.name));
 }
+/** 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) {
+    if (!policy || policy.kind === "locked")
+        return [];
+    return shared.filter((s) => {
+        if (s.section === undefined || sharedIds[s.name] === undefined)
+            return false;
+        return policy.allow === "*" || policy.allow.includes(s.section);
+    });
+}
+/** 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 } };
+}
 /** The empty value a fresh node's field starts at, by descriptor type.
  * Shape matters: a list-valued field seeded with "" is a type lie that
  * crashes the first section view that maps over it. */
@@ -89,21 +106,35 @@ export function nodeFromSample(section, id) {
 }
 /** 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, 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) {
+ * sample (or, for a zone bound to a shared 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 = {}) {
     let next = null;
     for (const [zone, policy] of Object.entries(policies)) {
         if (policy.kind !== "locked")
             continue;
         if ((tree.zones[zone] ?? []).length > 0)
             continue;
-        const section = sections.find((s) => s.name === policy.component);
-        if (!section)
-            continue;
+        let node = null;
+        if (policy.shared !== undefined) {
+            // Bound to a shared 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];
+            if (ref === undefined)
+                continue;
+            node = placementNode({ name: policy.shared }, ref, newNodeId(SHARED_NODE_TYPE));
+        }
+        else {
+            const section = sections.find((s) => s.name === policy.component);
+            if (!section)
+                continue;
+            node = nodeFromSample(section, newNodeId(section.name));
+        }
         next ?? (next = { ...tree, zones: { ...tree.zones } });
-        next.zones[zone] = [nodeFromSample(section, newNodeId(section.name))];
+        next.zones[zone] = [node];
     }
     return next ?? tree;
 }

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

@@ -1,4 +1,4 @@
-export declare const ADMIN_CSS = "\n@import url(\"https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap\");\n\n.sm-admin{\n  --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;\n  --font-mono:ui-monospace,Menlo,Consolas,monospace;\n  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;\n  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;\n  --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;\n\n  --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;\n  --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;\n  --nav-w:200px; --inspector-w:300px;\n  --border:1px solid var(--line);\n  --outline-selection:1.5px solid var(--selection);\n\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\nhtml[data-theme=\"dark\"] .sm-admin,.sm-admin[data-theme=\"dark\"]{\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n@media (prefers-color-scheme:dark){\n  html:not([data-theme=\"light\"]) .sm-admin:not([data-theme=\"light\"]){\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n}\n/* Last, and the same specificity as the host-attribute rule: an explicit\n   choice from the theme toggle wins over a dark <html> and over the OS. */\n.sm-admin[data-theme=\"light\"]{\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\n\n/* The admin owns the viewport; a host <body> margin would push it into a\n   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */\nbody:has(.sm-admin){margin:0}\n.sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}\n.sm-admin{\n  font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;\n  color:var(--text);background:var(--surface);\n  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;\n}\n.sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}\n/* :where() keeps this at zero specificity \u2014 a bare <a> is accent, but any\n   component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own\n   colour. Without this the element selector silently beat every one of them. */\n:where(.sm-admin a){color:var(--accent);text-decoration:none}\n:where(.sm-admin a:hover){color:var(--brand-500)}\n.sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}\n.sm-admin ::placeholder{color:var(--text-subtle)}\n.sm-admin ::selection{background:var(--accent-soft);color:var(--text)}\n.sm-mono{font-family:var(--font-mono)}\n\n/* \u2500\u2500 shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}\n.sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n.sm-nav{\n  display:flex;flex-direction:column;gap:24px;padding:16px 12px;\n  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;\n}\n.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}\n.sm-nav>.sm-nav__logo{margin-left:10px}\n.sm-nav__list{display:flex;flex-direction:column;gap:1px}\n.sm-nav-item{\n  display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;\n  color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;\n  background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);\n  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\n}\n.sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}\n.sm-nav-item[aria-current=\"page\"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}\n.sm-nav-item[aria-current=\"page\"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}\n/* Not greyed: the reference renders every inactive item at --text and marks\n   the unavailable ones only by being inert (no pointer, no hover). */\n.sm-nav-item[aria-disabled=\"true\"]{cursor:default}\n.sm-nav-item[aria-disabled=\"true\"]:hover{background:transparent}\n.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}\n.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}\n.sm-nav-item--icon{display:flex;align-items:center;gap:8px}\n.sm-when-light{display:var(--when-light);align-items:center;gap:8px}\n.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}\n.sm-avatar{\n  width:24px;height:24px;flex:none;border-radius:var(--radius-round);\n  background:var(--accent-soft);color:var(--accent);\n  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;\n}\n\n/* \u2500\u2500 top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-topbar{\n  height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;\n  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);\n}\n.sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}\n.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}\n.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}\n.sm-crumbs__sep{opacity:.5}\n.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}\n.sm-back:hover{color:var(--accent)}\n.sm-title{font-size:var(--text-xl);font-weight:600}\n.sm-count{color:var(--text-muted)}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-btn{\n  display:inline-flex;align-items:center;justify-content:center;gap:6px;\n  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;\n  font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;\n  text-decoration:none;\n}\n.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}\n.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}\n.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}\n.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}\n.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}\n.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}\n.sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}\n.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}\n.sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}\n.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}\n.sm-btn:disabled,.sm-btn[aria-disabled=\"true\"]{opacity:.5;cursor:default;pointer-events:none}\n.sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,\n.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{\n  outline:2px solid var(--accent);outline-offset:1px\n}\n\n.sm-iconbtn{\n  width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;\n  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);\n  font-size:12px;line-height:1;cursor:pointer;\n}\n.sm-iconbtn:hover{background:var(--hover);color:var(--text)}\n.sm-iconbtn--inverse{color:#EEF0F5}\n.sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}\n.sm-iconbtn:disabled{opacity:.3;cursor:default}\n.sm-iconbtn:disabled:hover{background:transparent}\n\n/* \u2500\u2500 fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}\n.sm-label{\n  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);\n  text-transform:uppercase;color:var(--text-muted);\n}\n.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}\n.sm-input,.sm-textarea,.sm-select{\n  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);\n  outline:0;box-shadow:none;\n}\n.sm-input,.sm-select{height:var(--control-h);padding:0 10px}\n.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}\n.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}\n.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}\n.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}\n.sm-input:focus,.sm-textarea:focus,.sm-select:focus,\n.sm-inputwrap:focus-within{\n  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);\n}\n.sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}\n.sm-select{\n  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;\n  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),\n    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);\n  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;\n  background-size:4px 4px,4px 4px;background-repeat:no-repeat;\n}\n.sm-inputwrap{\n  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;\n  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);\n}\n.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}\n.sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}\n.sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}\n.sm-error{color:var(--danger);font-size:var(--text-sm)}\n\n/* \u2500\u2500 data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}\n.sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}\n.sm-table__head{\n  height:34px;border-bottom:var(--border);font-family:var(--font-mono);\n  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);\n  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;\n}\n.sm-table__body{display:flex;flex-direction:column;padding-top:4px}\n.sm-row{\n  height:var(--row-h);border-radius:var(--radius-md);background:transparent;\n  border:0;font:inherit;color:inherit;text-align:left;width:100%;\n}\n.sm-row--clickable{cursor:pointer}\n.sm-row--clickable:hover{background:var(--surface-inset)}\n.sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.sm-cell--muted{color:var(--text-muted)}\n.sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}\n.sm-cell--title{font-weight:500}\n.sm-empty{padding:28px 8px;color:var(--text-muted)}\n.sm-chevron{\n  width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;\n  color:var(--text-muted);cursor:pointer;line-height:1;\n}\n.sm-chevron:hover{color:var(--text)}\n.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}\n.sm-cell--tree.sm-cell--parent{font-weight:600}\n.sm-rowmenu{\n  border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;\n  border-radius:var(--radius-md);line-height:1;height:24px;\n}\n.sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}\n\n.sm-badge{\n  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;\n}\n.sm-savestate{\n  display:inline-flex;align-items:center;gap:6px;padding:0 6px;\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n}\n.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}\n\n/* \u2500\u2500 navigation bits \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}\n.sm-tab{\n  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;\n  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;\n}\n.sm-tab:hover{color:var(--text)}\n.sm-tab[aria-selected=\"true\"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}\n.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}\n.sm-seg--stretch{width:100%}\n.sm-seg--disabled{opacity:.6}\n.sm-seg__opt:disabled{cursor:default}\n.sm-seg__opt{\n  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;\n  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;\n}\n.sm-seg__opt:hover{color:var(--text)}\n.sm-seg__opt[aria-pressed=\"true\"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}\n.sm-divider{height:1px;background:var(--line);flex:none}\n.sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.sm-sectionlabel--mono>.sm-label{\n  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);\n}\n.sm-banner{\n  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);\n  font-size:var(--text-md);\n}\n.sm-banner--error{background:var(--danger-soft);color:var(--danger)}\n.sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}\n.sm-banner--warn{background:var(--warn-soft);color:var(--warn)}\n\n/* \u2500\u2500 editor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}\n.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}\n.sm-canvas__meta{\n  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;\n  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);\n}\n.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}\n.sm-page{\n  position:relative;background:var(--page-bg);border-radius:var(--radius-md);\n  box-shadow:var(--shadow-page);min-height:100%;\n}\n.sm-inspector{\n  display:flex;flex-direction:column;min-height:0;overflow:hidden;\n  border-left:var(--border);background:var(--surface);\n}\n.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}\n.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}\n.sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}\n.sm-blocktag{\n  position:absolute;top:0;left:0;background:var(--selection);color:#fff;\n  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;\n  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;\n  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;\n}\n.sm-blocktoolbar{\n  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);\n  box-shadow:var(--shadow-float);\n}\n.sm-plus{\n  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);\n  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;\n}\n.sm-plus:hover{background:var(--brand-500)}\n.sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}\n.sm-tooltip{\n  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;\n  border-radius:var(--radius-sm);white-space:nowrap;\n}\n.sm-outline-row{\n  display:flex;align-items:center;justify-content:space-between;gap:4px;\n  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;\n  color:var(--text);font-weight:500;background:transparent;\n  border:1px solid var(--line);\n}\n.sm-outline-row--clickable{cursor:pointer}\n.sm-outline-row--clickable:hover{background:var(--surface-inset)}\n/* Selected and locked rows are read by their fill, so they drop the hairline \u2014\n   border-color, not border, so every row keeps the same 28px box. */\n.sm-outline-row--selected,.sm-outline-row--selected:hover{\n  background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;\n}\n.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}\n.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}\n.sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n\n.sm-picker{\n  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);\n  padding:6px;box-shadow:var(--shadow-pop);\n}\n.sm-picker__item{\n  display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;\n  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;\n}\n.sm-picker__item:hover{background:var(--nav-active-bg)}\n.sm-picker__icon{\n  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);\n  color:var(--accent);display:grid;place-items:center;font-size:13px;\n}\n.sm-dashed{\n  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);\n  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);\n}\n";
+export declare const ADMIN_CSS = "\n@import url(\"https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap\");\n\n.sm-admin{\n  --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;\n  --font-mono:ui-monospace,Menlo,Consolas,monospace;\n  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;\n  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;\n  --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;\n\n  --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;\n  --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;\n  --nav-w:200px; --inspector-w:300px;\n  --border:1px solid var(--line);\n  --outline-selection:1.5px solid var(--selection);\n\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\nhtml[data-theme=\"dark\"] .sm-admin,.sm-admin[data-theme=\"dark\"]{\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n@media (prefers-color-scheme:dark){\n  html:not([data-theme=\"light\"]) .sm-admin:not([data-theme=\"light\"]){\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n}\n/* Last, and the same specificity as the host-attribute rule: an explicit\n   choice from the theme toggle wins over a dark <html> and over the OS. */\n.sm-admin[data-theme=\"light\"]{\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\n\n/* The admin owns the viewport; a host <body> margin would push it into a\n   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */\nbody:has(.sm-admin){margin:0}\n.sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}\n.sm-admin{\n  font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;\n  color:var(--text);background:var(--surface);\n  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;\n}\n.sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}\n/* :where() keeps this at zero specificity \u2014 a bare <a> is accent, but any\n   component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own\n   colour. Without this the element selector silently beat every one of them. */\n:where(.sm-admin a){color:var(--accent);text-decoration:none}\n:where(.sm-admin a:hover){color:var(--brand-500)}\n.sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}\n.sm-admin ::placeholder{color:var(--text-subtle)}\n.sm-admin ::selection{background:var(--accent-soft);color:var(--text)}\n.sm-mono{font-family:var(--font-mono)}\n\n/* \u2500\u2500 shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}\n.sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n.sm-nav{\n  display:flex;flex-direction:column;gap:24px;padding:16px 12px;\n  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;\n}\n.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}\n.sm-nav>.sm-nav__logo{margin-left:10px}\n.sm-nav__list{display:flex;flex-direction:column;gap:1px}\n.sm-nav-item{\n  display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;\n  color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;\n  background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);\n  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\n}\n.sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}\n.sm-nav-item[aria-current=\"page\"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}\n.sm-nav-item[aria-current=\"page\"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}\n/* Not greyed: the reference renders every inactive item at --text and marks\n   the unavailable ones only by being inert (no pointer, no hover). */\n.sm-nav-item[aria-disabled=\"true\"]{cursor:default}\n.sm-nav-item[aria-disabled=\"true\"]:hover{background:transparent}\n.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}\n.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}\n.sm-nav-item--icon{display:flex;align-items:center;gap:8px}\n.sm-when-light{display:var(--when-light);align-items:center;gap:8px}\n.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}\n.sm-avatar{\n  width:24px;height:24px;flex:none;border-radius:var(--radius-round);\n  background:var(--accent-soft);color:var(--accent);\n  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;\n}\n\n/* \u2500\u2500 top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-topbar{\n  height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;\n  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);\n}\n.sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}\n.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}\n.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}\n.sm-crumbs__sep{opacity:.5}\n.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}\n.sm-back:hover{color:var(--accent)}\n.sm-title{font-size:var(--text-xl);font-weight:600}\n.sm-count{color:var(--text-muted)}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-btn{\n  display:inline-flex;align-items:center;justify-content:center;gap:6px;\n  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;\n  font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;\n  text-decoration:none;\n}\n.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}\n.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}\n.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}\n.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}\n.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}\n.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}\n.sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}\n.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}\n.sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}\n.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}\n.sm-btn:disabled,.sm-btn[aria-disabled=\"true\"]{opacity:.5;cursor:default;pointer-events:none}\n.sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,\n.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{\n  outline:2px solid var(--accent);outline-offset:1px\n}\n\n.sm-iconbtn{\n  width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;\n  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);\n  font-size:12px;line-height:1;cursor:pointer;\n}\n.sm-iconbtn:hover{background:var(--hover);color:var(--text)}\n.sm-iconbtn--inverse{color:#EEF0F5}\n.sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}\n.sm-iconbtn:disabled{opacity:.3;cursor:default}\n.sm-iconbtn:disabled:hover{background:transparent}\n\n/* \u2500\u2500 fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}\n.sm-label{\n  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);\n  text-transform:uppercase;color:var(--text-muted);\n}\n.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}\n.sm-input,.sm-textarea,.sm-select{\n  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);\n  outline:0;box-shadow:none;\n}\n.sm-input,.sm-select{height:var(--control-h);padding:0 10px}\n.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}\n.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}\n.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}\n.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}\n.sm-input:focus,.sm-textarea:focus,.sm-select:focus,\n.sm-inputwrap:focus-within{\n  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);\n}\n.sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}\n.sm-select{\n  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;\n  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),\n    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);\n  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;\n  background-size:4px 4px,4px 4px;background-repeat:no-repeat;\n}\n.sm-inputwrap{\n  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;\n  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);\n}\n.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}\n.sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}\n.sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}\n.sm-error{color:var(--danger);font-size:var(--text-sm)}\n\n.sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}\n.sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}\n.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}\n.sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h);padding:0 4px 0 4px}\n.sm-listrow__toggle{\n  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 4px;\n  border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);font-weight:500;\n  text-align:left;cursor:pointer;\n}\n.sm-listrow__toggle:hover{color:var(--accent)}\n.sm-listrow__summary{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px;border-top:1px solid var(--line)}\n\n/* \u2500\u2500 data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}\n.sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}\n.sm-table__head{\n  height:34px;border-bottom:var(--border);font-family:var(--font-mono);\n  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);\n  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;\n}\n.sm-table__body{display:flex;flex-direction:column;padding-top:4px}\n.sm-row{\n  height:var(--row-h);border-radius:var(--radius-md);background:transparent;\n  border:0;font:inherit;color:inherit;text-align:left;width:100%;\n}\n.sm-row--clickable{cursor:pointer}\n.sm-row--clickable:hover{background:var(--surface-inset)}\n.sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.sm-cell--muted{color:var(--text-muted)}\n.sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}\n.sm-cell--title{font-weight:500}\n.sm-empty{padding:28px 8px;color:var(--text-muted)}\n.sm-chevron{\n  width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;\n  color:var(--text-muted);cursor:pointer;line-height:1;\n}\n.sm-chevron:hover{color:var(--text)}\n.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}\n.sm-cell--tree.sm-cell--parent{font-weight:600}\n.sm-rowmenu{\n  border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;\n  border-radius:var(--radius-md);line-height:1;height:24px;\n}\n.sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}\n\n.sm-badge{\n  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;\n}\n.sm-savestate{\n  display:inline-flex;align-items:center;gap:6px;padding:0 6px;\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n}\n.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}\n\n/* \u2500\u2500 navigation bits \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}\n.sm-tab{\n  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;\n  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;\n}\n.sm-tab:hover{color:var(--text)}\n.sm-tab[aria-selected=\"true\"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}\n.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}\n.sm-seg--stretch{width:100%}\n.sm-seg--disabled{opacity:.6}\n.sm-seg__opt:disabled{cursor:default}\n.sm-seg__opt{\n  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;\n  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;\n}\n.sm-seg__opt:hover{color:var(--text)}\n.sm-seg__opt[aria-pressed=\"true\"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}\n.sm-divider{height:1px;background:var(--line);flex:none}\n.sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.sm-sectionlabel--mono>.sm-label{\n  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);\n}\n.sm-banner{\n  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);\n  font-size:var(--text-md);\n}\n.sm-banner--error{background:var(--danger-soft);color:var(--danger)}\n.sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}\n.sm-banner--warn{background:var(--warn-soft);color:var(--warn)}\n\n/* \u2500\u2500 editor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}\n.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}\n.sm-canvas__meta{\n  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;\n  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);\n}\n.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}\n.sm-page{\n  position:relative;background:var(--page-bg);border-radius:var(--radius-md);\n  box-shadow:var(--shadow-page);min-height:100%;\n}\n.sm-inspector{\n  display:flex;flex-direction:column;min-height:0;overflow:hidden;\n  border-left:var(--border);background:var(--surface);\n}\n.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}\n.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}\n.sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}\n.sm-blocktag{\n  position:absolute;top:0;left:0;background:var(--selection);color:#fff;\n  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;\n  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;\n  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;\n}\n.sm-blocktoolbar{\n  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);\n  box-shadow:var(--shadow-float);\n}\n.sm-plus{\n  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);\n  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;\n}\n.sm-plus:hover{background:var(--brand-500)}\n.sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}\n.sm-tooltip{\n  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;\n  border-radius:var(--radius-sm);white-space:nowrap;\n}\n.sm-outline-row{\n  display:flex;align-items:center;justify-content:space-between;gap:4px;\n  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;\n  color:var(--text);font-weight:500;background:transparent;\n  border:1px solid var(--line);\n}\n.sm-outline-row--clickable{cursor:pointer}\n.sm-outline-row--clickable:hover{background:var(--surface-inset)}\n/* Selected and locked rows are read by their fill, so they drop the hairline \u2014\n   border-color, not border, so every row keeps the same 28px box. */\n.sm-outline-row--selected,.sm-outline-row--selected:hover{\n  background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;\n}\n.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}\n.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}\n.sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n\n.sm-picker{\n  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);\n  padding:6px;box-shadow:var(--shadow-pop);\n}\n.sm-picker__item{\n  display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;\n  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;\n}\n.sm-picker__item:hover{background:var(--nav-active-bg)}\n.sm-picker__icon{\n  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);\n  color:var(--accent);display:grid;place-items:center;font-size:13px;\n}\n.sm-dashed{\n  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);\n  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);\n}\n";
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export declare const THEME_KEY = "smoodly-theme";
 /** One <style> element and the theme boot, rendered once by AdminLayout. */

package/dist/admin/ui/theme.js

@@ -232,6 +232,19 @@ body:has(.sm-admin){margin:0}
 .sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}
 .sm-error{color:var(--danger);font-size:var(--text-sm)}
 
+.sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}
+.sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}
+.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}
+.sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h);padding:0 4px 0 4px}
+.sm-listrow__toggle{
+  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 4px;
+  border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);font-weight:500;
+  text-align:left;cursor:pointer;
+}
+.sm-listrow__toggle:hover{color:var(--accent)}
+.sm-listrow__summary{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px;border-top:1px solid var(--line)}
+
 /* ── data ──────────────────────────────────────────────────────────── */
 .sm-table{display:flex;flex-direction:column;padding:0 16px 16px}
 .sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}

package/dist/admin/validate.d.ts

@@ -2,9 +2,14 @@ export type FieldError = {
     field: string;
     message: string;
 };
-export declare function validateFields(values: Record<string, unknown>, descriptors: Record<string, {
+type Desc = {
     type: string;
     optional?: unknown;
     options?: unknown;
     max?: unknown;
-}>): FieldError[];
+    min?: unknown;
+    fields?: unknown;
+    item?: unknown;
+};
+export declare function validateFields(values: Record<string, unknown>, descriptors: Record<string, Desc>): FieldError[];
+export {};

package/dist/admin/validate.js

@@ -1,19 +1,49 @@
+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);
-export function validateFields(values, descriptors) {
-    const errors = [];
-    for (const [field, d] of Object.entries(descriptors)) {
-        const value = values[field];
-        if (isEmpty(value)) {
-            if (d.optional !== true)
-                errors.push({ field, message: "Required." });
-            continue;
-        }
-        if (d.type === "select" && Array.isArray(d.options) && !d.options.includes(value)) {
-            errors.push({ field, message: `Must be one of: ${d.options.join(", ")}.` });
+/** An object whose every subfield is optional — or is itself an object that
+ *  may be absent — may be absent altogether. */
+const mayBeAbsent = (d) => d.optional === true || (d.type === "object" && Object.values(subfields(d)).every(mayBeAbsent));
+const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+function validateValue(path, value, d, errors) {
+    if (isEmpty(value)) {
+        if (!mayBeAbsent(d))
+            errors.push({ field: path, message: "Required." });
+        return;
+    }
+    if (d.type === "list") {
+        if (!Array.isArray(value)) {
+            errors.push({ field: path, message: "Must be a list." });
+            return;
         }
-        if (typeof d.max === "number" && typeof value === "string" && value.length > d.max) {
-            errors.push({ field, message: `Must be at most ${d.max} characters.` });
+        if (typeof d.min === "number" && value.length < d.min)
+            errors.push({ field: path, message: `At least ${plural(d.min, "item")}.` });
+        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));
+        return;
+    }
+    if (d.type === "object") {
+        if (typeof value !== "object" || Array.isArray(value)) {
+            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);
+        return;
     }
+    if (d.type === "select" && Array.isArray(d.options) && !d.options.includes(value)) {
+        errors.push({ field: path, message: `Must be one of: ${d.options.join(", ")}.` });
+    }
+    if (typeof d.max === "number" && typeof value === "string" && value.length > d.max) {
+        errors.push({ field: path, message: `Must be at most ${d.max} characters.` });
+    }
+}
+export function validateFields(values, descriptors) {
+    const errors = [];
+    for (const [field, d] of Object.entries(descriptors))
+        validateValue(field, values[field], d, errors);
     return errors;
 }

package/dist/collections.d.ts

@@ -9,7 +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> = {
-    kind: "collection";
+    /** "shared" marks a code-declared singleton (spec 2026-09-07 decision
+     *  4): a shared item IS a collection with one entry, so both entry
+     *  stores accept it in the same list and branch on this. */
+    kind: "collection" | "shared";
     name: string;
     title: string;
     titleField?: string;

package/dist/config.d.ts

@@ -1,5 +1,6 @@
 import type { Descriptor, FieldBuilder } from "./fields.ts";
 import type { CollectionSchema } from "./collections.ts";
+import type { SharedSchema } from "./shared.ts";
 type Registered = {
     schema: {
         kind: string;
@@ -19,6 +20,8 @@ export type SmoodlyConfig = {
         collections?: CollectionSchema<any>[];
         /** Page shapes and entry pages alike — everything that renders a URL. */
         pages?: Registered[];
+        /** Shared content: code-declared singletons (spec 2026-09-07). */
+        shared?: SharedSchema[];
     };
     locales: {
         default: string;