smoodly 0.0.9 → 0.0.10

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/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 });
     };

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 ?? {})) {

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;

package/dist/admin/shell/router.js

@@ -0,0 +1,84 @@
+"use client";
+// packages/smoodly/src/admin/shell/router.ts
+// The admin's own router (spec 2026-09-08 client routing): the route is
+// the URL under BASE, held in React state and moved with pushState, so
+// the shell stays mounted and a click is a state change, not a document
+// load. The URL is the only source: the shell's first render is the
+// session gate, so no view exists before the mount effect has read it.
+// Next's router is not involved — native pushState updates its
+// usePathname without a refetch — and the admin core stays
+// framework-agnostic.
+import { useEffect, useState } from "react";
+import { BASE } from "./base.js";
+/** 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 function segmentsOf(pathname, base = BASE) {
+    if (pathname !== base && !pathname.startsWith(`${base}/`))
+        return [];
+    return pathname.slice(base.length).split("/").filter((s) => s !== "");
+}
+/** A click the browser would turn into a same-tab navigation: left
+ *  button, no modifier, no other target, not already handled. */
+export function isPlainLeftClick(e, target) {
+    if (e.defaultPrevented || e.button !== 0)
+        return false;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+        return false;
+    return !target || target === "_self";
+}
+export 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 function mayLeave(guards, confirm) {
+    for (const dirty of guards)
+        if (dirty())
+            return confirm(LEAVE_MESSAGE);
+    return true;
+}
+// ── the live router ──────────────────────────────────────────────────
+const guards = new Set();
+const listeners = new Set();
+function currentRoute() {
+    return { segments: segmentsOf(window.location.pathname), search: window.location.search };
+}
+const sameRoute = (a, b) => a.search === b.search && a.segments.length === b.segments.length && a.segments.every((s, i) => s === b.segments[i]);
+/** 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 function navigate(href, opts = {}) {
+    if (!opts.replace && !opts.force && !mayLeave(guards, (m) => window.confirm(m)))
+        return false;
+    window.history[opts.replace ? "replaceState" : "pushState"](null, "", href);
+    for (const listener of listeners)
+        listener();
+    return true;
+}
+/** The current route: empty until mount, then the URL, re-read on
+ *  popstate and after navigate(). */
+export function useRoute() {
+    const [route, setRoute] = useState({ segments: [], search: "" });
+    useEffect(() => {
+        const sync = () => setRoute((prev) => { const next = currentRoute(); return sameRoute(prev, next) ? prev : next; });
+        sync();
+        listeners.add(sync);
+        window.addEventListener("popstate", sync);
+        return () => { listeners.delete(sync); window.removeEventListener("popstate", sync); };
+    }, []);
+    return route;
+}
+/** Register the calling view as dirty: navigate() asks before leaving,
+ *  and beforeunload covers reload, closing the tab and a real link out. */
+export function useLeaveGuard(dirty) {
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const guard = () => true;
+        guards.add(guard);
+        const onBeforeUnload = (e) => { e.preventDefault(); e.returnValue = ""; };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => { guards.delete(guard); window.removeEventListener("beforeunload", onBeforeUnload); };
+    }, [dirty]);
+}

package/dist/admin/shell/session.js

@@ -8,7 +8,9 @@ import { createClient } from "@supabase/supabase-js";
 export function useAdminSession(auth) {
     const browser = typeof window !== "undefined";
     const [client] = useState(() => createClient(auth.url, auth.key, {
-        auth: { autoRefreshToken: browser, persistSession: browser, detectSessionInUrl: browser },
+        // Own storage key: a self-hoster's own supabase-js client in the same
+        // browser must never share the admin's session slot (DESIGN.md §1).
+        auth: { autoRefreshToken: browser, persistSession: browser, detectSessionInUrl: browser, storageKey: "smoodly-auth" },
     }));
     const [state, setState] = useState({ status: "loading" });
     const current = useRef(null);

package/dist/admin/ui/primitives.d.ts

@@ -44,7 +44,8 @@ export declare function TopBar({ left, right }: {
     left: ReactNode;
     right?: ReactNode;
 }): import("react").JSX.Element;
-/** `items` are crumbs; every one but the last is a link when given an href. */
+/** `items` are crumbs; every one but the last is a link when given an href.
+ *  Links route in place: the shell never reloads for a crumb. */
 export declare function Breadcrumb({ items, backHref }: {
     items: {
         label: string;

package/dist/admin/ui/primitives.js

@@ -7,6 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Moon, Sun } from "lucide-react";
 import { THEME_KEY } from "./theme.js";
+import { RouteLink } from "../shell/RouteLink.js";
 /** Lucide at the design system's size and stroke. */
 const ICON = { size: 14, strokeWidth: 1.5, "aria-hidden": true };
 /* ── brand ───────────────────────────────────────────────────────────── */
@@ -61,14 +62,15 @@ export function Field({ label, counter, hint, error, asDiv, children, style, cla
 export function TopBar({ left, right }) {
     return (_jsxs("header", { className: "sm-topbar", children: [_jsx("div", { className: "sm-topbar__left", children: left }), _jsx("div", { className: "sm-topbar__right", children: right })] }));
 }
-/** `items` are crumbs; every one but the last is a link when given an href. */
+/** `items` are crumbs; every one but the last is a link when given an href.
+ *  Links route in place: the shell never reloads for a crumb. */
 export function Breadcrumb({ items, backHref }) {
-    return (_jsxs("div", { className: "sm-crumbs", children: [backHref && _jsx("a", { className: "sm-back", href: backHref, "aria-label": "Back", children: "\u2190" }), items.map((it, i) => {
+    return (_jsxs("div", { className: "sm-crumbs", children: [backHref && _jsx(RouteLink, { className: "sm-back", href: backHref, "aria-label": "Back", children: "\u2190" }), items.map((it, i) => {
                 const last = i === items.length - 1;
                 return (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { className: "sm-crumbs__sep", children: "/" }), last
                             ? _jsx("span", { className: "sm-crumbs__here", children: it.label })
                             : it.href
-                                ? _jsx("a", { href: it.href, style: { color: "inherit" }, children: it.label })
+                                ? _jsx(RouteLink, { href: it.href, style: { color: "inherit" }, children: it.label })
                                 : _jsx("span", { children: it.label })] }, i));
             })] }));
 }

package/dist/admin/ui/theme.d.ts

@@ -1,4 +1,4 @@
-export declare const ADMIN_CSS = "\n@import url(\"https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap\");\n\n.sm-admin{\n  --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;\n  --font-mono:ui-monospace,Menlo,Consolas,monospace;\n  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;\n  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;\n  --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;\n\n  --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;\n  --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;\n  --nav-w:200px; --inspector-w:300px;\n  --border:1px solid var(--line);\n  --outline-selection:1.5px solid var(--selection);\n\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\nhtml[data-theme=\"dark\"] .sm-admin,.sm-admin[data-theme=\"dark\"]{\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n@media (prefers-color-scheme:dark){\n  html:not([data-theme=\"light\"]) .sm-admin:not([data-theme=\"light\"]){\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n}\n/* Last, and the same specificity as the host-attribute rule: an explicit\n   choice from the theme toggle wins over a dark <html> and over the OS. */\n.sm-admin[data-theme=\"light\"]{\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\n\n/* The admin owns the viewport; a host <body> margin would push it into a\n   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */\nbody:has(.sm-admin){margin:0}\n.sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}\n.sm-admin{\n  font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;\n  color:var(--text);background:var(--surface);\n  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;\n}\n.sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}\n/* :where() keeps this at zero specificity \u2014 a bare <a> is accent, but any\n   component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own\n   colour. Without this the element selector silently beat every one of them. */\n:where(.sm-admin a){color:var(--accent);text-decoration:none}\n:where(.sm-admin a:hover){color:var(--brand-500)}\n.sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}\n.sm-admin ::placeholder{color:var(--text-subtle)}\n.sm-admin ::selection{background:var(--accent-soft);color:var(--text)}\n.sm-mono{font-family:var(--font-mono)}\n\n/* \u2500\u2500 shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}\n.sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n.sm-nav{\n  display:flex;flex-direction:column;gap:24px;padding:16px 12px;\n  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;\n}\n.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}\n.sm-nav>.sm-nav__logo{margin-left:10px}\n.sm-nav__list{display:flex;flex-direction:column;gap:1px}\n.sm-nav-item{\n  display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;\n  color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;\n  background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);\n  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\n}\n.sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}\n.sm-nav-item[aria-current=\"page\"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}\n.sm-nav-item[aria-current=\"page\"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}\n/* Not greyed: the reference renders every inactive item at --text and marks\n   the unavailable ones only by being inert (no pointer, no hover). */\n.sm-nav-item[aria-disabled=\"true\"]{cursor:default}\n.sm-nav-item[aria-disabled=\"true\"]:hover{background:transparent}\n.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}\n.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}\n.sm-nav-item--icon{display:flex;align-items:center;gap:8px}\n.sm-when-light{display:var(--when-light);align-items:center;gap:8px}\n.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}\n.sm-avatar{\n  width:24px;height:24px;flex:none;border-radius:var(--radius-round);\n  background:var(--accent-soft);color:var(--accent);\n  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;\n}\n\n/* \u2500\u2500 top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-topbar{\n  height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;\n  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);\n}\n.sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}\n.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}\n.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}\n.sm-crumbs__sep{opacity:.5}\n.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}\n.sm-back:hover{color:var(--accent)}\n.sm-title{font-size:var(--text-xl);font-weight:600}\n.sm-count{color:var(--text-muted)}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-btn{\n  display:inline-flex;align-items:center;justify-content:center;gap:6px;\n  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;\n  font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;\n  text-decoration:none;\n}\n.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}\n.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}\n.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}\n.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}\n.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}\n.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}\n.sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}\n.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}\n.sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}\n.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}\n.sm-btn:disabled,.sm-btn[aria-disabled=\"true\"]{opacity:.5;cursor:default;pointer-events:none}\n.sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,\n.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{\n  outline:2px solid var(--accent);outline-offset:1px\n}\n\n.sm-iconbtn{\n  width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;\n  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);\n  font-size:12px;line-height:1;cursor:pointer;\n}\n.sm-iconbtn:hover{background:var(--hover);color:var(--text)}\n.sm-iconbtn--inverse{color:#EEF0F5}\n.sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}\n.sm-iconbtn:disabled{opacity:.3;cursor:default}\n.sm-iconbtn:disabled:hover{background:transparent}\n\n/* \u2500\u2500 fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}\n.sm-label{\n  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);\n  text-transform:uppercase;color:var(--text-muted);\n}\n.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}\n.sm-input,.sm-textarea,.sm-select{\n  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);\n  outline:0;box-shadow:none;\n}\n.sm-input,.sm-select{height:var(--control-h);padding:0 10px}\n.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}\n.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}\n.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}\n.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}\n.sm-input:focus,.sm-textarea:focus,.sm-select:focus,\n.sm-inputwrap:focus-within{\n  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);\n}\n.sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}\n.sm-select{\n  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;\n  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),\n    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);\n  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;\n  background-size:4px 4px,4px 4px;background-repeat:no-repeat;\n}\n.sm-inputwrap{\n  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;\n  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);\n}\n.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}\n.sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}\n.sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}\n.sm-error{color:var(--danger);font-size:var(--text-sm)}\n\n.sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}\n.sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}\n.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}\n.sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h);padding:0 4px 0 4px}\n.sm-listrow__toggle{\n  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 4px;\n  border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);font-weight:500;\n  text-align:left;cursor:pointer;\n}\n.sm-listrow__toggle:hover{color:var(--accent)}\n.sm-listrow__summary{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px;border-top:1px solid var(--line)}\n\n/* \u2500\u2500 data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}\n.sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}\n.sm-table__head{\n  height:34px;border-bottom:var(--border);font-family:var(--font-mono);\n  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);\n  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;\n}\n.sm-table__body{display:flex;flex-direction:column;padding-top:4px}\n.sm-row{\n  height:var(--row-h);border-radius:var(--radius-md);background:transparent;\n  border:0;font:inherit;color:inherit;text-align:left;width:100%;\n}\n.sm-row--clickable{cursor:pointer}\n.sm-row--clickable:hover{background:var(--surface-inset)}\n.sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.sm-cell--muted{color:var(--text-muted)}\n.sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}\n.sm-cell--title{font-weight:500}\n.sm-empty{padding:28px 8px;color:var(--text-muted)}\n.sm-chevron{\n  width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;\n  color:var(--text-muted);cursor:pointer;line-height:1;\n}\n.sm-chevron:hover{color:var(--text)}\n.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}\n.sm-cell--tree.sm-cell--parent{font-weight:600}\n.sm-rowmenu{\n  border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;\n  border-radius:var(--radius-md);line-height:1;height:24px;\n}\n.sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}\n\n.sm-badge{\n  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;\n}\n.sm-savestate{\n  display:inline-flex;align-items:center;gap:6px;padding:0 6px;\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n}\n.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}\n\n/* \u2500\u2500 navigation bits \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}\n.sm-tab{\n  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;\n  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;\n}\n.sm-tab:hover{color:var(--text)}\n.sm-tab[aria-selected=\"true\"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}\n.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}\n.sm-seg--stretch{width:100%}\n.sm-seg--disabled{opacity:.6}\n.sm-seg__opt:disabled{cursor:default}\n.sm-seg__opt{\n  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;\n  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;\n}\n.sm-seg__opt:hover{color:var(--text)}\n.sm-seg__opt[aria-pressed=\"true\"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}\n.sm-divider{height:1px;background:var(--line);flex:none}\n.sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.sm-sectionlabel--mono>.sm-label{\n  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);\n}\n.sm-banner{\n  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);\n  font-size:var(--text-md);\n}\n.sm-banner--error{background:var(--danger-soft);color:var(--danger)}\n.sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}\n.sm-banner--warn{background:var(--warn-soft);color:var(--warn)}\n\n/* \u2500\u2500 editor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}\n.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}\n.sm-canvas__meta{\n  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;\n  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);\n}\n.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}\n.sm-page{\n  position:relative;background:var(--page-bg);border-radius:var(--radius-md);\n  box-shadow:var(--shadow-page);min-height:100%;\n}\n.sm-inspector{\n  display:flex;flex-direction:column;min-height:0;overflow:hidden;\n  border-left:var(--border);background:var(--surface);\n}\n.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}\n.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}\n.sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}\n.sm-blocktag{\n  position:absolute;top:0;left:0;background:var(--selection);color:#fff;\n  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;\n  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;\n  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;\n}\n.sm-blocktoolbar{\n  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);\n  box-shadow:var(--shadow-float);\n}\n.sm-plus{\n  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);\n  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;\n}\n.sm-plus:hover{background:var(--brand-500)}\n.sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}\n.sm-tooltip{\n  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;\n  border-radius:var(--radius-sm);white-space:nowrap;\n}\n.sm-outline-row{\n  display:flex;align-items:center;justify-content:space-between;gap:4px;\n  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;\n  color:var(--text);font-weight:500;background:transparent;\n  border:1px solid var(--line);\n}\n.sm-outline-row--clickable{cursor:pointer}\n.sm-outline-row--clickable:hover{background:var(--surface-inset)}\n/* Selected and locked rows are read by their fill, so they drop the hairline \u2014\n   border-color, not border, so every row keeps the same 28px box. */\n.sm-outline-row--selected,.sm-outline-row--selected:hover{\n  background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;\n}\n.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}\n.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}\n.sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n\n.sm-picker{\n  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);\n  padding:6px;box-shadow:var(--shadow-pop);\n}\n.sm-picker__item{\n  display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;\n  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;\n}\n.sm-picker__item:hover{background:var(--nav-active-bg)}\n.sm-picker__icon{\n  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);\n  color:var(--accent);display:grid;place-items:center;font-size:13px;\n}\n.sm-dashed{\n  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);\n  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);\n}\n";
+export declare const ADMIN_CSS = "\n@import url(\"https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap\");\n\n.sm-admin{\n  --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;\n  --font-mono:ui-monospace,Menlo,Consolas,monospace;\n  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;\n  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;\n  --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;\n\n  --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;\n  --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;\n  --nav-w:200px; --inspector-w:380px;\n  --border:1px solid var(--line);\n  --outline-selection:1.5px solid var(--selection);\n\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\nhtml[data-theme=\"dark\"] .sm-admin,.sm-admin[data-theme=\"dark\"]{\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n@media (prefers-color-scheme:dark){\n  html:not([data-theme=\"light\"]) .sm-admin:not([data-theme=\"light\"]){\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n}\n/* Last, and the same specificity as the host-attribute rule: an explicit\n   choice from the theme toggle wins over a dark <html> and over the OS. */\n.sm-admin[data-theme=\"light\"]{\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\n\n/* The admin owns the viewport; a host <body> margin would push it into a\n   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */\nbody:has(.sm-admin){margin:0}\n.sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}\n.sm-admin{\n  font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;\n  color:var(--text);background:var(--surface);\n  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;\n}\n.sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}\n/* :where() keeps this at zero specificity \u2014 a bare <a> is accent, but any\n   component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own\n   colour. Without this the element selector silently beat every one of them. */\n:where(.sm-admin a){color:var(--accent);text-decoration:none}\n:where(.sm-admin a:hover){color:var(--brand-500)}\n.sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}\n.sm-admin ::placeholder{color:var(--text-subtle)}\n.sm-admin ::selection{background:var(--accent-soft);color:var(--text)}\n.sm-mono{font-family:var(--font-mono)}\n\n/* \u2500\u2500 shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}\n.sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n.sm-nav{\n  display:flex;flex-direction:column;gap:24px;padding:16px 12px;\n  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;\n}\n.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}\n.sm-nav>.sm-nav__logo{margin-left:10px}\n.sm-nav__list{display:flex;flex-direction:column;gap:1px}\n.sm-nav-item{\n  display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;\n  color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;\n  background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);\n  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\n}\n.sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}\n.sm-nav-item[aria-current=\"page\"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}\n.sm-nav-item[aria-current=\"page\"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}\n/* Not greyed: the reference renders every inactive item at --text and marks\n   the unavailable ones only by being inert (no pointer, no hover). */\n.sm-nav-item[aria-disabled=\"true\"]{cursor:default}\n.sm-nav-item[aria-disabled=\"true\"]:hover{background:transparent}\n.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}\n.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}\n.sm-nav-item--icon{display:flex;align-items:center;gap:8px}\n.sm-when-light{display:var(--when-light);align-items:center;gap:8px}\n.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}\n.sm-avatar{\n  width:24px;height:24px;flex:none;border-radius:var(--radius-round);\n  background:var(--accent-soft);color:var(--accent);\n  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;\n}\n\n/* \u2500\u2500 top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-topbar{\n  height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;\n  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);\n}\n.sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}\n.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}\n.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}\n.sm-crumbs__sep{opacity:.5}\n.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}\n.sm-back:hover{color:var(--accent)}\n.sm-title{font-size:var(--text-xl);font-weight:600}\n.sm-count{color:var(--text-muted)}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-btn{\n  display:inline-flex;align-items:center;justify-content:center;gap:6px;\n  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;\n  font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;\n  text-decoration:none;\n}\n.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}\n.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}\n.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}\n.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}\n.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}\n.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}\n.sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}\n.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}\n.sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}\n.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}\n.sm-btn:disabled,.sm-btn[aria-disabled=\"true\"]{opacity:.5;cursor:default;pointer-events:none}\n.sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,\n.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{\n  outline:2px solid var(--accent);outline-offset:1px\n}\n\n.sm-iconbtn{\n  width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;\n  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);\n  font-size:12px;line-height:1;cursor:pointer;\n}\n.sm-iconbtn:hover{background:var(--hover);color:var(--text)}\n.sm-iconbtn--inverse{color:#EEF0F5}\n.sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}\n.sm-iconbtn:disabled{opacity:.3;cursor:default}\n.sm-iconbtn:disabled:hover{background:transparent}\n\n/* \u2500\u2500 fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}\n.sm-label{\n  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);\n  text-transform:uppercase;color:var(--text-muted);\n}\n.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}\n.sm-input,.sm-textarea,.sm-select{\n  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);\n  outline:0;box-shadow:none;\n}\n.sm-input,.sm-select{height:var(--control-h);padding:0 10px}\n.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}\n.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}\n.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}\n.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}\n.sm-input:focus,.sm-textarea:focus,.sm-select:focus,\n.sm-inputwrap:focus-within{\n  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);\n}\n.sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}\n.sm-select{\n  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;\n  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),\n    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);\n  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;\n  background-size:4px 4px,4px 4px;background-repeat:no-repeat;\n}\n.sm-inputwrap{\n  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;\n  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);\n}\n.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}\n.sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}\n.sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}\n.sm-error{color:var(--danger);font-size:var(--text-sm)}\n/* \u2500\u2500 richtext \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-richtext{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-richtext__bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px}\n.sm-richtext__sep{width:1px;height:16px;margin:0 4px;background:var(--line)}\n.sm-richtext__bar .sm-iconbtn[aria-pressed=\"true\"]{background:var(--press);color:var(--text)}\n.sm-richtext__link{display:flex;align-items:center;gap:6px}\n.sm-richtext__content{\n  min-height:110px;padding:8px 10px;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);line-height:1.5;outline:0;\n}\n.sm-richtext__content:hover{background:var(--control-hover)}\n.sm-richtext__content:focus{background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring)}\n.sm-richtext__content>*+*{margin-top:.5em}\n.sm-richtext__content p,.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,\n.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6,\n.sm-richtext__content ul,.sm-richtext__content ol,.sm-richtext__content blockquote{margin:0}\n.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,\n.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-weight:600;line-height:1.25}\n.sm-richtext__content h1{font-size:var(--text-3xl)}\n.sm-richtext__content h2{font-size:var(--text-2xl)}\n.sm-richtext__content h3{font-size:var(--text-xl)}\n.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-size:var(--text-lg)}\n.sm-richtext__content ul,.sm-richtext__content ol{padding-left:18px}\n.sm-richtext__content li+li{margin-top:.25em}\n.sm-richtext__content blockquote{padding-left:10px;border-left:2px solid var(--line);color:var(--text-muted)}\n.sm-richtext__content a{color:var(--accent);text-decoration:underline}\n\n.sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}\n.sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}\n.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}\n.sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h);padding:0 4px 0 4px}\n.sm-listrow__toggle{\n  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 4px;\n  border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);font-weight:500;\n  text-align:left;cursor:pointer;\n}\n.sm-listrow__toggle:hover{color:var(--accent)}\n.sm-listrow__summary{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px;border-top:1px solid var(--line)}\n\n/* \u2500\u2500 data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}\n.sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}\n.sm-table__head{\n  height:34px;border-bottom:var(--border);font-family:var(--font-mono);\n  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);\n  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;\n}\n.sm-table__body{display:flex;flex-direction:column;padding-top:4px}\n.sm-row{\n  height:var(--row-h);border-radius:var(--radius-md);background:transparent;\n  border:0;font:inherit;color:inherit;text-align:left;width:100%;\n}\n.sm-row--clickable{cursor:pointer}\n.sm-row--clickable:hover{background:var(--surface-inset)}\n.sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.sm-cell--muted{color:var(--text-muted)}\n.sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}\n.sm-cell--title{font-weight:500}\n.sm-empty{padding:28px 8px;color:var(--text-muted)}\n.sm-chevron{\n  width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;\n  color:var(--text-muted);cursor:pointer;line-height:1;\n}\n.sm-chevron:hover{color:var(--text)}\n.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}\n.sm-cell--tree.sm-cell--parent{font-weight:600}\n.sm-rowmenu{\n  border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;\n  border-radius:var(--radius-md);line-height:1;height:24px;\n}\n.sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}\n\n.sm-badge{\n  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;\n}\n.sm-savestate{\n  display:inline-flex;align-items:center;gap:6px;padding:0 6px;\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n}\n.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}\n\n/* \u2500\u2500 navigation bits \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}\n.sm-tab{\n  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;\n  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;\n}\n.sm-tab:hover{color:var(--text)}\n.sm-tab[aria-selected=\"true\"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}\n.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}\n.sm-seg--stretch{width:100%}\n.sm-seg--disabled{opacity:.6}\n.sm-seg__opt:disabled{cursor:default}\n.sm-seg__opt{\n  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;\n  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;\n}\n.sm-seg__opt:hover{color:var(--text)}\n.sm-seg__opt[aria-pressed=\"true\"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}\n.sm-divider{height:1px;background:var(--line);flex:none}\n.sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.sm-sectionlabel--mono>.sm-label{\n  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);\n}\n.sm-banner{\n  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);\n  font-size:var(--text-md);\n}\n.sm-banner--error{background:var(--danger-soft);color:var(--danger)}\n.sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}\n.sm-banner--warn{background:var(--warn-soft);color:var(--warn)}\n\n/* \u2500\u2500 editor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}\n.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}\n.sm-canvas__meta{\n  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;\n  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);\n}\n.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}\n.sm-page{\n  position:relative;background:var(--page-bg);border-radius:var(--radius-md);\n  box-shadow:var(--shadow-page);min-height:100%;\n}\n.sm-inspector{\n  display:flex;flex-direction:column;min-height:0;overflow:hidden;\n  border-left:var(--border);background:var(--surface);\n}\n.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}\n.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}\n.sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}\n.sm-blocktag{\n  position:absolute;top:0;left:0;background:var(--selection);color:#fff;\n  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;\n  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;\n  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;\n}\n.sm-blocktoolbar{\n  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);\n  box-shadow:var(--shadow-float);\n}\n.sm-plus{\n  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);\n  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;\n}\n.sm-plus:hover{background:var(--brand-500)}\n.sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}\n.sm-tooltip{\n  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;\n  border-radius:var(--radius-sm);white-space:nowrap;\n}\n.sm-outline-row{\n  display:flex;align-items:center;justify-content:space-between;gap:4px;\n  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;\n  color:var(--text);font-weight:500;background:transparent;\n  border:1px solid var(--line);\n}\n.sm-outline-row--clickable{cursor:pointer}\n.sm-outline-row--clickable:hover{background:var(--surface-inset)}\n/* Selected and locked rows are read by their fill, so they drop the hairline \u2014\n   border-color, not border, so every row keeps the same 28px box. */\n.sm-outline-row--selected,.sm-outline-row--selected:hover{\n  background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;\n}\n.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}\n.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}\n.sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n\n.sm-picker{\n  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);\n  padding:6px;box-shadow:var(--shadow-pop);\n}\n.sm-picker__item{\n  display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;\n  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;\n}\n.sm-picker__item:hover{background:var(--nav-active-bg)}\n.sm-picker__icon{\n  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);\n  color:var(--accent);display:grid;place-items:center;font-size:13px;\n}\n.sm-dashed{\n  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);\n  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);\n}\n";
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export declare const THEME_KEY = "smoodly-theme";
 /** One <style> element and the theme boot, rendered once by AdminLayout. */