smoodly 0.0.5 → 0.0.7

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.
@@ -21,19 +24,52 @@ 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";
 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 { 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);
@@ -51,19 +87,21 @@ export function EditorView({ ops, registry, id }) {
     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 +109,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 +137,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 +148,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 +170,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 +178,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 +187,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,6 +208,84 @@ 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]);
@@ -176,15 +305,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 +327,8 @@ export function EditorView({ ops, registry, id }) {
                 console.error(e);
             });
         }
-    }, [ops, refTargets, registry]);
+        return () => { cancelled = true; };
+    }, [ops, refTargets, registry, locale]);
     // ── canvas messaging ─────────────────────────────────────────────────
     const postToCanvas = useCallback((m) => {
         iframeRef.current?.contentWindow?.postMessage(m, "*");
@@ -302,7 +437,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,6 +471,10 @@ 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 selZone = tree && selected ? zoneOf(tree, selected.id) : null;
@@ -382,7 +521,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: {
@@ -411,7 +550,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 ? (_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, 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}`))), _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: () => {

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[]>;

package/dist/admin/fixed-nodes.js

@@ -1,25 +1,19 @@
-import { perLocaleSegments } from "../paths.js";
+import { fixedPageSegments, 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);
+        // Fixed pages exist in every supported locale (spec 2026-09-06 §3): a
+        // slug map that omits a locale falls back to the default locale's
+        // segment. One helper fills it for the boot check (config.ts), here
+        // and fixedPathFor (localize.ts), so the three cannot drift.
+        const segments = fixedPageSegments(p.schema.slug, config.locales);
         specs.set(segments[def], {
-            slug: segments[def],
-            i18n: i18nOf(segments),
+            segments,
             title: p.schema.title ?? p.schema.name,
-            locales: null,
             template: p.schema.name,
             collection: null,
         });
@@ -35,46 +29,66 @@ export function fixedNodeSpecs(config) {
             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,
-        });
+        specs.set(segments[def], { segments, title: c.title, template: null, collection: c.name });
     }
     return [...specs.values()];
 }
-/** 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 function fixedNodeOf(record, config) {
     if (record.parentId !== null)
         return null;
-    return fixedNodeSpecs(config).find((s) => s.slug === record.slug) ?? null;
+    const def = config.locales.default;
+    const slug = record.locales[def]?.slug;
+    if (slug === undefined)
+        return null;
+    return fixedNodeSpecs(config).find((s) => s.segments[def] === slug) ?? 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 async function ensureFixedNodes(pages, config) {
+    const def = config.locales.default;
     const all = await pages.listPages();
-    const taken = new Set(all.filter((p) => p.parentId === null).map((p) => p.slug));
+    const roots = all.filter((p) => p.parentId === null);
     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,
-            });
+        const slug = spec.segments[def];
+        let record = roots.find((p) => p.locales[def]?.slug === slug);
+        if (!record) {
+            attempted = true;
+            try {
+                record = await pages.createPage({ locale: def, slug, template: spec.template, title: spec.title });
+            }
+            catch (e) {
+                // Two admins loading at once race on this very create; the loser's
+                // slugTaken is the other one winning, not a failure, so it skips
+                // silently — no warn. Anything else is worth saying out loud.
+                const message = e instanceof Error ? e.message : String(e);
+                if (!message.includes("already exists")) {
+                    console.warn(`smoodly: could not materialize "${slug}": ${message}`);
+                }
+                continue;
+            }
         }
-        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}`);
+        // Every locale the registration names — including one added to the
+        // config after the record was first materialized.
+        for (const [locale, segment] of Object.entries(spec.segments)) {
+            if (record.locales[locale])
+                continue;
+            attempted = true;
+            try {
+                record = await pages.addLocale(record.id, locale, { from: def, slug: segment });
+            }
+            catch (e) {
+                // One locale's row that cannot land — a segment or path an editor
+                // already claimed there — must not take the node or the whole list
+                // down: warn, skip that locale, keep materializing the rest. Only a
+                // concurrent add of the SAME locale is a race, and it skips silently.
+                const message = e instanceof Error ? e.message : String(e);
+                if (!message.includes("already exists in locale")) {
+                    console.warn(`smoodly: could not materialize "${slug}" in "${locale}": ${message}`);
+                }
             }
         }
     }