smoodly 0.0.6 → 0.0.8

package/dist/admin/editor/EditorView.js

@@ -8,7 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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).
+// the save ack (refresh-on-change preview, DESIGN.md §3). Every load,
+// edit, autosave and publish targets ONE locale — the page's own tree in
+// that locale (spec 2026-09-06 §6); switching flushes the pending save
+// first.
 //
 // Chrome follows the design system's visual-editor screen: top bar, toned
 // canvas around a white page, 300px inspector holding fields then outline.
@@ -16,24 +19,59 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Core code: no next/* imports live here — the bridge is the only piece
 // that knows about Next, and it ships to the site, not the admin.
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SHARED_NODE_TYPE } from "../../shared.js";
 import { 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 { allowedSections, allowedShared, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
 import { useDraftAutosave } from "./autosave.js";
 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";
+import { BASE } from "../shell/base.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";
 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);
-    const [locale, setLocale] = useState(registry.locales.default);
+    // 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);
@@ -45,25 +83,30 @@ export function EditorView({ ops, registry, id }) {
     const [banner, setBanner] = useState(null);
     const [published, setPublished] = useState(false);
     const [refOptions, setRefOptions] = useState({});
+    // Shared item name → row id, loaded once per editor mount: the picker's
+    // Shared group and a bound locked zone need the id to place a node.
+    const [sharedIds, setSharedIds] = useState(null);
     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);
     // 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(id, t),
+        persist: (t) => ops.pages.saveDraft(id, treeLocaleRef.current, t),
         onSaved: () => postToCanvas({ source: "smoodly", kind: "refresh" }),
     });
     // 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 path = paths[locale] ?? "/";
     const label = path;
-    const siteUrl = urls[locale] ?? urls[registry.locales.default] ?? path;
+    const siteUrl = urls[locale] ?? 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
@@ -71,6 +114,13 @@ export function EditorView({ ops, registry, id }) {
     useEffect(() => {
         let cancelled = false;
         (async () => {
+            // A new locale (or a reload) is a new canvas: nothing from the previous one may survive.
+            setReady(false);
+            setTree(null);
+            treeRef.current = null;
+            setSelectedId(null);
+            setHoverId(null);
+            setFolder(false);
             // ops is a server action — it can reject outright (offline, 500,
             // aborted), not just resolve to a typed error. Either failure mode
             // must land on the same full-pane error, never a hung load.
@@ -92,7 +142,7 @@ export function EditorView({ ops, registry, id }) {
             }
             let result;
             try {
-                result = await ops.pages.get(id);
+                result = await ops.pages.get(id, locale);
             }
             catch {
                 result = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -103,6 +153,13 @@ export function EditorView({ ops, registry, id }) {
                 setLoadError(result.message);
                 return;
             }
+            setRecord(result.data.record);
+            setPaths(result.data.paths);
+            setUrls(result.data.urls);
+            setParentLocales(result.data.parentLocales);
+            // Absent in this locale: the "Add <locale>" pane, derived from the record.
+            if (!result.data.record.locales[locale])
+                return;
             // A folder has no draft tree — it gets the notice pane, not a canvas.
             if (result.data.draft === null) {
                 setFolder(true);
@@ -118,9 +175,7 @@ export function EditorView({ ops, registry, id }) {
             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);
-            setPaths(result.data.paths);
-            setUrls(result.data.urls);
+            treeLocaleRef.current = locale;
             setTree(draft);
             treeRef.current = draft;
             if (draft !== result.data.draft)
@@ -128,7 +183,7 @@ export function EditorView({ ops, registry, id }) {
             setReady(true);
         })();
         return () => { cancelled = true; };
-    }, [ops, id]);
+    }, [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.
@@ -137,17 +192,18 @@ export function EditorView({ ops, registry, id }) {
     // 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);
+        const result = await ops.pages.get(id, locale).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) => {
+        setParentLocales(result.data.parentLocales);
+    }, [ops, id, locale]);
+    const onRename = async (patch) => {
         let result;
         try {
-            result = await ops.pages.rename(id, { locale: renameLocale, ...patch });
+            result = await ops.pages.rename(id, { locale, ...patch });
         }
         catch {
             result = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -157,10 +213,94 @@ 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]);
     const sectionOf = useCallback((type) => registry.sections.find((s) => s.name === type) ?? null, [registry]);
+    /** The shared item a placement node places, or null for any other node. */
+    const sharedOf = useCallback((node) => {
+        if (node.type !== SHARED_NODE_TYPE)
+            return null;
+        return registry.shared.find((s) => s.name === node.fields?.item) ?? null;
+    }, [registry]);
     // ── ref fields inside sections: same option loading as EntryForm ──────
     const refTargets = useMemo(() => {
         const out = {};
@@ -176,15 +316,20 @@ export function EditorView({ ops, registry, id }) {
         return out;
     }, [registry]);
     useEffect(() => {
+        let cancelled = false;
         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)
+                // A list issued for the previous locale must not overwrite this one's.
+                if (cancelled || !r.ok)
                     return;
-                const options = r.data.map((e) => ({
+                const options = r.data
+                    // only entries present in the locale being edited can be referenced there
+                    .filter((e) => e.locales[locale])
+                    .map((e) => ({
                     id: e.id,
-                    title: String((targetMeta?.titleField && e.fields[targetMeta.titleField]) ?? e.id),
-                    status: e.status,
+                    title: targetMeta ? entryTitle(e, targetMeta, registry, locale) : e.id,
+                    status: e.locales[locale].status,
                 }));
                 setRefOptions((prev) => ({ ...prev, [target]: options }));
             }).catch((e) => {
@@ -193,7 +338,29 @@ export function EditorView({ ops, registry, id }) {
                 console.error(e);
             });
         }
-    }, [ops, refTargets, registry]);
+        return () => { cancelled = true; };
+    }, [ops, refTargets, registry, locale]);
+    useEffect(() => {
+        if (registryRef.current.shared.length === 0) {
+            setSharedIds({});
+            return;
+        }
+        let cancelled = false;
+        // A failed load leaves the map empty: the picker's Shared group and
+        // any zone bound to an item degrade to nothing to place, not a stuck
+        // editor — so say why in the console, like the ref options above.
+        ops.shared.list()
+            .then((r) => {
+            if (cancelled)
+                return;
+            if (!r.ok)
+                console.error(r.message);
+            setSharedIds(r.ok ? Object.fromEntries(r.data.map((i) => [i.name, i.record.id])) : {});
+        })
+            .catch((e) => { console.error(e); if (!cancelled)
+            setSharedIds({}); });
+        return () => { cancelled = true; };
+    }, [ops]);
     // ── canvas messaging ─────────────────────────────────────────────────
     const postToCanvas = useCallback((m) => {
         iframeRef.current?.contentWindow?.postMessage(m, "*");
@@ -251,6 +418,19 @@ export function EditorView({ ops, registry, id }) {
         });
         mark();
     }, [mark]);
+    // A zone bound to a shared item needs the item's row id (ops.shared.list),
+    // which can land after the draft did. Fill then; nothing else changes.
+    useEffect(() => {
+        if (!tree || !sharedIds || !record)
+            return;
+        const template = registryRef.current.pages.find((p) => p.name === record.template);
+        const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, sharedIds);
+        if (filled !== tree)
+            mutate(() => filled);
+        // `tree` is deliberately not a dependency: this runs when the ids land
+        // or a new draft loads, not on every keystroke.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sharedIds, record, mutate, tree === null]);
     // ── tree gestures ────────────────────────────────────────────────────
     const nodesIn = useCallback((zone) => tree?.zones[zone] ?? [], [tree]);
     const zoneCanTake = useCallback((zone) => canInsert(policyOf(zone), nodesIn(zone).length), [policyOf, nodesIn]);
@@ -260,6 +440,15 @@ export function EditorView({ ops, registry, id }) {
         setPicker(null);
         select(node.id);
     };
+    const doInsertShared = (zone, index, item) => {
+        const ref = sharedIds?.[item.name];
+        if (!ref)
+            return;
+        const node = placementNode(item, ref, newNodeId(SHARED_NODE_TYPE));
+        mutate((t) => insertNode(t, zone, index, node));
+        setPicker(null);
+        select(node.id);
+    };
     const doDuplicate = (node) => {
         if (!tree)
             return;
@@ -302,7 +491,7 @@ export function EditorView({ ops, registry, id }) {
         }
         let result;
         try {
-            result = await ops.pages.publish(id);
+            result = await ops.pages.publish(id, locale);
         }
         catch (e) {
             console.error(e);
@@ -336,8 +525,13 @@ export function EditorView({ ops, registry, id }) {
     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" })] }) }));
     }
+    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" })] }) }));
+    }
     const selected = tree && selectedId ? findNode(tree, selectedId) : null;
     const selectedSection = selected ? sectionOf(selected.type) : null;
+    const selectedShared = selected ? sharedOf(selected) : 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]));
@@ -382,7 +576,7 @@ export function EditorView({ ops, registry, id }) {
     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" })), _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: {
+    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: {
                                                 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: {
@@ -395,12 +589,12 @@ export function EditorView({ ops, registry, id }) {
                                                         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: {
+                                                    } })), 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, selLocked && " · locked"] }), _jsx("div", { className: "sm-blocktoolbar", style: {
+                                                            } }), _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) => {
@@ -411,7 +605,11 @@ export function EditorView({ ops, registry, id }) {
                                                                     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) => {
+                                                })] })] }) })] }), _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: () => {
@@ -424,15 +622,16 @@ export function EditorView({ ops, registry, id }) {
                                                     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", { 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 ?? 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));
+                                                    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))), allowedSections(policyOf(picker.zone), registry.sections).length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }))] }));
+                    }, 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." }))] }) }))] }));
 }
 /** 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/PageSettings.d.ts

@@ -1,13 +1,17 @@
 import type { PageRecord } from "../../store.ts";
 import type { AdminRegistry } from "../serialize.ts";
-export declare function PageSettings({ record, registry, paths, fixed, onRename }: {
+export declare function PageSettings({ record, locale, registry, path, fixed, onRename, onRemoveLocale }: {
     record: PageRecord;
+    locale: string;
     registry: AdminRegistry;
-    paths: Record<string, string>;
+    /** The page's path in this locale (the `paths` index). */
+    path: string | undefined;
     fixed: boolean;
     /** Resolves to an error message, or null when the rename landed. */
-    onRename(locale: string, patch: {
+    onRename(patch: {
         title?: string;
         slug?: string;
     }): Promise<string | null>;
-}): import("react").JSX.Element;
+    /** Absent when the locale cannot be removed: a fixed node, the site root, or the page's last locale. */
+    onRemoveLocale?: () => void;
+}): import("react").JSX.Element | null;

package/dist/admin/editor/PageSettings.js

@@ -1,40 +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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Page settings (spec 2026-09-05 §7; per locale since spec 2026-09-06
+// §6): the ACTIVE locale's title and slug, saved through pages.rename,
+// and "Remove from this locale". The switcher in the canvas meta row
+// selects the locale, so there are no per-locale tabs here. 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({});
+import { Button, Field, SectionLabel } from "../ui/primitives.js";
+export function PageSettings({ record, locale, registry, path, fixed, onRename, onRemoveLocale }) {
+    const row = record.locales[locale];
+    const [draft, setDraft] = useState({ title: row?.title ?? "", slug: row?.slug ?? "" });
     const [error, setError] = useState(null);
-    const isHome = record.parentId === null && record.slug === registry.homePageSlug;
+    const isHome = record.parentId === null && record.locales[registry.locales.default]?.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) => {
+        setDraft({ title: row?.title ?? "", slug: row?.slug ?? "" });
+    }, [record, locale]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (!row)
+        return null;
+    const commit = async (key) => {
         setError(null);
-        const next = draft[locale]?.[key] ?? "";
-        if (next === stored(locale, key))
+        const next = draft[key];
+        if (next === row[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(`A ${key} is required — nothing falls back to another locale.`);
+            return;
         }
-        setError(await onRename(locale, { [key]: next }));
+        setError(await onRename({ [key]: next }));
     };
-    const set = (locale, key, value) => setDraft((d) => ({ ...d, [locale]: { ...(d[locale] ?? { title: "", slug: "" }), [key]: value } }));
-    const onKey = (locale, key) => (e) => {
+    const onKey = (key) => (e) => {
         if (e.key === "Enter") {
             e.preventDefault();
-            void commit(locale, key);
+            void commit(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)))] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsxs(SectionLabel, { children: ["Page \u00B7 ", locale] }), fixed && _jsx("span", { className: "sm-hint", children: "Owned by code \u2014 change it in the registration." }), error && _jsx("span", { className: "sm-error", children: error }), _jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", disabled: fixed, value: draft.title, onChange: (e) => setDraft((d) => ({ ...d, title: e.target.value })), onBlur: () => void commit("title"), onKeyDown: onKey("title") }) }), _jsx(Field, { label: "Slug", hint: path ?? "", children: _jsx("input", { className: "sm-input sm-input--mono", disabled: fixed || isHome, value: draft.slug, onChange: (e) => setDraft((d) => ({ ...d, slug: e.target.value })), onBlur: () => void commit("slug"), onKeyDown: onKey("slug") }) }), onRemoveLocale && (_jsxs(Button, { variant: "secondary", onClick: onRemoveLocale, children: ["Remove from ", locale] }))] }));
 }

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

@@ -1,23 +1,29 @@
 import type { ResolvedConfig } from "../config.ts";
-import type { PageI18n, PageRecord, PageStore } from "../store.ts";
+import type { 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;
+    /** The node's segment per locale it exists in. A fixed page always
+     *  carries every supported locale — a slug map that omits one falls
+     *  back to the default locale's segment, same as a string slug. A
+     *  collection mount's segments are the collection's path exactly:
+     *  every supported locale for a string path, exactly its keys for a
+     *  per-locale map. */
+    segments: Record<string, string>;
     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. */
+/** The spec a ROOT record materializes, or null for an editor-owned node.
+ *  Judged by the default-locale slug only — a root that exists in Finnish
+ *  alone is never a fixed node, whatever its Finnish slug. */
 export declare function fixedNodeOf(record: {
     parentId: string | null;
-    slug: string;
+    locales: Record<string, {
+        slug: string;
+    }>;
 }, config: ResolvedConfig): FixedNode | null;
-/** Create every fixed node that has no root record yet, then list. */
+/** Create every fixed node that has no root record yet, give every fixed
+ *  node the locales it lacks, then list. */
 export declare function ensureFixedNodes(pages: PageStore, config: ResolvedConfig): Promise<PageRecord[]>;