smoodly 0.0.60 → 0.0.62

package/dist/admin/serialize.d.ts

@@ -67,6 +67,8 @@ export type AdminGlobal = {
     settings: Record<string, AdminField>;
     styles: Record<string, AdminField>;
     css: boolean;
+    /** Every page renders it through the layout (global.ts `layout`): the item's canvas shows the home page. */
+    layout?: true;
 };
 /** A registered Element (spec 2026-09-08 block nodes §1): a section shape plus its contexts — no styles, no css. */
 export type AdminElement = Omit<AdminSection, "styles" | "css"> & {

package/dist/admin/serialize.js

@@ -108,6 +108,7 @@ export function serializeAdminConfig(config) {
             settings: serializeMap(s.section !== undefined ? sectionSettings(config, s.section) : {}),
             styles: serializeMap(s.section !== undefined ? config.resolvedStyles(s.section) : {}),
             css: s.section !== undefined ? sectionCss(config, s.section) : false,
+            ...(s.layout ? { layout: true } : {}),
         })),
         custom: {
             name: CUSTOM_NODE_TYPE,

package/dist/admin/shell/AdminApp.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // never reloads (spec 2026-09-08 client routing). The shell is mounted by
 // the prebuilt entry (browser/main.tsx) into the admin's one HTML page (page.ts).
 //
-// Layout is the design system's three columns: the 72px icon rail
-// (shell/IconRail.tsx), then the main column whose views own their own
-// 48px top bar (the editor adds the third, its inspector). The shell is
+// Layout: the navigation bar across the top (shell/NavBar.tsx; the 72px
+// icon rail until 2026-11-14), then below it the main column whose views own
+// their own 48px top bar (the editor adds the third, its inspector). The shell is
 // viewport-height; every column scrolls inside itself.
 import { useEffect, useRef, useState } from "react";
 import { makeClientOps } from "../client-ops.js";
@@ -22,7 +22,7 @@ import { GlobalForm } from "./GlobalForm.js";
 import { EditorView } from "../editor/EditorView.js";
 import { SignedOutView } from "./SignedOutView.js";
 import { useSpaceSession } from "./session.js";
-import { IconRail } from "./IconRail.js";
+import { NavBar } from "./NavBar.js";
 import { ConfirmHost } from "../ui/ConfirmDialog.js";
 import { notify } from "../ui/confirm.js";
 import { useRoute } from "./router.js";
@@ -169,5 +169,5 @@ export function AdminApp({ registry, op, signIn, api, presenceConfig }) {
         main = _jsx(MediaScreen, {});
     else
         main = _jsx(ErrorPane, { message: "Not found." });
-    return (_jsx(AdminPathProvider, { value: registry.adminPath, children: _jsx(PresenceProvider, { value: presence, children: _jsx(ElementsProvider, { elements: registry.elements, children: _jsx(TimeZoneProvider, { zone: registry.timeZone, children: _jsxs(AssetsProvider, { ops: ops, media: registry.media, upload: upload, children: [_jsxs("div", { className: "sm-shell", children: [_jsx(IconRail, { registry: registry, active: head, email: email, settings: role !== null, deploy: deploy ? { status: deploy, busy: deployBusy, onDeploy: () => { void onDeploy(); } } : undefined, onSignOut: () => { void session.signOut(); } }), _jsx("main", { className: "sm-main", children: main }, `${head}/${tail ?? ""}`)] }), _jsx(ConfirmHost, {})] }) }) }) }) }));
+    return (_jsx(AdminPathProvider, { value: registry.adminPath, children: _jsx(PresenceProvider, { value: presence, children: _jsx(ElementsProvider, { elements: registry.elements, children: _jsx(TimeZoneProvider, { zone: registry.timeZone, children: _jsxs(AssetsProvider, { ops: ops, media: registry.media, upload: upload, children: [_jsxs("div", { className: "sm-shell", children: [_jsx(NavBar, { registry: registry, active: head, email: email, settings: role !== null, deploy: deploy ? { status: deploy, busy: deployBusy, onDeploy: () => { void onDeploy(); } } : undefined, onSignOut: () => { void session.signOut(); } }), _jsx("main", { className: "sm-main", children: main }, `${head}/${tail ?? ""}`)] }), _jsx(ConfirmHost, {})] }) }) }) }) }));
 }

package/dist/admin/shell/GlobalForm.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // One Globals item (global content, spec 2026-09-07 §6), one locale: the
 // entry form's shape without what a singleton never has — no slug, no
 // delete, no add/remove locale (every supported locale exists by
@@ -11,18 +11,25 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // bar carries the indicator and the one publish control, publish
 // validates the draft and lists the fields in an amber banner. "Used on
 // N pages" is the refs index's answer.
+//
+// A visual item is edited on a canvas (spec 2026-11-14 sections and the global canvas): when a page shows it —
+// the home page for a layout item, the first page that places it otherwise (shell/global-canvas.ts) — the main
+// column is that page in a frame with the item selected (editor/GlobalCanvas.tsx), and the fields move to the
+// inspector under Content | Settings tabs. A page found not to draw the item is dropped and the next one tried;
+// with none left, and for a Fields item, the page is the form as it always was. Everything this file saves,
+// guards and publishes is the item's: the canvas reads a page and writes nothing of it.
 import { useEffect, useMemo, useRef, useState } from "react";
 import { notePublished } from "../delivery-mode.js";
 import { stillFailing, validateNode } from "../validate.js";
 import { elementSchemas } from "../../richtext-walk.js";
 import { CSS_KEY, SETTINGS_KEY, STYLES_KEY } from "../../global.js";
-import { tabsFor } from "../forms/tabs.js";
+import { tabOf, tabsFor } from "../forms/tabs.js";
 import { revealField } from "../forms/reveal.js";
 import { useRefOptions } from "../forms/useRefOptions.js";
 import { useDraftAutosave } from "../editor/autosave.js";
 import { updatedLine } from "../ui/format.js";
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
-import { Banner, Breadcrumb, FieldErrorList, InfoRow, SaveIndicator, SectionLabel, TopBar } from "../ui/primitives.js";
+import { Banner, Breadcrumb, FieldErrorList, InfoRow, SaveIndicator, SectionLabel, Tabs, TopBar } from "../ui/primitives.js";
 import { PublishControl } from "../ui/PublishControl.js";
 import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
 import { localeStatusOf } from "./pages-tree.js";
@@ -39,7 +46,9 @@ import { DriftNotice } from "../ui/DriftNotice.js";
 import { OrphanFields } from "../forms/OrphanFields.js";
 import { entryDrift } from "../drift.js";
 import { misfitErrors } from "../drift-copy.js";
-import { unsetAtPath } from "../field-paths.js";
+import { setAtPath, unsetAtPath } from "../field-paths.js";
+import { GlobalCanvas } from "../editor/GlobalCanvas.js";
+import { canvasCandidates, liveCandidates } from "./global-canvas.js";
 import { usePresence, usePresenceState, useSavedElsewhere, useTrackPresence } from "./presence-context.js";
 import { editorsOf } from "./presence.js";
 import { PresenceLine } from "../ui/PresenceLine.js";
@@ -63,6 +72,26 @@ export function GlobalForm({ ops, registry, name }) {
     const [stale, setStale] = useState(null);
     const [liveFindings, setLiveFindings] = useState([]);
     const formRef = useRef(null);
+    // The canvas (see the header): the page list a visual item's candidates are read from (null while it loads; a
+    // failed load is an empty list — the form shows and the fields stay usable), the pages found not to draw the
+    // item, the editor's pick among the rest, the inspector's tab and the field with an open inline session.
+    const visual = item?.section !== undefined;
+    const [sitePages, setSitePages] = useState(null);
+    const [emptyPages, setEmptyPages] = useState(() => new Set());
+    const [pickedPage, setPickedPage] = useState(null);
+    const [tab, setTab] = useState("Content");
+    const [inlinePath, setInlinePath] = useState(null);
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        if (!visual)
+            return;
+        let live = true;
+        ops.pages.list().then((r) => { if (live)
+            setSitePages(r.ok ? r.data : []); }).catch(() => { if (live)
+            setSitePages([]); });
+        return () => { live = false; };
+    }, [ops, visual]);
+    useEffect(() => { setEmptyPages(new Set()); setPickedPage(null); setInlinePath(null); }, [name, locale]);
     const fieldsRef = useRef(fields);
     fieldsRef.current = fields;
     const recordRef = useRef(record);
@@ -122,6 +151,21 @@ export function GlobalForm({ ops, registry, name }) {
             setNotice({ tone: "error", text: "Couldn't reach the server." }); });
         return () => { cancelled = true; };
     }, [ops, name, locale, reloadKey]);
+    // The frame shows the item's draft: every write of it — a save, a discard, a restore, someone else's version
+    // loaded — is a new saved time on the row, and the frame renders again. The first value is the load itself.
+    const draftSavedAt = record?.locales[locale]?.draftSavedAt;
+    const lastDraft = useRef(null);
+    useEffect(() => {
+        const key = `${name}:${locale}`;
+        const prev = lastDraft.current;
+        lastDraft.current = { key, at: draftSavedAt };
+        if (prev && prev.key === key && prev.at !== undefined && prev.at !== draftSavedAt)
+            canvasRef.current?.refresh();
+    }, [name, locale, draftSavedAt]);
+    // The freeze (spec 2026-09-26 concurrency §4) ends an inline session with it: nothing typed after it is kept.
+    useEffect(() => { if (stale)
+        canvasRef.current?.endInline(); }, [stale]);
+    const candidates = useMemo(() => (item && sitePages ? canvasCandidates(item, usage, sitePages, locale, registry) : []), [item, usage, sitePages, locale, registry]);
     // Drift (spec 2026-09-27 editor safety §5): the draft on screen against the registry.
     const findings = useMemo(() => (fields && record?.locales[locale]
         ? entryDrift(registry, name, { fields, shared: record.fields, own: record.locales[locale].fields })
@@ -308,7 +352,35 @@ export function GlobalForm({ ops, registry, name }) {
         setDirty(true);
         setTouched(true);
         mark();
+        // Typed text shows in the frame at once; the refresh follows the save.
+        if (ns === "fields" && typeof value === "string")
+            canvasRef.current?.writeText(key, value);
+    };
+    /** A value typed in the frame (an inline session), by dotted path inside the item's fields. */
+    const onCanvasPatch = (path, value) => {
+        if (stale)
+            return;
+        setFields((f) => setAtPath(f ?? {}, path, value));
+        setDirty(true);
+        setTouched(true);
+        mark();
+    };
+    // The page the canvas shows: the editor's pick while it still draws the item, else the first that may.
+    const livePages = liveCandidates(candidates, emptyPages);
+    const shown = record ? livePages.find((c) => c.pageId === pickedPage) ?? livePages[0] ?? null : null;
+    const noneShows = candidates.length > 0 && livePages.length === 0;
+    const tabNames = tabs.map((t) => t.tab);
+    const activeTab = tabNames.includes(tab) ? tab : tabNames[0] ?? "Content";
+    /** A field named by a publish error: its tab first (the inspector shows one tab at a time), then the widget. */
+    const revealInInspector = (path) => {
+        const wanted = tabOf(item, path.startsWith("settings.") || path.startsWith("styles.") ? path.split(".")[1] ?? path : path);
+        if (wanted && wanted !== activeTab)
+            setTab(wanted);
+        requestAnimationFrame(() => { if (formRef.current)
+            revealField(formRef.current, path); });
     };
+    const usedOn = record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`), children: id })] }, id)))] }));
+    const documentInfo = record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] }));
     // An orphan's path names a visual item's namespaces as drift does (`settings.x`); the stored keys are `$settings` / `$styles`.
     const storedPath = (p) => p.startsWith("settings.") ? `${SETTINGS_KEY}.${p.slice(9)}` : p.startsWith("styles.") ? `${STYLES_KEY}.${p.slice(7)}` : p;
     const clearOrphan = (path) => {
@@ -319,10 +391,11 @@ export function GlobalForm({ ops, registry, name }) {
     };
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: adminHref("/globals"), items: [
                             {
-                                label: "Site", href: adminHref("/globals"),
+                                label: "Sections", href: adminHref("/globals"),
                                 trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: (l) => { void switchLocale(l); }, onAdd: () => undefined })),
                             },
                             { label: item.title },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error" || saveState === "refused") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsxs("fieldset", { disabled: true, className: "sm-history__form", children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } })] }))] })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsx(PresenceLine, { names: editorsOf(others, target), noun: "item" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsx(DriftNotice, { draft: findings, live: liveFindings }), _jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), revealKey: `${notice.tone}:${notice.text}`, children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
-                                            revealField(formRef.current, path); } })] })), record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`), children: id })] }, id)))] })), fields !== null ? (_jsxs(_Fragment, { children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: fields, errors: markerErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: fields, errors: markerErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange })] })), _jsx(OrphanFields, { orphans: findings, onClear: clearOrphan })] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsx("aside", { className: "sm-inspector", children: record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] })) })] })] }));
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error" || saveState === "refused") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsxs("fieldset", { disabled: true, className: "sm-history__form", children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } })] }))] })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsx(PresenceLine, { names: editorsOf(others, target), noun: "item" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsx(DriftNotice, { draft: findings, live: liveFindings }), shown ? (_jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-globalcanvas", children: [_jsxs("div", { className: "sm-globalcanvas__bar", children: [pages.size > 0 ? usedOn : _jsx("p", { className: "sm-hint", children: item.layout ? "Shown on every page." : `Shown on ${shown.title}.` }), livePages.length > 1 && (_jsxs("label", { className: "sm-globalcanvas__pick", children: [_jsx("span", { className: "sm-hint", children: "Shown on" }), _jsx("select", { className: "sm-select", "aria-label": "Shown on", value: shown.pageId, onChange: (e) => setPickedPage(e.target.value), children: livePages.map((c) => _jsx("option", { value: c.pageId, children: c.title }, c.pageId)) })] }))] }), _jsx(GlobalCanvas, { ref: canvasRef, ops: ops, item: item, pageId: shown.pageId, locale: locale, fields: fields ?? {}, onPatch: onCanvasPatch, onInlinePath: setInlinePath, onMissing: () => setEmptyPages((prev) => new Set(prev).add(shown.pageId)) }, `${shown.pageId}:${locale}:${reloadKey}`)] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", children: [_jsxs("div", { className: "sm-card", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), revealKey: `${notice.tone}:${notice.text}`, children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: revealInInspector })] })), tabNames.length > 1 && _jsx(Tabs, { tabs: tabNames, value: activeTab, onChange: setTab }), fields !== null ? (_jsxs(_Fragment, { children: [_jsx(GlobalFields, { item: item, groups: tabs.find((t) => t.tab === activeTab)?.groups ?? [], fields: fields, errors: markerErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange, inlinePath: inlinePath ?? undefined, onEditHere: () => { const p = inlinePath; canvasRef.current?.endInline(); if (p)
+                                                    revealInInspector(p); } }), _jsx(OrphanFields, { orphans: findings, onClear: clearOrphan })] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), documentInfo] })] })) : (_jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), revealKey: `${notice.tone}:${notice.text}`, children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
+                                            revealField(formRef.current, path); } })] })), usedOn, noneShows && _jsx("p", { className: "sm-hint", children: "No page shows this item in this locale." }), fields !== null ? (_jsxs(_Fragment, { children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: fields, errors: markerErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: fields, errors: markerErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange })] })), _jsx(OrphanFields, { orphans: findings, onClear: clearOrphan })] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsx("aside", { className: "sm-inspector", children: documentInfo })] }))] }));
 }

package/dist/admin/shell/GlobalList.js

@@ -38,7 +38,7 @@ export function GlobalList({ ops, registry }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const rows = items ? globalRows(items, registry, locale) : [];
-    return (_jsx(ListView, { title: "Site", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
+    return (_jsx(ListView, { title: "Sections", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
             { label: "Title", width: "minmax(160px,1fr)" },
             { label: "Kind", width: "90px" },
             { label: "Updated", width: "minmax(110px,160px)" },

package/dist/admin/shell/{IconRail.d.ts → NavBar.d.ts}

@@ -1,12 +1,12 @@
 import type { DeployStatus } from "../ops.ts";
 import type { AdminRegistry } from "../serialize.ts";
-export declare function IconRail({ registry, active, email, settings, deploy, onSignOut }: {
+export declare function NavBar({ registry, active, email, settings, deploy, onSignOut }: {
     registry: AdminRegistry;
     active: string;
     email?: string;
-    /** Whether the Settings tile shows — once the role is known, in the shell (every member has a Settings page). */
+    /** Whether Settings shows — once the role is known, in the shell (every member has a Settings page). */
     settings?: boolean;
-    /** The Deploy tile (spec 2026-10-09 static mode §6), above the avatar on a static site; absent on a live one. */
+    /** The Deploy item (spec 2026-10-09 static mode §6), next to the avatar on a static site; absent on a live one. */
     deploy?: {
         status: DeployStatus;
         busy: boolean;

package/dist/admin/shell/NavBar.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/smoodly/src/admin/shell/NavBar.tsx
+// The admin's primary navigation: a bar across the top of the frame
+// (2026-11-14), which replaced the 72px IconRail (itself the 200px SideNav's
+// successor) so the visual editor gets the full width of the window. The
+// colours, icons and the order of the items are the rail's; the bar stays put
+// while the sheet below it scrolls, since the shell owns the viewport.
+//
+// Three groups. On the left the app icon, which opens the Smoodly menu. In the
+// middle the items, registry-derived and never separately configured: Pages,
+// then an item for each collection registered with `admin.showInNav`
+// (2026-11-13), then Collections — one item whose menu lists every other
+// collection, absent when none is left — then Media, then ⋮, the More menu,
+// which holds what is opened rarely: Sections (the global content items, when
+// the registry has any; the route is /globals) and Settings (every member has
+// a page there, so the shell passes `settings` once the role is known); ⋮ is
+// absent when it would be empty. On the right the Deploy item (a static site
+// only) next to the avatar, which opens the account menu: the email, the theme
+// toggle, "My Account" (at smoodly.io) and Sign out (spec 2026-10-16 sign-in
+// and the dashboard §6).
+//
+// Menus: click toggles, Esc closes and returns focus to the trigger, ↑/↓ move
+// between entries, a pointer down outside closes. Collections also opens on
+// hover. A child being active highlights its parent and the entry inside the
+// menu. Collections and More are dark, the bar's own colours, since they
+// carry the bar's items; the others float on the sheet white.
+import { useEffect, useId, useRef, useState } from "react";
+import { ChevronDown, EllipsisVertical, ExternalLink, Image, Layers, LayoutPanelTop, LibraryBig, PanelTop, RadioTower, Settings, } from "lucide-react";
+import { tileCopy } from "./deploy-tile.js";
+import { ThemeToggle } from "../ui/primitives.js";
+import { useAdminHref } from "./base.js";
+import { consoleLinks } from "./console-links.js";
+import { SMOODLY_VERSION } from "../../version.js";
+import { RouteLink } from "./RouteLink.js";
+/** Lucide at the bar's size and stroke (the item's CSS restates both). */
+const ICON = { size: 18, strokeWidth: 2, "aria-hidden": true };
+/** The app icon, inlined: a package can't ship a file into the host app's
+ *  /public. The wordmark's "s" on a rounded square (chosen 2026-10-23; the
+ *  same tile, green with a white s, is smoodly.io's favicon). The square takes
+ *  --logo-outer and the glyph --logo-inner, so a look decides its colours. */
+function AppIcon() {
+    return (_jsxs("svg", { className: "sm-navbar__logo", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("rect", { width: "64", height: "64", rx: "14", style: { fill: "var(--logo-outer)" } }), _jsx("path", { style: { fill: "var(--logo-inner)" }, transform: "translate(14.382 -4.365) scale(0.7123)", d: "M30.5851 22.9763C36.7891 22.9763 45.6052 24.6681 49.3603 26.5237L46.2583 42.2415C41.6869 40.113 35.2653 38.4212 29.4422 38.4212C26.0137 38.4212 23.7825 39.1852 23.7825 40.9862C23.7825 42.1869 24.9797 42.8964 27.1021 43.333L31.5647 44.3153C40.8162 46.3346 45.5508 51.1373 45.5508 58.505C45.5508 73.4587 33.9592 79.1345 18.939 79.1345C11.4833 79.1345 4.24536 77.3335 0.109375 75.6963L3.42905 58.9416C8.97998 61.8341 16.4356 63.6351 21.2247 63.6351C24.6532 63.6351 26.9933 62.7619 26.9933 60.6334C26.9933 59.4327 26.1226 58.505 23.5648 58.0684L19.7553 57.3043C12.5173 55.9399 6.31336 50.9735 6.31336 43.0055C6.31336 30.6169 15.6737 23.0309 30.6939 23.0309L30.5851 22.9763Z" })] }));
+}
+/** A menu link that opens smoodly.io in a new tab, with the arrow that says so. */
+function ExtLink({ href, onClick, children }) {
+    return (_jsxs("a", { role: "menuitem", className: "sm-navbar__menu-item", href: href, target: "_blank", rel: "noreferrer", onClick: onClick, children: [_jsx("span", { children: children }), _jsx(ExternalLink, { className: "sm-navbar__ext", size: 13, strokeWidth: 1.75, "aria-hidden": "true" })] }));
+}
+export function NavBar({ registry, active, email, settings = true, deploy, onSignOut }) {
+    const adminHref = useAdminHref();
+    const root = useRef(null);
+    const uid = useId();
+    const [open, setOpen] = useState(null);
+    // Collections opens on hover as well (spec 2026-09-15 rail tweaks): a hover
+    // open closes when the pointer leaves and never steals focus; a click open
+    // is sticky and moves focus into the menu for the keyboard.
+    const [hovered, setHovered] = useState(false);
+    const menuId = (key) => `sm-navbar-menu${uid}${key}`;
+    const toggle = (key) => setOpen((cur) => (cur === key ? null : key));
+    const close = () => setOpen(null);
+    const hoverLeave = () => setHovered(false);
+    // A click open moves focus into the menu; a pointer down outside closes it.
+    // Outside means outside the menu and its trigger — the rest of the bar
+    // counts too (2026-09-26); the trigger is left to its own toggle.
+    useEffect(() => {
+        if (!open || !root.current)
+            return;
+        if (!hovered)
+            root.current.querySelector(`#${CSS.escape(menuId(open))} [role=menuitem]`)?.focus();
+        const onPointerDown = (e) => {
+            if (!(e.target instanceof Node))
+                return;
+            const menu = root.current?.querySelector(`#${CSS.escape(menuId(open))}`);
+            const trigger = root.current?.querySelector(`[aria-controls="${menuId(open)}"]`);
+            if (menu?.contains(e.target) || trigger?.contains(e.target))
+                return;
+            close();
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const onKeyDown = (e) => {
+        if (!open || !root.current)
+            return;
+        if (e.key === "Escape") {
+            close();
+            root.current.querySelector(`[aria-controls="${menuId(open)}"]`)?.focus();
+        }
+        else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            const items = Array.from(root.current.querySelectorAll(`#${CSS.escape(menuId(open))} [role=menuitem]`));
+            if (!items.length)
+                return;
+            e.preventDefault();
+            const i = items.indexOf(document.activeElement);
+            items[(i + (e.key === "ArrowDown" ? 1 : -1) + items.length) % items.length].focus();
+        }
+    };
+    const link = (key, label, icon, href) => (_jsx("li", { className: "sm-navbar__item", children: _jsxs(RouteLink, { className: "sm-navbar__btn", href: href, "aria-current": key === active ? "page" : undefined, onClick: close, children: [icon, _jsx("span", { className: "sm-navbar__label", title: label, children: label })] }) }, key));
+    /** An entry of a dark menu: the item's icon and its label, a route link. */
+    const menuLink = (key, label, icon, href) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-navbar__menu-item", href: href, "aria-current": key === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsxs("span", { className: "sm-navbar__menu-label", children: [icon, _jsx("span", { children: label })] }) }) }, key));
+    // A collection with `admin.showInNav` is an item of its own; the rest stay in the Collections menu.
+    const pinned = registry.collections.filter((c) => c.inNav);
+    const collections = registry.collections.filter((c) => !c.inNav);
+    const collectionActive = collections.some((c) => c.name === active);
+    const collectionsOpen = open === "collections" || (hovered && open === null);
+    // What ⋮ holds, in the rail's order.
+    const more = [
+        ...(registry.globals.length > 0 ? [{ key: "globals", label: "Sections", icon: _jsx(LayoutPanelTop, { ...ICON }), href: adminHref("/globals") }] : []),
+        ...(settings ? [{ key: "settings", label: "Settings", icon: _jsx(Settings, { ...ICON }), href: adminHref("/settings") }] : []),
+    ];
+    const moreActive = more.some((m) => m.key === active);
+    const name = email?.split("@")[0] ?? "Editor";
+    const initials = name.slice(0, 2).toUpperCase();
+    return (_jsxs("nav", { className: "sm-navbar", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx("div", { className: "sm-navbar__start", children: _jsxs("div", { className: "sm-navbar__item", children: [_jsx("button", { type: "button", className: "sm-navbar__brand", title: "Smoodly", "aria-haspopup": "menu", "aria-expanded": open === "brand", "aria-controls": menuId("brand"), onClick: () => toggle("brand"), children: _jsx(AppIcon, {}) }), _jsxs("ul", { className: "sm-navbar__menu sm-navbar__menu--brand", role: "menu", id: menuId("brand"), "data-open": open === "brand", children: [_jsx("li", { role: "none", children: _jsx(ExtLink, { href: consoleLinks().project, onClick: close, children: "This site at smoodly.io" }) }), _jsx("li", { role: "none", children: _jsx(ExtLink, { href: consoleLinks().docs, onClick: close, children: "Documentation" }) }), _jsxs("li", { className: "sm-navbar__menu-version", role: "presentation", children: ["Smoodly ", SMOODLY_VERSION] })] })] }) }), _jsxs("ul", { className: "sm-navbar__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), adminHref("/pages")), pinned.map((c) => link(c.name, c.title, _jsx(Layers, { ...ICON }), adminHref(`/${c.name}`))), collections.length > 0 && (_jsxs("li", { className: "sm-navbar__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-navbar__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx(LibraryBig, { ...ICON }), _jsx("span", { className: "sm-navbar__label", children: "Collections" }), _jsx(ChevronDown, { className: "sm-navbar__chevron", size: 14, strokeWidth: 2, "aria-hidden": "true" })] }), _jsx("ul", { className: "sm-navbar__menu sm-navbar__menu--dark sm-navbar__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => menuLink(c.name, c.title, _jsx(Layers, { ...ICON }), adminHref(`/${c.name}`))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), adminHref("/media")), more.length > 0 && (_jsxs("li", { className: "sm-navbar__item", children: [_jsx("button", { type: "button", className: "sm-navbar__btn sm-navbar__btn--icon", title: "More", "aria-label": "More", "aria-current": moreActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": open === "more", "aria-controls": menuId("more"), onClick: () => toggle("more"), children: _jsx(EllipsisVertical, { ...ICON }) }), _jsx("ul", { className: "sm-navbar__menu sm-navbar__menu--dark", role: "menu", id: menuId("more"), "data-open": open === "more", children: more.map((m) => menuLink(m.key, m.label, m.icon, m.href)) })] }))] }), _jsxs("div", { className: "sm-navbar__end", children: [deploy && (() => {
+                        const copy = tileCopy(deploy.status, Date.now());
+                        const id = menuId("deploy");
+                        return (_jsxs("div", { className: "sm-navbar__item sm-navbar__deploy", "data-state": deploy.status.state, children: [_jsxs("button", { type: "button", className: `sm-navbar__btn${copy.lit ? " sm-navbar__btn--lit" : ""}${copy.warn ? " sm-navbar__btn--warn" : ""}`, "aria-haspopup": "menu", "aria-expanded": open === "deploy", "aria-controls": id, onClick: () => toggle("deploy"), title: copy.detail, children: [_jsxs("span", { className: "sm-navbar__icon", children: [_jsx(RadioTower, { ...ICON }), copy.badge && _jsx("span", { className: "sm-navbar__badge", "aria-label": `${copy.badge} changes waiting`, children: copy.badge })] }), _jsx("span", { className: "sm-navbar__label", children: copy.label })] }), _jsxs("ul", { className: "sm-navbar__menu sm-navbar__menu--end", role: "menu", id: id, "data-open": open === "deploy", children: [_jsx("li", { className: "sm-navbar__menu-detail", role: "presentation", children: copy.detail }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-navbar__menu-item", disabled: copy.action === null || deploy.busy, title: copy.disabledReason ?? undefined, onClick: () => { close(); deploy.onDeploy(); }, children: copy.action === "retry" ? "Deploy again" : "Deploy now" }) }), copy.disabledReason && _jsx("li", { className: "sm-navbar__menu-note", role: "presentation", children: copy.disabledReason })] })] }));
+                    })(), _jsxs("div", { className: "sm-navbar__item sm-navbar__foot", children: [_jsx("button", { type: "button", className: "sm-navbar__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-navbar__menu sm-navbar__menu--end", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-navbar__menu-title", role: "presentation", children: email ?? name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx(ExtLink, { href: consoleLinks().account, onClick: close, children: "My Account" }) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-navbar__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] })] }));
+}

package/dist/admin/shell/global-canvas.d.ts

@@ -0,0 +1,40 @@
+import type { EntryUsage } from "../../entry-store.ts";
+import type { PageTree } from "../../page-context.ts";
+import type { PageRecord } from "../../store.ts";
+import type { BridgeRect } from "../editor/protocol.ts";
+import type { AdminGlobal, AdminRegistry } from "../serialize.ts";
+export type CanvasCandidate = {
+    pageId: string;
+    title: string;
+};
+type HomeRule = {
+    homePageSlug: string;
+    locales: Pick<AdminRegistry["locales"], "default">;
+};
+/** The pages that may show `item` in `locale`, best first. A Fields item: none. A layout item: the site root (as
+ *  pages-tree.ts names it: a root record whose default-locale slug is the home slug). Any other visual item: each
+ *  distinct page of `usage`, in usage order. Only a page (not a folder) with a row in `locale` counts; a usage row
+ *  carries no locale, so a candidate may still not draw the item — the frame decides (`globalNodeIn`). */
+export declare function canvasCandidates(item: AdminGlobal, usage: EntryUsage[], pages: PageRecord[], locale: string, registry: HomeRule): CanvasCandidate[];
+/** The node that draws the item in this frame, or null: the layout id when the frame reported it; else the first
+ *  placement of the item in document order (zones as the tree lists them) that the frame drew. */
+export declare function globalNodeIn(name: string, rects: BridgeRect[], tree: PageTree | null): string | null;
+/** Whether a frame's report may be judged: the bridge committed a render and reported geometry after it. Before
+ *  that, "no node" means "not yet" — the bridge posts its geometry more than once as a page settles. */
+export declare function settled(seen: {
+    rendered: boolean;
+    rectsAfterRendered: boolean;
+}): boolean;
+/** How long a settled frame's reports must have been quiet before "no node" is believed. */
+export declare const MISS_QUIET_MS = 1500;
+/** Whether a frame does not draw the item: it may be judged, it holds no node of the item, and nothing has been
+ *  reported for `MISS_QUIET_MS`. The bridge's first report follows its first render at once, so an item that
+ *  streams in after it (a footer under Suspense, an Astro server island) is in a later report: the quiet period
+ *  waits for that one. */
+export declare function missing(seen: {
+    rendered: boolean;
+    rectsAfterRendered: boolean;
+}, nodeId: string | null, quietForMs: number): boolean;
+/** The candidates without the pages already found not to draw the item, order kept. */
+export declare function liveCandidates(candidates: CanvasCandidate[], empty: ReadonlySet<string>): CanvasCandidate[];
+export {};

package/dist/admin/shell/global-canvas.js

@@ -0,0 +1,60 @@
+import { globalLink, globalNodeId } from "../../global.js";
+/** The pages that may show `item` in `locale`, best first. A Fields item: none. A layout item: the site root (as
+ *  pages-tree.ts names it: a root record whose default-locale slug is the home slug). Any other visual item: each
+ *  distinct page of `usage`, in usage order. Only a page (not a folder) with a row in `locale` counts; a usage row
+ *  carries no locale, so a candidate may still not draw the item — the frame decides (`globalNodeIn`). */
+export function canvasCandidates(item, usage, pages, locale, registry) {
+    if (item.section === undefined)
+        return [];
+    const shows = (p) => !!p && p.template !== null && p.locales[locale] !== undefined;
+    const candidate = (p) => ({ pageId: p.id, title: p.locales[locale].title });
+    if (item.layout) {
+        const root = pages.find((p) => p.parentId === null && p.locales[registry.locales.default]?.slug === registry.homePageSlug);
+        return shows(root) ? [candidate(root)] : [];
+    }
+    const byId = new Map(pages.map((p) => [p.id, p]));
+    const out = [];
+    const seen = new Set();
+    for (const u of usage) {
+        if (u.sourceKind !== "page" || seen.has(u.sourceId))
+            continue;
+        seen.add(u.sourceId);
+        const p = byId.get(u.sourceId);
+        if (shows(p))
+            out.push(candidate(p));
+    }
+    return out;
+}
+/** The node that draws the item in this frame, or null: the layout id when the frame reported it; else the first
+ *  placement of the item in document order (zones as the tree lists them) that the frame drew. */
+export function globalNodeIn(name, rects, tree) {
+    const drawn = new Set(rects.map((r) => r.id));
+    const layoutId = globalNodeId(name);
+    if (drawn.has(layoutId))
+        return layoutId;
+    for (const nodes of Object.values(tree?.zones ?? {})) {
+        for (const node of nodes) {
+            if (globalLink(node)?.item === name && drawn.has(node.id))
+                return node.id;
+        }
+    }
+    return null;
+}
+/** Whether a frame's report may be judged: the bridge committed a render and reported geometry after it. Before
+ *  that, "no node" means "not yet" — the bridge posts its geometry more than once as a page settles. */
+export function settled(seen) {
+    return seen.rendered && seen.rectsAfterRendered;
+}
+/** How long a settled frame's reports must have been quiet before "no node" is believed. */
+export const MISS_QUIET_MS = 1500;
+/** Whether a frame does not draw the item: it may be judged, it holds no node of the item, and nothing has been
+ *  reported for `MISS_QUIET_MS`. The bridge's first report follows its first render at once, so an item that
+ *  streams in after it (a footer under Suspense, an Astro server island) is in a later report: the quiet period
+ *  waits for that one. */
+export function missing(seen, nodeId, quietForMs) {
+    return settled(seen) && nodeId === null && quietForMs >= MISS_QUIET_MS;
+}
+/** The candidates without the pages already found not to draw the item, order kept. */
+export function liveCandidates(candidates, empty) {
+    return candidates.filter((c) => !empty.has(c.pageId));
+}

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

@@ -2,7 +2,7 @@ import { SEVERITY, groupKey } from "../drift.js";
 import { driftHeadline } from "../drift-copy.js";
 /** A group shows this many rows, then "Show all N". */
 export const GROUP_PREVIEW = 10;
-const kindLabel = (doc, registry) => doc.kind === "page" ? "Page" : doc.kind === "global" ? "Site" : registry.collections.find((c) => c.name === doc.collection)?.title ?? doc.collection ?? "";
+const kindLabel = (doc, registry) => doc.kind === "page" ? "Page" : doc.kind === "global" ? "Sections" : registry.collections.find((c) => c.name === doc.collection)?.title ?? doc.collection ?? "";
 const href = (doc, locale) => {
     const q = `?locale=${encodeURIComponent(locale)}`;
     if (doc.kind === "page")

package/dist/admin/ui/primitives.js

@@ -40,7 +40,7 @@ export function ThemeToggle() {
         }
         catch { /* not remembered */ }
     };
-    return (_jsxs("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: toggle, children: [_jsxs("span", { className: "sm-when-light", children: [_jsx(Moon, { ...ICON }), "Dark mode"] }), _jsxs("span", { className: "sm-when-dark", children: [_jsx(Sun, { ...ICON }), "Light mode"] })] }));
+    return (_jsxs("button", { type: "button", role: "menuitem", className: "sm-navbar__menu-item", onClick: toggle, children: [_jsxs("span", { className: "sm-when-light", children: [_jsx(Moon, { ...ICON }), "Dark mode"] }), _jsxs("span", { className: "sm-when-dark", children: [_jsx(Sun, { ...ICON }), "Light mode"] })] }));
 }
 export function Button({ variant = "primary", size = "md", className, ...rest }) {
     return (_jsx("button", { type: "button", className: cx("sm-btn", `sm-btn--${variant}`, size === "lg" && "sm-btn--lg", size === "sm" && "sm-btn--sm", className), ...rest }));