smoodly 0.0.16 → 0.0.17

package/dist/admin/editor/EditorView.js

@@ -28,26 +28,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Core code: no next/* imports live here — the bridge is the only piece
 // that knows about Next, and it ships to the site, not the admin.
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { SHARED_NODE_TYPE, STYLES_KEY, sharedNameOf } from "../../shared.js";
+import { CSS_KEY, GLOBAL_NODE_TYPE, SETTINGS_KEY, STYLES_KEY, globalNameOf } from "../../global.js";
 import { descriptorAt, getAtPath } from "../field-paths.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { revealField } from "../forms/reveal.js";
 import { tabOf, tabsFor } from "../forms/tabs.js";
-import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, moveNodeTo, newNodeId, nodeFromSample, patchNode, patchNodePath, patchPage, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
+import { InspectorFields, valueOf } from "./InspectorFields.js";
+import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, moveNodeTo, newNodeId, nodeFromSample, patchNode, patchNodeCss, patchNodePath, patchPage, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
 import { useDraftAutosave } from "./autosave.js";
 import { CanvasOverlay } from "./CanvasOverlay.js";
 import { InlineRichtext } from "./InlineRichtext.js";
 import { InsertPicker } from "./InsertPicker.js";
+import { customNode, customNodeLabel, customSection } from "../custom-section.js";
+import { CUSTOM_NODE_TYPE } from "../../custom/index.js";
 import { NoticePane } from "./NoticePane.js";
 import { Outline } from "./Outline.js";
 import { PageInspector } from "./PageInspector.js";
-import { SharedInspector } from "./SharedInspector.js";
+import { GlobalInspector } from "./GlobalInspector.js";
 import { localeFromUrl } from "./locale-url.js";
 import { plusButtonsFor } from "./overlay-geometry.js";
 import { useCanvasBridge } from "./useCanvasBridge.js";
 import { useInlineSession } from "./useInlineSession.js";
 import { usePageLocale } from "./usePageLocale.js";
-import { useSharedEdit } from "./useSharedEdit.js";
+import { useGlobalEdit } from "./useGlobalEdit.js";
 import { BASE } from "../shell/base.js";
 import { isFixedNode, localeStatusOf, sourceLocaleOf } from "../shell/pages-tree.js";
 import { entryTitle } from "../shell/entries-list.js";
@@ -89,14 +92,14 @@ export function EditorView({ ops, registry, id }) {
     const [dirty, setDirty] = useState(false);
     /** Any edit on this canvas yet: the autosave indicator stays hidden until the first one (§6). */
     const [touched, setTouched] = useState(false);
-    const [sharedBusy, setSharedBusy] = useState(null);
-    /** A shared edit since the item's last save ack; and any shared edit on this canvas yet. */
-    const [sharedDirty, setSharedDirty] = useState(false);
-    const [sharedTouched, setSharedTouched] = useState(false);
+    const [globalBusy, setGlobalBusy] = useState(null);
+    /** A global edit since the item's last save ack; and any global edit on this canvas yet. */
+    const [globalDirty, setGlobalDirty] = useState(false);
+    const [globalTouched, setGlobalTouched] = useState(false);
     const [refOptions, setRefOptions] = useState({});
-    // Shared item name → row id, loaded once per editor mount: the picker's
-    // Shared group and a bound locked zone need the id to place a node.
-    const [sharedIds, setSharedIds] = useState(null);
+    // Global item name → row id, loaded once per editor mount: the picker's
+    // Global group and a bound locked zone need the id to place a node.
+    const [globalIds, setGlobalIds] = useState(null);
     const iframeRef = useRef(null);
     const scrollerRef = useRef(null);
     const treeRef = useRef(null);
@@ -124,17 +127,17 @@ export function EditorView({ ops, registry, id }) {
         },
         onSaved: () => inlineRef.current?.onSaved(),
     });
-    // Edits to a shared block go to the shared entry through their own
+    // Edits to a global block go to the global entry through their own
     // autosave (spec 2026-09-13 §4); the save ack refreshes the canvas
     // through the same inline-session deferral as the page's.
-    const sharedEdit = useSharedEdit({ ops, onSaved: () => { setSharedDirty(false); inlineRef.current?.onSaved(); } });
-    const patchShared = (name, path, value) => {
-        sharedEdit.patch(name, path, value);
-        setSharedDirty(true);
-        setSharedTouched(true);
+    const globalEdit = useGlobalEdit({ ops, onSaved: () => { setGlobalDirty(false); inlineRef.current?.onSaved(); } });
+    const patchGlobal = (name, path, value) => {
+        globalEdit.patch(name, path, value);
+        setGlobalDirty(true);
+        setGlobalTouched(true);
     };
-    /** Both targets, page first: a locale switch must leave nothing pending on either. Page Publish keeps `flush()` — it never touches a shared item. */
-    const flushAll = useCallback(async () => (await flush()) && (await sharedEdit.flush()), [flush, sharedEdit.flush]);
+    /** Both targets, page first: a locale switch must leave nothing pending on either. Page Publish keeps `flush()` — it never touches a global item. */
+    const flushAll = useCallback(async () => (await flush()) && (await globalEdit.flush()), [flush, globalEdit.flush]);
     const { locale, adding, switchLocale, doAddLocale, doRemoveLocale } = usePageLocale({
         registry, ops, id, record, setRecord, flush: flushAll,
         fail: (text) => setBanner({ text }),
@@ -173,11 +176,11 @@ export function EditorView({ ops, registry, id }) {
             setSelectedId(null);
             setHoverId(null);
             setFolder(false);
-            sharedEdit.reset(); // a new locale or a reload is a new canvas; the switch flushed first
+            globalEdit.reset(); // a new locale or a reload is a new canvas; the switch flushed first
             setDirty(false);
             setTouched(false);
-            setSharedDirty(false);
-            setSharedTouched(false);
+            setGlobalDirty(false);
+            setGlobalTouched(false);
             // ops is a server action — it can reject outright (offline, 500,
             // aborted), not just resolve to a typed error. Either failure mode
             // must land on the same full-pane error, never a hung load.
@@ -269,27 +272,28 @@ export function EditorView({ ops, registry, id }) {
     const template = useMemo(() => (record ? registry.pages.find((p) => p.name === record.template) ?? null : null), [record, registry]);
     const zoneOrder = useMemo(() => Object.keys(template?.zones ?? {}), [template]);
     const policyOf = useCallback((zone) => (zone ? template?.zones[zone] : undefined), [template]);
-    const sectionOf = useCallback((type) => registry.sections.find((s) => s.name === type) ?? null, [registry]);
-    /** The shared item a placement node places, or null for any other node. */
-    const sharedOf = useCallback((node) => {
-        if (node.type !== SHARED_NODE_TYPE)
+    // The custom section (spec 2026-09-14 §6) is the registry's one synthetic section.
+    const sectionOf = useCallback((type) => (type === CUSTOM_NODE_TYPE ? customSection(registry) : registry.sections.find((s) => s.name === type) ?? null), [registry]);
+    /** The global item a placement node places, or null for any other node. */
+    const globalOf = useCallback((node) => {
+        if (node.type !== GLOBAL_NODE_TYPE)
             return null;
-        return registry.shared.find((s) => s.name === node.fields?.item) ?? null;
+        return registry.globals.find((s) => s.name === node.fields?.item) ?? null;
     }, [registry]);
-    /** The shared item behind a node id: a placement's, by the tree, or a layout-rendered
-     *  item's, by its `shared:` id (spec 2026-09-13 §1). Reads the refs — safe at event time. */
-    const sharedItemOf = useCallback((id) => {
+    /** The global item behind a node id: a placement's, by the tree, or a layout-rendered
+     *  item's, by its `global:` id (spec 2026-09-13 §1). Reads the refs — safe at event time. */
+    const globalItemOf = useCallback((id) => {
         const node = treeRef.current ? findNode(treeRef.current, id) : null;
         if (node)
-            return sharedOf(node);
-        const name = sharedNameOf(id);
-        return name ? registryRef.current.shared.find((s) => s.name === name) ?? null : null;
-    }, [sharedOf]);
+            return globalOf(node);
+        const name = globalNameOf(id);
+        return name ? registryRef.current.globals.find((s) => s.name === name) ?? null : null;
+    }, [globalOf]);
     // ── ref fields inside sections: same option loading as EntryForm ──────
     const refTargets = useMemo(() => {
         const out = {};
         for (const section of registry.sections) {
-            for (const ns of ["fields", "styles", "meta"]) {
+            for (const ns of ["fields", "settings"]) {
                 for (const [key, d] of Object.entries(section[ns] ?? {})) {
                     if ((d.type === "ref" || d.type === "refList") && typeof d.target === "string") {
                         out[`${section.name}.${ns}.${key}`] = d.target;
@@ -325,36 +329,36 @@ export function EditorView({ ops, registry, id }) {
         return () => { cancelled = true; };
     }, [ops, refTargets, registry, locale]);
     useEffect(() => {
-        if (registryRef.current.shared.length === 0) {
-            setSharedIds({});
+        if (registryRef.current.globals.length === 0) {
+            setGlobalIds({});
             return;
         }
         let cancelled = false;
-        // A failed load leaves the map empty: the picker's Shared group and
+        // A failed load leaves the map empty: the picker's Global group and
         // any zone bound to an item degrade to nothing to place, not a stuck
         // editor — so say why in the console, like the ref options above.
-        ops.shared.list()
+        ops.globals.list()
             .then((r) => {
             if (cancelled)
                 return;
             if (!r.ok)
                 console.error(r.message);
-            setSharedIds(r.ok ? Object.fromEntries(r.data.map((i) => [i.name, i.record.id])) : {});
+            setGlobalIds(r.ok ? Object.fromEntries(r.data.map((i) => [i.name, i.record.id])) : {});
         })
             .catch((e) => { console.error(e); if (!cancelled)
-            setSharedIds({}); });
+            setGlobalIds({}); });
         return () => { cancelled = true; };
     }, [ops]);
-    // A selected shared block loads its item for the canvas locale, once (spec 2026-09-13 §3).
-    const selectedItemName = selectedId ? sharedItemOf(selectedId)?.name ?? null : null;
+    // A selected global block loads its item for the canvas locale, once (spec 2026-09-13 §3).
+    const selectedItemName = selectedId ? globalItemOf(selectedId)?.name ?? null : null;
     useEffect(() => {
         if (selectedItemName)
-            void sharedEdit.load(selectedItemName, locale);
+            void globalEdit.load(selectedItemName, locale);
     }, [selectedItemName, locale]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
-        if (sharedEdit.loadError)
-            setBanner({ text: sharedEdit.loadError });
-    }, [sharedEdit.loadError]);
+        if (globalEdit.loadError)
+            setBanner({ text: globalEdit.loadError });
+    }, [globalEdit.loadError]);
     // Selecting from the outline must reveal the block. The canvas column is
     // the scroller now (the iframe has no scrollbar of its own — it is sized to
     // the full document), so scroll it to the rect the bridge reported.
@@ -381,9 +385,9 @@ export function EditorView({ ops, registry, id }) {
     const inline = useInlineSession({
         iframeRef, postToCanvas,
         patch: (node, path, value) => {
-            const item = sharedItemOf(node);
+            const item = globalItemOf(node);
             if (item)
-                patchShared(item.name, path, value);
+                patchGlobal(item.name, path, value);
             else
                 mutate((t) => patchNodePath(t, node, path, value));
             // A second element marked with the same field follows the one being typed in.
@@ -428,8 +432,8 @@ export function EditorView({ ops, registry, id }) {
     };
     const onFieldClick = (id, path, x, y) => {
         const node = tree ? findNode(tree, id) : null;
-        // A shared block's fields are the item's — the section's own (spec 2026-09-13 §5); any other block's are its section's.
-        const item = sharedItemOf(id);
+        // A global block's fields are the item's — the section's own (spec 2026-09-13 §5); any other block's are its section's.
+        const item = globalItemOf(id);
         const schema = item ?? (node ? sectionOf(node.type) : null);
         if (!schema)
             return;
@@ -442,25 +446,28 @@ export function EditorView({ ops, registry, id }) {
         }
         if (inline.session && inline.session.node === id && inline.session.path === path)
             return;
-        const kind = descriptor.type === "text" ? "text" : descriptor.type === "richtext" ? "richtext" : null;
+        // A custom section's columns edit in the inspector for now (register 2026-09-15): the click reveals
+        // the column's editor rather than opening an inline session on the canvas.
+        const kind = node?.type === CUSTOM_NODE_TYPE ? null
+            : descriptor.type === "text" ? "text" : descriptor.type === "richtext" ? "richtext" : null;
         if (kind && inline.start({ node: id, path, kind }, { x, y }))
             return;
         // Any other field, or a text mark on a container: the inspector reveals its widget.
         reveal(path, schema);
     };
-    // A zone bound to a shared item needs the item's row id (ops.shared.list),
+    // A zone bound to a global item needs the item's row id (ops.globals.list),
     // which can land after the draft did. Fill then; nothing else changes.
     useEffect(() => {
-        if (!tree || !sharedIds || !record)
+        if (!tree || !globalIds || !record)
             return;
         const template = registryRef.current.pages.find((p) => p.name === record.template);
-        const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, sharedIds);
+        const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, globalIds);
         if (filled !== tree)
             mutate(() => filled);
         // `tree` is deliberately not a dependency: this runs when the ids land
         // or a new draft loads, not on every keystroke.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sharedIds, record, mutate, tree === null]);
+    }, [globalIds, record, mutate, tree === null]);
     // ── tree gestures ────────────────────────────────────────────────────
     const nodesIn = useCallback((zone) => tree?.zones[zone] ?? [], [tree]);
     const zoneCanTake = useCallback((zone) => canInsert(policyOf(zone), nodesIn(zone).length), [policyOf, nodesIn]);
@@ -470,11 +477,17 @@ export function EditorView({ ops, registry, id }) {
         setPicker(null);
         select(node.id);
     };
-    const doInsertShared = (zone, index, item) => {
-        const ref = sharedIds?.[item.name];
+    const doInsertCustom = (zone, index) => {
+        const node = customNode(registry, newNodeId(CUSTOM_NODE_TYPE));
+        mutate((t) => insertNode(t, zone, index, node));
+        setPicker(null);
+        select(node.id);
+    };
+    const doInsertGlobal = (zone, index, item) => {
+        const ref = globalIds?.[item.name];
         if (!ref)
             return;
-        const node = placementNode(item, ref, newNodeId(SHARED_NODE_TYPE));
+        const node = placementNode(item, ref, newNodeId(GLOBAL_NODE_TYPE));
         mutate((t) => insertNode(t, zone, index, node));
         setPicker(null);
         select(node.id);
@@ -486,13 +499,16 @@ export function EditorView({ ops, registry, id }) {
         if (!zone || !zoneCanTake(zone))
             return;
         const index = nodesIn(zone).findIndex((n) => n.id === node.id) + 1;
+        // Deep copies: a shallow one would share every list (a custom section's rows) between the original and the copy.
         const copy = {
             ...node,
             id: newNodeId(node.type),
-            fields: { ...node.fields },
-            styles: node.styles ? { ...node.styles } : undefined,
-            meta: node.meta ? { ...node.meta } : undefined,
+            fields: structuredClone(node.fields),
+            settings: node.settings ? structuredClone(node.settings) : undefined,
+            styles: node.styles ? structuredClone(node.styles) : undefined,
         };
+        if (node.css === undefined)
+            delete copy.css;
         mutate((t) => insertNode(t, zone, index, copy));
         select(copy.id);
     };
@@ -509,6 +525,7 @@ export function EditorView({ ops, registry, id }) {
     const doMove = (id, dir) => mutate((t) => moveNode(t, id, dir));
     const doMoveTo = (id, index) => mutate((t) => moveNodeTo(t, id, index));
     const doPatch = (id, ns, key, value) => mutate((t) => patchNode(t, id, ns, key, value));
+    const doPatchCss = (id, css) => mutate((t) => patchNodeCss(t, id, css));
     /** A page-level value (page fields, SEO meta) — same dirty/debounce path as a node's (spec 2026-09-10 page fields §5). */
     const doPatchPage = (ns, key, value) => mutate((t) => patchPage(t, ns, key, value));
     // ── publish ──────────────────────────────────────────────────────────
@@ -628,49 +645,49 @@ export function EditorView({ ops, registry, id }) {
         setReloadKey((k) => k + 1);
         return true;
     };
-    /** The shared card's own actions (spec 2026-09-13 §5, publish flow §2): the item in the canvas locale, never the page. */
-    const doPublishShared = async (name) => {
+    /** The global card's own actions (spec 2026-09-13 §5, publish flow §2): the item in the canvas locale, never the page. */
+    const doPublishGlobal = async (name) => {
         setBanner(null);
-        setSharedBusy("publish");
-        const r = await sharedEdit.setStatus(name, "published");
-        setSharedBusy(null);
+        setGlobalBusy("publish");
+        const r = await globalEdit.setStatus(name, "published");
+        setGlobalBusy(null);
         if (!r.ok)
             setBanner({ text: r.message, fields: r.fields });
     };
-    const doUnpublishShared = async (name) => {
+    const doUnpublishGlobal = async (name) => {
         setBanner(null);
-        setSharedBusy("unpublish");
-        const r = await sharedEdit.setStatus(name, "draft");
-        setSharedBusy(null);
+        setGlobalBusy("unpublish");
+        const r = await globalEdit.setStatus(name, "draft");
+        setGlobalBusy(null);
         if (!r.ok)
             setBanner({ text: r.message, fields: r.fields });
     };
-    const doDiscardShared = async (name) => {
+    const doDiscardGlobal = async (name) => {
         if (!window.confirm("Discard your changes and restore the published version?"))
             return;
         setBanner(null);
-        setSharedBusy("discard");
-        if (!(await sharedEdit.flush())) {
-            setSharedBusy(null);
+        setGlobalBusy("discard");
+        if (!(await globalEdit.flush())) {
+            setGlobalBusy(null);
             setBanner({ text: "Couldn't save your latest changes — discard cancelled." });
             return;
         }
         let r;
         try {
-            r = await ops.shared.discardDraft(name, locale);
+            r = await ops.globals.discardDraft(name, locale);
         }
         catch {
             r = { ok: false, code: "internal", message: "Couldn't reach the server." };
         }
-        setSharedBusy(null);
+        setGlobalBusy(null);
         if (!r.ok) {
             setBanner({ text: r.message });
             return;
         }
         // The item reloads from the store; the canvas refreshes through the same path as a save ack.
-        sharedEdit.reset();
-        setSharedDirty(false);
-        void sharedEdit.load(name, locale);
+        globalEdit.reset();
+        setGlobalDirty(false);
+        void globalEdit.load(name, locale);
         inlineRef.current?.onSaved();
     };
     // ── keyboard ─────────────────────────────────────────────────────────
@@ -696,35 +713,37 @@ export function EditorView({ ops, registry, id }) {
     }
     const selected = tree && selectedId ? findNode(tree, selectedId) : null;
     const selectedSection = selected ? sectionOf(selected.type) : null;
-    const selectedShared = selected ? sharedOf(selected) : null;
-    // A layout-rendered item: selected by its `shared:` id, in no zone (spec 2026-09-13 §1).
-    const layoutItem = selectedId && !selected ? sharedItemOf(selectedId) : null;
-    const selectedItem = selectedShared ?? layoutItem;
+    const selectedGlobal = selected ? globalOf(selected) : null;
+    // A layout-rendered item: selected by its `global:` id, in no zone (spec 2026-09-13 §1).
+    const layoutItem = selectedId && !selected ? globalItemOf(selectedId) : null;
+    const selectedItem = selectedGlobal ?? layoutItem;
     const selZone = tree && selected ? zoneOf(tree, selected.id) : null;
     const selLocked = policyOf(selZone)?.kind === "locked";
     const rectById = new Map(rects.map((r) => [r.id, r]));
     const selRect = selectedId ? rectById.get(selectedId) : undefined;
     const hoverRect = hoverId && hoverId !== selectedId ? rectById.get(hoverId) : undefined;
-    const hoverShared = hoverId ? sharedItemOf(hoverId) !== null : false;
+    const hoverGlobal = hoverId ? globalItemOf(hoverId) !== null : false;
     const fieldRectOf = (f) => f ? fieldRects.find((r) => r.node === f.node && r.path === f.path) : undefined;
     const fieldHover = hoverField && hoverField.node === selectedId ? fieldRectOf(hoverField) : undefined;
     const editing = fieldRectOf(inline.session);
     const pageWidth = rects.reduce((w, r) => Math.max(w, r.x + r.w), 320);
-    const selection = selected && selRect && (selectedSection || selectedShared)
+    const selection = selected && selRect && (selectedSection || selectedGlobal)
         ? {
             node: selected, rect: selRect,
-            title: selectedSection?.title ?? selectedShared?.title ?? selected.type,
-            shared: Boolean(selectedShared), locked: selLocked,
+            title: selectedSection?.title ?? selectedGlobal?.title ?? selected.type,
+            global: Boolean(selectedGlobal), locked: selLocked,
         }
         : layoutItem && selectedId && selRect
             ? {
-                node: { id: selectedId, type: SHARED_NODE_TYPE, fields: { item: layoutItem.name } },
-                rect: selRect, title: layoutItem.title, shared: true, locked: false, layout: true,
+                node: { id: selectedId, type: GLOBAL_NODE_TYPE, fields: { item: layoutItem.name } },
+                rect: selRect, title: layoutItem.title, global: true, locked: false, layout: true,
             }
             : null;
     const labelOf = (node) => {
-        const shared = sharedOf(node);
-        return sectionOf(node.type)?.title ?? (shared ? `${shared.title} · shared` : node.type);
+        if (node.type === CUSTOM_NODE_TYPE)
+            return customNodeLabel(node);
+        const global = globalOf(node);
+        return sectionOf(node.type)?.title ?? (global ? `${global.title} · global` : node.type);
     };
     // Reveal is defined here, where the rect map exists; select() calls it
     // through the ref so its own identity stays stable.
@@ -739,56 +758,69 @@ export function EditorView({ ops, registry, id }) {
     const plusButtons = plusButtonsFor({ zoneOrder, canTake: zoneCanTake, nodesIn, rects: rectById, emptyZones });
     const tabs = selectedSection ? tabsFor(selectedSection) : selectedItem ? tabsFor(selectedItem) : [];
     const activeTab = tabs.some((t) => t.tab === tab) ? tab : tabs[0]?.tab;
-    const entries = tabs.find((t) => t.tab === activeTab)?.entries ?? [];
+    const activeGroups = tabs.find((t) => t.tab === activeTab)?.groups ?? [];
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/pages`, items: [
                             {
                                 label: "Pages", href: `${BASE}/pages`,
                                 trailing: registry.locales.supported.length > 1 && (_jsx(LocaleSwitcher, { registry: registry, present: record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale], parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => { void doAddLocale(l); } })),
                             },
                             { label },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), ready && (_jsx(LinkButton, { href: siteUrl, target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-canvas", children: [(banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, hoverShared: hoverShared, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && (() => {
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), ready && (_jsx(LinkButton, { href: siteUrl, target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-canvas", children: [(banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, hoverGlobal: hoverGlobal, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && (() => {
                                             const { session } = inline.richtext;
-                                            const item = sharedItemOf(session.node);
+                                            const item = globalItemOf(session.node);
                                             const node = !item && tree ? findNode(tree, session.node) : null;
                                             const schema = item ?? (node ? sectionOf(node.type) : null);
-                                            const fields = item ? sharedEdit.items[item.name]?.fields : node?.fields;
+                                            const fields = item ? globalEdit.items[item.name]?.fields : node?.fields;
                                             if (!schema || !fields)
                                                 return null;
                                             return (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(fields, session.path), toolset: descriptorAt(schema, session.path)?.toolset, onChange: (doc) => {
                                                     inline.markChanged();
                                                     if (item)
-                                                        patchShared(item.name, session.path, doc);
+                                                        patchGlobal(item.name, session.path, doc);
                                                     else
                                                         mutate((t) => patchNodePath(t, session.node, session.path, doc));
                                                 }, onEscape: inline.end }));
-                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [selectedSection || selectedItem ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sm-inspector__head", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-blockglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedSection?.title ?? selectedItem?.title }), selectedItem && (sharedTouched || sharedEdit.saveState === "error") && _jsx(SaveIndicator, { state: sharedEdit.saveState })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : record ? (_jsx(PageInspector, { record: record, locale: locale, registry: registry, tree: tree, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [selectedSection || selectedItem ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sm-inspector__head", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-blockglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedSection?.title ?? (selectedItem ? `${selectedItem.title} · global` : null) }), selectedItem && (globalTouched || globalEdit.saveState === "error") && _jsx(SaveIndicator, { state: globalEdit.saveState })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : record ? (_jsx(PageInspector, { record: record, locale: locale, registry: registry, tree: tree, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
                                             !isFixedNode(record, registry) &&
                                             !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
                                             ? () => { void doRemoveLocale(); }
-                                            : undefined })) : null, (selectedSection || selectedItem) && (_jsxs("div", { className: "sm-inspector__body", children: [selected && selectedSection && entries.map(({ key, ns, descriptor }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: selected[ns]?.[key], refOptions: refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor), inlinePath: ns === "fields" && inline.session?.node === selected.id ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
-                                                    reveal(p, selectedSection); }, onChange: (value) => {
-                                                    doPatch(selected.id, ns, key, value);
-                                                    if (ns === "fields")
-                                                        syncTexts(selected.id, selectedSection, { ...selected.fields, [key]: value });
-                                                } }, `${selected.id}.${ns}.${key}`))), selectedItem && selectedId && (_jsx(SharedInspector, { item: selectedItem, edit: sharedEdit.items[selectedItem.name] ?? null, locale: locale, entries: entries, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, pending: sharedDirty || sharedEdit.saveState !== "saved", busy: sharedBusy, inlinePath: inline.session?.node === selectedId ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
+                                            : undefined })) : null, (selectedSection || selectedItem) && (_jsxs("div", { className: "sm-inspector__body", children: [selected && selectedSection && (_jsx(InspectorFields, { groups: activeGroups, values: selected, render: ({ key, ns, descriptor }, { emptyLabel, scope }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: valueOf(selected, { key, ns, descriptor }), emptyLabel: emptyLabel, scope: scope, refOptions: ns === "fields" || ns === "settings" ? refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor) : undefined, inlinePath: ns === "fields" && inline.session?.node === selected.id ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
+                                                        reveal(p, selectedSection); }, onChange: (value) => {
+                                                        if (ns === "css")
+                                                            doPatchCss(selected.id, value);
+                                                        else
+                                                            doPatch(selected.id, ns, key, value);
+                                                        if (ns === "fields")
+                                                            syncTexts(selected.id, selectedSection, { ...selected.fields, [key]: value });
+                                                    } }, `${selected.id}.${ns}.${key}`)) })), selectedItem && selectedId && (_jsx(GlobalInspector, { item: selectedItem, edit: globalEdit.items[selectedItem.name] ?? null, locale: locale, groups: activeGroups, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, pending: globalDirty || globalEdit.saveState !== "saved", busy: globalBusy, inlinePath: inline.session?.node === selectedId ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
                                                     reveal(p, selectedItem); }, onChange: (ns, key, value) => {
-                                                    patchShared(selectedItem.name, ns === "fields" ? key : `${STYLES_KEY}.${key}`, value);
+                                                    patchGlobal(selectedItem.name, globalPath(ns, key), value);
                                                     if (ns === "fields") {
-                                                        const current = sharedEdit.items[selectedItem.name];
+                                                        const current = globalEdit.items[selectedItem.name];
                                                         if (current)
                                                             syncTexts(selectedId, selectedItem, { ...current.fields, [key]: value });
                                                     }
-                                                }, onPublish: () => { void doPublishShared(selectedItem.name); }, onDiscard: () => { void doDiscardShared(selectedItem.name); }, onUnpublish: () => { void doUnpublishShared(selectedItem.name); } }))] }))] }), _jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, onMove: doMove, onMoveTo: doMoveTo, onRemove: doRemove, zones: zoneOrder.map((zone) => ({
+                                                }, onPublish: () => { void doPublishGlobal(selectedItem.name); }, onDiscard: () => { void doDiscardGlobal(selectedItem.name); }, onUnpublish: () => { void doUnpublishGlobal(selectedItem.name); } }))] }))] }), _jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, onMoveTo: doMoveTo, onRemove: doRemove, zones: zoneOrder.map((zone) => ({
                                         zone, locked: policyOf(zone)?.kind === "locked", canTake: zoneCanTake(zone),
                                         nodes: nodesIn(zone).map((node) => ({ node, label: labelOf(node) })),
                                     })), onAddFirst: (zone) => {
                                         const first = allowedSections(policyOf(zone), registry.sections)[0];
                                         if (first)
                                             doInsert(zone, 0, first);
-                                    } }) })] })] }), picker && (_jsx(InsertPicker, { at: picker, policy: policyOf(picker.zone), registry: registry, sharedIds: sharedIds ?? {}, onInsert: (section) => doInsert(picker.zone, picker.index, section), onInsertShared: (item) => doInsertShared(picker.zone, picker.index, item), onClose: () => setPicker(null) }))] }));
+                                    } }) })] })] }), picker && (_jsx(InsertPicker, { at: picker, policy: policyOf(picker.zone), registry: registry, globalIds: globalIds ?? {}, onInsert: (section) => doInsert(picker.zone, picker.index, section), onInsertGlobal: (item) => doInsertGlobal(picker.zone, picker.index, item), onInsertCustom: () => doInsertCustom(picker.zone, picker.index), onClose: () => setPicker(null) }))] }));
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */
+/** Where a global item's widget writes (spec 2026-09-13 §3, 2026-09-14 §5): fields at the key, the other namespaces under their reserved keys. */
+function globalPath(ns, key) {
+    if (ns === "fields")
+        return key;
+    if (ns === "settings")
+        return `${SETTINGS_KEY}.${key}`;
+    if (ns === "styles")
+        return `${STYLES_KEY}.${key}`;
+    return CSS_KEY;
+}
 function refOptionsFor(loaded, targets, section, ns, key, descriptor) {
     if (descriptor.type !== "ref" && descriptor.type !== "refList")
         return undefined;

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

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

package/dist/admin/editor/{SharedInspector.js → GlobalInspector.js}

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

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

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