smoodly 0.0.15 → 0.0.17

package/dist/admin/shell/GlobalFields.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CSS_KEY, SETTINGS_KEY, STYLES_KEY } from "../../global.js";
+import { FieldWidget } from "../forms/FieldWidget.js";
+import { InspectorFields, valueOf } from "../editor/InspectorFields.js";
+import { UnlocalizedMark } from "../ui/primitives.js";
+/** The item's value map as the inspector reads it: the reserved keys pulled out into their namespaces. */
+export function globalValues(fields) {
+    const ns = (key) => (fields[key] && typeof fields[key] === "object" ? fields[key] : {});
+    return { fields, settings: ns(SETTINGS_KEY), styles: ns(STYLES_KEY), css: typeof fields[CSS_KEY] === "string" ? fields[CSS_KEY] : undefined };
+}
+export function GlobalFields({ item, groups, fields, errors, refOptions, multilingual, inlinePath, onEditHere, onChange }) {
+    const values = globalValues(fields);
+    return (_jsx(InspectorFields, { groups: groups, values: values, render: ({ key, ns, descriptor }, { emptyLabel, scope }) => {
+            const target = (descriptor.type === "ref" || descriptor.type === "refList") && typeof descriptor.target === "string" ? descriptor.target : null;
+            const localized = ns === "fields" && item.fields[key]?.localized === true;
+            return (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: valueOf(values, { key, ns, descriptor }), emptyLabel: emptyLabel, scope: scope, errors: errors, refOptions: target ? refOptions[target] ?? [] : undefined, mark: ns === "fields" && multilingual && !localized ? _jsx(UnlocalizedMark, {}) : undefined, inlinePath: ns === "fields" ? inlinePath : undefined, onEditHere: onEditHere, onChange: (value) => onChange(ns, key, value) }, `${ns}.${key}`));
+        } }));
+}

package/dist/admin/shell/{SharedForm.d.ts → GlobalForm.d.ts}

@@ -1,6 +1,6 @@
 import type { AdminOps } from "../ops.ts";
 import type { AdminRegistry } from "../serialize.ts";
-export declare function SharedForm({ ops, registry, name }: {
+export declare function GlobalForm({ ops, registry, name }: {
     ops: AdminOps;
     registry: AdminRegistry;
     name: string;

package/dist/admin/shell/GlobalForm.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// One Globals item (global content, spec 2026-09-07 §6), one locale: the
+// entry form's shape without what a singleton never has — no slug, no
+// delete, no add/remove locale (every supported locale exists by
+// construction), no site URL. The fields in schema order, a globe-off
+// mark after the name of each that is not .localized(), and for a visual
+// item the Settings tab's groups stacked after the content, edited under
+// the reserved `$settings` / `$styles` / `$css` keys (spec 2026-09-14 §5). Since
+// 2026-09-14 it autosaves like the entry form: no Save button, the top
+// bar carries the indicator and the one publish control, publish
+// validates the draft and lists the fields in an amber banner. "Used on
+// N pages" is the refs index's answer.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { CSS_KEY, SETTINGS_KEY, STYLES_KEY } from "../../global.js";
+import { tabsFor } from "../forms/tabs.js";
+import { revealField } from "../forms/reveal.js";
+import { useDraftAutosave } from "../editor/autosave.js";
+import { updatedLine } from "../ui/format.js";
+import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
+import { Banner, Breadcrumb, FieldErrorList, InfoRow, SaveIndicator, SectionLabel, TopBar } from "../ui/primitives.js";
+import { PublishControl } from "../ui/PublishControl.js";
+import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
+import { localeStatusOf } from "./pages-tree.js";
+import { ResizeHandle } from "../ui/ResizeHandle.js";
+import { entryTitle } from "./entries-list.js";
+import { BASE } from "./base.js";
+import { GlobalFields } from "./GlobalFields.js";
+import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
+import { useLeaveGuard } from "./router.js";
+export function GlobalForm({ ops, registry, name }) {
+    const item = registry.globals.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 [notice, setNotice] = useState(null);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [dirty, setDirty] = useState(false);
+    const [touched, setTouched] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const [published, setPublished] = useState(false);
+    const [reloadKey, setReloadKey] = useState(0);
+    const [history, setHistory] = useState(null);
+    const [snapshot, setSnapshot] = useState(null);
+    const formRef = useRef(null);
+    const fieldsRef = useRef(fields);
+    fieldsRef.current = fields;
+    const { saveState, mark, flush } = useDraftAutosave({
+        read: () => fieldsRef.current,
+        persist: async (value) => {
+            const r = await ops.globals.save(name, locale, value);
+            if (r.ok)
+                setRecord(r.data);
+            return r;
+        },
+        onSaved: () => setDirty(false),
+    });
+    useLeaveGuard(dirty || saveState !== "saved");
+    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]);
+    useEffect(() => {
+        let cancelled = false;
+        setFields(null);
+        setFieldErrors({});
+        setDirty(false);
+        setTouched(false);
+        ops.globals.get(name, locale).then((r) => {
+            if (cancelled)
+                return;
+            if (r.ok) {
+                setRecord(r.data.record);
+                setFields(r.data.fields);
+                setUsage(r.data.usage);
+            }
+            else
+                setNotice({ tone: "error", text: r.message });
+        }).catch(() => { if (!cancelled)
+            setNotice({ tone: "error", text: "Couldn't reach the server." }); });
+        return () => { cancelled = true; };
+    }, [ops, name, locale, reloadKey]);
+    // 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 global item." });
+    const row = record?.locales[locale];
+    const status = row ? localeStatusOf(row) : null;
+    const fail = (r) => {
+        if (r.code === "validation" && r.fields && r.fields.length > 0) {
+            setFieldErrors(Object.fromEntries(r.fields.map((f) => [f.field, f.message])));
+            setNotice({ tone: "warn", text: r.message, fields: r.fields });
+        }
+        else
+            setNotice({ tone: "error", text: r.message });
+    };
+    const publish = async () => {
+        setNotice(null);
+        setBusy("publish");
+        if (!(await flush())) {
+            setBusy(null);
+            setNotice({ tone: "error", text: "Couldn't save your latest changes — publish cancelled." });
+            return;
+        }
+        let r;
+        try {
+            r = await ops.globals.setStatus(name, locale, "published");
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setBusy(null);
+        if (!r.ok) {
+            fail(r);
+            return;
+        }
+        setRecord(r.data);
+        setFieldErrors({});
+        setPublished(true);
+        setTimeout(() => setPublished(false), 1600);
+    };
+    const unpublish = async () => {
+        setNotice(null);
+        setBusy("unpublish");
+        let r;
+        try {
+            r = await ops.globals.setStatus(name, locale, "draft");
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setBusy(null);
+        if (r.ok)
+            setRecord(r.data);
+        else
+            fail(r);
+    };
+    const discard = async () => {
+        if (!window.confirm("Discard your changes and restore the published version?"))
+            return;
+        setNotice(null);
+        setBusy("discard");
+        if (!(await flush())) {
+            setBusy(null);
+            setNotice({ tone: "error", text: "Couldn't save your latest changes — discard cancelled." });
+            return;
+        }
+        let r;
+        try {
+            r = await ops.globals.discardDraft(name, locale);
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setBusy(null);
+        if (!r.ok) {
+            fail(r);
+            return;
+        }
+        setRecord(r.data);
+        setReloadKey((k) => k + 1);
+        setNotice({ tone: "ok", text: "Changes discarded." });
+    };
+    const openHistory = async () => {
+        if (!row)
+            return;
+        if (!(await flush())) {
+            setNotice({ tone: "error", text: "Couldn't save your latest changes — history not opened." });
+            return;
+        }
+        const r = await ops.globals.listVersions(name, locale);
+        if (!r.ok) {
+            fail(r);
+            return;
+        }
+        setSnapshot(null);
+        setHistory(historyRows(r.data, row));
+    };
+    const loadSnapshot = async (versionId) => {
+        const r = await ops.globals.getVersion(name, versionId);
+        if (r.ok)
+            setSnapshot({ id: r.data.id, fields: r.data.fields });
+        else
+            fail(r);
+    };
+    const restore = async (versionId) => {
+        const r = await ops.globals.restore(name, locale, versionId);
+        if (!r.ok) {
+            fail(r);
+            return false;
+        }
+        setRecord(r.data);
+        setReloadKey((k) => k + 1);
+        setNotice({ tone: "ok", text: "Version restored." });
+        return true;
+    };
+    const switchLocale = async (next) => {
+        if (next === locale)
+            return;
+        if (!(await flush())) {
+            setNotice({ tone: "error", text: "Couldn't save your latest changes — stayed on this locale." });
+            return;
+        }
+        writeLocaleToUrl(next);
+        setNotice(null);
+        setLocale(next);
+    };
+    const pages = new Set(usage.filter((u) => u.sourceKind === "page").map((u) => u.sourceId));
+    // The Globals page has no tab row: Content's groups, then Settings' under one title.
+    const tabs = tabsFor(item);
+    const contentGroups = tabs.find((t) => t.tab === "Content")?.groups ?? [];
+    const settingGroups = tabs.find((t) => t.tab === "Settings")?.groups ?? [];
+    const onChange = (ns, key, value) => {
+        setFields((f) => {
+            const cur = f ?? {};
+            if (ns === "fields")
+                return { ...cur, [key]: value };
+            if (ns === "css") {
+                const { [CSS_KEY]: _old, ...rest } = cur;
+                return value === undefined || value === "" ? rest : { ...rest, [CSS_KEY]: value };
+            }
+            const nsKey = ns === "settings" ? SETTINGS_KEY : STYLES_KEY;
+            return { ...cur, [nsKey]: { ...(cur[nsKey] ?? {}), [key]: value } };
+        });
+        setDirty(true);
+        setTouched(true);
+        mark();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/globals`, items: [
+                            {
+                                label: "Globals", href: `${BASE}/globals`,
+                                trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: (l) => { void switchLocale(l); }, onAdd: () => undefined })),
+                            },
+                            { label: item.title },
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsxs("fieldset", { disabled: true, className: "sm-history__form", children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } })] }))] })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
+                                            revealField(formRef.current, path); } })] })), 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: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange })] }))] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsx("aside", { className: "sm-inspector", children: record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] })) })] })] }));
+}

package/dist/admin/shell/{SharedList.d.ts → GlobalList.d.ts}

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

package/dist/admin/shell/{SharedList.js → GlobalList.js}

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-// The Globals list (shared content, spec 2026-09-07 §6; renamed in the
-// UI 2026-09-09, the route stays /shared): every registered item is
+// The Globals list (global content, spec 2026-09-07 §6; renamed in the
+// UI 2026-09-09, the route is /globals): 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
+// editors — the registry declares the items and ops.globals.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 { globalRows } from "./global-list.js";
+import { statusLabel } from "../ui/status-label.js";
 import { StatusBadge } from "../ui/primitives.js";
 import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { relativeTime } from "../ui/format.js";
@@ -25,7 +26,7 @@ function rememberedLocale(registry) {
     }
     return registry.locales.default;
 }
-export function SharedList({ ops, registry }) {
+export function GlobalList({ ops, registry }) {
     const [items, setItems] = useState(null);
     const [error, setError] = useState(null);
     const [locale, setLocale] = useState(() => rememberedLocale(registry));
@@ -38,27 +39,27 @@ export function SharedList({ ops, registry }) {
         catch { /* see rememberedLocale */ }
     };
     const load = useCallback(() => {
-        ops.shared.list()
+        ops.globals.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) : [];
+    const rows = items ? globalRows(items, registry, locale) : [];
     return (_jsx(ListView, { title: "Globals", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
             { label: "Title", width: "minmax(160px,1fr)" },
             { label: "Kind", width: "90px" },
             { label: "Updated", width: "minmax(110px,160px)" },
-            { label: "Status", width: "120px" },
-        ], empty: items ? "No shared content is registered." : "Loading…", rows: rows.map((row) => ({
+            { label: "Status", width: "170px" },
+        ], empty: items ? "No globals are registered." : "Loading…", rows: rows.map((row) => ({
             key: row.name,
-            href: `${BASE}/shared/${encodeURIComponent(row.name)}?locale=${encodeURIComponent(locale)}`,
+            href: `${BASE}/globals/${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"),
+                _jsx(StatusBadge, { status: statusLabel(row.status) }, "s"),
             ],
         })) }));
 }

package/dist/admin/shell/IconRail.js

@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //
 // Items are registry-derived, never separately configured: Pages, then
 // Collections — one rail item whose flyout lists every collection — then
-// Media, Globals (the shared content items, when the registry has any;
-// the route stays /shared), and Settings, shown but inert until it
+// Media, Globals (the global content items, when the registry has any;
+// the route is /globals), and Settings, shown but inert until it
 // exists. The user avatar is pinned to the bottom and opens the same
 // flyout with the theme toggle and Sign out, which the old nav's footer
 // held.
@@ -18,12 +18,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ↑/↓ move between entries, a pointer down outside closes. A child being
 // active highlights its parent tile and the entry inside the menu.
 import { useEffect, useId, useRef, useState } from "react";
-import { ChevronDown, Image, LayoutPanelTop, Library, Settings2, Square } from "lucide-react";
+import { Globe, Image, LibraryBig, PanelTop, Settings } from "lucide-react";
 import { ThemeToggle } from "../ui/primitives.js";
 import { BASE } from "./base.js";
 import { RouteLink } from "./RouteLink.js";
 /** Lucide at the rail's size and stroke (the tile's CSS restates both). */
-const ICON = { size: 18, strokeWidth: 1.75, "aria-hidden": true };
+const ICON = { size: 18, strokeWidth: 2, "aria-hidden": true };
 /** The app icon, inlined: a package can't ship a file into the host app's
  *  /public. Brand blue on white in both themes, so no --logo-filter. */
 function AppIcon() {
@@ -33,14 +33,20 @@ export function IconRail({ registry, active, email, onSignOut }) {
     const root = useRef(null);
     const uid = useId();
     const [open, setOpen] = useState(null);
+    // Collections opens on hover as well (spec 2026-09-15 rail tweaks): a hover
+    // open closes when the pointer leaves and never steals focus; a click open
+    // is sticky and moves focus into the menu for the keyboard.
+    const [hovered, setHovered] = useState(false);
     const menuId = (key) => `sm-rail-menu${uid}${key}`;
     const toggle = (key) => setOpen((cur) => (cur === key ? null : key));
     const close = () => setOpen(null);
-    // Opening moves focus into the menu; a pointer down outside closes it.
+    const hoverLeave = () => setHovered(false);
+    // A click open moves focus into the menu; a pointer down outside closes it.
     useEffect(() => {
         if (!open || !root.current)
             return;
-        root.current.querySelector(`#${CSS.escape(menuId(open))} [role=menuitem]`)?.focus();
+        if (!hovered)
+            root.current.querySelector(`#${CSS.escape(menuId(open))} [role=menuitem]`)?.focus();
         const onPointerDown = (e) => {
             if (e.target instanceof Node && !root.current?.contains(e.target))
                 close();
@@ -68,7 +74,8 @@ export function IconRail({ registry, active, email, onSignOut }) {
     const link = (key, label, icon, href) => (_jsx("li", { className: "sm-rail__item", children: href ? (_jsxs(RouteLink, { className: "sm-rail__btn", href: href, "aria-current": key === active ? "page" : undefined, onClick: close, children: [_jsx("span", { className: "sm-rail__tile", children: icon }), _jsx("span", { className: "sm-rail__label", children: label })] })) : (_jsxs("a", { className: "sm-rail__btn", "aria-disabled": true, children: [_jsx("span", { className: "sm-rail__tile", children: icon }), _jsx("span", { className: "sm-rail__label", children: label })] })) }));
     const collections = registry.collections;
     const collectionActive = collections.some((c) => c.name === active);
+    const collectionsOpen = open === "collections" || (hovered && open === null);
     const name = email?.split("@")[0] ?? "Editor";
     const initials = name.slice(0, 2).toUpperCase();
-    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(Square, { ...ICON }), `${BASE}/pages`), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": open === "collections", "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsxs("span", { className: "sm-rail__tile", children: [_jsx(Library, { ...ICON }), _jsx("span", { className: "sm-rail__chev", children: _jsx(ChevronDown, { ...ICON, size: 8, strokeWidth: 3 }) })] }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsxs("ul", { className: "sm-rail__menu", role: "menu", id: menuId("collections"), "data-open": open === "collections", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: "Collections" }), collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: `${BASE}/${c.name}`, "aria-current": c.name === active ? "page" : undefined, onClick: close, children: _jsx("span", { children: c.title }) }) }, c.name)))] })] })), link("media", "Media", _jsx(Image, { ...ICON }), `${BASE}/media`), registry.shared.length > 0 && link("shared", "Globals", _jsx(LayoutPanelTop, { ...ICON }), `${BASE}/shared`), link("settings", "Settings", _jsx(Settings2, { ...ICON }), null)] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
+    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), `${BASE}/pages`), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: `${BASE}/${c.name}`, "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), `${BASE}/media`), registry.globals.length > 0 && link("globals", "Globals", _jsx(Globe, { ...ICON }), `${BASE}/globals`), link("settings", "Settings", _jsx(Settings, { ...ICON }), null)] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
 }

package/dist/admin/shell/PagesList.js

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useState } from "react";
 import { ListView } from "./ListView.js";
 import { canDragRow, openTemplates, pagesTreeRows, projectDrop, sourceLocaleOf, subtreeHeight } from "./pages-tree.js";
 import { Button, StatusBadge } from "../ui/primitives.js";
+import { statusLabel } from "../ui/status-label.js";
 import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { useSortable } from "../ui/useSortable.js";
 import { BASE } from "./base.js";
@@ -153,7 +154,6 @@ export function PagesList({ ops, registry }) {
             return;
         void run(() => ops.pages.rename(row.id, { locale, title, slug }));
     };
-    const move = (row, dir) => void run(() => ops.pages.move(row.id, { parentId: row.parentId, index: row.index + dir }));
     const destroy = (row) => {
         const scope = row.locales.length > 1 ? ` in every language (${row.locales.join(", ")})` : "";
         if (!window.confirm(`Delete "${row.title}"${scope}?`))
@@ -174,11 +174,7 @@ export function PagesList({ ops, registry }) {
             items.push({ label: "Add page here", run: () => addPageHere(row) });
         if (!row.fixed)
             items.push({ label: "Rename…", run: () => rename(row) });
-        // Every row reorders among its siblings, fixed nodes and the home page included (root order is nothing code owns).
-        if (row.index > 0)
-            items.push({ label: "Move up", run: () => move(row, -1) });
-        if (row.index < row.siblingCount - 1)
-            items.push({ label: "Move down", run: () => move(row, 1) });
+        // Reordering is the grip's (drag, or its arrow keys) — no Move up / Move down here.
         if (multilingual && !row.fixed && !row.isHome && row.locales.length > 1) {
             items.push({ label: `Remove from ${locale}`, run: () => removeLocale(row) });
         }
@@ -207,7 +203,7 @@ export function PagesList({ ops, registry }) {
                     { label: "Title", width: "minmax(160px,1fr)" },
                     { label: "Path", width: "minmax(140px,260px)" },
                     { label: "Template", width: "minmax(100px,160px)" },
-                    { label: "Status", width: "110px" },
+                    { label: "Status", width: "170px" },
                     { label: "", width: "32px" },
                 ], empty: pages ? "No pages yet." : "Loading…", sortable: { hook: sortable, canDrag: (i) => canDragRow(rows[i]) }, rows: rows.map((row, i) => {
                     // An absent node is still a row (structure is shared) but reads as dimmed.
@@ -225,7 +221,7 @@ export function PagesList({ ops, registry }) {
                                 : _jsxs("span", { className: "sm-cell sm-cell--muted", children: ["not in ", locale, " \u2014 click to add"] }, "p"),
                             _jsx("span", { className: "sm-cell sm-cell--muted", style: dim, children: row.templateTitle }, "k"),
                             row.status
-                                ? _jsx(StatusBadge, { status: row.status }, "s")
+                                ? _jsx(StatusBadge, { status: statusLabel(row.status) }, "s")
                                 : _jsx("span", { className: "sm-cell sm-cell--muted", children: "\u2014" }, "s"),
                             _jsx("button", { type: "button", className: "sm-rowmenu", "aria-label": "Row menu", onClick: (e) => { e.stopPropagation(); setMenu({ row, x: e.clientX, y: e.clientY }); }, onKeyDown: (e) => e.stopPropagation(), children: "\u00B7\u00B7\u00B7" }, "m"),
                         ],

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

@@ -9,8 +9,8 @@ export type EntryRow = {
     /** The locale row's updatedAt when present, else the node's. */
     updatedAt: number;
 };
-/** The title field's value in a locale: its own, else the default
- *  locale's, else any locale's, else the id. Display only — a shared
+/** The entry's title in the selected locale, else the default locale's, else any locale's;
+ *  "Untitled" when every one is empty (spec 2026-09-14 §4). Display only — a shared
  *  title field reads the same from every locale. */
 export declare function entryTitle(record: EntryRecord, meta: AdminCollection, registry: AdminRegistry, locale: string): string;
 /** The locale an "Add <locale>" copies from: the default when the record has it, else its first. */

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

@@ -1,6 +1,6 @@
 import { localeStatusOf } from "./pages-tree.js";
-/** The title field's value in a locale: its own, else the default
- *  locale's, else any locale's, else the id. Display only — a shared
+/** The entry's title in the selected locale, else the default locale's, else any locale's;
+ *  "Untitled" when every one is empty (spec 2026-09-14 §4). Display only — a shared
  *  title field reads the same from every locale. */
 export function entryTitle(record, meta, registry, locale) {
     const key = meta.titleField;
@@ -11,7 +11,7 @@ export function entryTitle(record, meta, registry, locale) {
         const value = key in row.fields ? row.fields[key] : record.fields[key];
         return typeof value === "string" && value.length > 0 ? value : undefined;
     };
-    return from(locale) ?? from(registry.locales.default) ?? Object.keys(record.locales).map(from).find((t) => t !== undefined) ?? record.id;
+    return from(locale) ?? from(registry.locales.default) ?? Object.keys(record.locales).map(from).find((t) => t !== undefined) ?? "Untitled";
 }
 /** The locale an "Add <locale>" copies from: the default when the record has it, else its first. */
 export function entrySourceLocale(record, registry) {

package/dist/admin/shell/{shared-list.d.ts → global-list.d.ts}

@@ -1,14 +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 = {
+export type GlobalRow = {
     name: string;
     title: string;
     flavour: "Visual" | "Fields";
     status: LocaleStatus;
     updatedAt: number;
 };
-export declare function sharedRows(items: {
+export declare function globalRows(items: {
     name: string;
     record: EntryRecord;
-}[], registry: AdminRegistry, locale: string): SharedRow[];
+}[], registry: AdminRegistry, locale: string): GlobalRow[];

package/dist/admin/shell/{shared-list.js → global-list.js}

@@ -1,7 +1,7 @@
 import { localeStatusOf } from "./pages-tree.js";
-export function sharedRows(items, registry, locale) {
+export function globalRows(items, registry, locale) {
     const byName = new Map(items.map((i) => [i.name, i.record]));
-    return registry.shared.flatMap((item) => {
+    return registry.globals.flatMap((item) => {
         const record = byName.get(item.name);
         const row = record?.locales[locale];
         if (!record || !row)

package/dist/admin/supabase-auth.js

@@ -11,7 +11,7 @@ export function supabaseAdminAuth(input) {
     return {
         async verify(token) {
             const res = await auth.auth.getUser(token);
-            return res.data.user ? { userId: res.data.user.id } : null;
+            return res.data.user ? { userId: res.data.user.id, email: res.data.user.email ?? null } : null;
         },
         async isEditor(userId) {
             const res = await input.db.from("editors").select("user_id").eq("user_id", userId).limit(1);

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, AdminShared } from "./serialize.ts";
+import type { AdminSection, AdminGlobal } 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;
@@ -10,7 +10,9 @@ export declare function moveNode(tree: PageTree, id: string, dir: -1 | 1): PageT
  *  then spliced in — moveItem's convention); clamped, and the same tree
  *  when nothing changes. The drop path; `moveNode` stays for the arrows. */
 export declare function moveNodeTo(tree: PageTree, id: string, index: number): PageTree;
-export declare function patchNode(tree: PageTree, id: string, ns: "fields" | "styles" | "meta", key: string, value: unknown): PageTree;
+export declare function patchNode(tree: PageTree, id: string, ns: "fields" | "settings" | "styles", key: string, value: unknown): PageTree;
+/** The node's custom CSS (spec 2026-09-14 §4); undefined or "" removes the key. */
+export declare function patchNodeCss(tree: PageTree, id: string, css: string | undefined): PageTree;
 /** 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 declare function patchNodePath(tree: PageTree, id: string, path: string, value: unknown): PageTree;
@@ -18,19 +20,19 @@ export declare function canInsert(policy: ZonePolicy | undefined, count: number)
 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[];
+export declare function allowedGlobals(policy: ZonePolicy | undefined, globals: AdminGlobal[], globalIds: Record<string, string>): AdminGlobal[];
 /** 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;
-/** Also fills an element node (an `AdminElement` is a section shape plus contexts). */
-export declare function nodeFromSample(section: Pick<AdminSection, "name" | "fields" | "styles" | "sample">, id: string): TreeNode;
+export declare function placementNode(item: AdminGlobal, ref: string, id: string): TreeNode;
+/** Also fills an element node (an `AdminElement` is a section shape plus contexts). Never seeds `styles` or `css`: Default stores nothing (spec 2026-09-14 §2). */
+export declare function nodeFromSample(section: Pick<AdminSection, "name" | "fields" | "settings" | "sample">, id: string): TreeNode;
 /** 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 declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[], sharedIds?: Record<string, string>): PageTree;
+export declare function fillLockedZones(tree: PageTree, policies: Record<string, ZonePolicy>, sections: AdminSection[], globalIds?: Record<string, string>): PageTree;
 export declare function newNodeId(type: string): string;
 /** A page-level value — the template's page fields or the SEO meta (spec 2026-09-10 page fields §5). */
 export declare function patchPage(tree: PageTree, ns: "fields" | "meta", key: string, value: unknown): PageTree;