smoodly 0.0.8 → 0.0.10

package/dist/admin/forms/richtext-extensions.js

@@ -0,0 +1,74 @@
+// The editor's extension set (spec 2026-09-08 §2): always the FULL schema
+// of what `RichText` draws, so content a toolset forbids survives the
+// round trip; the toolset gates only creation — input rules, paste rules
+// and keyboard shortcuts here, the toolbar in RichtextToolbar, paste in
+// richtext-paste. StarterKit supplies document, paragraph, text, hard
+// break, list item, list keymap and undo/redo; every gated node or mark
+// is switched off there and added back extended.
+import { Extension, textblockTypeInputRule } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Heading from "@tiptap/extension-heading";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import Blockquote from "@tiptap/extension-blockquote";
+import { BulletList, OrderedList } from "@tiptap/extension-list";
+/** Keep the mark in the schema; add no way to create it when `on` is false. */
+function gateMarkConfig(on) {
+    return {
+        addInputRules() { return on ? this.parent?.() ?? [] : []; },
+        addPasteRules() { return on ? this.parent?.() ?? [] : []; },
+        addKeyboardShortcuts() { return on ? this.parent?.() ?? {} : {}; },
+    };
+}
+function gateNodeConfig(on) {
+    return {
+        addInputRules() { return on ? this.parent?.() ?? [] : []; },
+        addPasteRules() { return on ? this.parent?.() ?? [] : []; },
+        addKeyboardShortcuts() { return on ? this.parent?.() ?? {} : {}; },
+    };
+}
+const ALL_LEVELS = [1, 2, 3, 4, 5, 6];
+export function richtextExtensions(allowed, hooks) {
+    const link = allowed.marks.has("link");
+    const levels = allowed.headingLevels;
+    return [
+        StarterKit.configure({
+            heading: false, bold: false, italic: false, link: false, blockquote: false,
+            bulletList: false, orderedList: false,
+            code: false, codeBlock: false, strike: false, underline: false, horizontalRule: false,
+            dropcursor: false, gapcursor: false, trailingNode: false,
+        }),
+        Heading.extend({
+            // Exact `#` counts, and only the allowed levels; `# ` does nothing when h1 is forbidden.
+            addInputRules() {
+                return levels.map((level) => textblockTypeInputRule({ find: new RegExp(`^(#{${level}})\\s$`), type: this.type, getAttributes: { level } }));
+            },
+            addKeyboardShortcuts() {
+                return Object.fromEntries(levels.map((level) => [`Mod-Alt-${level}`, () => this.editor.commands.toggleHeading({ level })]));
+            },
+        }).configure({ levels: ALL_LEVELS }),
+        Bold.extend(gateMarkConfig(allowed.marks.has("bold"))),
+        Italic.extend(gateMarkConfig(allowed.marks.has("italic"))),
+        Link.extend({
+            ...gateMarkConfig(link),
+            // href only (spec §3): no target, rel or class in the stored JSON.
+            addAttributes() { return { href: { default: null } }; },
+        }).configure({
+            openOnClick: false,
+            autolink: link,
+            linkOnPaste: link,
+            // Site-relative targets are links too; the site renderer's scheme filter is the safety net.
+            isAllowedUri: (url, ctx) => /^[/#?.]/.test(url) || ctx.defaultValidate(url),
+        }),
+        Blockquote.extend(gateNodeConfig(allowed.nodes.has("blockquote"))),
+        BulletList.extend(gateNodeConfig(allowed.nodes.has("bulletList"))),
+        OrderedList.extend(gateNodeConfig(allowed.nodes.has("orderedList"))),
+        Extension.create({
+            name: "smoodlyLinkShortcut",
+            addKeyboardShortcuts() {
+                return link ? { "Mod-k": () => { hooks.onLink(); return true; } } : {};
+            },
+        }),
+    ];
+}

package/dist/admin/forms/richtext-paste.d.ts

@@ -0,0 +1,22 @@
+import type { Allowed } from "../../toolset.ts";
+export type PmJSON = {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: PmJSON[];
+    text?: string;
+    marks?: {
+        type: string;
+        attrs?: Record<string, unknown>;
+    }[];
+};
+/** ProseMirror's Slice.toJSON() shape. */
+export type SliceJSON = {
+    content?: PmJSON[] | null;
+    openStart?: number;
+    openEnd?: number;
+};
+/** The allowed level closest to `level`; the smaller number on a tie;
+ *  null when no heading is allowed. */
+export declare function clampLevel(level: number, levels: number[]): number | null;
+export declare function gateNodes(nodes: PmJSON[], allowed: Allowed): PmJSON[];
+export declare function gatePastedSlice(slice: SliceJSON, allowed: Allowed): SliceJSON;

package/dist/admin/forms/richtext-paste.js

@@ -0,0 +1,59 @@
+/** The allowed level closest to `level`; the smaller number on a tie;
+ *  null when no heading is allowed. */
+export function clampLevel(level, levels) {
+    if (levels.length === 0)
+        return null;
+    let best = levels[0];
+    for (const l of levels) {
+        const d = Math.abs(l - level);
+        const bd = Math.abs(best - level);
+        if (d < bd || (d === bd && l < best))
+            best = l;
+    }
+    return best;
+}
+export function gateNodes(nodes, allowed) {
+    return nodes.flatMap((n) => gateNode(n, allowed));
+}
+function gateNode(n, allowed) {
+    if (n.type === "text") {
+        const marks = (n.marks ?? []).filter((m) => allowed.marks.has(m.type));
+        const { marks: _drop, ...rest } = n;
+        return [marks.length > 0 ? { ...rest, marks } : rest];
+    }
+    const content = n.content ? gateNodes(n.content, allowed) : undefined;
+    const withContent = (node) => (content ? { ...node, content } : node);
+    if (n.type === "heading") {
+        const level = clampLevel(Number(n.attrs?.level ?? 1), allowed.headingLevels);
+        if (level === null)
+            return [withContent({ type: "paragraph" })];
+        return [withContent({ ...n, attrs: { ...n.attrs, level } })];
+    }
+    if (n.type === "blockquote" && !allowed.nodes.has("blockquote"))
+        return content ?? [];
+    if ((n.type === "bulletList" && !allowed.nodes.has("bulletList")) || (n.type === "orderedList" && !allowed.nodes.has("orderedList"))) {
+        return (content ?? []).flatMap((item) => item.content ?? []);
+    }
+    return [withContent(n)];
+}
+/** Depth of the first (or last) child chain, counting every non-text node. */
+function edgeDepth(nodes, side) {
+    let depth = 0;
+    let list = nodes;
+    while (list.length > 0) {
+        const n = side === "first" ? list[0] : list[list.length - 1];
+        if (n.type === "text")
+            break;
+        depth++;
+        list = n.content ?? [];
+    }
+    return depth;
+}
+export function gatePastedSlice(slice, allowed) {
+    const content = gateNodes(slice.content ?? [], allowed);
+    return {
+        content,
+        openStart: Math.min(slice.openStart ?? 0, edgeDepth(content, "first")),
+        openEnd: Math.min(slice.openEnd ?? 0, edgeDepth(content, "last")),
+    };
+}

package/dist/admin/index.d.ts

@@ -9,4 +9,3 @@ export { serializeAdminConfig } from "./serialize.ts";
 export type { AdminRegistry, AdminSection, AdminCollection, AdminPageTemplate, AdminShared, AdminField } from "./serialize.ts";
 export * from "./tree-ops.ts";
 export { validateFields, type FieldError } from "./validate.ts";
-export { plainToRichtext, richtextToPlain } from "./richtext.ts";

package/dist/admin/index.js

@@ -7,4 +7,3 @@ export { supabaseAdminAuth } from "./supabase-auth.js";
 export { serializeAdminConfig } from "./serialize.js";
 export * from "./tree-ops.js";
 export { validateFields } from "./validate.js";
-export { plainToRichtext, richtextToPlain } from "./richtext.js";

package/dist/admin/next/create-admin.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { ResolvedConfig } from "../../config.ts";
 import type { AdminOpAction } from "../ops.ts";
 import type { AuthConfig } from "../shell/session.ts";
@@ -7,12 +7,8 @@ export declare function createSmoodlyAdmin(input: {
     op: AdminOpAction;
     auth: () => AuthConfig;
 }): {
-    AdminPage: ({ params }: {
-        params: Promise<{
-            segments?: string[];
-        }>;
-    }) => Promise<ReactElement>;
+    AdminPage: () => null;
     AdminLayout: ({ children }: {
         children: ReactNode;
-    }) => ReactElement;
+    }) => import("react").JSX.Element;
 };

package/dist/admin/next/create-admin.js

@@ -4,16 +4,25 @@ import { AdminApp } from "../shell/AdminApp.js";
 import { AdminStyles } from "../ui/theme.js";
 export function createSmoodlyAdmin(input) {
     const registry = serializeAdminConfig(input.config);
-    async function AdminPage({ params }) {
-        const { segments = [] } = await params;
-        return _jsx(AdminApp, { registry: registry, segments: segments, op: input.op, auth: input.auth() });
+    /** The catch-all page only makes every /admin URL exist. The shell is
+     *  mounted by the layout, not here: a server action that revalidates
+     *  (publish, delete, a save of published content) answers with a
+     *  re-rendered tree for the URL it was posted to, and Next remounts a
+     *  page whose dynamic segment changed since the document load, while a
+     *  layout persists (spec 2026-09-08 client routing, §1 amendment). */
+    function AdminPage() {
+        return null;
     }
     /** The admin owns the viewport: the whole UI is a fixed three-column
      *  shell that scrolls internally, never the host document. The design
      *  system's tokens ride along in one <style> — the host app imports
-     *  nothing (see ui/theme.tsx). */
+     *  nothing (see ui/theme.tsx). The shell reads its route from the URL
+     *  on mount (shell/router.ts); `children` is the page's nothing.
+     *  suppressHydrationWarning: the theme boot script sets `data-theme`
+     *  on this element before React hydrates, on purpose (no white flash
+     *  for a dark-mode editor), so the attribute differs from the server's. */
     function AdminLayout({ children }) {
-        return (_jsxs("div", { className: "sm-admin", children: [_jsx(AdminStyles, {}), children] }));
+        return (_jsxs("div", { className: "sm-admin", suppressHydrationWarning: true, children: [_jsx(AdminStyles, {}), _jsx(AdminApp, { registry: registry, op: input.op, auth: input.auth() }), children] }));
     }
     return { AdminPage, AdminLayout };
 }

package/dist/admin/richtext-doc.d.ts

@@ -0,0 +1,7 @@
+/** True when any text node in the tree has non-whitespace text. */
+export declare function hasText(doc: unknown): boolean;
+/** The document as plain JSON. ProseMirror builds node attrs with a null
+ *  prototype, which React's server-action encoding refuses to serialize
+ *  (it becomes a temporary reference and the server's structuredClone
+ *  throws); a JSON round trip gives every object the plain prototype. */
+export declare function plainDoc<T>(doc: T): T;

package/dist/admin/richtext-doc.js

@@ -0,0 +1,18 @@
+// Shape helpers over a TipTap document, used by the validator (an empty
+// document is missing, spec 2026-09-08 §3). Pure, no TipTap import.
+/** True when any text node in the tree has non-whitespace text. */
+export function hasText(doc) {
+    if (!doc || typeof doc !== "object")
+        return false;
+    const n = doc;
+    if (typeof n.text === "string" && n.text.trim() !== "")
+        return true;
+    return Array.isArray(n.content) && n.content.some(hasText);
+}
+/** The document as plain JSON. ProseMirror builds node attrs with a null
+ *  prototype, which React's server-action encoding refuses to serialize
+ *  (it becomes a temporary reference and the server's structuredClone
+ *  throws); a JSON round trip gives every object the plain prototype. */
+export function plainDoc(doc) {
+    return JSON.parse(JSON.stringify(doc));
+}

package/dist/admin/serialize.d.ts

@@ -3,6 +3,10 @@ import type { ZonePolicy } from "../zones.ts";
 export type AdminField = Record<string, unknown> & {
     type: string;
     target?: string;
+    /** An object's subfields, serialized. */
+    fields?: Record<string, AdminField>;
+    /** A list's item descriptor, serialized. */
+    item?: AdminField;
 };
 export type AdminSection = {
     name: string;

package/dist/admin/serialize.js

@@ -10,6 +10,9 @@ function serializeDescriptor(d) {
         else if (key === "fields" && d.type === "object") {
             out.fields = serializeMap(value);
         }
+        else if (key === "item" && d.type === "list") {
+            out.item = serializeDescriptor(value);
+        }
         else if (typeof value !== "function") {
             out[key] = value;
         }

package/dist/admin/shell/AdminApp.d.ts

@@ -1,9 +1,14 @@
 import type { AdminOpAction } from "../ops.ts";
 import type { AdminRegistry } from "../serialize.ts";
 import { type AuthConfig } from "./session.ts";
-export declare function AdminApp({ registry, segments, op, auth }: {
+export declare function Nav({ registry, active, email, onSignOut }: {
+    registry: AdminRegistry;
+    active: string;
+    email?: string;
+    onSignOut: () => void;
+}): import("react").JSX.Element;
+export declare function AdminApp({ registry, op, auth }: {
     registry: AdminRegistry;
-    segments: string[];
     op: AdminOpAction;
     auth: AuthConfig;
 }): import("react").JSX.Element;

package/dist/admin/shell/AdminApp.js

@@ -3,7 +3,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The admin shell: registry-derived nav (never separately configured),
 // list views in the main area, editor/entry views mounted by segment.
-// Internal routing = the catch-all's segments; plain <a> navigation.
+// Internal routing is the shell's own (shell/router.ts): the route is read
+// from the URL on mount, then pushState moves between views and the shell
+// never reloads (spec 2026-09-08 client routing). The shell mounts from the
+// admin LAYOUT (next/create-admin.tsx), never from the catch-all page.
 //
 // Layout is the design system's three columns: a 200px nav, then the main
 // column whose views own their own 48px top bar (the editor adds the third,
@@ -21,20 +24,23 @@ import { LoginView } from "./LoginView.js";
 import { useAdminSession } from "./session.js";
 import { Logo, ThemeToggle } from "../ui/primitives.js";
 import { BASE } from "./base.js";
+import { RouteLink } from "./RouteLink.js";
+import { useRoute } from "./router.js";
 import { ErrorPane } from "./ErrorPane.js";
 /** Nav items the registry can't produce yet: shown, disabled, so the shape
  *  of the product is visible — the same set the design system's SideNav has. */
 const PLANNED = ["Media", "Settings"];
-function Nav({ registry, active, email, onSignOut }) {
-    const item = (href, label, key) => (_jsx("a", { className: "sm-nav-item", href: href ?? undefined, "aria-disabled": href ? undefined : true, "aria-current": href && key === active ? "page" : undefined, children: label }, key));
+export function Nav({ registry, active, email, onSignOut }) {
+    const item = (href, label, key) => href ? (_jsx(RouteLink, { className: "sm-nav-item", href: href, "aria-current": key === active ? "page" : undefined, children: label }, key)) : (_jsx("a", { className: "sm-nav-item", "aria-disabled": true, children: label }, key));
     const name = email?.split("@")[0] ?? "Editor";
     const initials = name.slice(0, 2).toUpperCase();
     return (_jsxs("nav", { className: "sm-nav", children: [_jsx(Logo, {}), _jsxs("div", { className: "sm-nav__list", children: [item(`${BASE}/pages`, "Pages", "pages"), registry.collections.map((c) => item(`${BASE}/${c.name}`, c.title, c.name)), registry.shared.length > 0 && item(`${BASE}/shared`, "Shared content", "shared"), PLANNED.map((label) => item(null, label, label))] }), _jsxs("div", { className: "sm-nav__foot", children: [_jsx(ThemeToggle, {}), _jsxs("div", { className: "sm-nav__user", children: [_jsx("span", { className: "sm-avatar", children: initials }), _jsxs("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [_jsx("span", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: name }), _jsx("span", { style: { fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Editor" })] })] }), _jsx("button", { className: "sm-nav-item", onClick: onSignOut, style: { color: "var(--text-muted)" }, children: "Sign out" })] })] }));
 }
-export function AdminApp({ registry, segments, op, auth }) {
+export function AdminApp({ registry, op, auth }) {
     const session = useAdminSession(auth);
     const [ops] = useState(() => makeClientOps(op, session.token));
-    const [head = "pages", tail] = segments.length ? segments : ["pages"];
+    const route = useRoute();
+    const [head = "pages", tail] = route.segments.length ? route.segments : ["pages"];
     const isCollection = registry.collections.some((c) => c.name === head);
     const email = session.state.status === "signed_in" ? session.state.session.user.email : undefined;
     if (session.state.status === "loading") {
@@ -57,5 +63,5 @@ export function AdminApp({ registry, segments, op, auth }) {
         main = _jsx(SharedForm, { ops: ops, registry: registry, name: decodeURIComponent(tail) });
     else
         main = _jsx(ErrorPane, { message: "Not found." });
-    return (_jsxs("div", { className: "sm-shell", children: [_jsx(Nav, { registry: registry, active: head, email: email, onSignOut: () => session.client.auth.signOut() }), _jsx("main", { className: "sm-main", children: main })] }));
+    return (_jsxs("div", { className: "sm-shell", children: [_jsx(Nav, { registry: registry, active: head, email: email, onSignOut: () => session.client.auth.signOut() }), _jsx("main", { className: "sm-main", children: main }, `${head}/${tail ?? ""}`)] }));
 }

package/dist/admin/shell/EntriesList.js

@@ -10,6 +10,7 @@ import { entryRows, entrySourceLocale } from "./entries-list.js";
 import { Button, Segmented, StatusBadge } from "../ui/primitives.js";
 import { relativeTime } from "../ui/format.js";
 import { BASE } from "./base.js";
+import { navigate } from "./router.js";
 import { ErrorPane } from "./ErrorPane.js";
 const LOCALE_KEY = "smoodly.entries.locale";
 /** The selected locale survives a reload within the session; a stored
@@ -49,7 +50,7 @@ export function EntriesList({ ops, registry, collection }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const open = (id) => {
-        window.location.href = `${BASE}/${collection}/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`;
+        navigate(`${BASE}/${collection}/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`);
     };
     const addLocale = async (row) => {
         const record = records?.find((r) => r.id === row.id);
@@ -72,7 +73,7 @@ export function EntriesList({ ops, registry, collection }) {
         open(row.id);
     };
     const rows = records ? entryRows(records, meta, registry, locale) : [];
-    return (_jsx(ListView, { title: meta.title, count: records?.length, actions: _jsxs(_Fragment, { children: [multilingual && _jsx(Segmented, { options: registry.locales.supported, value: locale, onChange: pickLocale }), _jsx(Button, { onClick: () => { window.location.href = `${BASE}/${collection}/new?locale=${encodeURIComponent(locale)}`; }, children: "+ New entry" })] }), columns: [
+    return (_jsx(ListView, { title: meta.title, count: records?.length, actions: _jsxs(_Fragment, { children: [multilingual && _jsx(Segmented, { options: registry.locales.supported, value: locale, onChange: pickLocale }), _jsx(Button, { onClick: () => { navigate(`${BASE}/${collection}/new?locale=${encodeURIComponent(locale)}`); }, children: "+ New entry" })] }), columns: [
             { label: "Title", width: "minmax(160px,1fr)" },
             { label: "Updated", width: "minmax(110px,160px)" },
             { label: "Status", width: "120px" },

package/dist/admin/shell/EntryForm.js

@@ -15,29 +15,9 @@ import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
 import { Banner, Breadcrumb, Button, Divider, SectionLabel, Segmented, TopBar } from "../ui/primitives.js";
 import { entrySourceLocale, entryTitle, localizedFieldKeys } from "./entries-list.js";
 import { BASE } from "./base.js";
+import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
+import { navigate, useLeaveGuard } from "./router.js";
 const STATUSES = ["Draft", "Published"];
-/** The locale to edit: from the URL (the 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;
-}
-function writeLocaleToUrl(next) {
-    try {
-        const u = new URL(window.location.href);
-        u.searchParams.set("locale", next);
-        window.history.replaceState(null, "", u);
-    }
-    catch {
-        // the URL is cosmetic here
-    }
-}
 export function EntryForm({ ops, registry, collection, id }) {
     const meta = registry.collections.find((c) => c.name === collection);
     const isNew = id === "new";
@@ -52,6 +32,9 @@ export function EntryForm({ ops, registry, collection, id }) {
     const [adding, setAdding] = useState(false);
     const [reloadKey, setReloadKey] = useState(0);
     const [dirty, setDirty] = useState(false);
+    // A nav click, the Back arrow, a list row: the router asks before
+    // leaving unsaved changes; reload and close ask through beforeunload.
+    useLeaveGuard(dirty);
     const refTargets = useMemo(() => {
         const out = {};
         for (const [key, d] of Object.entries(meta?.fields ?? {})) {
@@ -123,7 +106,8 @@ export function EntryForm({ ops, registry, collection, id }) {
             const r = await ops.entries.create(collection, { locale, fields });
             if (applyResult(r, "Created.") && r.ok) {
                 setDirty(false);
-                window.location.href = `${BASE}/${collection}/${encodeURIComponent(r.data.id)}?locale=${encodeURIComponent(locale)}`;
+                // force: the create just landed, but React has not flushed setDirty(false) yet.
+                navigate(`${BASE}/${collection}/${encodeURIComponent(r.data.id)}?locale=${encodeURIComponent(locale)}`, { force: true });
             }
         }
         else {
@@ -212,7 +196,7 @@ export function EntryForm({ ops, registry, collection, id }) {
             return;
         const r = await ops.entries.delete(collection, id);
         if (r.ok)
-            window.location.href = `${BASE}/${collection}`;
+            navigate(`${BASE}/${collection}`, { force: true });
         else
             setBanner({ tone: "error", text: r.message });
     };
@@ -223,7 +207,7 @@ export function EntryForm({ ops, registry, collection, id }) {
     const present = record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale];
     const shared = Object.entries(meta.fields).filter(([key]) => !localeKeys.includes(key));
     const own = Object.entries(meta.fields).filter(([key]) => localeKeys.includes(key));
-    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], error: fieldErrors[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: (value) => { setFields((f) => ({ ...(f ?? {}), [key]: value })); setDirty(true); } }, key));
+    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], errors: fieldErrors, refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: (value) => { setFields((f) => ({ ...(f ?? {}), [key]: value })); setDirty(true); } }, key));
     const absent = !isNew && record !== null && fields === null && !record.locales[locale];
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx(Breadcrumb, { backHref: `${BASE}/${collection}`, items: [{ label: meta.title, href: `${BASE}/${collection}` }, { label: heading }] }), multilingual && !isNew && (_jsx(LocaleSwitcher, { registry: registry, present: present, parentLocales: parentLocales, value: locale, adding: adding, onSwitch: switchLocale, onAdd: (l) => void doAddLocale(l) })), multilingual && isNew && _jsxs("span", { className: "sm-hint", children: ["\u00B7 ", locale] })] }), right: _jsx(Button, { onClick: save, disabled: fields === null, children: isNew ? "Create" : "Save" }) }), _jsxs("div", { style: { flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "1fr var(--inspector-w)" }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 18, padding: "24px 32px", minWidth: 0, overflow: "auto" }, children: [banner && _jsx(Banner, { tone: banner.tone, onDismiss: () => setBanner(null), children: banner.text }), absent ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsxs("p", { children: ["This entry doesn't exist in ", locale, " yet. Adding it copies the ", entrySourceLocale(record, registry), " fields as the first ", locale, " draft."] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs(Button, { onClick: () => void doAddLocale(locale), disabled: adding || !parentLocales.includes(locale), title: parentLocales.includes(locale) ? undefined : `add ${locale} to the parent first`, children: ["Add ", locale] }), _jsxs(Button, { variant: "secondary", onClick: () => switchLocale(entrySourceLocale(record, registry)), children: ["Back to ", entrySourceLocale(record, registry)] })] })] })) : fields !== null ? (_jsxs(_Fragment, { children: [shared.length > 0 && (_jsxs(_Fragment, { children: [multilingual && _jsx(SectionLabel, { children: "Shared across languages" }), shared.map(widget)] })), own.length > 0 && (_jsxs(_Fragment, { children: [multilingual && _jsxs(SectionLabel, { children: ["In ", locale] }), own.map(widget)] }))] })) : !banner && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsxs("aside", { style: {
                             display: "flex", flexDirection: "column", gap: 16, padding: "16px 14px",

package/dist/admin/shell/ListView.js

@@ -2,11 +2,13 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TopBar } from "../ui/primitives.js";
+import { navigate } from "./router.js";
 export function ListView({ title, count, actions, columns, rows, empty }) {
     const grid = { gridTemplateColumns: columns.map((c) => c.width).join(" ") };
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx("span", { className: "sm-title", children: title }), count !== undefined && _jsx("span", { className: "sm-count", children: count })] }), right: actions }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: _jsxs("div", { className: "sm-table", children: [_jsx("div", { className: "sm-table__head", style: grid, children: columns.map((c) => _jsx("span", { children: c.label }, c.label)) }), _jsxs("div", { className: "sm-table__body", children: [rows.map((r) => {
                                     const clickable = Boolean(r.href || r.onClick);
-                                    const go = r.onClick ?? (r.href ? () => { window.location.href = r.href; } : undefined);
+                                    const href = r.href;
+                                    const go = r.onClick ?? (href ? () => { navigate(href); } : undefined);
                                     return (_jsx("div", { style: grid, role: clickable ? "button" : undefined, tabIndex: clickable ? 0 : undefined, className: clickable ? "sm-row sm-row--clickable" : "sm-row", onClick: go, onKeyDown: (e) => { if (go && (e.key === "Enter" || e.key === " ")) {
                                             e.preventDefault();
                                             go();

package/dist/admin/shell/PagesList.js

@@ -12,6 +12,7 @@ import { ListView } from "./ListView.js";
 import { openTemplates, pagesTreeRows, sourceLocaleOf } from "./pages-tree.js";
 import { Button, Segmented, StatusBadge } from "../ui/primitives.js";
 import { BASE } from "./base.js";
+import { navigate } from "./router.js";
 import { ErrorPane } from "./ErrorPane.js";
 const LOCALE_KEY = "smoodly.pages.locale";
 /** The selected locale survives a reload within the session; a stored
@@ -56,7 +57,7 @@ export function PagesList({ ops, registry }) {
         next.add(id); return next; });
     /** The editor opens in the locale selected here. */
     const openEditor = (id) => {
-        window.location.href = `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`;
+        navigate(`${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`);
     };
     /** Run an op; on success reload the list (and maybe navigate), else show the op's message. */
     const run = async (work, then) => {
@@ -167,7 +168,7 @@ export function PagesList({ ops, registry }) {
         if (!row.present)
             addLocale(row);
         else if (row.kind === "mount" && row.collection)
-            window.location.href = `${BASE}/${row.collection}`;
+            navigate(`${BASE}/${row.collection}`);
         else if (row.template !== null)
             openEditor(row.id);
         else if (row.hasChildren)

package/dist/admin/shell/RouteLink.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorHTMLAttributes } from "react";
+export declare function RouteLink({ href, onClick, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}): import("react").JSX.Element;

package/dist/admin/shell/RouteLink.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPlainLeftClick, navigate } from "./router.js";
+export function RouteLink({ href, onClick, ...rest }) {
+    return (_jsx("a", { href: href, ...rest, onClick: (e) => {
+            onClick?.(e);
+            if (isPlainLeftClick(e, rest.target)) {
+                e.preventDefault();
+                navigate(href);
+            }
+        } }));
+}

package/dist/admin/shell/SharedForm.js

@@ -15,28 +15,9 @@ import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
 import { Banner, Breadcrumb, Button, Divider, SectionLabel, Segmented, TopBar } from "../ui/primitives.js";
 import { entryTitle } from "./entries-list.js";
 import { BASE } from "./base.js";
+import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
+import { useLeaveGuard } from "./router.js";
 const STATUSES = ["Draft", "Published"];
-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;
-}
-function writeLocaleToUrl(next) {
-    try {
-        const u = new URL(window.location.href);
-        u.searchParams.set("locale", next);
-        window.history.replaceState(null, "", u);
-    }
-    catch {
-        // the URL is cosmetic here
-    }
-}
 export function SharedForm({ ops, registry, name }) {
     const item = registry.shared.find((s) => s.name === name);
     const multilingual = registry.locales.supported.length > 1;
@@ -48,6 +29,7 @@ export function SharedForm({ ops, registry, name }) {
     const [banner, setBanner] = useState(null);
     const [fieldErrors, setFieldErrors] = useState({});
     const [dirty, setDirty] = useState(false);
+    useLeaveGuard(dirty);
     const refTargets = useMemo(() => {
         const out = {};
         for (const [key, d] of Object.entries(item?.fields ?? {})) {
@@ -135,7 +117,7 @@ export function SharedForm({ ops, registry, name }) {
     const own = Object.entries(item.fields).filter(([key]) => localeKeys.includes(key));
     const styles = (fields?.[STYLES_KEY] ?? {});
     const pages = new Set(usage.filter((u) => u.sourceKind === "page").map((u) => u.sourceId));
-    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], error: fieldErrors[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, onChange: (value) => { setFields((f) => ({ ...(f ?? {}), [key]: value })); setDirty(true); } }, key));
+    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], errors: fieldErrors, refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, onChange: (value) => { setFields((f) => ({ ...(f ?? {}), [key]: value })); setDirty(true); } }, key));
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx(Breadcrumb, { backHref: `${BASE}/shared`, items: [{ label: "Shared content", href: `${BASE}/shared` }, { label: item.title }] }), multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: switchLocale, onAdd: () => undefined }))] }), right: _jsx(Button, { onClick: save, disabled: fields === null, children: "Save" }) }), _jsxs("div", { style: { flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "1fr var(--inspector-w)" }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 18, padding: "24px 32px", minWidth: 0, overflow: "auto" }, children: [banner && _jsx(Banner, { tone: banner.tone, onDismiss: () => setBanner(null), children: banner.text }), record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`, children: id })] }, id)))] })), fields !== null ? (_jsxs(_Fragment, { children: [shared.length > 0 && (_jsxs(_Fragment, { children: [multilingual && _jsx(SectionLabel, { children: "Shared across languages" }), shared.map(widget)] })), own.length > 0 && (_jsxs(_Fragment, { children: [multilingual && _jsxs(SectionLabel, { children: ["In ", locale] }), own.map(widget)] })), item.section !== undefined && Object.keys(item.styles).length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Styles" }), Object.entries(item.styles).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: styles[key], onChange: (value) => {
                                                     setFields((f) => ({ ...(f ?? {}), [STYLES_KEY]: { ...(f?.[STYLES_KEY] ?? {}), [key]: value } }));
                                                     setDirty(true);

package/dist/admin/shell/router.d.ts

@@ -0,0 +1,37 @@
+export type Route = {
+    segments: string[];
+    search: string;
+};
+/** The segments under `base`: "/admin/articles/x" → ["articles", "x"];
+ *  the mount itself, or a pathname outside it, → []. Segments stay as
+ *  written; the shell decodes the ones it uses, as it does for the
+ *  catch-all's params. */
+export declare function segmentsOf(pathname: string, base?: string): string[];
+/** A click the browser would turn into a same-tab navigation: left
+ *  button, no modifier, no other target, not already handled. */
+export declare function isPlainLeftClick(e: {
+    button: number;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    defaultPrevented: boolean;
+}, target?: string | null): boolean;
+export declare const LEAVE_MESSAGE = "Discard unsaved changes?";
+/** Leaving is allowed when no guard is dirty, else when the editor
+ *  confirms — asked once, however many guards are dirty. */
+export declare function mayLeave(guards: Iterable<() => boolean>, confirm: (message: string) => boolean): boolean;
+/** Move to `href` in place; true when the move happened. A push asks the
+ *  leave guard; a replace never leaves the view, so it does not ask.
+ *  `force` skips the guard for a view that has just saved or deleted its
+ *  record — React has not flushed its setDirty(false) yet. */
+export declare function navigate(href: string, opts?: {
+    replace?: boolean;
+    force?: boolean;
+}): boolean;
+/** The current route: empty until mount, then the URL, re-read on
+ *  popstate and after navigate(). */
+export declare function useRoute(): Route;
+/** Register the calling view as dirty: navigate() asks before leaving,
+ *  and beforeunload covers reload, closing the tab and a real link out. */
+export declare function useLeaveGuard(dirty: boolean): void;