smoodly 0.0.4 → 0.0.6

package/dist/admin/editor/EditorView.js

@@ -1,33 +1,39 @@
 "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 Smoodly editor: a calm 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
+// height so the canvas COLUMN 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).
 //
+// Chrome follows the design system's visual-editor screen: top bar, toned
+// canvas around a white page, 300px inspector holding fields then outline.
+//
 // 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;
+import { PageSettings } from "./PageSettings.js";
+import { isFixedNode } from "../shell/pages-tree.js";
+import { Banner as BannerBox, Breadcrumb, Button, Divider, IconButton, LinkButton, SaveIndicator, SectionLabel, Segmented, Tabs, TopBar, cx, } from "../ui/primitives.js";
+export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-editor=1` : `${url}?smoodly-editor=1`);
 const GEOMETRY_TIMEOUT_MS = 4000;
-export function EditorView({ ops, registry, slug }) {
+export function EditorView({ ops, registry, id }) {
     const [record, setRecord] = useState(null);
     const [tree, setTree] = useState(null);
     const [loadError, setLoadError] = useState(null);
-    const [iframeSrc, setIframeSrc] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [folder, setFolder] = useState(false);
+    const [locale, setLocale] = useState(registry.locales.default);
+    const [paths, setPaths] = useState({});
+    const [urls, setUrls] = useState({});
     const [rects, setRects] = useState([]);
     const [emptyZones, setEmptyZones] = useState([]);
     const [docH, setDocH] = useState(900);
@@ -39,7 +45,9 @@ export function EditorView({ ops, registry, slug }) {
     const [banner, setBanner] = useState(null);
     const [published, setPublished] = useState(false);
     const [refOptions, setRefOptions] = useState({});
+    const [hoverPlus, setHoverPlus] = useState(null);
     const iframeRef = useRef(null);
+    const scrollerRef = useRef(null);
     const treeRef = useRef(null);
     const registryRef = useRef(registry);
     registryRef.current = registry;
@@ -47,13 +55,16 @@ export function EditorView({ ops, registry, slug }) {
     // 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),
+        persist: (t) => ops.pages.saveDraft(id, 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);
+    // 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).
+    const path = paths[locale] ?? paths[registry.locales.default] ?? "/";
     const label = path;
+    const siteUrl = urls[locale] ?? urls[registry.locales.default] ?? path;
+    const iframeSrc = ready ? withEditorParam(siteUrl) : null;
     // ── 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).
@@ -81,7 +92,7 @@ export function EditorView({ ops, registry, slug }) {
             }
             let result;
             try {
-                result = await ops.pages.get(slug);
+                result = await ops.pages.get(id);
             }
             catch {
                 result = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -92,6 +103,11 @@ export function EditorView({ ops, registry, slug }) {
                 setLoadError(result.message);
                 return;
             }
+            // A folder has no draft tree — it gets the notice pane, not a canvas.
+            if (result.data.draft === null) {
+                setFolder(true);
+                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.
@@ -103,15 +119,44 @@ export function EditorView({ ops, registry, slug }) {
             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);
+            setPaths(result.data.paths);
+            setUrls(result.data.urls);
             setTree(draft);
             treeRef.current = draft;
             if (draft !== result.data.draft)
                 mark();
-            setIframeSrc(`${pagePath(slug, registry.homePageSlug)}?smoodly-editor=1`);
+            setReady(true);
         })();
         return () => { cancelled = true; };
-    }, [ops, slug]);
+    }, [ops, id]);
+    // 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.
+    const reload = useCallback(async () => {
+        const result = await ops.pages.get(id).catch(() => null);
+        if (!result || !result.ok)
+            return;
+        setRecord(result.data.record);
+        setPaths(result.data.paths);
+        setUrls(result.data.urls);
+    }, [ops, id]);
+    const onRename = async (renameLocale, patch) => {
+        let result;
+        try {
+            result = await ops.pages.rename(id, { locale: renameLocale, ...patch });
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!result.ok)
+            return result.message;
+        await reload();
+        return null;
+    };
     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]);
@@ -186,11 +231,15 @@ export function EditorView({ ops, registry, slug }) {
         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.
+    const revealRef = useRef(() => { });
     const select = useCallback((id) => {
         setSelectedId(id);
         if (id)
-            postToCanvas({ source: "smoodly", kind: "scroll", id });
-    }, [postToCanvas]);
+            revealRef.current(id);
+    }, []);
     // ── persistence ──────────────────────────────────────────────────────
     const mutate = useCallback((fn) => {
         setTree((t) => {
@@ -253,7 +302,7 @@ export function EditorView({ ops, registry, slug }) {
         }
         let result;
         try {
-            result = await ops.pages.publish(slug);
+            result = await ops.pages.publish(id);
         }
         catch (e) {
             console.error(e);
@@ -282,7 +331,10 @@ export function EditorView({ ops, registry, slug }) {
         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" })] }) }));
+        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" })] }) }));
+    }
+    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" })] }) }));
     }
     const selected = tree && selectedId ? findNode(tree, selectedId) : null;
     const selectedSection = selected ? sectionOf(selected.type) : null;
@@ -292,6 +344,16 @@ export function EditorView({ ops, registry, slug }) {
     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;
+    // Reveal is defined here, where the rect map exists; select() calls it
+    // through the ref so its own identity stays stable.
+    revealRef.current = (id) => {
+        const rect = rectById.get(id);
+        const scroller = scrollerRef.current;
+        if (!rect || !scroller)
+            return;
+        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) {
@@ -320,50 +382,57 @@ export function EditorView({ ops, registry, slug }) {
     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)))] })] }));
+    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" })), _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(Segmented, { options: registry.locales.supported, value: locale, onChange: setLocale })) : (_jsxs("span", { children: ["\u00B7 ", locale] })), registry.locales.supported.length > 1 && paths[locale] === undefined && ready && (_jsxs("span", { children: ["not in this locale \u2014 showing ", registry.locales.default] }))] }), _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 && (_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, 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 ? (_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 })] }), _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, registry: registry, paths: paths, fixed: isFixedNode(record, registry), onRename: onRename }), _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}`))), _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 ?? 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 ?? 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))), allowedSections(policyOf(picker.zone), registry.sections).length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }))] }));
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */
@@ -373,19 +442,3 @@ function refOptionsFor(loaded, targets, section, ns, key, descriptor) {
     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/PageSettings.d.ts

@@ -0,0 +1,13 @@
+import type { PageRecord } from "../../store.ts";
+import type { AdminRegistry } from "../serialize.ts";
+export declare function PageSettings({ record, registry, paths, fixed, onRename }: {
+    record: PageRecord;
+    registry: AdminRegistry;
+    paths: Record<string, string>;
+    fixed: boolean;
+    /** Resolves to an error message, or null when the rename landed. */
+    onRename(locale: string, patch: {
+        title?: string;
+        slug?: string;
+    }): Promise<string | null>;
+}): import("react").JSX.Element;

package/dist/admin/editor/PageSettings.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Page settings (spec 2026-09-05 §7): title and slug per locale, saved
+// through pages.rename. SEO/meta fields are OQ #17's own design pass.
+// Rendered in the inspector while no block is selected.
+import { useEffect, useState } from "react";
+import { Field, SectionLabel } from "../ui/primitives.js";
+export function PageSettings({ record, registry, paths, fixed, onRename }) {
+    const { default: def, supported } = registry.locales;
+    const stored = (locale, key) => locale === def ? record[key] : (record.i18n?.[locale]?.[key] ?? "");
+    const [draft, setDraft] = useState({});
+    const [error, setError] = useState(null);
+    const isHome = record.parentId === null && record.slug === registry.homePageSlug;
+    // The record changes identity on every rename; re-seed the inputs from it.
+    useEffect(() => {
+        setDraft(Object.fromEntries(supported.map((l) => [l, { title: stored(l, "title"), slug: stored(l, "slug") }])));
+    }, [record]); // eslint-disable-line react-hooks/exhaustive-deps
+    const commit = async (locale, key) => {
+        setError(null);
+        const next = draft[locale]?.[key] ?? "";
+        if (next === stored(locale, key))
+            return;
+        if (next === "") {
+            if (locale === def) {
+                setError(`The default locale needs a ${key}.`);
+                return;
+            }
+            return; // a blank translation falls back to the default locale
+        }
+        setError(await onRename(locale, { [key]: next }));
+    };
+    const set = (locale, key, value) => setDraft((d) => ({ ...d, [locale]: { ...(d[locale] ?? { title: "", slug: "" }), [key]: value } }));
+    const onKey = (locale, key) => (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            void commit(locale, key);
+        }
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(SectionLabel, { children: "Page" }), fixed && _jsx("span", { className: "sm-hint", children: "Owned by code \u2014 change it in the registration." }), error && _jsx("span", { className: "sm-error", children: error }), supported.map((locale) => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [supported.length > 1 && _jsx("span", { className: "sm-label", children: locale }), _jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", disabled: fixed, value: draft[locale]?.title ?? "", placeholder: locale === def ? "" : stored(def, "title"), onChange: (e) => set(locale, "title", e.target.value), onBlur: () => void commit(locale, "title"), onKeyDown: onKey(locale, "title") }) }), _jsx(Field, { label: "Slug", hint: paths[locale] ?? "not published in this locale", children: _jsx("input", { className: "sm-input sm-input--mono", disabled: fixed || isHome, value: draft[locale]?.slug ?? "", placeholder: locale === def ? "" : stored(def, "slug"), onChange: (e) => set(locale, "slug", e.target.value), onBlur: () => void commit(locale, "slug"), onKeyDown: onKey(locale, "slug") }) })] }, locale)))] }));
+}

package/dist/admin/fixed-nodes.d.ts

@@ -0,0 +1,23 @@
+import type { ResolvedConfig } from "../config.ts";
+import type { PageI18n, PageRecord, PageStore } from "../store.ts";
+export type FixedNode = {
+    /** The default-locale segment (the record's `slug`). */
+    slug: string;
+    /** Other locales' segments, only where they differ from the default. */
+    i18n: PageI18n | null;
+    title: string;
+    /** A per-locale collection path names its locales; everything else is present everywhere. */
+    locales: string[] | null;
+    /** The fixed page registration's name; null for a plain mount (a folder). */
+    template: string | null;
+    /** The collection whose `path` this node is; null for a plain fixed page. */
+    collection: string | null;
+};
+export declare function fixedNodeSpecs(config: ResolvedConfig): FixedNode[];
+/** The spec a ROOT record materializes, or null for an editor-owned node. */
+export declare function fixedNodeOf(record: {
+    parentId: string | null;
+    slug: string;
+}, config: ResolvedConfig): FixedNode | null;
+/** Create every fixed node that has no root record yet, then list. */
+export declare function ensureFixedNodes(pages: PageStore, config: ResolvedConfig): Promise<PageRecord[]>;

package/dist/admin/fixed-nodes.js

@@ -0,0 +1,83 @@
+import { perLocaleSegments } from "../paths.js";
+export function fixedNodeSpecs(config) {
+    const { default: def, supported } = config.locales;
+    const perLocale = (v) => perLocaleSegments(v, supported);
+    const i18nOf = (segments) => {
+        const out = {};
+        for (const [locale, segment] of Object.entries(segments)) {
+            if (locale !== def && segment !== segments[def])
+                out[locale] = { slug: segment };
+        }
+        return Object.keys(out).length > 0 ? out : null;
+    };
+    const specs = new Map();
+    for (const p of config.registry.pages ?? []) {
+        if (p.schema.kind !== "page" || p.schema.slug === undefined)
+            continue;
+        const segments = perLocale(p.schema.slug);
+        specs.set(segments[def], {
+            slug: segments[def],
+            i18n: i18nOf(segments),
+            title: p.schema.title ?? p.schema.name,
+            locales: null,
+            template: p.schema.name,
+            collection: null,
+        });
+    }
+    for (const c of config.registry.collections ?? []) {
+        if (c.path === undefined)
+            continue;
+        const segments = perLocale(c.path);
+        const indexPage = specs.get(segments[def]);
+        if (indexPage) {
+            // defineConfig proved the page sits at the collection's segment in
+            // every locale: that page IS the mount — the collection's index page.
+            indexPage.collection = c.name;
+            continue;
+        }
+        specs.set(segments[def], {
+            slug: segments[def],
+            i18n: i18nOf(segments),
+            title: c.title,
+            locales: typeof c.path === "string" ? null : Object.keys(segments),
+            template: null,
+            collection: c.name,
+        });
+    }
+    return [...specs.values()];
+}
+/** The spec a ROOT record materializes, or null for an editor-owned node. */
+export function fixedNodeOf(record, config) {
+    if (record.parentId !== null)
+        return null;
+    return fixedNodeSpecs(config).find((s) => s.slug === record.slug) ?? null;
+}
+/** Create every fixed node that has no root record yet, then list. */
+export async function ensureFixedNodes(pages, config) {
+    const all = await pages.listPages();
+    const taken = new Set(all.filter((p) => p.parentId === null).map((p) => p.slug));
+    let attempted = false;
+    for (const spec of fixedNodeSpecs(config)) {
+        if (taken.has(spec.slug))
+            continue;
+        attempted = true;
+        try {
+            await pages.createPage({
+                slug: spec.slug, template: spec.template, title: spec.title, i18n: spec.i18n, locales: spec.locales,
+            });
+        }
+        catch (e) {
+            // One spec that cannot land — a path an editor already claimed in some
+            // locale — must not take the whole list down: warn, skip it, keep
+            // materializing the rest. Two admins loading at once can also race on
+            // this same create; the loser's slugTaken is the other one winning,
+            // not a failure, so it skips silently — no warn.
+            const message = e instanceof Error ? e.message : String(e);
+            if (!message.includes("already exists")) {
+                console.warn(`smoodly: could not materialize "${spec.slug}": ${message}`);
+            }
+        }
+    }
+    // A create was tried, so the pre-race list is stale either way.
+    return attempted ? pages.listPages() : all;
+}

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

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