smoodly 0.0.10 → 0.0.12

package/dist/admin/forms/upload.d.ts

@@ -0,0 +1,17 @@
+import type { AdminOps, OpResult } from "../ops.ts";
+import { type AssetRecord } from "../../media.ts";
+export type Measured = {
+    width?: number;
+    height?: number;
+    duration?: number;
+    poster?: Blob;
+};
+export type UploadDeps = {
+    put(url: string, file: Blob, mime: string): Promise<void>;
+    measure(file: Blob, mime: string): Promise<Measured>;
+};
+export declare function uploadFile(ops: AdminOps["assets"], file: File, deps: UploadDeps): Promise<OpResult<AssetRecord>>;
+/** A raw PUT to the signed URL: the body is the file, the type its mime,
+ *  and the year-long cache-control Storage serves back (without the
+ *  header a signed upload lands as `no-cache`). */
+export declare function putSigned(url: string, file: Blob, mime: string): Promise<void>;

package/dist/admin/forms/upload.js

@@ -0,0 +1,33 @@
+import { MEDIA_CACHE_SECONDS } from "../../media.js";
+const stem = (name) => name.replace(/\.[^.]+$/, "");
+export async function uploadFile(ops, file, deps) {
+    const begun = await ops.beginUpload({ name: file.name, mime: file.type, size: file.size });
+    if (!begun.ok)
+        return begun;
+    try {
+        await deps.put(begun.data.uploadUrl, file, file.type);
+    }
+    catch (e) {
+        return { ok: false, code: "internal", message: `smoodly: upload failed — ${e instanceof Error ? e.message : String(e)}` };
+    }
+    const m = await deps.measure(file, file.type);
+    let posterId;
+    if (m.poster) {
+        const poster = await uploadFile(ops, new File([m.poster], `${stem(file.name)}-poster.jpg`, { type: "image/jpeg" }), deps);
+        if (poster.ok)
+            posterId = poster.data.id;
+    }
+    return ops.finishUpload(begun.data.id, { width: m.width, height: m.height, duration: m.duration, posterId });
+}
+/** A raw PUT to the signed URL: the body is the file, the type its mime,
+ *  and the year-long cache-control Storage serves back (without the
+ *  header a signed upload lands as `no-cache`). */
+export async function putSigned(url, file, mime) {
+    const res = await fetch(url, {
+        method: "PUT",
+        headers: { "content-type": mime, "x-upsert": "false", "cache-control": `max-age=${MEDIA_CACHE_SECONDS}` },
+        body: file,
+    });
+    if (!res.ok)
+        throw new Error(`${res.status} ${(await res.text()).slice(0, 200)}`);
+}

package/dist/admin/index.d.ts

@@ -1,4 +1,4 @@
-export type { AdminOps, AdminOpCall, AdminOpAction, OpResult, OpError, PageCreateInput, PageGetResult, SharedListItem, SharedGetResult } from "./ops.ts";
+export type { AdminOps, AdminOpCall, AdminOpAction, OpResult, OpError, PageCreateInput, PageGetResult, SharedListItem, SharedGetResult, AssetUsageItem } from "./ops.ts";
 export { createAdminOps, runAdminOp, type AdminEffects } from "./ops-impl.ts";
 export { fixedNodeSpecs, fixedNodeOf, ensureFixedNodes, type FixedNode } from "./fixed-nodes.ts";
 export { ensureSharedItems, initialSharedFields } from "./shared-items.ts";

package/dist/admin/next/op-handler.d.ts

@@ -1,6 +1,7 @@
 import type { ResolvedConfig } from "../../config.ts";
 import type { EntryStore } from "../../entry-store.ts";
 import type { PageStore } from "../../store.ts";
+import type { AssetStore } from "../../asset-store.ts";
 import { type AdminAuth } from "../auth.ts";
 import type { AdminOpAction } from "../ops.ts";
 export declare function createAdminOpHandler(deps: {
@@ -9,4 +10,6 @@ export declare function createAdminOpHandler(deps: {
     entries: EntryStore;
     auth: AdminAuth;
     href?: (path: string, locale: string) => string;
+    /** The media library; without it the assets ops answer "no media store". */
+    assets?: AssetStore;
 }): AdminOpAction;

package/dist/admin/next/op-handler.js

@@ -12,6 +12,7 @@ export function createAdminOpHandler(deps) {
         pages: deps.pages,
         entries: deps.entries,
         href: deps.href,
+        assets: deps.assets,
         effects: {
             // updateTag, not revalidateTag(tag, profile): the profile form is
             // stale-while-revalidate, so the first request after publish still

package/dist/admin/ops-impl.d.ts

@@ -1,5 +1,6 @@
 import type { ResolvedConfig } from "../config.ts";
 import type { EntryStore } from "../entry-store.ts";
+import type { AssetStore } from "../asset-store.ts";
 import type { PageStore } from "../store.ts";
 import type { AdminOpCall, AdminOps, OpResult } from "./ops.ts";
 export type AdminEffects = {
@@ -17,6 +18,8 @@ export declare function createAdminOps(deps: {
     effects?: AdminEffects;
     /** Locale-relative CMS path → site URL (the renderer's seam, applied here for the admin). Default: identity. */
     href?: (path: string, locale: string) => string;
+    /** The media library; absent = every assets op answers "no media store". */
+    assets?: AssetStore;
 }): AdminOps;
 /** Path-dispatch for the one-server-action seam. Own-property checks only —
  * "constructor.constructor" and prototype paths must not resolve. */

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/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,12 +1,6 @@
 import type { AdminOpAction } from "../ops.ts";
 import type { AdminRegistry } from "../serialize.ts";
 import { type AuthConfig } from "./session.ts";
-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;
     op: AdminOpAction;

package/dist/admin/shell/AdminApp.js

@@ -8,10 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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";
@@ -22,20 +22,11 @@ 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 { RouteLink } from "./RouteLink.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"];
-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" })] })] }));
-}
+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));
@@ -61,7 +52,9 @@ export function AdminApp({ registry, 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 }, `${head}/${tail ?? ""}`)] }));
+    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/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/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/media-list.d.ts

@@ -0,0 +1,8 @@
+import type { AssetKind } from "../../media.ts";
+export declare const KIND_FILTERS: readonly ["All", "Images", "Video", "Files"];
+export type KindFilter = (typeof KIND_FILTERS)[number];
+export declare const kindOfFilter: (f: KindFilter) => AssetKind | undefined;
+export declare function formatBytes(n: number): string;
+export declare const usageLabel: (n: number) => string;
+/** The `accept` attribute for a field: the registry's list narrowed to the field's kinds. */
+export declare function acceptFor(kinds: AssetKind[], accept: string[]): string;

package/dist/admin/shell/media-list.js

@@ -0,0 +1,14 @@
+export const KIND_FILTERS = ["All", "Images", "Video", "Files"];
+export const kindOfFilter = (f) => f === "Images" ? "image" : f === "Video" ? "video" : f === "Files" ? "file" : undefined;
+export function formatBytes(n) {
+    if (n < 1024)
+        return `${n} B`;
+    if (n < 1024 * 1024)
+        return `${Math.round(n / 1024)} KB`;
+    return `${Math.round((n / (1024 * 1024)) * 10) / 10} MB`;
+}
+export const usageLabel = (n) => (n === 0 ? "Not used" : n === 1 ? "Used in 1 place" : `Used in ${n} places`);
+/** The `accept` attribute for a field: the registry's list narrowed to the field's kinds. */
+export function acceptFor(kinds, accept) {
+    return accept.filter((m) => kinds.some((k) => (k === "file" ? !m.startsWith("image/") && !m.startsWith("video/") : m.startsWith(`${k}/`)))).join(",");
+}

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

@@ -0,0 +1,8 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare function Modal({ title, width, onClose, children, footer }: {
+    title: string;
+    width?: number;
+    onClose(): void;
+    children: ReactNode;
+    footer?: ReactNode;
+}): ReactElement;

package/dist/admin/ui/Modal.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The one modal: a fixed overlay (click outside or Escape closes) and a
+// centred panel with a title row. Same overlay shape as InsertPicker.
+import { useEffect } from "react";
+import { IconButton } from "./primitives.js";
+export function Modal({ title, width = 720, onClose, children, footer }) {
+    useEffect(() => {
+        const onKey = (e) => { if (e.key === "Escape")
+            onClose(); };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onClose]);
+    return (_jsx("div", { className: "sm-modal", onClick: onClose, children: _jsxs("div", { className: "sm-modal__panel", role: "dialog", "aria-label": title, style: { width }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "sm-modal__head", children: [_jsx("span", { className: "sm-title", children: title }), _jsx(IconButton, { label: "Close", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "sm-modal__body", children: children }), footer && _jsx("div", { className: "sm-modal__foot", children: footer })] }) }));
+}

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

@@ -5,7 +5,7 @@ import type { SaveState } from "../editor/autosave.ts";
 export declare function Logo({ height }: {
     height?: number;
 }): import("react").JSX.Element;
-/** Light ⇄ dark, remembered in localStorage.
+/** Light ⇄ dark, remembered in localStorage; an entry in the rail's user menu.
  *  The attribute goes on the ADMIN wrapper, never the host <html>: a customer's
  *  site may own `data-theme` there. Which half of the button shows is decided by
  *  --when-light/--when-dark in the same token block as the colors, so the icon