smoodly 0.0.8 → 0.0.10

package/dist/admin/editor/EditorView.js

@@ -13,6 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // that locale (spec 2026-09-06 §6); switching flushes the pending save
 // first.
 //
+// This file orchestrates: load, tree gestures, publish, and the layout.
+// The pieces live beside it — `useCanvasBridge` (geometry and messages),
+// `usePageLocale` (switch/add/remove), `CanvasOverlay` and
+// `overlay-geometry` (the chrome above the iframe), `InsertPicker`,
+// `Outline`, `PageSettings`, `NoticePane`.
+//
 // Chrome follows the design system's visual-editor screen: top bar, toned
 // canvas around a white page, 300px inspector holding fields then outline.
 //
@@ -22,60 +28,35 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SHARED_NODE_TYPE } from "../../shared.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { tabsFor } from "../forms/tabs.js";
-import { allowedSections, allowedShared, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
+import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
 import { useDraftAutosave } from "./autosave.js";
+import { CanvasOverlay } from "./CanvasOverlay.js";
+import { InsertPicker } from "./InsertPicker.js";
+import { NoticePane } from "./NoticePane.js";
+import { Outline } from "./Outline.js";
 import { PageSettings } from "./PageSettings.js";
+import { localeFromUrl } from "./locale-url.js";
+import { plusButtonsFor } from "./overlay-geometry.js";
+import { useCanvasBridge } from "./useCanvasBridge.js";
+import { usePageLocale } from "./usePageLocale.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 { Banner as BannerBox, Breadcrumb, Button, Divider, IconButton, LinkButton, SaveIndicator, SectionLabel, StatusBadge, Tabs, TopBar, cx, } from "../ui/primitives.js";
+import { Banner as BannerBox, Breadcrumb, Button, Divider, IconButton, LinkButton, SaveIndicator, StatusBadge, Tabs, TopBar, } from "../ui/primitives.js";
 export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-editor=1` : `${url}?smoodly-editor=1`);
-const GEOMETRY_TIMEOUT_MS = 4000;
-/** The locale to edit: from the URL (the Pages list links here with
- *  ?locale=), else the default. */
-function localeFromUrl(registry) {
-    try {
-        const l = new URLSearchParams(window.location.search).get("locale");
-        if (l && registry.locales.supported.includes(l))
-            return l;
-    }
-    catch {
-        // no window — the default is fine
-    }
-    return registry.locales.default;
-}
-/** Point the address bar at a locale, keeping the rest of the query
- *  string — a bare `?locale=…` would drop every other param. */
-function writeLocaleToUrl(next) {
-    try {
-        const u = new URL(window.location.href);
-        u.searchParams.set("locale", next);
-        window.history.replaceState(null, "", u);
-    }
-    catch {
-        // no window (or no history) — the URL is cosmetic here
-    }
-}
 export function EditorView({ ops, registry, id }) {
     const [record, setRecord] = useState(null);
     const [tree, setTree] = useState(null);
     const [loadError, setLoadError] = useState(null);
     const [ready, setReady] = useState(false);
     const [folder, setFolder] = useState(false);
-    // The locale being edited. Every load, edit, autosave and publish
-    // targets this ONE locale (spec 2026-09-06 §6).
-    const [locale, setLocale] = useState(() => localeFromUrl(registry));
     const [reloadKey, setReloadKey] = useState(0);
-    const [adding, setAdding] = useState(false);
     const [paths, setPaths] = useState({});
     const [urls, setUrls] = useState({});
     // The locales the parent exists in — "Add locale" offers only these.
     const [parentLocales, setParentLocales] = useState([]);
-    const [rects, setRects] = useState([]);
-    const [emptyZones, setEmptyZones] = useState([]);
-    const [docH, setDocH] = useState(900);
-    const [geometry, setGeometry] = useState("waiting");
     const [selectedId, setSelectedId] = useState(null);
     const [hoverId, setHoverId] = useState(null);
     const [picker, setPicker] = useState(null);
@@ -86,14 +67,14 @@ export function EditorView({ ops, registry, id }) {
     // 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);
-    const [hoverPlus, setHoverPlus] = useState(null);
     const iframeRef = useRef(null);
     const scrollerRef = useRef(null);
     const treeRef = useRef(null);
     const registryRef = useRef(registry);
     registryRef.current = registry;
-    // The tree in memory belongs to the locale it was loaded for; a switch flushes first (switchLocale), so the ref and the tree always agree.
-    const treeLocaleRef = useRef(locale);
+    // The tree in memory belongs to the locale it was loaded for; a switch
+    // flushes first (switchLocale), so the ref and the tree always agree.
+    const treeLocaleRef = useRef(localeFromUrl(registry));
     // Every edit marks the draft dirty; a debounced saveDraft persists, with
     // retry on failure, and the bridge refreshes the iframe on the save ack.
     const { saveState, mark, flush } = useDraftAutosave({
@@ -101,6 +82,12 @@ export function EditorView({ ops, registry, id }) {
         persist: (t) => ops.pages.saveDraft(id, treeLocaleRef.current, t),
         onSaved: () => postToCanvas({ source: "smoodly", kind: "refresh" }),
     });
+    const { locale, adding, switchLocale, doAddLocale, doRemoveLocale } = usePageLocale({
+        registry, ops, id, record, setRecord, flush,
+        fail: (text) => setBanner({ text }),
+        clearBanner: () => setBanner(null),
+        reload: () => setReloadKey((k) => k + 1),
+    });
     // The URL that serves this page, per locale, from the store's paths
     // index — the label is the CMS path, the canvas and "View live" take
     // the site URL (href applied server-side by pages.get).
@@ -108,6 +95,11 @@ export function EditorView({ ops, registry, id }) {
     const label = path;
     const siteUrl = urls[locale] ?? path;
     const iframeSrc = ready ? withEditorParam(siteUrl) : null;
+    // Canvas-originated selection: the node is under the cursor already, so
+    // this path deliberately skips the scroll every other selection does.
+    const { rects, emptyZones, docH, geometry, postToCanvas } = useCanvasBridge({
+        iframeRef, iframeSrc, onSelect: setSelectedId, onHover: setHoverId,
+    });
     // ── load: draft mode FIRST, then the record; only then point the iframe
     // at the site route (an iframe loaded before the cookie exists would
     // render the published tree).
@@ -184,10 +176,6 @@ export function EditorView({ ops, registry, id }) {
         })();
         return () => { cancelled = true; };
     }, [ops, id, locale, reloadKey]);
-    // A new canvas URL (a locale switch, a rename) means new geometry — the
-    // previous page's rects are stale the instant the iframe starts loading
-    // a different route, so clear them alongside resetting geometry.
-    useEffect(() => { setGeometry("waiting"); setRects([]); setEmptyZones([]); }, [iframeSrc]);
     useEffect(() => { treeRef.current = tree; }, [tree]);
     // After a rename only the record and the URL indexes are stale — never
     // re-read the tree here: the draft in memory may be ahead of the store.
@@ -213,84 +201,6 @@ export function EditorView({ ops, registry, id }) {
         await reload();
         return null;
     };
-    /** Switch the edited locale. The pending autosave must land first, or
-     *  it would persist THIS tree under the new locale. */
-    const switchLocale = async (next) => {
-        if (next === locale)
-            return;
-        const flushed = await flush();
-        if (!flushed) {
-            setBanner({ text: "Couldn't save your latest changes — switch cancelled." });
-            return;
-        }
-        writeLocaleToUrl(next);
-        setBanner(null);
-        setLocale(next);
-    };
-    /** Add a locale, copying the tree on screen (or the record's source locale when this one is absent). */
-    const doAddLocale = async (target) => {
-        if (!record || adding)
-            return;
-        const from = record.locales[locale] ? locale : sourceLocaleOf(record, registry);
-        if (from === locale) {
-            const flushed = await flush();
-            if (!flushed) {
-                setBanner({ text: "Couldn't save your latest changes — add cancelled." });
-                return;
-            }
-        }
-        setAdding(true);
-        let result;
-        try {
-            result = await ops.pages.addLocale(id, target, { from });
-        }
-        catch {
-            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
-        }
-        setAdding(false);
-        if (!result.ok) {
-            setBanner({ text: result.message });
-            return;
-        }
-        // The record now HAS the locale; keep it, or the pane below would go
-        // on offering "doesn't exist yet" until the reload lands.
-        setRecord(result.data);
-        if (target === locale)
-            setReloadKey((k) => k + 1);
-        else
-            void switchLocale(target);
-    };
-    const doRemoveLocale = async () => {
-        if (!record)
-            return;
-        const remaining = Object.keys(record.locales).filter((l) => l !== locale);
-        if (remaining.length === 0)
-            return;
-        if (!window.confirm(`Remove this page from ${locale}? Its ${locale} content and history are deleted.`))
-            return;
-        // Let a pending save land before the row goes, so no save races the
-        // delete — and if it cannot land, stop: a retry mid-flight would
-        // recreate the very draft the removal is deleting.
-        const flushed = await flush();
-        if (!flushed) {
-            setBanner({ text: "Couldn't save your latest changes — removal cancelled." });
-            return;
-        }
-        let result;
-        try {
-            result = await ops.pages.removeLocale(id, locale);
-        }
-        catch {
-            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
-        }
-        if (!result.ok) {
-            setBanner({ text: result.message });
-            return;
-        }
-        const next = remaining.includes(registry.locales.default) ? registry.locales.default : remaining[0];
-        writeLocaleToUrl(next);
-        setLocale(next);
-    };
     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]);
@@ -361,43 +271,6 @@ export function EditorView({ ops, registry, id }) {
             setSharedIds({}); });
         return () => { cancelled = true; };
     }, [ops]);
-    // ── canvas messaging ─────────────────────────────────────────────────
-    const postToCanvas = useCallback((m) => {
-        iframeRef.current?.contentWindow?.postMessage(m, "*");
-    }, []);
-    useEffect(() => {
-        const onMessage = (e) => {
-            const m = e.data;
-            if (m?.source !== "smoodly")
-                return;
-            if (e.source !== iframeRef.current?.contentWindow)
-                return;
-            if (m.kind === "rects") {
-                setRects(m.nodes);
-                setEmptyZones(m.emptyZones);
-                setDocH(m.docH);
-                setGeometry("ok");
-            }
-            else if (m.kind === "select") {
-                // Canvas-originated: the node is under the cursor already, so this
-                // path deliberately skips the scroll every other selection does.
-                setSelectedId(m.id);
-            }
-            else if (m.kind === "hover") {
-                setHoverId(m.id);
-            }
-        };
-        window.addEventListener("message", onMessage);
-        return () => window.removeEventListener("message", onMessage);
-    }, []);
-    // Bridge degradation: geometry silence is survivable — the iframe and
-    // the outline keep working, only the overlay goes dark.
-    useEffect(() => {
-        if (!iframeSrc || geometry !== "waiting")
-            return;
-        const t = setTimeout(() => setGeometry((g) => (g === "waiting" ? "missing" : g)), GEOMETRY_TIMEOUT_MS);
-        return () => clearTimeout(t);
-    }, [iframeSrc, geometry]);
     // 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.
@@ -520,14 +393,14 @@ export function EditorView({ ops, registry, id }) {
         return () => window.removeEventListener("keydown", onKey);
     }, []);
     if (loadError) {
-        return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40, background: "var(--bg)" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [_jsx(BannerBox, { tone: "error", children: loadError }), _jsx("a", { href: "/admin/pages", children: "\u2190 Back to pages" })] }) }));
+        return _jsx(NoticePane, { children: _jsx(BannerBox, { tone: "error", children: loadError }) });
     }
     if (folder) {
-        return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40, background: "var(--bg)" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [_jsx(BannerBox, { tone: "warn", children: "This is a folder \u2014 it has a title and a place in the tree, but no page. Use \u201CAdd page here\u201D in the Pages list to give it one." }), _jsx("a", { href: "/admin/pages", children: "\u2190 Back to pages" })] }) }));
+        return (_jsx(NoticePane, { children: _jsx(BannerBox, { tone: "warn", children: "This is a folder \u2014 it has a title and a place in the tree, but no page. Use \u201CAdd page here\u201D in the Pages list to give it one." }) }));
     }
     if (record && !record.locales[locale]) {
         const from = sourceLocaleOf(record, registry);
-        return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40, background: "var(--bg)" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [banner && _jsx(BannerBox, { tone: "error", onDismiss: () => setBanner(null), children: banner.text }), _jsxs(BannerBox, { tone: "warn", children: ["This page doesn't exist in ", locale, " yet. Adding it copies the ", from, " draft as the first ", locale, " version."] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs(Button, { onClick: () => { void doAddLocale(locale); }, disabled: adding, children: ["Add ", locale] }), _jsxs(Button, { variant: "secondary", onClick: () => { void switchLocale(from); }, children: ["Back to ", from] })] }), _jsx("a", { href: "/admin/pages", children: "\u2190 Back to pages" })] }) }));
+        return (_jsxs(NoticePane, { children: [banner && _jsx(BannerBox, { tone: "error", onDismiss: () => setBanner(null), children: banner.text }), _jsxs(BannerBox, { tone: "warn", children: ["This page doesn't exist in ", locale, " yet. Adding it copies the ", from, " draft as the first ", locale, " version."] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs(Button, { onClick: () => { void doAddLocale(locale); }, disabled: adding, children: ["Add ", locale] }), _jsxs(Button, { variant: "secondary", onClick: () => { void switchLocale(from); }, children: ["Back to ", from] })] })] }));
     }
     const selected = tree && selectedId ? findNode(tree, selectedId) : null;
     const selectedSection = selected ? sectionOf(selected.type) : null;
@@ -538,6 +411,17 @@ export function EditorView({ ops, registry, id }) {
     const selRect = selected ? rectById.get(selected.id) : undefined;
     const hoverRect = hoverId && hoverId !== selectedId ? rectById.get(hoverId) : undefined;
     const blockCount = tree ? Object.values(tree.zones).reduce((n, list) => n + list.length, 0) : 0;
+    const selection = selected && selRect && (selectedSection || selectedShared)
+        ? {
+            node: selected, rect: selRect,
+            title: selectedSection?.title ?? selectedShared?.title ?? selected.type,
+            shared: Boolean(selectedShared), locked: selLocked,
+        }
+        : null;
+    const labelOf = (node) => {
+        const shared = sharedOf(node);
+        return sectionOf(node.type)?.title ?? (shared ? `${shared.title} · shared` : node.type);
+    };
     // Reveal is defined here, where the rect map exists; select() calls it
     // through the ref so its own identity stays stable.
     revealRef.current = (id) => {
@@ -548,90 +432,25 @@ export function EditorView({ ops, registry, id }) {
         const top = rect.y - Math.max(0, (scroller.clientHeight - rect.h) / 2);
         scroller.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
     };
-    // "+" affordances: one per legal boundary in every insertable zone.
-    const plusButtons = [];
-    for (const zone of zoneOrder) {
-        if (!zoneCanTake(zone))
-            continue;
-        // Carry each member's real position in the tree's zone array through
-        // the rect filter — under refresh-on-change the rects lag the tree by
-        // up to a save cycle, so a filtered-array position isn't a valid
-        // insertNode index once a node is missing its rect.
-        const members = nodesIn(zone)
-            .map((n, treeIndex) => ({ rect: rectById.get(n.id), treeIndex }))
-            .filter((m) => Boolean(m.rect));
-        if (members.length === 0) {
-            const zr = emptyZones.find((r) => r.zone === zone);
-            if (zr)
-                plusButtons.push({ zone, index: 0, y: zr.y + zr.h / 2 });
-        }
-        else {
-            members.forEach(({ rect, treeIndex }, i) => {
-                plusButtons.push({ zone, index: treeIndex, y: rect.y - 1 });
-                if (i === members.length - 1)
-                    plusButtons.push({ zone, index: treeIndex + 1, y: rect.y + rect.h + 1 });
-            });
-        }
-    }
+    const plusButtons = plusButtonsFor({ zoneOrder, canTake: zoneCanTake, nodesIn, rects: rectById, emptyZones });
     const tabs = selectedSection ? tabsFor(selectedSection) : [];
     const activeTab = tabs.some((t) => t.tab === tab) ? tab : tabs[0]?.tab;
     const entries = tabs.find((t) => t.tab === activeTab)?.entries ?? [];
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(Breadcrumb, { backHref: "/admin/pages", items: [{ label: "Pages", href: "/admin/pages" }, { 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: [_jsxs("div", { className: "sm-canvas__meta", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { children: label }), 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); } })) : (_jsxs("span", { children: ["\u00B7 ", locale] }))] }), _jsxs("span", { children: [blockCount, " BLOCK", blockCount === 1 ? "" : "S"] })] }), (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-mono", style: {
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(Breadcrumb, { backHref: `${BASE}/pages`, items: [{ label: "Pages", href: `${BASE}/pages` }, { 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: [_jsxs("div", { className: "sm-canvas__meta", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { children: label }), 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); } })) : (_jsxs("span", { children: ["\u00B7 ", locale] }))] }), _jsxs("span", { children: [blockCount, " BLOCK", blockCount === 1 ? "" : "S"] })] }), (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-mono", style: {
                                                 height: 240, display: "grid", placeItems: "center",
                                                 color: "var(--gray-500)", fontSize: "var(--text-xs)", letterSpacing: ".04em",
-                                            }, children: "LOADING CANVAS\u2026" })), _jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed sm-mono", style: {
-                                                        position: "absolute", left: z.x + 12, top: z.y, width: Math.max(0, z.w - 24),
-                                                        height: Math.max(56, z.h), fontSize: "var(--text-xs)",
-                                                        letterSpacing: ".04em", textTransform: "uppercase", color: "var(--gray-500)",
-                                                        borderColor: "var(--gray-300)",
-                                                    }, children: [z.zone, " \u00B7 empty"] }, `empty-${z.zone}`))), hoverRect && (_jsx("div", { style: {
-                                                        position: "absolute", left: hoverRect.x, top: hoverRect.y,
-                                                        width: hoverRect.w, height: hoverRect.h,
-                                                        outline: "1.5px solid color-mix(in srgb, var(--selection) 45%, transparent)",
-                                                        outlineOffset: -1.5, borderRadius: "var(--radius-sm)",
-                                                    } })), selRect && selected && (selectedSection || selectedShared) && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
-                                                                position: "absolute", left: selRect.x, top: selRect.y,
-                                                                width: selRect.w, height: selRect.h,
-                                                                outline: "var(--outline-selection)", outlineOffset: -1.5,
-                                                                borderRadius: "var(--radius-sm)",
-                                                            } }), _jsxs("span", { className: "sm-blocktag", style: { position: "absolute", left: selRect.x, top: selRect.y }, children: [selectedSection?.title ?? selectedShared?.title, selectedShared && " · shared", selLocked && " · locked"] }), _jsx("div", { className: "sm-blocktoolbar", style: {
-                                                                position: "absolute", left: selRect.x + selRect.w - 8, top: selRect.y + 8,
-                                                                transform: "translateX(-100%)", pointerEvents: "auto",
-                                                            }, children: selLocked ? (_jsx("span", { className: "sm-mono", style: { fontSize: "var(--text-xs)", color: "#8C94A8", padding: "4px 8px" }, children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => doMove(selected.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => doMove(selected.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => doDuplicate(selected), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => doRemove(selected.id), children: "\u00D7" })] })) })] })), plusButtons.map((p) => {
-                                                    const key = `${p.zone}-${p.index}`;
-                                                    const hot = hoverPlus === key;
-                                                    return (_jsxs("div", { style: { position: "absolute", left: 0, right: 0, top: p.y }, children: [hot && _jsx("div", { className: "sm-guide", style: { margin: "0 12px" } }), _jsxs("div", { style: {
-                                                                    position: "absolute", left: "50%", top: 0, transform: "translate(-50%,-50%)",
-                                                                    display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
-                                                                    pointerEvents: "auto",
-                                                                }, children: [_jsx("button", { className: "sm-plus", "aria-label": `Add to ${p.zone}`, onMouseEnter: () => setHoverPlus(key), onMouseLeave: () => setHoverPlus((k) => (k === key ? null : k)), onClick: (e) => setPicker({ zone: p.zone, index: p.index, x: e.clientX - 150, y: e.clientY + 12 }), children: "+" }), hot && _jsxs("span", { className: "sm-tooltip", children: ["Add to ", p.zone] })] })] }, key));
-                                                })] })] }) })] }), _jsxs("aside", { className: "sm-inspector", 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) }))] })) : (_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-label", children: "Nothing selected \u2014 page settings below" }) })), _jsxs("div", { className: "sm-inspector__body", children: [!selected && record && (_jsxs(_Fragment, { children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                            }, children: "LOADING CANVAS\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, selection: selection, 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 })] }) })] }), _jsxs("aside", { className: "sm-inspector", 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) }))] })) : (_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-label", children: "Nothing selected \u2014 page settings below" }) })), _jsxs("div", { className: "sm-inspector__body", children: [!selected && record && (_jsxs(_Fragment, { children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onRemoveLocale: Object.keys(record.locales).length > 1 &&
                                                     !isFixedNode(record, registry) &&
                                                     !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
                                                     ? () => { void doRemoveLocale(); }
-                                                    : undefined }), _jsx(Divider, { bleed: 14 })] })), 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), onChange: (value) => doPatch(selected.id, ns, key, value) }, `${selected.id}.${ns}.${key}`))), selected && 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("a", { className: "sm-nav-item", href: `${BASE}/shared/${encodeURIComponent(selectedShared.name)}?locale=${encodeURIComponent(locale)}`, children: "Edit shared item \u2192" })] })), _jsx(Divider, { bleed: 14 }), _jsx(SectionLabel, { children: "Outline" }), zoneOrder.map((zone) => {
-                                        const locked = policyOf(zone)?.kind === "locked";
-                                        const nodes = nodesIn(zone);
-                                        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { mono: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", zoneCanTake(zone) && "sm-outline-row--clickable"), onClick: () => {
-                                                        if (!zoneCanTake(zone))
-                                                            return;
-                                                        const first = allowedSections(policyOf(zone), registry.sections)[0];
-                                                        if (first)
-                                                            doInsert(zone, 0, first);
-                                                    }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), zoneCanTake(zone) && _jsx("span", { style: { color: "var(--accent)", fontWeight: 600 }, children: "+ Add block" })] })), nodes.map((node, i) => {
-                                                    const section = sectionOf(node.type);
-                                                    const isSelected = node.id === selectedId;
-                                                    if (locked) {
-                                                        return (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => select(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: section?.title ?? (sharedOf(node) ? `${sharedOf(node).title} · shared` : node.type) }), _jsx("span", { style: { fontSize: "var(--text-xs)", fontWeight: 600, letterSpacing: ".06em" }, children: "LOCKED" })] }, node.id));
-                                                    }
-                                                    return (_jsxs("div", { onClick: () => select(node.id), className: cx("sm-outline-row", "sm-outline-row--clickable", isSelected && "sm-outline-row--selected"), children: [_jsx("span", { className: "sm-outline-row__label", children: section?.title ?? (sharedOf(node) ? `${sharedOf(node).title} · shared` : node.type) }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); doMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); doMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); doRemove(node.id); }, children: "\u00D7" })] })] }, node.id));
-                                                })] }, zone));
-                                    })] })] })] }), picker && (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: () => setPicker(null), children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: {
-                        position: "absolute",
-                        left: Math.max(12, Math.min(picker.x, window.innerWidth - 320)),
-                        top: Math.min(picker.y, Math.max(12, window.innerHeight - 240)),
-                    }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", picker.zone] }), allowedSections(policyOf(picker.zone), registry.sections).map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => doInsert(picker.zone, picker.index, section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), allowedShared(policyOf(picker.zone), registry.shared, sharedIds ?? {}).length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { mono: true, style: { padding: "8px 8px 4px" }, children: "Shared" }), allowedShared(policyOf(picker.zone), registry.shared, sharedIds ?? {}).map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => doInsertShared(picker.zone, picker.index, item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Shared \u00B7 edited in one place" })] })] }, `shared-${item.name}`)))] })), allowedSections(policyOf(picker.zone), registry.sections).length === 0 &&
-                            allowedShared(policyOf(picker.zone), registry.shared, sharedIds ?? {}).length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }))] }));
+                                                    : undefined }), _jsx(Divider, { bleed: 14 })] })), 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), onChange: (value) => doPatch(selected.id, ns, key, value) }, `${selected.id}.${ns}.${key}`))), selected && 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(Divider, { bleed: 14 }), _jsx(Outline, { selectedId: selectedId, onSelect: select, onMove: doMove, 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) }))] }));
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */

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

@@ -0,0 +1,18 @@
+import type { ZonePolicy } from "../../zones.ts";
+import type { AdminRegistry, AdminSection, AdminShared } 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 }: {
+    at: PickerAt;
+    policy: ZonePolicy | undefined;
+    registry: AdminRegistry;
+    /** Shared item name → row id; an item without one cannot be placed. */
+    sharedIds: Record<string, string>;
+    onInsert(section: AdminSection): void;
+    onInsertShared(item: AdminShared): void;
+    onClose(): void;
+}): import("react").JSX.Element;

package/dist/admin/editor/InsertPicker.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { allowedSections, allowedShared } from "../tree-ops.js";
+import { SectionLabel } from "../ui/primitives.js";
+/** Keep the panel on screen; a static render (no window) leaves it where it was asked. */
+function clamp(at) {
+    if (typeof window === "undefined")
+        return { left: at.x, top: at.y };
+    return {
+        left: Math.max(12, Math.min(at.x, window.innerWidth - 320)),
+        top: Math.min(at.y, Math.max(12, window.innerHeight - 240)),
+    };
+}
+export function InsertPicker({ at, policy, registry, sharedIds, onInsert, onInsertShared, onClose }) {
+    const sections = allowedSections(policy, registry.sections);
+    const shared = allowedShared(policy, registry.shared, sharedIds);
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", ...clamp(at) }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), shared.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { mono: true, style: { padding: "8px 8px 4px" }, children: "Shared" }), shared.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertShared(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Shared \u00B7 edited in one place" })] })] }, `shared-${item.name}`)))] })), sections.length === 0 && shared.length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
+}

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function NoticePane({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/admin/editor/NoticePane.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NoticePane({ children }) {
+    return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40, background: "var(--bg)" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [children, _jsx("a", { href: "/admin/pages", children: "\u2190 Back to pages" })] }) }));
+}

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

@@ -0,0 +1,18 @@
+import type { TreeNode } from "../../render.tsx";
+export declare function Outline({ zones, selectedId, onSelect, onAddFirst, onMove, onRemove }: {
+    zones: {
+        zone: string;
+        locked: boolean;
+        canTake: boolean;
+        nodes: {
+            node: TreeNode;
+            label: string;
+        }[];
+    }[];
+    selectedId: string | null;
+    onSelect(id: string): void;
+    /** The empty row of an insertable zone was clicked. */
+    onAddFirst(zone: string): void;
+    onMove(id: string, dir: -1 | 1): void;
+    onRemove(id: string): void;
+}): import("react").JSX.Element;

package/dist/admin/editor/Outline.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, SectionLabel, cx } from "../ui/primitives.js";
+export function Outline({ zones, selectedId, onSelect, onAddFirst, onMove, onRemove }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Outline" }), zones.map(({ zone, locked, canTake, nodes }) => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { mono: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", canTake && "sm-outline-row--clickable"), onClick: () => { if (canTake)
+                            onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { style: { color: "var(--accent)", fontWeight: 600 }, children: "+ Add block" })] })), nodes.map(({ node, label }, i) => {
+                        if (locked) {
+                            return (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { style: { fontSize: "var(--text-xs)", fontWeight: 600, letterSpacing: ".06em" }, children: "LOCKED" })] }, node.id));
+                        }
+                        return (_jsxs("div", { onClick: () => onSelect(node.id), className: cx("sm-outline-row", "sm-outline-row--clickable", node.id === selectedId && "sm-outline-row--selected"), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); onMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); onMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] })] }, node.id));
+                    })] }, zone)))] }));
+}

package/dist/admin/editor/locale-url.d.ts

@@ -0,0 +1,12 @@
+import type { AdminRegistry } from "../serialize.ts";
+type Locales = AdminRegistry["locales"];
+/** A supported ?locale from the query string, else the default. */
+export declare function localeFromSearch(search: string, locales: Locales): string;
+/** The same URL pointed at a locale, keeping the rest of the query
+ *  string — a bare `?locale=…` would drop every other param. */
+export declare function withLocale(href: string, next: string): string;
+export declare function localeFromUrl(registry: AdminRegistry): string;
+/** Point the current URL at a locale in place. A replace, so the router
+ *  never asks the leave guard — the form's own confirm covers a switch. */
+export declare function writeLocaleToUrl(next: string): void;
+export {};

package/dist/admin/editor/locale-url.js

@@ -0,0 +1,32 @@
+import { navigate } from "../shell/router.js";
+/** A supported ?locale from the query string, else the default. */
+export function localeFromSearch(search, locales) {
+    const l = new URLSearchParams(search).get("locale");
+    return l && locales.supported.includes(l) ? l : locales.default;
+}
+/** The same URL pointed at a locale, keeping the rest of the query
+ *  string — a bare `?locale=…` would drop every other param. */
+export function withLocale(href, next) {
+    const u = new URL(href);
+    u.searchParams.set("locale", next);
+    return u.toString();
+}
+export function localeFromUrl(registry) {
+    try {
+        return localeFromSearch(window.location.search, registry.locales);
+    }
+    catch {
+        // no window — the default is fine
+        return registry.locales.default;
+    }
+}
+/** Point the current URL at a locale in place. A replace, so the router
+ *  never asks the leave guard — the form's own confirm covers a switch. */
+export function writeLocaleToUrl(next) {
+    try {
+        navigate(withLocale(window.location.href, next), { replace: true });
+    }
+    catch {
+        // no window (or no history) — the URL is cosmetic here
+    }
+}

package/dist/admin/editor/overlay-geometry.d.ts

@@ -0,0 +1,14 @@
+import type { TreeNode } from "../../render.tsx";
+import type { BridgeRect, ZoneRect } from "./protocol.ts";
+export type PlusButton = {
+    zone: string;
+    index: number;
+    y: number;
+};
+export declare function plusButtonsFor({ zoneOrder, canTake, nodesIn, rects, emptyZones }: {
+    zoneOrder: string[];
+    canTake(zone: string): boolean;
+    nodesIn(zone: string): TreeNode[];
+    rects: Map<string, BridgeRect>;
+    emptyZones: ZoneRect[];
+}): PlusButton[];

package/dist/admin/editor/overlay-geometry.js

@@ -0,0 +1,27 @@
+export function plusButtonsFor({ zoneOrder, canTake, nodesIn, rects, emptyZones }) {
+    const out = [];
+    for (const zone of zoneOrder) {
+        if (!canTake(zone))
+            continue;
+        // Carry each member's real position in the tree's zone array through
+        // the rect filter — under refresh-on-change the rects lag the tree by
+        // up to a save cycle, so a filtered-array position isn't a valid
+        // insertNode index once a node is missing its rect.
+        const members = nodesIn(zone)
+            .map((n, treeIndex) => ({ rect: rects.get(n.id), treeIndex }))
+            .filter((m) => Boolean(m.rect));
+        if (members.length === 0) {
+            const zr = emptyZones.find((r) => r.zone === zone);
+            if (zr)
+                out.push({ zone, index: 0, y: zr.y + zr.h / 2 });
+        }
+        else {
+            members.forEach(({ rect, treeIndex }, i) => {
+                out.push({ zone, index: treeIndex, y: rect.y - 1 });
+                if (i === members.length - 1)
+                    out.push({ zone, index: treeIndex + 1, y: rect.y + rect.h + 1 });
+            });
+        }
+    }
+    return out;
+}