smoodly 0.0.9 → 0.0.11

package/dist/admin/ui/theme.js

@@ -74,7 +74,7 @@ const SCALE = `
 
   --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;
   --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;
-  --nav-w:200px; --inspector-w:300px;
+  --nav-w:72px; --inspector-w:380px;
   --border:1px solid var(--line);
   --outline-selection:1.5px solid var(--selection);
 `;
@@ -113,13 +113,61 @@ body:has(.sm-admin){margin:0}
 /* ── shell ─────────────────────────────────────────────────────────── */
 .sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
 .sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
-.sm-nav{
-  display:flex;flex-direction:column;gap:24px;padding:16px 12px;
-  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;
-}
-.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}
-.sm-nav>.sm-nav__logo{margin-left:10px}
-.sm-nav__list{display:flex;flex-direction:column;gap:1px}
+.sm-wordmark{height:18px;width:auto;filter:var(--logo-filter);flex:none}
+/* The design system's IconRail (components/navigation/IconRail.html),
+   ported as-is: a 72px rail, 18px Lucide icons over a 10px label, a
+   40×32 active tile, the app icon on top and the avatar at the bottom. */
+.sm-rail{
+  width:var(--nav-w);height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;
+  padding:14px 6px 12px;background:var(--surface);border-right:var(--border);color:var(--text);
+  font:500 10px/1 var(--font-sans);position:relative;
+}
+.sm-rail__logo{width:28px;height:28px;display:block;flex:none}
+.sm-rail__list{display:flex;flex-direction:column;gap:6px;width:100%;margin:0;padding:0;list-style:none}
+.sm-rail__item{position:relative}
+.sm-rail__btn{
+  appearance:none;background:none;border:0;margin:0;padding:2px 0;width:100%;display:flex;flex-direction:column;
+  align-items:center;gap:5px;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-md);text-decoration:none;
+}
+.sm-rail__btn:hover{color:inherit}
+.sm-rail__btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}
+.sm-rail__tile{position:relative;width:40px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;transition:background .12s}
+.sm-rail__btn:hover .sm-rail__tile{background:var(--surface-inset)}
+.sm-rail__btn[aria-current="page"],.sm-rail__btn[aria-expanded="true"]{color:var(--nav-active-fg);font-weight:600}
+.sm-rail__btn[aria-current="page"]:hover,.sm-rail__btn[aria-expanded="true"]:hover{color:var(--nav-active-fg)}
+.sm-rail__btn[aria-current="page"] .sm-rail__tile,.sm-rail__btn[aria-expanded="true"] .sm-rail__tile{background:var(--nav-active-bg)}
+.sm-rail__tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.sm-rail__chev{position:absolute;right:3px;bottom:2px;width:8px;height:8px}
+.sm-rail__chev svg{width:8px;height:8px;stroke-width:3}
+.sm-rail__label{letter-spacing:.01em;white-space:nowrap}
+/* Not greyed: the reference renders every inactive item at --text and marks
+   the unavailable ones only by being inert (no pointer, no hover). */
+.sm-rail__btn[aria-disabled="true"]{cursor:default}
+.sm-rail__btn[aria-disabled="true"]:hover .sm-rail__tile{background:transparent}
+.sm-rail__foot{margin-top:auto;display:flex;flex-direction:column;align-items:center}
+.sm-rail__user{
+  width:26px;height:26px;border-radius:var(--radius-round);background:var(--accent-soft);color:var(--accent);
+  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;border:0;cursor:pointer;padding:0;
+}
+.sm-rail__user:focus-visible{outline:2px solid var(--accent);outline-offset:1px;box-shadow:none}
+/* Flyout: 6px right of the rail, aligned with its item (the user menu aligns to the bottom). */
+.sm-rail__menu{
+  position:absolute;left:calc(100% + 6px);top:0;z-index:20;width:168px;padding:6px;margin:0;list-style:none;
+  background:var(--surface);border:var(--border);border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,.14);
+  display:none;flex-direction:column;gap:1px;font-size:var(--text-md);font-weight:500;color:var(--text);
+}
+.sm-rail__menu[data-open="true"]{display:flex}
+.sm-rail__menu--up{top:auto;bottom:0}
+.sm-rail__menu-title{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding:6px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-rail__menu-item{
+  appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;
+  padding:6px 8px;border-radius:var(--radius-sm);color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;
+}
+.sm-rail__menu-item:hover,.sm-rail__menu-item:focus-visible{background:var(--surface-inset);color:inherit;outline:0;box-shadow:none}
+.sm-rail__menu-item[aria-current="page"],.sm-rail__menu-item[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
+.sm-when-light{display:var(--when-light);align-items:center;gap:8px}
+.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}
+/* .sm-nav-item survives as the inspector's link style (EditorView). */
 .sm-nav-item{
   display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;
   color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;
@@ -127,22 +175,6 @@ body:has(.sm-admin){margin:0}
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 .sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}
-.sm-nav-item[aria-current="page"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
-.sm-nav-item[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}
-/* Not greyed: the reference renders every inactive item at --text and marks
-   the unavailable ones only by being inert (no pointer, no hover). */
-.sm-nav-item[aria-disabled="true"]{cursor:default}
-.sm-nav-item[aria-disabled="true"]:hover{background:transparent}
-.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
-.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}
-.sm-nav-item--icon{display:flex;align-items:center;gap:8px}
-.sm-when-light{display:var(--when-light);align-items:center;gap:8px}
-.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}
-.sm-avatar{
-  width:24px;height:24px;flex:none;border-radius:var(--radius-round);
-  background:var(--accent-soft);color:var(--accent);
-  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;
-}
 
 /* ── top bar ───────────────────────────────────────────────────────── */
 .sm-topbar{
@@ -231,6 +263,32 @@ body:has(.sm-admin){margin:0}
 .sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}
 .sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}
 .sm-error{color:var(--danger);font-size:var(--text-sm)}
+/* ── richtext ──────────────────────────────────────────────────────── */
+.sm-richtext{display:flex;flex-direction:column;gap:6px;min-width:0}
+.sm-richtext__bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
+.sm-richtext__sep{width:1px;height:16px;margin:0 4px;background:var(--line)}
+.sm-richtext__bar .sm-iconbtn[aria-pressed="true"]{background:var(--press);color:var(--text)}
+.sm-richtext__link{display:flex;align-items:center;gap:6px}
+.sm-richtext__content{
+  min-height:110px;padding:8px 10px;border:1.5px solid transparent;border-radius:var(--radius-md);
+  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);line-height:1.5;outline:0;
+}
+.sm-richtext__content:hover{background:var(--control-hover)}
+.sm-richtext__content:focus{background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring)}
+.sm-richtext__content>*+*{margin-top:.5em}
+.sm-richtext__content p,.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,
+.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6,
+.sm-richtext__content ul,.sm-richtext__content ol,.sm-richtext__content blockquote{margin:0}
+.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,
+.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-weight:600;line-height:1.25}
+.sm-richtext__content h1{font-size:var(--text-3xl)}
+.sm-richtext__content h2{font-size:var(--text-2xl)}
+.sm-richtext__content h3{font-size:var(--text-xl)}
+.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-size:var(--text-lg)}
+.sm-richtext__content ul,.sm-richtext__content ol{padding-left:18px}
+.sm-richtext__content li+li{margin-top:.25em}
+.sm-richtext__content blockquote{padding-left:10px;border-left:2px solid var(--line);color:var(--text-muted)}
+.sm-richtext__content a{color:var(--accent);text-decoration:underline}
 
 .sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}
 .sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}
@@ -393,6 +451,57 @@ body:has(.sm-admin){margin:0}
   border:1px dashed var(--line-dashed);border-radius:var(--radius-md);
   display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);
 }
+
+/* ── media ─────────────────────────────────────────────────────────── */
+.sm-modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:24px}
+.sm-modal__panel{
+  max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--surface);
+  border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);overflow:hidden;
+}
+.sm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:var(--border)}
+.sm-modal__body{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
+.sm-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:var(--border)}
+.sm-picker-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.sm-dropzone{
+  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);color:var(--text-muted);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;
+}
+.sm-dropzone--bar{padding:8px;font-size:var(--text-sm)}
+.sm-mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
+.sm-mediacard{
+  display:flex;flex-direction:column;gap:4px;padding:6px;background:transparent;border:1.5px solid transparent;
+  border-radius:var(--radius-md);cursor:pointer;text-align:left;color:var(--text);font:inherit;min-width:0;
+}
+.sm-mediacard:hover{background:var(--control-hover)}
+.sm-mediacard[aria-pressed="true"]{border-color:var(--selection);background:var(--accent-soft)}
+.sm-mediacard__thumb{display:block;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-inset)}
+.sm-mediacard__img{width:100%;height:100%;object-fit:cover;display:block}
+.sm-thumb--chip{display:grid;place-items:center;width:100%;height:100%;font-weight:600;color:var(--text-muted);font-size:var(--text-sm)}
+.sm-mediacard__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-mediacard__meta{font-size:var(--text-sm);color:var(--text-muted)}
+.sm-media{display:flex;flex-direction:column;gap:6px}
+.sm-media__thumb{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
+.sm-media__thumb>img,.sm-media__thumb>video{position:absolute;max-width:none;display:block}
+.sm-media__alt{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-media__actions{display:flex;gap:6px}
+.sm-media__chip{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-inset);border-radius:var(--radius-md)}
+.sm-crop{display:grid;grid-template-columns:1fr 240px;gap:14px;min-height:0}
+.sm-crop__stage{position:relative;user-select:none;touch-action:none;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden}
+.sm-crop__stage>img{display:block;width:100%;height:auto;pointer-events:none}
+.sm-crop__shade{position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
+.sm-crop__rect{position:absolute;outline:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:move;background:transparent}
+.sm-crop__handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid rgba(0,0,0,.4);border-radius:2px}
+.sm-crop__handle--nw{left:-6px;top:-6px;cursor:nwse-resize}.sm-crop__handle--ne{right:-6px;top:-6px;cursor:nesw-resize}
+.sm-crop__handle--sw{left:-6px;bottom:-6px;cursor:nesw-resize}.sm-crop__handle--se{right:-6px;bottom:-6px;cursor:nwse-resize}
+.sm-crop__hotspot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff;background:rgba(0,56,177,.55);cursor:grab;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
+.sm-crop__side{display:flex;flex-direction:column;gap:10px}
+.sm-crop__preview{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
+.sm-crop__preview>img{position:absolute;max-width:none;display:block}
+.sm-mediascreen{display:grid;grid-template-columns:1fr 300px;flex:1;min-height:0}
+.sm-mediascreen__grid{padding:12px;overflow:auto}
+.sm-mediascreen__inspector{border-left:var(--border);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
+.sm-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--text-sm);color:var(--text-muted)}
+.sm-usage{display:flex;flex-direction:column;gap:4px}
 `;
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export const THEME_KEY = "smoodly-theme";

package/dist/admin/validate.js

@@ -1,3 +1,8 @@
+// MVP validation, keyed by inert descriptor data (the design rule: logic
+// lives admin/server-side). Entry saves validate; page drafts do NOT
+// (drafts must save freely) — publish validates every node. Objects and
+// lists recurse; error paths are dotted (`cta.href`, `points.2.heading`).
+import { hasText } from "./richtext-doc.js";
 const subfields = (d) => d.fields && typeof d.fields === "object" ? d.fields : {};
 const itemOf = (d) => d.item && typeof d.item === "object" ? d.item : undefined;
 const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArray(v) && v.length === 0);
@@ -11,6 +16,17 @@ function validateValue(path, value, d, errors) {
             errors.push({ field: path, message: "Required." });
         return;
     }
+    if (d.type === "richtext" && !hasText(value)) {
+        if (!mayBeAbsent(d))
+            errors.push({ field: path, message: "Required." });
+        return;
+    }
+    if (d.type === "image" || d.type === "video" || d.type === "file") {
+        if (typeof value !== "object" || Array.isArray(value) || typeof value.asset !== "string") {
+            errors.push({ field: path, message: "Must be an uploaded file." });
+        }
+        return;
+    }
     if (d.type === "list") {
         if (!Array.isArray(value)) {
             errors.push({ field: path, message: "Must be a list." });

package/dist/asset-store.d.ts

@@ -0,0 +1,86 @@
+import type { AssetKind, AssetMeta, AssetRecord } from "./media.ts";
+import { MemoryRefIndex } from "./ref-index.ts";
+export type UploadTicket = {
+    id: string;
+    uploadUrl: string;
+    token: string;
+};
+export type FinishInput = {
+    width?: number;
+    height?: number;
+    duration?: number;
+    posterId?: string;
+};
+export type AssetQuery = {
+    kind?: AssetKind;
+    search?: string;
+    cursor?: string;
+    limit?: number;
+};
+export type AssetPage = {
+    items: AssetRecord[];
+    nextCursor: string | null;
+};
+export type BeginUploadInput = {
+    filename: string;
+    mime: string;
+    size: number;
+    createdBy?: string;
+};
+export type CreateAssetInput = BeginUploadInput & AssetMeta & {
+    bytes: Uint8Array;
+    width?: number;
+    height?: number;
+    duration?: number;
+    posterId?: string;
+};
+export declare const PAGE_SIZE = 60;
+export interface AssetStore {
+    /** A pending row and a signed upload URL for `<space>/<id>.<ext>`. */
+    beginUpload(input: BeginUploadInput): Promise<UploadTicket>;
+    /** Marks the row ready with what the browser measured. */
+    finishUpload(id: string, dims: FinishInput): Promise<AssetRecord>;
+    /** Server-side: bytes in, a ready row out (the seed, scripts). */
+    create(input: CreateAssetInput): Promise<AssetRecord>;
+    /** Any status — the widget shows a pending row as "uploading". */
+    get(id: string): Promise<AssetRecord | null>;
+    /** Ready rows only, keyed by id — the resolver's fetcher. */
+    getMany(ids: string[]): Promise<Record<string, AssetRecord>>;
+    /** Ready rows, newest first, `PAGE_SIZE` per page; `cursor` is the last row's createdAt. */
+    list(query?: AssetQuery): Promise<AssetPage>;
+    update(id: string, meta: AssetMeta): Promise<AssetRecord>;
+    /** Refused while any refs row points at the asset; a video's poster goes with it. Idempotent. */
+    delete(id: string): Promise<void>;
+}
+export declare const assetErrors: {
+    notFound: (id: string) => Error;
+    notPending: (id: string) => Error;
+    referenced: (id: string, n: number) => Error;
+};
+export declare const kindOf: (mime: string) => AssetKind;
+/** The object's extension: the filename's when it has a sane one, else the mime's, else "bin". */
+export declare function extensionFor(filename: string, mime: string): string;
+export declare const objectPath: (space: string, id: string, filename: string, mime: string) => string;
+/** The public URL; an SVG carries ?download= so the bucket origin never renders it. */
+export declare const withDownload: (url: string, mime: string) => string;
+export declare class MemoryAssetStore implements AssetStore {
+    private refs;
+    private rows;
+    private objects;
+    private baseUrl;
+    private space;
+    constructor(refs?: MemoryRefIndex, options?: {
+        baseUrl?: string;
+        space?: string;
+    });
+    private url;
+    private row;
+    beginUpload(input: BeginUploadInput): Promise<UploadTicket>;
+    finishUpload(id: string, dims: FinishInput): Promise<AssetRecord>;
+    create(input: CreateAssetInput): Promise<AssetRecord>;
+    get(id: string): Promise<AssetRecord | null>;
+    getMany(ids: string[]): Promise<Record<string, AssetRecord>>;
+    list(query?: AssetQuery): Promise<AssetPage>;
+    update(id: string, meta: AssetMeta): Promise<AssetRecord>;
+    delete(id: string): Promise<void>;
+}

package/dist/asset-store.js

@@ -0,0 +1,141 @@
+import { MemoryRefIndex } from "./ref-index.js";
+import { DEFAULT_SPACE_ID } from "./sql-space.js";
+import { ASSET_COLLECTION } from "./media.js";
+export const PAGE_SIZE = 60;
+export const assetErrors = {
+    notFound: (id) => new Error(`smoodly: no asset "${id}".`),
+    notPending: (id) => new Error(`smoodly: asset "${id}" is not pending.`),
+    referenced: (id, n) => new Error(`smoodly: "asset/${id}" is referenced by ${n} document(s) — remove those references first.`),
+};
+export const kindOf = (mime) => mime.startsWith("image/") ? "image" : mime.startsWith("video/") ? "video" : "file";
+const BY_MIME = {
+    "image/jpeg": "jpg", "image/png": "png", "image/webp": "webp", "image/avif": "avif", "image/gif": "gif",
+    "image/svg+xml": "svg", "video/mp4": "mp4", "video/webm": "webm", "application/pdf": "pdf",
+};
+/** The object's extension: the filename's when it has a sane one, else the mime's, else "bin". */
+export function extensionFor(filename, mime) {
+    const m = /\.([a-z0-9]{1,8})$/i.exec(filename);
+    if (m)
+        return m[1].toLowerCase();
+    return BY_MIME[mime] ?? "bin";
+}
+export const objectPath = (space, id, filename, mime) => `${space}/${id}.${extensionFor(filename, mime)}`;
+/** The public URL; an SVG carries ?download= so the bucket origin never renders it. */
+export const withDownload = (url, mime) => (mime === "image/svg+xml" ? `${url}?download=` : url);
+const lower = (s) => (s ?? "").toLowerCase();
+export class MemoryAssetStore {
+    constructor(refs = new MemoryRefIndex(), options = {}) {
+        this.refs = refs;
+        this.rows = new Map();
+        this.objects = new Map();
+        this.baseUrl = options.baseUrl ?? "http://localhost/media";
+        this.space = options.space ?? DEFAULT_SPACE_ID;
+    }
+    url(path, mime) {
+        return withDownload(`${this.baseUrl}/${path}`, mime);
+    }
+    row(input, status) {
+        const id = crypto.randomUUID();
+        const path = objectPath(this.space, id, input.filename, input.mime);
+        const now = Date.now();
+        return {
+            id, kind: kindOf(input.mime), status, path, mime: input.mime, size: input.size,
+            width: null, height: null, duration: null, posterId: null, filename: input.filename,
+            title: null, alt: null, caption: null, credit: null, url: this.url(path, input.mime), createdAt: now, updatedAt: now,
+        };
+    }
+    async beginUpload(input) {
+        const row = this.row(input, "pending");
+        this.rows.set(row.id, row);
+        return { id: row.id, uploadUrl: `memory://upload/${row.path}`, token: "memory" };
+    }
+    async finishUpload(id, dims) {
+        const row = this.rows.get(id);
+        if (!row)
+            throw assetErrors.notFound(id);
+        if (row.status !== "pending")
+            throw assetErrors.notPending(id);
+        const next = {
+            ...row, status: "ready", width: dims.width ?? null, height: dims.height ?? null,
+            duration: dims.duration ?? null, posterId: dims.posterId ?? null, updatedAt: Date.now(),
+        };
+        this.rows.set(id, next);
+        return structuredClone(next);
+    }
+    async create(input) {
+        const row = {
+            ...this.row(input, "ready"),
+            width: input.width ?? null, height: input.height ?? null, duration: input.duration ?? null,
+            posterId: input.posterId ?? null, title: input.title ?? null, alt: input.alt ?? null,
+            caption: input.caption ?? null, credit: input.credit ?? null,
+        };
+        // Distinct createdAt per row keeps "newest first" and the cursor honest
+        // when two creates land in one millisecond.
+        const last = [...this.rows.values()].reduce((m, r) => Math.max(m, r.createdAt), 0);
+        if (row.createdAt <= last) {
+            row.createdAt = last + 1;
+            row.updatedAt = row.createdAt;
+        }
+        this.rows.set(row.id, row);
+        this.objects.set(row.path, input.bytes);
+        return structuredClone(row);
+    }
+    async get(id) {
+        const row = this.rows.get(id);
+        return row ? structuredClone(row) : null;
+    }
+    async getMany(ids) {
+        const out = {};
+        for (const id of ids) {
+            const row = this.rows.get(id);
+            if (row?.status === "ready")
+                out[id] = structuredClone(row);
+        }
+        return out;
+    }
+    async list(query = {}) {
+        const limit = query.limit ?? PAGE_SIZE;
+        const q = lower(query.search);
+        const cursor = query.cursor ? Number(query.cursor) : Infinity;
+        const all = [...this.rows.values()]
+            .filter((r) => r.status === "ready")
+            .filter((r) => !query.kind || r.kind === query.kind)
+            .filter((r) => !q || lower(r.title).includes(q) || lower(r.filename).includes(q) || lower(r.alt).includes(q))
+            .filter((r) => r.createdAt < cursor)
+            .sort((a, b) => b.createdAt - a.createdAt);
+        const items = all.slice(0, limit).map((r) => structuredClone(r));
+        return { items, nextCursor: all.length > limit ? String(items[items.length - 1].createdAt) : null };
+    }
+    async update(id, meta) {
+        const row = this.rows.get(id);
+        if (!row)
+            throw assetErrors.notFound(id);
+        const next = {
+            ...row,
+            ...(meta.title !== undefined ? { title: meta.title } : {}),
+            ...(meta.alt !== undefined ? { alt: meta.alt } : {}),
+            ...(meta.caption !== undefined ? { caption: meta.caption } : {}),
+            ...(meta.credit !== undefined ? { credit: meta.credit } : {}),
+            updatedAt: Math.max(Date.now(), row.updatedAt),
+        };
+        this.rows.set(id, next);
+        return structuredClone(next);
+    }
+    async delete(id) {
+        const row = this.rows.get(id);
+        if (!row)
+            return;
+        const usage = this.refs.to(ASSET_COLLECTION, id);
+        if (usage.length > 0)
+            throw assetErrors.referenced(id, usage.length);
+        if (row.posterId) {
+            const poster = this.rows.get(row.posterId);
+            if (poster) {
+                this.rows.delete(poster.id);
+                this.objects.delete(poster.path);
+            }
+        }
+        this.rows.delete(id);
+        this.objects.delete(row.path);
+    }
+}

package/dist/collections.d.ts

@@ -53,17 +53,3 @@ export declare function collection<F extends BuilderMap>(input: {
     };
     versions?: boolean;
 }): CollectionSchema<F>;
-export type Toolset = {
-    marks?: string[];
-    nodes?: string[];
-    elements?: string[];
-};
-export declare function toolset(input: {
-    marks?: string[];
-    nodes?: string[];
-    elements?: {
-        schema: {
-            name: string;
-        };
-    }[];
-}): Toolset;

package/dist/collections.js

@@ -5,6 +5,8 @@ export const collectionDepth = (c) => c.tree?.depth ?? 1;
 export function collection(input) {
     if (!input?.name)
         throw new Error("smoodly: a collection requires a name.");
+    if (["shared", "asset", "media"].includes(input.name))
+        throw new Error(`smoodly: "${input.name}" is a reserved name.`);
     if (input.tree !== undefined && (!Number.isInteger(input.tree.depth) || input.tree.depth < 1)) {
         throw new Error(`smoodly: collection "${input.name}" declares an invalid tree depth.`);
     }
@@ -45,13 +47,3 @@ export function collection(input) {
         admin: input.admin,
     };
 }
-export function toolset(input) {
-    const out = {};
-    if (input.marks)
-        out.marks = input.marks;
-    if (input.nodes)
-        out.nodes = input.nodes;
-    if (input.elements)
-        out.elements = input.elements.map((e) => e.schema.name);
-    return out;
-}

package/dist/config.d.ts

@@ -50,6 +50,11 @@ export type SmoodlyConfig = {
     database?: {
         provider: string;
     };
+    /** Upload limits (spec 2026-09-08 media §10): bytes per file and the accepted mime types. */
+    media?: {
+        maxSize?: number;
+        accept?: string[];
+    };
 };
 export type ResolvedConfig = SmoodlyConfig & {
     homePageSlug: string;
@@ -57,6 +62,13 @@ export type ResolvedConfig = SmoodlyConfig & {
     pageDepth: number;
     /** The section's styles with the config standard set merged in (section keys win). */
     resolvedStyles(sectionName: string): Record<string, Descriptor>;
+    media: {
+        maxSize: number;
+        accept: string[];
+    };
 };
+/** `shared`: the placement node type and an admin route; `asset`: the refs
+ *  target of every media edge; `media`: the admin's Media screen route. */
+export declare const RESERVED_NAMES: readonly string[];
 export declare function defineConfig(config: SmoodlyConfig): ResolvedConfig;
 export {};

package/dist/config.js

@@ -1,5 +1,9 @@
 import { assertSegment, fixedPageSegments, perLocaleSegments } from "./paths.js";
-const RESERVED_NAME = "shared"; // the placement node type and the admin route
+import { DEFAULT_MEDIA } from "./media.js";
+/** `shared`: the placement node type and an admin route; `asset`: the refs
+ *  target of every media edge; `media`: the admin's Media screen route. */
+export const RESERVED_NAMES = ["shared", "asset", "media"];
+const isReserved = (name) => RESERVED_NAMES.includes(name);
 function assertUniqueNames(config) {
     const seen = new Set();
     const sectionNameList = (config.registry.sections ?? []).map((s) => s.schema.name);
@@ -11,8 +15,8 @@ function assertUniqueNames(config) {
         ...(config.registry.pages ?? []).filter((p) => p.schema.kind !== "entryPage").map((p) => p.schema.name),
     ];
     for (const name of all) {
-        if (name === RESERVED_NAME)
-            throw new Error(`smoodly: "${RESERVED_NAME}" is a reserved name.`);
+        if (isReserved(name))
+            throw new Error(`smoodly: "${name}" is a reserved name.`);
         if (seen.has(name))
             throw new Error(`smoodly: duplicate registered name "${name}".`);
         seen.add(name);
@@ -29,8 +33,8 @@ function assertUniqueNames(config) {
     const sharedSeen = new Set();
     for (const item of config.registry.shared ?? []) {
         const ownSection = item.name === item.section && sectionNames.has(item.name);
-        if (item.name === RESERVED_NAME)
-            throw new Error(`smoodly: "${RESERVED_NAME}" is a reserved name.`);
+        if (isReserved(item.name))
+            throw new Error(`smoodly: "${item.name}" is a reserved name.`);
         if (sharedSeen.has(item.name) || (seen.has(item.name) && !ownSection)) {
             throw new Error(`smoodly: duplicate registered name "${item.name}".`);
         }
@@ -143,10 +147,18 @@ export function defineConfig(config) {
     }
     const standard = Object.fromEntries(Object.entries(config.styles?.sections ?? {}).map(([k, b]) => [k, b.descriptor]));
     const byName = new Map((config.registry.sections ?? []).map((s) => [s.schema.name, s.schema]));
+    const media = {
+        maxSize: config.media?.maxSize ?? DEFAULT_MEDIA.maxSize,
+        accept: config.media?.accept ? [...config.media.accept] : [...DEFAULT_MEDIA.accept],
+    };
+    if (!Number.isInteger(media.maxSize) || media.maxSize <= 0) {
+        throw new Error("smoodly: media.maxSize must be a positive integer of bytes.");
+    }
     return {
         ...config,
         homePageSlug,
         pageDepth: depth,
+        media,
         resolvedStyles(sectionName) {
             const schema = byName.get(sectionName);
             if (!schema)

package/dist/fields.d.ts

@@ -1,3 +1,5 @@
+import { type Toolset } from "./toolset.ts";
+import { type ResolvedFile, type ResolvedImage, type ResolvedVideo } from "./media.ts";
 export type Descriptor = {
     type: string;
     [key: string]: unknown;
@@ -48,18 +50,15 @@ export declare const f: {
     }) => FieldBuilder<string, {}>;
     date: () => FieldBuilder<string, {}>;
     number: () => FieldBuilder<number, {}>;
-    image: () => FieldBuilder<{
-        url: string;
-        alt?: string;
-    }, {}>;
-    video: () => FieldBuilder<{
-        url: string;
-    }, {}>;
-    file: () => FieldBuilder<{
-        url: string;
-    }, {}>;
+    /** `aspect`: one `"w:h"` or several the crop tool may lock to — a per-use
+     *  constraint, so the component knows its box before the image loads. */
+    image: (opts?: {
+        aspect?: string | string[];
+    }) => FieldBuilder<ResolvedImage, {}>;
+    video: () => FieldBuilder<ResolvedVideo, {}>;
+    file: () => FieldBuilder<ResolvedFile, {}>;
     richtext: (opts?: {
-        toolset?: unknown;
+        toolset?: Toolset;
     }) => FieldBuilder<unknown, {}>;
     dataAttributes: () => FieldBuilder<Record<string, string>, {}>;
     select: <const O extends readonly string[]>(options: O) => FieldBuilder<O[number], {}>;

package/dist/fields.js

@@ -1,6 +1,8 @@
 // Field builders — inert descriptors by design rule (see DESIGN.md §3):
 // f.text().max(40) is plain data; validation logic lives server/admin-side,
 // keyed by descriptor type. Chaining is immutable.
+import { DEFAULT_TOOLSET } from "./toolset.js";
+import { parseAspect } from "./media.js";
 function builder(descriptor) {
     const chain = (patch) => builder({ ...descriptor, ...patch });
     return {
@@ -55,10 +57,22 @@ export const f = {
     slug: (opts) => builder({ type: "slug", ...(opts?.from ? { from: opts.from } : {}) }),
     date: () => builder({ type: "date" }),
     number: () => builder({ type: "number" }),
-    image: () => builder({ type: "image" }),
+    /** `aspect`: one `"w:h"` or several the crop tool may lock to — a per-use
+     *  constraint, so the component knows its box before the image loads. */
+    image: (opts) => {
+        const aspect = opts?.aspect;
+        if (aspect !== undefined) {
+            const list = Array.isArray(aspect) ? aspect : [aspect];
+            if (list.length === 0)
+                throw new Error('smoodly: f.image aspect must name at least one "w:h" ratio.');
+            for (const a of list)
+                parseAspect(a);
+        }
+        return builder({ type: "image", ...(aspect !== undefined ? { aspect } : {}) });
+    },
     video: () => builder({ type: "video" }),
     file: () => builder({ type: "file" }),
-    richtext: (opts) => builder({ type: "richtext", ...(opts?.toolset !== undefined ? { toolset: opts.toolset } : {}) }),
+    richtext: (opts) => builder({ type: "richtext", toolset: opts?.toolset ?? DEFAULT_TOOLSET }),
     dataAttributes: () => builder({ type: "dataAttributes" }),
     select: (options) => builder({ type: "select", options: [...options] }),
     object: (shape) => {

package/dist/image/SmoodlyImage.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactElement } from "react";
+import type { ResolvedImage } from "../media.ts";
+import type { ImageLoader } from "./loaders.ts";
+export type SmoodlyImageProps = {
+    image: ResolvedImage;
+    /** Overrides the value's aspect for this placement (`"21:9"`). */
+    aspect?: string;
+    sizes?: string;
+    priority?: boolean;
+    loading?: "eager" | "lazy";
+    className?: string;
+    style?: CSSProperties;
+    /** Overrides the resolved alt (rarely right — the editor owns it). */
+    alt?: string;
+    loader?: ImageLoader;
+    unoptimized?: boolean;
+};
+export declare function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized }: SmoodlyImageProps): ReactElement;