smoodly 0.0.1

package/dist/admin/editor/EditorView.js

@@ -0,0 +1,391 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The Smoodly editor: dark instrument around a bright canvas.
+//
+// The canvas is an iframe of the SITE's own route in draft mode (pixel-
+// identical by construction, DESIGN.md §2), sized to its full document
+// height so the admin page scrolls, not the iframe — which is what lets
+// the geometry the bridge reports map 1:1 onto the overlay layer above
+// it. Every gesture mutates client tree state through Task 4's pure ops;
+// a debounced saveDraft persists, and the bridge refreshes the iframe on
+// the save ack (refresh-on-change preview, DESIGN.md §3).
+//
+// Core code: no next/* imports live here — the bridge is the only piece
+// that knows about Next, and it ships to the site, not the admin.
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { pagePath } from "../page-path.js";
+import { FieldWidget } from "../forms/FieldWidget.js";
+import { tabsFor } from "../forms/tabs.js";
+import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, removeNode, zoneOf, } from "../tree-ops.js";
+import { useDraftAutosave } from "./autosave.js";
+const ACCENT = "#7c5cff";
+const mono = "'Geist Mono', ui-monospace, monospace";
+const ui = "Geist, system-ui, sans-serif";
+const SIDEBAR = 344;
+const GEOMETRY_TIMEOUT_MS = 4000;
+export function EditorView({ ops, registry, slug }) {
+    const [record, setRecord] = useState(null);
+    const [tree, setTree] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const [iframeSrc, setIframeSrc] = useState(null);
+    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);
+    const [tab, setTab] = useState("Content");
+    const [banner, setBanner] = useState(null);
+    const [published, setPublished] = useState(false);
+    const [refOptions, setRefOptions] = useState({});
+    const iframeRef = useRef(null);
+    const treeRef = useRef(null);
+    const registryRef = useRef(registry);
+    registryRef.current = 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({
+        read: () => treeRef.current,
+        persist: (t) => ops.pages.saveDraft(slug, t),
+        onSaved: () => postToCanvas({ source: "smoodly", kind: "refresh" }),
+    });
+    // The URL that serves this page — the config's homePageSlug lives at the
+    // root, everything else at /<slug>. Shown as the label too.
+    const path = pagePath(slug, registry.homePageSlug);
+    const label = path;
+    // ── 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).
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            // ops is a server action — it can reject outright (offline, 500,
+            // aborted), not just resolve to a typed error. Either failure mode
+            // must land on the same full-pane error, never a hung load.
+            let previewResult;
+            try {
+                previewResult = await ops.preview.enable();
+            }
+            catch {
+                previewResult = { ok: false, code: "internal", message: "Couldn't reach the server." };
+            }
+            if (cancelled)
+                return;
+            if (!previewResult.ok) {
+                // Draft mode didn't actually turn on — pointing the iframe at the
+                // site route now would silently render the PUBLISHED tree, which
+                // contradicts the editor's core promise. Fail the whole load.
+                setLoadError(previewResult.message);
+                return;
+            }
+            let result;
+            try {
+                result = await ops.pages.get(slug);
+            }
+            catch {
+                result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+            }
+            if (cancelled)
+                return;
+            if (!result.ok) {
+                setLoadError(result.message);
+                return;
+            }
+            // Locked zones can't be filled by any gesture, so fill the empty
+            // ones here; a change marks the draft dirty so the debounced save
+            // persists it and the canvas shows the same tree as the outline.
+            // Read through the ref: `registry` is a server-component prop, so
+            // its identity changes on every RSC refresh — and preview.enable's
+            // cookie write triggers one. As a dependency it would loop this
+            // effect forever (same reason AdminApp pins `ops` with useState).
+            const reg = registryRef.current;
+            const template = reg.pages.find((p) => p.name === result.data.record.template);
+            const draft = fillLockedZones(result.data.draft, template?.zones ?? {}, reg.sections);
+            setRecord(result.data.record);
+            setTree(draft);
+            treeRef.current = draft;
+            if (draft !== result.data.draft)
+                mark();
+            setIframeSrc(`${pagePath(slug, registry.homePageSlug)}?smoodly-editor=1`);
+        })();
+        return () => { cancelled = true; };
+    }, [ops, slug]);
+    useEffect(() => { treeRef.current = tree; }, [tree]);
+    const template = useMemo(() => (record ? registry.pages.find((p) => p.name === record.template) ?? null : null), [record, registry]);
+    const zoneOrder = useMemo(() => Object.keys(template?.zones ?? {}), [template]);
+    const policyOf = useCallback((zone) => (zone ? template?.zones[zone] : undefined), [template]);
+    const sectionOf = useCallback((type) => registry.sections.find((s) => s.name === type) ?? null, [registry]);
+    // ── ref fields inside sections: same option loading as EntryForm ──────
+    const refTargets = useMemo(() => {
+        const out = {};
+        for (const section of registry.sections) {
+            for (const ns of ["fields", "styles", "meta"]) {
+                for (const [key, d] of Object.entries(section[ns] ?? {})) {
+                    if ((d.type === "ref" || d.type === "refList") && typeof d.target === "string") {
+                        out[`${section.name}.${ns}.${key}`] = d.target;
+                    }
+                }
+            }
+        }
+        return out;
+    }, [registry]);
+    useEffect(() => {
+        for (const target of new Set(Object.values(refTargets))) {
+            const targetMeta = registry.collections.find((c) => c.name === target);
+            ops.entries.list(target).then((r) => {
+                if (!r.ok)
+                    return;
+                const options = r.data.map((e) => ({
+                    id: e.id,
+                    title: String((targetMeta?.titleField && e.fields[targetMeta.titleField]) ?? e.id),
+                    status: e.status,
+                }));
+                setRefOptions((prev) => ({ ...prev, [target]: options }));
+            }).catch((e) => {
+                // A rejected transport just leaves this target's options empty —
+                // ref fields degrade to "nothing to pick from," not a stuck load.
+                console.error(e);
+            });
+        }
+    }, [ops, refTargets, registry]);
+    // ── 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]);
+    const select = useCallback((id) => {
+        setSelectedId(id);
+        if (id)
+            postToCanvas({ source: "smoodly", kind: "scroll", id });
+    }, [postToCanvas]);
+    // ── persistence ──────────────────────────────────────────────────────
+    const mutate = useCallback((fn) => {
+        setTree((t) => {
+            if (!t)
+                return t;
+            const next = fn(t);
+            treeRef.current = next;
+            return next;
+        });
+        mark();
+    }, [mark]);
+    // ── tree gestures ────────────────────────────────────────────────────
+    const nodesIn = useCallback((zone) => tree?.zones[zone] ?? [], [tree]);
+    const zoneCanTake = useCallback((zone) => canInsert(policyOf(zone), nodesIn(zone).length), [policyOf, nodesIn]);
+    const doInsert = (zone, index, section) => {
+        const node = nodeFromSample(section, newNodeId(section.name));
+        mutate((t) => insertNode(t, zone, index, node));
+        setPicker(null);
+        select(node.id);
+    };
+    const doDuplicate = (node) => {
+        if (!tree)
+            return;
+        const zone = zoneOf(tree, node.id);
+        if (!zone || !zoneCanTake(zone))
+            return;
+        const index = nodesIn(zone).findIndex((n) => n.id === node.id) + 1;
+        const copy = {
+            ...node,
+            id: newNodeId(node.type),
+            fields: { ...node.fields },
+            styles: node.styles ? { ...node.styles } : undefined,
+            meta: node.meta ? { ...node.meta } : undefined,
+        };
+        mutate((t) => insertNode(t, zone, index, copy));
+        select(copy.id);
+    };
+    const doRemove = (id, confirm = true) => {
+        if (!tree)
+            return;
+        if (policyOf(zoneOf(tree, id))?.kind === "locked")
+            return;
+        if (confirm && !window.confirm("Delete this section?"))
+            return;
+        mutate((t) => removeNode(t, id));
+        setSelectedId((current) => (current === id ? null : current));
+    };
+    const doMove = (id, dir) => mutate((t) => moveNode(t, id, dir));
+    const doPatch = (id, ns, key, value) => mutate((t) => patchNode(t, id, ns, key, value));
+    // ── publish ──────────────────────────────────────────────────────────
+    const doPublish = async () => {
+        setBanner(null);
+        // Never publish behind a pending debounce.
+        const flushed = await flush();
+        if (!flushed) {
+            // The pre-publish flush failed (or is still behind, mid-retry) —
+            // publishing now would ship a stale draft. Bail instead.
+            setBanner({ text: "Couldn't save your latest changes — publish cancelled." });
+            return;
+        }
+        let result;
+        try {
+            result = await ops.pages.publish(slug);
+        }
+        catch (e) {
+            console.error(e);
+            // Same transport concern as the autosave persist: the server action can reject
+            // outright instead of resolving to a typed error.
+            result = { ok: false, code: "internal", message: "Publish failed — check your connection and try again." };
+        }
+        if (result.ok) {
+            setRecord(result.data);
+            setPublished(true);
+            setTimeout(() => setPublished(false), 1600);
+        }
+        else {
+            setBanner({ text: result.message, fields: result.fields });
+        }
+    };
+    // ── keyboard ─────────────────────────────────────────────────────────
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                setPicker(null);
+                setSelectedId(null);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    if (loadError) {
+        return (_jsx("div", { style: { ...shell, display: "grid", placeItems: "center", padding: 40 }, children: _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("p", { style: { fontSize: 15, marginBottom: 14 }, children: loadError }), _jsx("a", { href: "/admin/pages", style: { color: ACCENT, fontSize: 14 }, children: "\u2190 Back to pages" })] }) }));
+    }
+    const selected = tree && selectedId ? findNode(tree, selectedId) : null;
+    const selectedSection = selected ? sectionOf(selected.type) : null;
+    const selZone = tree && selected ? zoneOf(tree, selected.id) : null;
+    const selLocked = policyOf(selZone)?.kind === "locked";
+    const rectById = new Map(rects.map((r) => [r.id, r]));
+    const selRect = selected ? rectById.get(selected.id) : undefined;
+    const hoverRect = hoverId && hoverId !== selectedId ? rectById.get(hoverId) : undefined;
+    const blockCount = tree ? Object.values(tree.zones).reduce((n, list) => n + list.length, 0) : 0;
+    // "+" 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 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 ?? [];
+    const saveLabel = saveState === "saving" ? "Saving…" : saveState === "error" ? "Save failed — retrying" : "Saved";
+    return (_jsxs("div", { style: shell, children: [_jsxs("header", { style: {
+                    position: "sticky", top: 0, zIndex: 50, display: "flex", alignItems: "center",
+                    justifyContent: "space-between", padding: "0 20px", height: 56,
+                    background: "rgba(14,12,20,0.85)", backdropFilter: "blur(12px)",
+                    borderBottom: "1px solid rgba(255,255,255,0.07)",
+                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [_jsxs("a", { href: "/admin/pages", title: "Back to pages", style: { color: "inherit", textDecoration: "none", fontWeight: 600, fontSize: 16, letterSpacing: "-0.02em" }, children: ["\u2190 smoodly", _jsx("span", { style: { color: ACCENT }, children: "." })] }), _jsx("span", { style: { fontFamily: mono, fontSize: 12, opacity: 0.55 }, children: label })] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { style: {
+                                    fontFamily: mono, fontSize: 11, letterSpacing: "0.1em",
+                                    color: saveState === "error" ? "#ffb4b4" : "#bdb3e6", opacity: saveState === "error" ? 1 : 0.7,
+                                }, children: saveLabel }), _jsx("a", { href: path, 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.", style: { ...btn({ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", color: "#e8e4f4" }), textDecoration: "none" }, children: "View live" }), _jsx("button", { onClick: () => { void doPublish(); }, style: btn({ background: published ? "#22c55e" : ACCENT, color: "#fff", fontWeight: 600 }), children: published ? "Published ✓" : "Publish" })] })] }), banner && (_jsxs("div", { style: {
+                    // Right margin clears the fixed sidebar — the dismiss control
+                    // must never sit underneath it.
+                    margin: `14px ${SIDEBAR}px 0 20px`, padding: "12px 16px", borderRadius: 10,
+                    background: "rgba(239,68,68,0.14)", border: "1px solid rgba(239,68,68,0.35)",
+                    color: "#ffd9d9", fontSize: 13.5, display: "flex", gap: 14, alignItems: "flex-start",
+                }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("p", { style: { margin: 0 }, children: banner.text }), banner.fields && banner.fields.length > 0 && (_jsx("ul", { style: { margin: "8px 0 0", paddingLeft: 18, fontFamily: mono, fontSize: 12 }, children: banner.fields.map((f) => _jsxs("li", { children: [f.field, ": ", f.message] }, f.field)) }))] }), _jsx("button", { onClick: () => setBanner(null), "aria-label": "Dismiss", style: { background: "transparent", border: 0, color: "inherit", cursor: "pointer", fontSize: 15 }, children: "\u2715" })] })), _jsxs("main", { style: { maxWidth: 1080, margin: "0 auto", padding: "24px 24px 80px", marginRight: SIDEBAR, transition: "margin 0.2s" }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontFamily: mono, fontSize: 12, letterSpacing: "0.12em", opacity: 0.5, padding: "0 4px 12px" }, children: [_jsxs("span", { children: [label, " \u00B7 ", registry.locales.default] }), _jsxs("span", { children: [blockCount, " BLOCKS"] })] }), geometry === "missing" && (_jsx("p", { style: {
+                            fontFamily: mono, fontSize: 11.5, letterSpacing: "0.06em", margin: "0 0 10px",
+                            padding: "8px 12px", borderRadius: 8, background: "rgba(255,196,84,0.12)",
+                            border: "1px solid rgba(255,196,84,0.3)", color: "#ffd9a0",
+                        }, children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." })), _jsxs("div", { style: { position: "relative", borderRadius: 16, overflow: "hidden", boxShadow: "0 24px 80px rgba(0,0,0,0.5)", background: "#fff", minHeight: 240 }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { style: { height: 240, display: "grid", placeItems: "center", color: "#8b84a3", fontFamily: mono, fontSize: 12 }, children: "LOADING CANVAS\u2026" })), _jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [hoverRect && (_jsx("div", { style: { position: "absolute", left: hoverRect.x, top: hoverRect.y, width: hoverRect.w, height: hoverRect.h, outline: `1.5px solid ${ACCENT}66`, outlineOffset: -1.5 } })), selRect && selected && selectedSection && (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "absolute", left: selRect.x, top: selRect.y, width: selRect.w, height: selRect.h, outline: `2px solid ${ACCENT}`, outlineOffset: -2, borderRadius: 2 } }), _jsxs("span", { style: { position: "absolute", left: selRect.x + 10, top: selRect.y - 11, fontFamily: mono, fontSize: 10, letterSpacing: "0.14em", background: ACCENT, color: "#fff", borderRadius: 6, padding: "3px 8px", pointerEvents: "auto" }, children: [selectedSection.title.toUpperCase(), selLocked && " · LOCKED"] }), _jsx("div", { style: { position: "absolute", left: selRect.x + selRect.w - 10, top: selRect.y + 10, transform: "translateX(-100%)", display: "flex", gap: 2, background: "#17141f", borderRadius: 9, padding: 3, pointerEvents: "auto", boxShadow: "0 6px 24px rgba(0,0,0,0.4)" }, children: selLocked ? (_jsx("span", { style: { fontFamily: mono, fontSize: 10, color: "#bdb3e6", padding: "4px 8px" }, children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconBtn, { label: "\u2191", title: "Move up", onClick: () => doMove(selected.id, -1) }), _jsx(IconBtn, { label: "\u2193", title: "Move down", onClick: () => doMove(selected.id, 1) }), _jsx(IconBtn, { label: "\u29C9", title: "Duplicate", onClick: () => doDuplicate(selected) }), _jsx(IconBtn, { label: "\u2715", title: "Delete", onClick: () => doRemove(selected.id) })] })) })] })), plusButtons.map((p) => (_jsx("button", { title: `Add to ${p.zone}`, onClick: (e) => setPicker({ zone: p.zone, index: p.index, x: e.clientX - 150, y: e.clientY + 12 }), style: {
+                                            position: "absolute", left: "50%", top: p.y, transform: "translate(-50%,-50%)",
+                                            width: 28, height: 28, borderRadius: "50%", background: ACCENT, color: "#fff",
+                                            border: "2px solid #fff", fontSize: 16, lineHeight: 1, cursor: "pointer",
+                                            pointerEvents: "auto", boxShadow: "0 2px 10px rgba(0,0,0,0.35)", opacity: 0.92,
+                                        }, children: "+" }, `${p.zone}-${p.index}`)))] })] })] }), picker && (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: () => setPicker(null), children: _jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
+                        position: "absolute", left: Math.max(12, Math.min(picker.x, window.innerWidth - 320)), top: picker.y,
+                        width: 300, background: "#17141f", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 14,
+                        padding: 8, boxShadow: "0 24px 80px rgba(0,0,0,0.6)",
+                    }, children: [_jsxs("p", { style: { fontFamily: mono, fontSize: 10, letterSpacing: "0.14em", opacity: 0.5, margin: "6px 10px 8px" }, children: ["ADD TO ", picker.zone.toUpperCase()] }), allowedSections(policyOf(picker.zone), registry.sections).map((section) => (_jsxs("button", { onClick: () => doInsert(picker.zone, picker.index, section), onMouseEnter: (e) => (e.currentTarget.style.background = "rgba(124,92,255,0.14)"), onMouseLeave: (e) => (e.currentTarget.style.background = "transparent"), style: { display: "flex", gap: 12, alignItems: "center", width: "100%", textAlign: "left", background: "transparent", border: 0, borderRadius: 10, padding: "10px 10px", cursor: "pointer", color: "#e8e4f4" }, children: [_jsx("span", { style: { width: 34, height: 34, borderRadius: 9, background: "rgba(124,92,255,0.18)", color: ACCENT, display: "grid", placeItems: "center", fontSize: 16 }, children: section.icon ?? "▤" }), _jsxs("span", { children: [_jsx("span", { style: { display: "block", fontSize: 14, fontWeight: 600 }, children: section.title }), section.description && _jsx("span", { style: { display: "block", fontSize: 12, opacity: 0.55 }, children: section.description })] })] }, section.name))), allowedSections(policyOf(picker.zone), registry.sections).length === 0 && (_jsx("p", { style: { fontSize: 13, opacity: 0.6, margin: 10 }, children: "This zone doesn't accept insertions." }))] }) })), _jsxs("aside", { style: {
+                    position: "fixed", top: 56, right: 0, bottom: 0, width: SIDEBAR - 24,
+                    background: "#141119", borderLeft: "1px solid rgba(255,255,255,0.07)",
+                    padding: 18, overflow: "auto", zIndex: 40, boxSizing: "border-box",
+                }, children: [selected && selectedSection ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }, children: [_jsxs("span", { style: { fontWeight: 600 }, children: [selectedSection.icon ?? "▤", " ", selectedSection.title] }), _jsx("button", { onClick: () => setSelectedId(null), "aria-label": "Clear selection", style: { background: "transparent", border: 0, color: "#8b84a3", cursor: "pointer", fontSize: 16 }, children: "\u2715" })] }), tabs.length > 0 && (_jsx("div", { style: { display: "flex", gap: 6, marginBottom: 16, flexWrap: "wrap" }, children: tabs.map((t) => (_jsx("button", { onClick: () => setTab(t.tab), style: btn(t.tab === activeTab
+                                        ? { background: ACCENT, color: "#fff" }
+                                        : { background: "rgba(255,255,255,0.06)", color: "#bdb3e6" }), children: t.tab }, t.tab))) })), 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}`)))] })) : (_jsx("p", { style: { fontFamily: mono, fontSize: 11, letterSpacing: "0.1em", opacity: 0.45, margin: "2px 0 0" }, children: "NOTHING SELECTED \u2014 CLICK A SECTION" })), _jsx("div", { style: { borderTop: "1px solid rgba(255,255,255,0.08)", margin: "22px 0 14px" } }), _jsx("p", { style: { fontFamily: mono, fontSize: 10, letterSpacing: "0.14em", opacity: 0.45, margin: "0 0 10px" }, children: "OUTLINE" }), zoneOrder.map((zone) => (_jsxs("div", { style: { marginBottom: 14 }, children: [_jsxs("p", { style: { fontFamily: mono, fontSize: 10, letterSpacing: "0.12em", opacity: 0.35, margin: "0 0 6px" }, children: [zone.toUpperCase(), policyOf(zone)?.kind === "locked" && " · LOCKED"] }), nodesIn(zone).length === 0 && (_jsx("p", { style: { fontSize: 12, opacity: 0.35, margin: "0 0 4px" }, children: "empty" })), nodesIn(zone).map((node, i) => {
+                                const section = sectionOf(node.type);
+                                const isSelected = node.id === selectedId;
+                                const locked = policyOf(zone)?.kind === "locked";
+                                return (_jsxs("div", { onClick: () => select(node.id), style: {
+                                        display: "flex", alignItems: "center", gap: 4, padding: "6px 8px", borderRadius: 8,
+                                        marginBottom: 3, cursor: "pointer", fontSize: 13,
+                                        background: isSelected ? "rgba(124,92,255,0.22)" : "rgba(255,255,255,0.04)",
+                                    }, children: [_jsx("span", { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: section?.title ?? node.type }), !locked && (_jsxs(_Fragment, { children: [_jsx(IconBtn, { label: "\u2191", title: "Move up", disabled: i === 0, onClick: (e) => { e.stopPropagation(); doMove(node.id, -1); } }), _jsx(IconBtn, { label: "\u2193", title: "Move down", disabled: i === nodesIn(zone).length - 1, onClick: (e) => { e.stopPropagation(); doMove(node.id, 1); } }), _jsx(IconBtn, { label: "\u2715", title: "Delete", onClick: (e) => { e.stopPropagation(); doRemove(node.id); } })] }))] }, node.id));
+                            })] }, zone)))] })] }));
+}
+/** The selected node's ref field (if any) resolves to its target
+ * collection's loaded options — the EntryForm shape, section-scoped. */
+function refOptionsFor(loaded, targets, section, ns, key, descriptor) {
+    if (descriptor.type !== "ref" && descriptor.type !== "refList")
+        return undefined;
+    const target = targets[`${section.name}.${ns}.${key}`];
+    return target ? loaded[target] ?? [] : [];
+}
+const shell = {
+    fontFamily: ui,
+    background: "radial-gradient(1200px 500px at 70% -10%, #221c33 0%, #0e0c14 55%)",
+    minHeight: "100vh",
+    color: "#e8e4f4",
+};
+function btn(extra) {
+    return { fontFamily: "inherit", fontSize: 13, border: 0, borderRadius: 9, padding: "8px 14px", cursor: "pointer", ...extra };
+}
+function IconBtn({ label, title, onClick, disabled }) {
+    return (_jsx("button", { onClick: onClick, title: title, disabled: disabled, onMouseEnter: (e) => { if (!disabled)
+            e.currentTarget.style.background = "rgba(255,255,255,0.12)"; }, onMouseLeave: (e) => (e.currentTarget.style.background = "transparent"), style: {
+            width: 28, height: 26, background: "transparent", border: 0, color: "#e8e4f4",
+            borderRadius: 6, cursor: disabled ? "default" : "pointer", fontSize: 13, opacity: disabled ? 0.3 : 1,
+        }, children: label }));
+}

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

@@ -0,0 +1,31 @@
+import type { OpResult } from "../ops.ts";
+export type SaveState = "saved" | "saving" | "error";
+export type DraftAutosave = {
+    /** Record a local change; a debounced save follows. */
+    mark(): void;
+    /** Save now if anything is unsaved. Resolves true once the store holds
+     *  the latest revision — the pre-publish flush needs that to decide
+     *  whether it is safe to proceed. */
+    flush(): Promise<boolean>;
+    getState(): SaveState;
+    subscribe(listener: () => void): () => void;
+    /** Cancel pending timers; call on unmount. */
+    dispose(): void;
+};
+export declare function createDraftAutosave<T>(opts: {
+    read: () => T | null;
+    persist: (value: T) => Promise<OpResult<unknown>>;
+    onSaved?: () => void;
+    debounceMs?: number;
+    retryBaseMs?: number;
+    retryCapMs?: number;
+}): DraftAutosave;
+export type DraftAutosaveOptions<T> = Parameters<typeof createDraftAutosave<T>>[0];
+/** React glue: one controller per mount, always calling the latest
+ *  `read`/`persist`/`onSaved` (their identities change on every render —
+ *  `ops` and `slug` are props), timers cleared on unmount. */
+export declare function useDraftAutosave<T>(opts: DraftAutosaveOptions<T>): {
+    saveState: SaveState;
+    mark: () => void;
+    flush: () => Promise<boolean>;
+};

package/dist/admin/editor/autosave.js

@@ -0,0 +1,108 @@
+// Draft autosave: a debounced, retrying persister with a tiny observable
+// state. Framework-free so it is unit-testable with fake timers; the
+// React glue lives in `useDraftAutosave` below.
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+export function createDraftAutosave(opts) {
+    const debounceMs = opts.debounceMs ?? 800;
+    const retryBaseMs = opts.retryBaseMs ?? 1000;
+    const retryCapMs = opts.retryCapMs ?? 10000;
+    let debounceTimer = null;
+    let retryTimer = null;
+    let retryDelay = retryBaseMs;
+    let revision = 0;
+    let savedRevision = 0;
+    let state = "saved";
+    const listeners = new Set();
+    const setState = (next) => {
+        state = next;
+        for (const l of listeners)
+            l();
+    };
+    const save = async () => {
+        const current = opts.read();
+        if (current === null)
+            return true;
+        if (retryTimer) {
+            clearTimeout(retryTimer);
+            retryTimer = null;
+        }
+        const rev = revision;
+        setState("saving");
+        let result;
+        try {
+            result = await opts.persist(current);
+        }
+        catch (e) {
+            console.error(e);
+            // persist is a server action — it can reject outright (offline, 500,
+            // aborted), not just resolve to a typed error. Fold that into the
+            // same failure path so it isn't a stuck "saving" state.
+            result = { ok: false, code: "internal", message: "" };
+        }
+        if (result.ok) {
+            savedRevision = rev;
+            retryDelay = retryBaseMs;
+            setState("saved");
+            opts.onSaved?.();
+            return true;
+        }
+        else {
+            // Keep local state; retry with a doubling, capped delay.
+            setState("error");
+            const delay = retryDelay;
+            retryDelay = Math.min(delay * 2, retryCapMs);
+            retryTimer = setTimeout(() => { retryTimer = null; void save(); }, delay);
+            return false;
+        }
+    };
+    return {
+        getState: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => { listeners.delete(listener); };
+        },
+        mark() {
+            revision += 1;
+            if (debounceTimer)
+                clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => { debounceTimer = null; void save(); }, debounceMs);
+        },
+        flush() {
+            if (revision === savedRevision)
+                return Promise.resolve(true);
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+                debounceTimer = null;
+            }
+            return save();
+        },
+        dispose() {
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+                debounceTimer = null;
+            }
+            if (retryTimer) {
+                clearTimeout(retryTimer);
+                retryTimer = null;
+            }
+        },
+    };
+}
+/** React glue: one controller per mount, always calling the latest
+ *  `read`/`persist`/`onSaved` (their identities change on every render —
+ *  `ops` and `slug` are props), timers cleared on unmount. */
+export function useDraftAutosave(opts) {
+    const latest = useRef(opts);
+    latest.current = opts;
+    const [controller] = useState(() => createDraftAutosave({
+        read: () => latest.current.read(),
+        persist: (v) => latest.current.persist(v),
+        onSaved: () => latest.current.onSaved?.(),
+        debounceMs: opts.debounceMs,
+        retryBaseMs: opts.retryBaseMs,
+        retryCapMs: opts.retryCapMs,
+    }));
+    useEffect(() => () => controller.dispose(), [controller]);
+    const saveState = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+    return { saveState, mark: controller.mark, flush: controller.flush };
+}

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

@@ -0,0 +1,37 @@
+export type BridgeRect = {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type ZoneRect = {
+    zone: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type FromBridge = {
+    source: "smoodly";
+    kind: "rects";
+    nodes: BridgeRect[];
+    emptyZones: ZoneRect[];
+    docH: number;
+} | {
+    source: "smoodly";
+    kind: "select";
+    id: string | null;
+} | {
+    source: "smoodly";
+    kind: "hover";
+    id: string | null;
+};
+export type ToBridge = {
+    source: "smoodly";
+    kind: "refresh";
+} | {
+    source: "smoodly";
+    kind: "scroll";
+    id: string;
+};

package/dist/admin/editor/protocol.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/forms/FieldWidget.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import type { AdminField } from "../serialize.ts";
+export declare function FieldWidget({ descriptor: d, value, onChange, error, refOptions, fieldKey, }: {
+    descriptor: AdminField;
+    value: unknown;
+    onChange(value: unknown): void;
+    error?: string;
+    refOptions?: {
+        id: string;
+        title: string;
+        status: string;
+    }[];
+    fieldKey: string;
+}): ReactElement;