smoodly 0.0.9 → 0.0.11

package/dist/admin/ops-impl.js

@@ -1,4 +1,6 @@
-import { entryFieldsIn } from "../entry-store.js";
+import { entryFieldsIn, entryTitleIn } from "../entry-store.js";
+import { ASSET_COLLECTION } from "../media.js";
+import { BASE } from "./shell/base.js";
 import { affectedTargets, entryTag, pageTag, sharedTag } from "../revalidate.js";
 import { ensureFixedNodes, fixedNodeOf } from "./fixed-nodes.js";
 import { ensureSharedItems } from "./shared-items.js";
@@ -76,8 +78,10 @@ const classify = (e) => {
         return err("validation", message);
     if (message.includes("not a valid slug"))
         return err("validation", message);
-    if (message.includes("no page") || message.includes("no entry") || message.includes("no collection"))
+    if (message.includes("no page") || message.includes("no entry") || message.includes("no collection") || message.includes("no asset"))
         return err("not_found", message);
+    if (message.includes("not pending"))
+        return err("conflict", message);
     return err("internal", message);
 };
 export function createAdminOps(deps) {
@@ -147,6 +151,29 @@ export function createAdminOps(deps) {
     const def = config.locales.default;
     /** The name messages use for a node: its default-locale slug, else any locale's, else the id. */
     const nameOf = (r) => r.locales[def]?.slug ?? Object.values(r.locales)[0]?.slug ?? r.id;
+    const assets = deps.assets;
+    const noMedia = () => err("internal", "smoodly: no media store is configured — pass `assets` to createAdminOpHandler.");
+    const mb = (bytes) => `${Math.round((bytes / (1024 * 1024)) * 10) / 10} MB`;
+    const isDim = (v) => v === undefined || (typeof v === "number" && Number.isFinite(v) && v >= 0);
+    /** What an asset's usage row points at, labelled for the Media screen. */
+    const describeSource = async (sourceKind, sourceId) => {
+        if (sourceKind === "page") {
+            const record = await pages.getPage(sourceId);
+            if (!record)
+                return { title: sourceId, href: null };
+            return { title: record.locales[def]?.title ?? Object.values(record.locales)[0]?.title ?? sourceId, href: `${BASE}/pages/${sourceId}` };
+        }
+        for (const item of config.registry.shared ?? []) {
+            if (await entries.get(item.name, sourceId))
+                return { title: item.title, href: `${BASE}/shared/${encodeURIComponent(item.name)}` };
+        }
+        for (const c of config.registry.collections ?? []) {
+            const record = await entries.get(c.name, sourceId);
+            if (record)
+                return { title: entryTitleIn(record, def, c), href: `${BASE}/${c.name}/${sourceId}` };
+        }
+        return { title: sourceId, href: null };
+    };
     const owned = (record, verb) => err("blocked", `smoodly: "${nameOf(record)}" is owned by code — ${verb}.`);
     /** The record serving "/" — guarded whether or not a registration claims
      *  its slug: the config's homePageSlug is what routes it. Judged by the
@@ -487,6 +514,60 @@ export function createAdminOps(deps) {
                 return ok(changed);
             }),
         },
+        assets: {
+            list: (query) => guard(async () => (assets ? ok(await assets.list(query)) : noMedia())),
+            get: (id) => guard(async () => {
+                if (!assets)
+                    return noMedia();
+                const record = await assets.get(id);
+                return record ? ok(record) : err("not_found", `smoodly: no asset "${id}".`);
+            }),
+            beginUpload: (input) => guard(async () => {
+                if (!assets)
+                    return noMedia();
+                if (typeof input?.name !== "string" || typeof input.mime !== "string" || typeof input.size !== "number") {
+                    return err("validation", "smoodly: an upload needs a name, a mime type and a size.");
+                }
+                if (!config.media.accept.includes(input.mime))
+                    return err("validation", `smoodly: "${input.mime}" is not an accepted file type.`);
+                if (input.size > config.media.maxSize)
+                    return err("validation", `smoodly: the file is larger than ${mb(config.media.maxSize)}.`);
+                return ok(await assets.beginUpload({ filename: input.name, mime: input.mime, size: input.size }));
+            }),
+            finishUpload: (id, dims) => guard(async () => {
+                if (!assets)
+                    return noMedia();
+                const d = dims ?? {};
+                if (!isDim(d.width) || !isDim(d.height) || !isDim(d.duration) || (d.posterId !== undefined && typeof d.posterId !== "string")) {
+                    return err("validation", "smoodly: malformed dimensions.");
+                }
+                return ok(await assets.finishUpload(id, d));
+            }),
+            update: (id, meta) => guard(async () => {
+                if (!assets)
+                    return noMedia();
+                const patch = {};
+                for (const key of ["title", "alt", "caption", "credit"]) {
+                    const v = (meta ?? {})[key];
+                    if (v === undefined)
+                        continue;
+                    if (v !== null && typeof v !== "string")
+                        return err("validation", `smoodly: ${key} must be text.`);
+                    patch[key] = v;
+                }
+                return ok(await assets.update(id, patch));
+            }),
+            delete: (id) => guard(async () => (assets ? (await assets.delete(id), ok(null)) : noMedia())),
+            usage: (id) => guard(async () => {
+                if (!assets)
+                    return noMedia();
+                const rows = await entries.referencesTo(ASSET_COLLECTION, id);
+                const out = [];
+                for (const r of rows)
+                    out.push({ ...r, ...(await describeSource(r.sourceKind, r.sourceId)) });
+                return ok(out);
+            }),
+        },
         preview: {
             enable: () => guard(async () => (await effects?.draft?.enable(), ok(null))),
             disable: () => guard(async () => (await effects?.draft?.disable(), ok(null))),

package/dist/admin/ops.d.ts

@@ -1,6 +1,8 @@
 import type { PageRecord } from "../store.ts";
 import type { PageTree } from "../render.tsx";
 import type { EntryRecord, EntryUsage } from "../entry-store.ts";
+import type { AssetRecord, AssetMeta } from "../media.ts";
+import type { AssetPage, AssetQuery, FinishInput, UploadTicket } from "../asset-store.ts";
 import type { FieldError } from "./validate.ts";
 export type OpError = {
     ok: false;
@@ -70,6 +72,14 @@ export type SharedGetResult = {
     /** Who links it: "used on N pages". */
     usage: EntryUsage[];
 };
+/** One place an asset is used: the source row, the field, a label and an admin link. */
+export type AssetUsageItem = {
+    sourceKind: string;
+    sourceId: string;
+    sourceField: string;
+    title: string;
+    href: string | null;
+};
 export type AdminOps = {
     pages: {
         /** Lists every node, materializing fixed pages and collection mounts (in every supported locale) first. */
@@ -126,6 +136,23 @@ export type AdminOps = {
         save(name: string, locale: string, fields: Record<string, unknown>): Promise<OpResult<EntryRecord>>;
         setStatus(name: string, locale: string, status: "draft" | "published"): Promise<OpResult<EntryRecord>>;
     };
+    assets: {
+        /** Ready assets, newest first, paged by cursor; `kind` and `search` filter. */
+        list(query?: AssetQuery): Promise<OpResult<AssetPage>>;
+        get(id: string): Promise<OpResult<AssetRecord>>;
+        /** Validates type and size against config.media, inserts a pending row, mints the signed upload URL (spec 2026-09-08 §6). */
+        beginUpload(input: {
+            name: string;
+            mime: string;
+            size: number;
+        }): Promise<OpResult<UploadTicket>>;
+        /** Marks the row ready with what the browser measured. */
+        finishUpload(id: string, dims: FinishInput): Promise<OpResult<AssetRecord>>;
+        update(id: string, meta: AssetMeta): Promise<OpResult<AssetRecord>>;
+        /** Blocked while any draft or published version references the asset. */
+        delete(id: string): Promise<OpResult<null>>;
+        usage(id: string): Promise<OpResult<AssetUsageItem[]>>;
+    };
     preview: {
         enable(): Promise<OpResult<null>>;
         disable(): Promise<OpResult<null>>;

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

@@ -60,5 +60,10 @@ export type AdminRegistry = {
     homePageSlug: string;
     /** How deep editors may nest pages; 1 = flat. */
     pageDepth: number;
+    /** Upload limits, so a widget can refuse a file before the round trip. */
+    media: {
+        maxSize: number;
+        accept: string[];
+    };
 };
 export declare function serializeAdminConfig(config: ResolvedConfig): AdminRegistry;

package/dist/admin/serialize.js

@@ -67,5 +67,6 @@ export function serializeAdminConfig(config) {
         locales: config.locales,
         homePageSlug: config.homePageSlug,
         pageDepth: config.pageDepth,
+        media: { maxSize: config.media.maxSize, accept: [...config.media.accept] },
     };
 }

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

@@ -1,9 +1,8 @@
 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 AdminApp({ registry, op, auth }: {
     registry: AdminRegistry;
-    segments: string[];
     op: AdminOpAction;
     auth: AuthConfig;
 }): import("react").JSX.Element;

package/dist/admin/shell/AdminApp.js

@@ -3,12 +3,15 @@
 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,
-// its 300px inspector). The shell is viewport-height; every column scrolls
-// inside itself.
+// Layout is the design system's three columns: the 72px icon rail
+// (shell/IconRail.tsx), then the main column whose views own their own
+// 48px top bar (the editor adds the third, its inspector). The shell is
+// viewport-height; every column scrolls inside itself.
 import { useState } from "react";
 import { makeClientOps } from "../client-ops.js";
 import { PagesList } from "./PagesList.js";
@@ -19,22 +22,16 @@ import { SharedForm } from "./SharedForm.js";
 import { EditorView } from "../editor/EditorView.js";
 import { LoginView } from "./LoginView.js";
 import { useAdminSession } from "./session.js";
-import { Logo, ThemeToggle } from "../ui/primitives.js";
-import { BASE } from "./base.js";
+import { IconRail } from "./IconRail.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));
-    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 }) {
+import { MediaScreen } from "./MediaScreen.js";
+import { AssetsProvider } from "../forms/assets-context.js";
+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") {
@@ -55,7 +52,9 @@ export function AdminApp({ registry, segments, op, auth }) {
         main = _jsx(SharedList, { ops: ops, registry: registry });
     else if (head === "shared" && tail)
         main = _jsx(SharedForm, { ops: ops, registry: registry, name: decodeURIComponent(tail) });
+    else if (head === "media")
+        main = _jsx(MediaScreen, {});
     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 (_jsx(AssetsProvider, { ops: ops, media: registry.media, children: _jsxs("div", { className: "sm-shell", children: [_jsx(IconRail, { 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/IconRail.d.ts

@@ -0,0 +1,7 @@
+import type { AdminRegistry } from "../serialize.ts";
+export declare function IconRail({ registry, active, email, onSignOut }: {
+    registry: AdminRegistry;
+    active: string;
+    email?: string;
+    onSignOut: () => void;
+}): import("react").JSX.Element;

package/dist/admin/shell/IconRail.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/smoodly/src/admin/shell/IconRail.tsx
+// The admin's primary navigation: the design system's 72px IconRail
+// (design_handoff_smoodly_cms/components/navigation/IconRail), which
+// replaced the 200px SideNav so the visual editor gets the width. Ported
+// markup-for-markup; the handoff's click handlers are the shell's router.
+//
+// Items are registry-derived, never separately configured: Pages, then
+// Collections — one rail item whose flyout lists every collection — then
+// Shared when the registry has shared items, Media, and Settings, shown
+// but inert until it exists. The user avatar is pinned to the bottom and
+// opens the same flyout with the theme toggle and Sign out, which the
+// old nav's footer held.
+//
+// Flyouts: click toggles, Esc closes and returns focus to the trigger,
+// ↑/↓ move between entries, a pointer down outside closes. A child being
+// active highlights its parent tile and the entry inside the menu.
+import { useEffect, useId, useRef, useState } from "react";
+import { ChevronDown, Image, LayoutPanelTop, Library, Settings2, Square } from "lucide-react";
+import { ThemeToggle } from "../ui/primitives.js";
+import { BASE } from "./base.js";
+import { RouteLink } from "./RouteLink.js";
+/** Lucide at the rail's size and stroke (the tile's CSS restates both). */
+const ICON = { size: 18, strokeWidth: 1.75, "aria-hidden": true };
+/** The app icon, inlined: a package can't ship a file into the host app's
+ *  /public. Brand blue on white in both themes, so no --logo-filter. */
+function AppIcon() {
+    return (_jsxs("svg", { className: "sm-rail__logo", viewBox: "0 0 89 86", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("path", { fill: "#0038B1", d: "M0 51.5552C0 24.3141 25.0505 0 52.5493 0H52.7761C74.4707 0 89 14.6336 89 34.445C89 61.6862 64.4034 86 36.0066 86C14.0946 86 0 70.9165 0 51.5552Z" }), _jsx("path", { fill: "#FFFFFF", d: "M23.25 46.1188C23.25 33.0027 34.8806 21.2959 47.6479 21.2959H47.7532C57.8257 21.2959 64.5714 28.3417 64.5714 37.8805C64.5714 50.9966 53.1516 62.7033 39.9674 62.7033C29.7939 62.7033 23.25 55.4409 23.25 46.1188Z" })] }));
+}
+export function IconRail({ registry, active, email, onSignOut }) {
+    const root = useRef(null);
+    const uid = useId();
+    const [open, setOpen] = useState(null);
+    const menuId = (key) => `sm-rail-menu${uid}${key}`;
+    const toggle = (key) => setOpen((cur) => (cur === key ? null : key));
+    const close = () => setOpen(null);
+    // Opening moves focus into the menu; a pointer down outside closes it.
+    useEffect(() => {
+        if (!open || !root.current)
+            return;
+        root.current.querySelector(`#${CSS.escape(menuId(open))} [role=menuitem]`)?.focus();
+        const onPointerDown = (e) => {
+            if (e.target instanceof Node && !root.current?.contains(e.target))
+                close();
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const onKeyDown = (e) => {
+        if (!open || !root.current)
+            return;
+        if (e.key === "Escape") {
+            close();
+            root.current.querySelector(`[aria-controls="${menuId(open)}"]`)?.focus();
+        }
+        else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            const items = Array.from(root.current.querySelectorAll(`#${CSS.escape(menuId(open))} [role=menuitem]`));
+            if (!items.length)
+                return;
+            e.preventDefault();
+            const i = items.indexOf(document.activeElement);
+            items[(i + (e.key === "ArrowDown" ? 1 : -1) + items.length) % items.length].focus();
+        }
+    };
+    const link = (key, label, icon, href) => (_jsx("li", { className: "sm-rail__item", children: href ? (_jsxs(RouteLink, { className: "sm-rail__btn", href: href, "aria-current": key === active ? "page" : undefined, onClick: close, children: [_jsx("span", { className: "sm-rail__tile", children: icon }), _jsx("span", { className: "sm-rail__label", children: label })] })) : (_jsxs("a", { className: "sm-rail__btn", "aria-disabled": true, children: [_jsx("span", { className: "sm-rail__tile", children: icon }), _jsx("span", { className: "sm-rail__label", children: label })] })) }));
+    const collections = registry.collections;
+    const collectionActive = collections.some((c) => c.name === active);
+    const name = email?.split("@")[0] ?? "Editor";
+    const initials = name.slice(0, 2).toUpperCase();
+    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(Square, { ...ICON }), `${BASE}/pages`), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": open === "collections", "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsxs("span", { className: "sm-rail__tile", children: [_jsx(Library, { ...ICON }), _jsx("span", { className: "sm-rail__chev", children: _jsx(ChevronDown, { ...ICON, size: 8, strokeWidth: 3 }) })] }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsxs("ul", { className: "sm-rail__menu", role: "menu", id: menuId("collections"), "data-open": open === "collections", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: "Collections" }), collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: `${BASE}/${c.name}`, "aria-current": c.name === active ? "page" : undefined, onClick: close, children: _jsx("span", { children: c.title }) }) }, c.name)))] })] })), registry.shared.length > 0 && link("shared", "Shared", _jsx(LayoutPanelTop, { ...ICON }), `${BASE}/shared`), link("media", "Media", _jsx(Image, { ...ICON }), `${BASE}/media`), link("settings", "Settings", _jsx(Settings2, { ...ICON }), null)] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
+}

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/MediaScreen.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import type { AssetRecord } from "../../media.ts";
+import type { AssetUsageItem } from "../ops.ts";
+export declare function MediaScreen({ initialItems, initialSelected, initialUsage }: {
+    initialItems?: AssetRecord[];
+    initialSelected?: AssetRecord | null;
+    initialUsage?: AssetUsageItem[];
+}): ReactElement;

package/dist/admin/shell/MediaScreen.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The Media screen (spec 2026-09-08 media §10): the library grid full
+// page with search, a kind filter and upload; an inspector on selection
+// with the asset's metadata (saved on blur), its facts and where it is
+// used. Delete stays disabled with the reason while anything uses it.
+import { useCallback, useEffect, useState } from "react";
+import { useAssets } from "../forms/assets-context.js";
+import { uploadFile } from "../forms/upload.js";
+import { MediaGrid } from "../forms/MediaGrid.js";
+import { Banner, Button, Field, Segmented, TopBar } from "../ui/primitives.js";
+import { RouteLink } from "./RouteLink.js";
+import { KIND_FILTERS, acceptFor, formatBytes, kindOfFilter, usageLabel } from "./media-list.js";
+const META = ["title", "alt", "caption", "credit"];
+export function MediaScreen({ initialItems = [], initialSelected = null, initialUsage = [] }) {
+    const assets = useAssets();
+    const [items, setItems] = useState(initialItems);
+    const [search, setSearch] = useState("");
+    const [filter, setFilter] = useState("All");
+    const [selected, setSelected] = useState(initialSelected);
+    const [usage, setUsage] = useState(initialUsage);
+    const [meta, setMeta] = useState({
+        title: initialSelected?.title ?? "", alt: initialSelected?.alt ?? "", caption: initialSelected?.caption ?? "", credit: initialSelected?.credit ?? "",
+    });
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const load = useCallback(() => {
+        assets.ops.list({ kind: kindOfFilter(filter), search: search || undefined })
+            .then((r) => (r.ok ? setItems(r.data.items) : setError(r.message)))
+            .catch(() => setError("Couldn't reach the server."));
+    }, [assets, filter, search]);
+    useEffect(load, [load]);
+    useEffect(() => {
+        if (!selected)
+            return;
+        setMeta({ title: selected.title ?? "", alt: selected.alt ?? "", caption: selected.caption ?? "", credit: selected.credit ?? "" });
+        if (initialSelected?.id === selected.id)
+            return;
+        assets.ops.usage(selected.id).then((r) => setUsage(r.ok ? r.data : [])).catch(() => setUsage([]));
+    }, [selected, assets, initialSelected]);
+    const saveMeta = async (key) => {
+        if (!selected)
+            return;
+        const next = meta[key].trim() || null;
+        if ((selected[key] ?? null) === next)
+            return;
+        const r = await assets.ops.update(selected.id, { [key]: next });
+        if (!r.ok) {
+            setError(r.message);
+            return;
+        }
+        assets.remember(r.data);
+        setSelected(r.data);
+        setItems((all) => all.map((a) => (a.id === r.data.id ? r.data : a)));
+    };
+    const onFiles = async (files) => {
+        const file = files?.[0];
+        if (!file)
+            return;
+        setBusy(true);
+        setError(null);
+        const r = await uploadFile(assets.ops, file, assets.upload);
+        setBusy(false);
+        if (!r.ok) {
+            setError(r.message);
+            return;
+        }
+        assets.remember(r.data);
+        setSelected(r.data);
+        load();
+    };
+    const remove = async () => {
+        if (!selected || !window.confirm(`Delete "${selected.title ?? selected.filename}"? This cannot be undone.`))
+            return;
+        const r = await assets.ops.delete(selected.id);
+        if (!r.ok) {
+            setError(r.message);
+            return;
+        }
+        setSelected(null);
+        load();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx("span", { className: "sm-title", children: "Media" }), _jsx("span", { className: "sm-count", children: items.length })] }), right: _jsxs("div", { className: "sm-picker-bar", children: [_jsx("input", { className: "sm-input", placeholder: "Search media", value: search, onChange: (e) => setSearch(e.target.value), style: { width: 220 } }), _jsx(Segmented, { options: KIND_FILTERS, value: filter, onChange: setFilter }), _jsxs("label", { className: "sm-btn sm-btn--primary", children: [busy ? "Uploading…" : "Upload", _jsx("input", { type: "file", accept: acceptFor(["image", "video", "file"], assets.media.accept), hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] })] }) }), error && _jsx(Banner, { tone: "error", onDismiss: () => setError(null), children: error }), _jsxs("div", { className: "sm-mediascreen", style: selected ? undefined : { gridTemplateColumns: "1fr" }, children: [_jsx("div", { className: "sm-mediascreen__grid", children: _jsx(MediaGrid, { items: items, selectedId: selected?.id, onSelect: (a) => setSelected(a.id === selected?.id ? null : a) }) }), selected && (_jsxs("aside", { className: "sm-mediascreen__inspector", children: [_jsx("div", { className: "sm-media__thumb", style: { aspectRatio: selected.width && selected.height ? `${selected.width} / ${selected.height}` : "4 / 3" }, children: selected.kind === "image" && _jsx("img", { src: selected.url, alt: "", style: { left: 0, top: 0, width: "100%", height: "100%" } }) }), META.map((key) => (_jsx(Field, { label: key === "alt" ? "Alt text" : key[0].toUpperCase() + key.slice(1), children: _jsx("input", { className: "sm-input", value: meta[key], onChange: (e) => setMeta((m) => ({ ...m, [key]: e.target.value })), onBlur: () => { void saveMeta(key); } }) }, key))), _jsxs("div", { className: "sm-facts", children: [_jsx("span", { children: "File" }), _jsx("span", { children: selected.filename }), _jsx("span", { children: "Type" }), _jsx("span", { children: selected.mime }), _jsx("span", { children: "Size" }), _jsx("span", { children: formatBytes(selected.size) }), selected.width && selected.height && _jsxs(_Fragment, { children: [_jsx("span", { children: "Dimensions" }), _jsxs("span", { children: [selected.width, "\u00D7", selected.height] })] }), selected.duration !== null && _jsxs(_Fragment, { children: [_jsx("span", { children: "Duration" }), _jsxs("span", { children: [Math.round(selected.duration), " s"] })] })] }), _jsxs("div", { className: "sm-usage", children: [_jsx("span", { className: "sm-label", children: usageLabel(usage.length) }), usage.map((u, i) => u.href
+                                        ? _jsxs(RouteLink, { href: u.href, children: [u.title, " \u00B7 ", u.sourceField] }, `${u.sourceId}-${i}`)
+                                        : _jsxs("span", { children: [u.title, " \u00B7 ", u.sourceField] }, `${u.sourceId}-${i}`))] }), _jsx(Button, { variant: "secondary", disabled: usage.length > 0, title: usage.length > 0 ? "Remove it from those places first." : undefined, onClick: () => { void remove(); }, children: "Delete" })] }))] })] }));
+}

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