smoodly 0.0.15 → 0.0.17

package/dist/admin/editor/EditorView.js

@@ -28,32 +28,40 @@ 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 } 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 { 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 { useGlobalEdit } from "./useGlobalEdit.js";
 import { BASE } from "../shell/base.js";
-import { RouteLink } from "../shell/RouteLink.js";
 import { isFixedNode, localeStatusOf, sourceLocaleOf } from "../shell/pages-tree.js";
 import { entryTitle } from "../shell/entries-list.js";
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
 import { ResizeHandle } from "../ui/ResizeHandle.js";
-import { Banner as BannerBox, Breadcrumb, Button, IconButton, LinkButton, SaveIndicator, StatusBadge, Tabs, TopBar, } from "../ui/primitives.js";
+import { PublishControl } from "../ui/PublishControl.js";
+import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
+import { Banner as BannerBox, Breadcrumb, Button, FieldErrorList, IconButton, LinkButton, SaveIndicator, Tabs, TopBar, } from "../ui/primitives.js";
 export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-editor=1` : `${url}?smoodly-editor=1`);
+/** The site URL of a stored version — History's iframe (spec 2026-09-13 history §5); no editor parameter, so no bridge. */
+export const withVersionParam = (url, versionId) => `${url}${url.includes("?") ? "&" : "?"}smoodly-version=${encodeURIComponent(versionId)}`;
 export function EditorView({ ops, registry, id }) {
     const [record, setRecord] = useState(null);
     const [tree, setTree] = useState(null);
@@ -76,10 +84,22 @@ export function EditorView({ ops, registry, id }) {
     const [tab, setTab] = useState("Content");
     const [banner, setBanner] = useState(null);
     const [published, setPublished] = useState(false);
+    /** An action of the page's control in flight. */
+    const [pageBusy, setPageBusy] = useState(null);
+    /** History's rows while the modal is open (spec 2026-09-13 history §5). */
+    const [history, setHistory] = useState(null);
+    /** An edit since the last save ack — Publish wakes on it, before the autosave runs (spec 2026-09-13 publish flow §2). */
+    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 [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);
@@ -93,11 +113,33 @@ export function EditorView({ ops, registry, id }) {
     // now, or once an inline session ends (spec 2026-09-10 §7).
     const { saveState, mark, flush } = useDraftAutosave({
         read: () => treeRef.current,
-        persist: (t) => ops.pages.saveDraft(id, treeLocaleRef.current, t),
+        persist: async (t) => {
+            const target = treeLocaleRef.current;
+            const r = await ops.pages.saveDraft(id, target, t);
+            if (r.ok) {
+                // The badge and Publish follow each save without a re-get: saveDraft answers with the version id.
+                setRecord((rec) => rec?.locales[target]
+                    ? { ...rec, locales: { ...rec.locales, [target]: { ...rec.locales[target], draftVersionId: r.data.versionId } } }
+                    : rec);
+                setDirty(false);
+            }
+            return r;
+        },
         onSaved: () => inlineRef.current?.onSaved(),
     });
+    // 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 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 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,
+        registry, ops, id, record, setRecord, flush: flushAll,
         fail: (text) => setBanner({ text }),
         clearBanner: () => setBanner(null),
         reload: () => setReloadKey((k) => k + 1),
@@ -134,6 +176,11 @@ export function EditorView({ ops, registry, id }) {
             setSelectedId(null);
             setHoverId(null);
             setFolder(false);
+            globalEdit.reset(); // a new locale or a reload is a new canvas; the switch flushed first
+            setDirty(false);
+            setTouched(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.
@@ -225,18 +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 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 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;
@@ -272,26 +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 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 globalEdit.load(selectedItemName, locale);
+    }, [selectedItemName, locale]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        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.
@@ -311,12 +378,18 @@ export function EditorView({ ops, registry, id }) {
             return next;
         });
         mark();
+        setDirty(true);
+        setTouched(true);
     }, [mark]);
     // ── inline editing (spec 2026-09-10) ──────────────────────────────────
     const inline = useInlineSession({
         iframeRef, postToCanvas,
         patch: (node, path, value) => {
-            mutate((t) => patchNodePath(t, node, path, value));
+            const item = globalItemOf(node);
+            if (item)
+                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.
             if (typeof value === "string")
                 inlineRef.current?.writeText(node, path, value);
@@ -359,37 +432,42 @@ export function EditorView({ ops, registry, id }) {
     };
     const onFieldClick = (id, path, x, y) => {
         const node = tree ? findNode(tree, id) : null;
-        const section = node ? sectionOf(node.type) : null;
-        if (!node || !section)
-            return; // a shared placement is edited under Globals — nothing inline here
-        const descriptor = descriptorAt(section, path);
+        // 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;
+        const descriptor = descriptorAt(schema, path);
         if (!descriptor) {
             if (process.env.NODE_ENV !== "production") {
-                console.warn(`smoodly: "${section.name}" has no field at "${path}" — check its data-smd-field / data-smd-item marks.`);
+                console.warn(`smoodly: "${item?.name ?? node?.type}" has no field at "${path}" — check its data-smd-field / data-smd-item marks.`);
             }
             return;
         }
         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, section);
+        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]);
@@ -399,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);
@@ -415,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);
     };
@@ -438,16 +525,19 @@ 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 ──────────────────────────────────────────────────────────
     const doPublish = async () => {
         setBanner(null);
+        setPageBusy("publish");
         // Never publish behind a pending debounce.
         const flushed = await flush();
         if (!flushed) {
             // The pre-publish flush failed (or is still behind, mid-retry) —
             // publishing now would ship a stale draft. Bail instead.
+            setPageBusy(null);
             setBanner({ text: "Couldn't save your latest changes — publish cancelled." });
             return;
         }
@@ -461,6 +551,7 @@ export function EditorView({ ops, registry, id }) {
             // outright instead of resolving to a typed error.
             result = { ok: false, code: "internal", message: "Publish failed — check your connection and try again." };
         }
+        setPageBusy(null);
         if (result.ok) {
             setRecord(result.data);
             setPublished(true);
@@ -470,6 +561,135 @@ export function EditorView({ ops, registry, id }) {
             setBanner({ text: result.message, fields: result.fields });
         }
     };
+    /** Discard (spec 2026-09-13 publish flow §4): confirm, flush so a late save cannot re-dirty the row, restore, reload the canvas. */
+    const doDiscard = async () => {
+        if (!window.confirm("Discard your changes and restore the published version?"))
+            return;
+        setBanner(null);
+        setPageBusy("discard");
+        if (!(await flushAll())) {
+            setPageBusy(null);
+            setBanner({ text: "Couldn't save your latest changes — discard cancelled." });
+            return;
+        }
+        let result;
+        try {
+            result = await ops.pages.discardDraft(id, locale);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setPageBusy(null);
+        if (!result.ok) {
+            setBanner({ text: result.message });
+            return;
+        }
+        setRecord(result.data);
+        setReloadKey((k) => k + 1); // the tree and the canvas come back from the store
+    };
+    /** Unpublish (§5): the locale goes off the site; the draft stays for a later Publish. */
+    const doUnpublish = async () => {
+        setBanner(null);
+        setPageBusy("unpublish");
+        let result;
+        try {
+            result = await ops.pages.unpublish(id, locale);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setPageBusy(null);
+        if (!result.ok) {
+            setBanner({ text: result.message });
+            return;
+        }
+        setRecord(result.data);
+    };
+    /** History: flush first so the list's draft row is current, then list the locale's versions. */
+    const doHistory = async () => {
+        setBanner(null);
+        const row = record?.locales[locale];
+        if (!row)
+            return;
+        if (!(await flushAll())) {
+            setBanner({ text: "Couldn't save your latest changes — history not opened." });
+            return;
+        }
+        let r;
+        try {
+            r = await ops.pages.listVersions(id, locale);
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!r.ok) {
+            setBanner({ text: r.message });
+            return;
+        }
+        setHistory(historyRows(r.data, row));
+    };
+    /** Restore: the version's tree becomes the draft; the canvas reloads from the store, as after Discard. */
+    const doRestore = async (versionId) => {
+        let result;
+        try {
+            result = await ops.pages.restore(id, locale, versionId);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!result.ok) {
+            setBanner({ text: result.message });
+            return false;
+        }
+        setRecord(result.data);
+        setReloadKey((k) => k + 1);
+        return true;
+    };
+    /** 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);
+        setGlobalBusy("publish");
+        const r = await globalEdit.setStatus(name, "published");
+        setGlobalBusy(null);
+        if (!r.ok)
+            setBanner({ text: r.message, fields: r.fields });
+    };
+    const doUnpublishGlobal = async (name) => {
+        setBanner(null);
+        setGlobalBusy("unpublish");
+        const r = await globalEdit.setStatus(name, "draft");
+        setGlobalBusy(null);
+        if (!r.ok)
+            setBanner({ text: r.message, fields: r.fields });
+    };
+    const doDiscardGlobal = async (name) => {
+        if (!window.confirm("Discard your changes and restore the published version?"))
+            return;
+        setBanner(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.globals.discardDraft(name, locale);
+        }
+        catch {
+            r = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        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.
+        globalEdit.reset();
+        setGlobalDirty(false);
+        void globalEdit.load(name, locale);
+        inlineRef.current?.onSaved();
+    };
     // ── keyboard ─────────────────────────────────────────────────────────
     useEffect(() => {
         const onKey = (e) => {
@@ -493,26 +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;
+    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 = selected ? rectById.get(selected.id) : undefined;
+    const selRect = selectedId ? rectById.get(selectedId) : undefined;
     const hoverRect = hoverId && hoverId !== selectedId ? rectById.get(hoverId) : undefined;
+    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,
         }
-        : null;
+        : layoutItem && selectedId && selRect
+            ? {
+                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.
@@ -525,42 +756,71 @@ export function EditorView({ ops, registry, id }) {
         scroller.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
     };
     const plusButtons = plusButtonsFor({ zoneOrder, canTake: zoneCanTake, nodesIn, rects: rectById, emptyZones });
-    const tabs = selectedSection ? tabsFor(selectedSection) : [];
+    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: [_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" })), record?.locales[locale] && (_jsx(StatusBadge, { status: localeStatusOf(record.locales[locale]) })), _jsx(Button, { variant: published ? "ok" : "primary", onClick: () => { void doPublish(); }, children: published ? "Published ✓" : "Publish" })] }) }), _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: "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), banner.fields && banner.fields.length > 0 && (_jsx("ul", { className: "sm-mono", style: { margin: "6px 0 0", paddingLeft: 18, fontSize: "var(--text-sm)" }, children: banner.fields.map((f) => _jsxs("li", { children: [f.field, ": ", f.message] }, f.field)) }))] })), 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, 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 && tree && (() => {
+                        ] }) }), 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 node = findNode(tree, session.node);
-                                            const section = node ? sectionOf(node.type) : null;
-                                            if (!node || !section)
+                                            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 ? globalEdit.items[item.name]?.fields : node?.fields;
+                                            if (!schema || !fields)
                                                 return null;
-                                            return (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(node.fields, session.path), toolset: descriptorAt(section, session.path)?.toolset, onChange: (doc) => { inline.markChanged(); 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: [selected && (selectedSection || selectedShared) ? (_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 ?? selectedShared?.title })] }), _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 &&
+                                            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)
+                                                        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 ? `${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, selected && (selectedSection || selectedShared) && (_jsxs("div", { className: "sm-inspector__body", children: [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}`))), selectedShared && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [_jsx("p", { className: "sm-hint", children: "This is shared content. Editing it changes every page it is placed on." }), _jsx(RouteLink, { className: "sm-nav-item", href: `${BASE}/shared/${encodeURIComponent(selectedShared.name)}?locale=${encodeURIComponent(locale)}`, children: "Edit shared item \u2192" })] }))] }))] }), _jsx("div", { className: "sm-card", children: _jsx(Outline, { selectedId: selectedId, onSelect: select, onMove: doMove, onMoveTo: doMoveTo, onRemove: doRemove, zones: zoneOrder.map((zone) => ({
+                                            : 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) => {
+                                                    patchGlobal(selectedItem.name, globalPath(ns, key), value);
+                                                    if (ns === "fields") {
+                                                        const current = globalEdit.items[selectedItem.name];
+                                                        if (current)
+                                                            syncTexts(selectedId, selectedItem, { ...current.fields, [key]: value });
+                                                    }
+                                                }, 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;