smoodly 0.0.51 → 0.0.53

package/dist/admin/fixed-nodes.d.ts

@@ -1,5 +1,4 @@
 import type { ResolvedConfig } from "../config.ts";
-import type { PageRecord, PageStore } from "../store.ts";
 import { type CodeAddress } from "../addresses.ts";
 export type FixedNode = CodeAddress;
 export declare const fixedNodeSpecs: (config: ResolvedConfig) => FixedNode[];
@@ -7,8 +6,3 @@ export declare const fixedNodeSpecs: (config: ResolvedConfig) => FixedNode[];
 export declare function fixedNodeOf(record: {
     fixed?: string | null;
 }, config: ResolvedConfig): FixedNode | null;
-/** Create every code-owned record that has none yet and give each the
- *  locales it lacks, publishing what it creates, then list. Code wins an address (spec 2026-09-29
- *  anchored paths §4): an editor's page already there changes nothing
- *  here — the index serves the record, the Pages list flags the page. */
-export declare function ensureFixedNodes(pages: PageStore, config: ResolvedConfig): Promise<PageRecord[]>;

package/dist/admin/fixed-nodes.js

@@ -1,86 +1,6 @@
-import { codeAddresses, lastPart } from "../addresses.js";
+import { codeAddresses } from "../addresses.js";
 export const fixedNodeSpecs = (config) => codeAddresses({ locales: config.locales, pages: config.registry.pages ?? [], collections: config.registry.collections ?? [] });
 /** The spec that owns a record, or null for an editor's page and for a record no registration owns any more. */
 export function fixedNodeOf(record, config) {
     return record.fixed ? fixedNodeSpecs(config).find((s) => s.key === record.fixed) ?? null : null;
 }
-/** Publish a row this call just created (spec 2026-09-30 tester findings §2): the site served the address
- *  from code until now, so the empty page goes live as it was. A row that already existed is never
- *  published here — an editor's unpublish stands. A folder has no tree to publish. */
-async function publishCreated(pages, record, locale, address) {
-    if (record.template === null)
-        return record;
-    try {
-        // A locale added to an older record starts as a copy of the default locale's DRAFT. What goes live
-        // is the empty page code was serving; the copy stays the new locale's draft, for an editor to publish.
-        const copy = await pages.getDraftTree(record.id, locale);
-        const empty = !copy || (Object.values(copy.zones).every((nodes) => nodes.length === 0) && !copy.fields && !copy.meta);
-        if (empty)
-            return await pages.publish(record.id, locale);
-        await pages.saveDraft(record.id, locale, { zones: {} });
-        await pages.publish(record.id, locale);
-        await pages.saveDraft(record.id, locale, copy);
-        return (await pages.getPage(record.id)) ?? record;
-    }
-    catch (e) {
-        console.warn(`smoodly: could not publish "${address}" in "${locale}": ${e instanceof Error ? e.message : String(e)}`);
-        return record;
-    }
-}
-/** Create every code-owned record that has none yet and give each the
- *  locales it lacks, publishing what it creates, then list. Code wins an address (spec 2026-09-29
- *  anchored paths §4): an editor's page already there changes nothing
- *  here — the index serves the record, the Pages list flags the page. */
-export async function ensureFixedNodes(pages, config) {
-    const def = config.locales.default;
-    const all = await pages.listPages();
-    let wrote = false;
-    for (const spec of fixedNodeSpecs(config)) {
-        let record = all.find((p) => p.fixed === spec.key);
-        const defAddress = spec.segments[def];
-        if (!record) {
-            wrote = true;
-            try {
-                record = await pages.createPage({ locale: def, slug: lastPart(defAddress), template: spec.template, title: spec.title, fixed: spec.key });
-            }
-            catch (e) {
-                // Two admins loading at once race on this very create; the loser's
-                // fixedTaken is the other one winning. Anything else is said out loud.
-                const message = e instanceof Error ? e.message : String(e);
-                if (!message.includes("already exists"))
-                    console.warn(`smoodly: could not materialize "${defAddress}": ${message}`);
-                continue;
-            }
-            record = await publishCreated(pages, record, def, defAddress);
-        }
-        else if (record.template === null && spec.template !== null) {
-            // The collection gained its index page. A racing admin's hasTemplate is that admin winning.
-            wrote = true;
-            try {
-                record = await pages.setTemplate(record.id, spec.template);
-            }
-            catch (e) {
-                const message = e instanceof Error ? e.message : String(e);
-                if (!message.includes("already has a page type"))
-                    console.warn(`smoodly: could not give "${defAddress}" its page type: ${message}`);
-            }
-        }
-        // Every locale the registration names — including one added to the config after the record was first materialized.
-        for (const [locale, address] of Object.entries(spec.segments)) {
-            if (record.locales[locale])
-                continue;
-            wrote = true;
-            try {
-                record = await pages.addLocale(record.id, locale, { from: def, slug: lastPart(address) });
-                record = await publishCreated(pages, record, locale, address);
-            }
-            catch (e) {
-                // Only a concurrent add of the SAME locale is a race; it skips silently.
-                const message = e instanceof Error ? e.message : String(e);
-                if (!message.includes("already exists in locale"))
-                    console.warn(`smoodly: could not materialize "${address}" in "${locale}": ${message}`);
-            }
-        }
-    }
-    return wrote ? pages.listPages() : all;
-}

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

@@ -1,7 +1,7 @@
 import { type ReactElement } from "react";
 import type { AssetRecord, ImageValue } from "../../media.ts";
 import type { AdminField } from "../serialize.ts";
-export declare function CropEditor({ asset, descriptor, value, caption, onSave, onClose }: {
+type CropEditorProps = {
     asset: AssetRecord;
     descriptor: AdminField;
     value: ImageValue;
@@ -9,4 +9,6 @@ export declare function CropEditor({ asset, descriptor, value, caption, onSave,
     caption?: string;
     onSave(next: ImageValue, caption?: string): void;
     onClose(): void;
-}): ReactElement;
+};
+export declare function CropEditor(props: CropEditorProps): ReactElement;
+export {};

package/dist/admin/forms/CropEditor.js

@@ -6,15 +6,26 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // and a live preview at the chosen aspect. Pointer deltas become image
 // fractions through the stage's width; the math is in crop-editor.ts.
 // A richtext image card passes its `caption` too (2026-09-25): the card
-// shows no inputs, so the modal is where both texts are edited.
+// shows no inputs, so the modal is where both texts are edited. A field with
+// named crops (spec 2026-10-18 media on R2 and Images §6, §9) gets a tab per
+// crop sharing one hotspot, the other crops dashed on the image, and a
+// preview each. The images are cuts where the service cuts (adminImageSrc).
 import { useRef, useState } from "react";
-import { parseAspect } from "../../media.js";
+import { cropAspect, parseAspect } from "../../media.js";
 import { frameFor } from "../../image/crop-math.js";
 import { Button, Field, Segmented } from "../ui/primitives.js";
 import { Modal } from "../ui/Modal.js";
-import { initialState, moveCrop, placeHotspot, relock, resizeCrop } from "./crop-editor.js";
+import { adminImageSrc, effectiveCrop, frameCrop, initialNamed, initialState, moveCrop, moveSharedHotspot, placeHotspot, relock, resetCrop, resizeCrop, savedNamed, selectCrop, } from "./crop-editor.js";
 const pct = (n) => `${n * 100}%`;
-export function CropEditor({ asset, descriptor, value, caption, onSave, onClose }) {
+/** The darkened image outside a crop. */
+const shade = (c) => `polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${pct(c.top)}, ${pct(c.left)} ${pct(c.top)}, ${pct(c.left)} ${pct(c.top + c.height)}, ${pct(c.left + c.width)} ${pct(c.top + c.height)}, ${pct(c.left + c.width)} ${pct(c.top)}, 0 ${pct(c.top)})`;
+export function CropEditor(props) {
+    const crops = props.descriptor.crops;
+    return crops && typeof crops === "object" && Object.keys(crops).length > 0
+        ? _jsx(NamedCropEditor, { ...props, ratios: crops })
+        : _jsx(SingleCropEditor, { ...props });
+}
+function SingleCropEditor({ asset, descriptor, value, caption, onSave, onClose }) {
     const declared = descriptor.aspect;
     const options = Array.isArray(declared) ? declared : typeof declared === "string" ? [declared] : [];
     const width = asset.width ?? 1, height = asset.height ?? 1;
@@ -60,5 +71,47 @@ export function CropEditor({ asset, descriptor, value, caption, onSave, onClose
         ...(alt.trim() ? { alt: alt.trim() } : { alt: undefined }),
         ...(options.length > 1 && chosen ? { aspect: chosen } : { aspect: undefined }),
     }, caption === undefined ? undefined : cap);
-    return (_jsx(Modal, { title: "Crop and focus", width: 900, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { onClick: save, children: "Save" })] }), children: _jsxs("div", { className: "sm-crop", children: [_jsxs("div", { className: "sm-crop__stage", ref: stage, onPointerMove: move, onPointerUp: end, onPointerCancel: end, children: [_jsx("img", { src: asset.url, alt: "", draggable: false }), _jsx("div", { className: "sm-crop__shade", style: { clipPath: `polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 ${pct(crop.top)}, ${pct(crop.left)} ${pct(crop.top)}, ${pct(crop.left)} ${pct(crop.top + crop.height)}, ${pct(crop.left + crop.width)} ${pct(crop.top + crop.height)}, ${pct(crop.left + crop.width)} ${pct(crop.top)}, 0 ${pct(crop.top)})` } }), _jsx("div", { className: "sm-crop__rect", style: { left: pct(crop.left), top: pct(crop.top), width: pct(crop.width), height: pct(crop.height) }, onPointerDown: begin("move"), children: ["nw", "ne", "sw", "se"].map((h) => (_jsx("span", { className: `sm-crop__handle sm-crop__handle--${h}`, onPointerDown: begin(h) }, h))) }), _jsx("div", { className: "sm-crop__hotspot", title: "Focus point", style: { left: pct(hotspot.x), top: pct(hotspot.y) }, onPointerDown: begin("hotspot") })] }), _jsxs("div", { className: "sm-crop__side", children: [options.length > 1 && (_jsx(Field, { label: "Aspect", asDiv: true, children: _jsx(Segmented, { options: options, value: chosen ?? options[0], onChange: pick }) })), _jsx(Field, { label: "Preview", asDiv: true, children: _jsx("div", { className: "sm-crop__preview", style: { aspectRatio: String(previewAspect) }, children: _jsx("img", { src: asset.url, alt: "", style: { left: `${frame.left}%`, top: `${frame.top}%`, width: `${frame.width}%`, height: `${frame.height}%` } }) }) }), _jsx(Field, { label: "Alt text for this use", hint: "Empty uses the asset's own alt.", children: _jsx("input", { className: "sm-input", value: alt, placeholder: asset.alt ?? "", onChange: (e) => setAlt(e.target.value) }) }), caption !== undefined && (_jsx(Field, { label: "Caption", hint: "Shown under the image.", children: _jsx("input", { className: "sm-input", value: cap, onChange: (e) => setCap(e.target.value) }) }))] })] }) }));
+    return (_jsx(Modal, { title: "Crop and focus", width: 900, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { onClick: save, children: "Save" })] }), children: _jsxs("div", { className: "sm-crop", children: [_jsxs("div", { className: "sm-crop__stage", ref: stage, onPointerMove: move, onPointerUp: end, onPointerCancel: end, children: [_jsx("img", { src: adminImageSrc(asset, 1280), alt: "", draggable: false }), _jsx("div", { className: "sm-crop__shade", style: { clipPath: shade(crop) } }), _jsx("div", { className: "sm-crop__rect", style: { left: pct(crop.left), top: pct(crop.top), width: pct(crop.width), height: pct(crop.height) }, onPointerDown: begin("move"), children: ["nw", "ne", "sw", "se"].map((h) => (_jsx("span", { className: `sm-crop__handle sm-crop__handle--${h}`, onPointerDown: begin(h) }, h))) }), _jsx("div", { className: "sm-crop__hotspot", title: "Focus point", style: { left: pct(hotspot.x), top: pct(hotspot.y) }, onPointerDown: begin("hotspot") })] }), _jsxs("div", { className: "sm-crop__side", children: [options.length > 1 && (_jsx(Field, { label: "Aspect", asDiv: true, children: _jsx(Segmented, { options: options, value: chosen ?? options[0], onChange: pick }) })), _jsx(Field, { label: "Preview", asDiv: true, children: _jsx("div", { className: "sm-crop__preview", style: { aspectRatio: String(previewAspect) }, children: _jsx("img", { src: adminImageSrc(asset, 640), alt: "", style: { left: `${frame.left}%`, top: `${frame.top}%`, width: `${frame.width}%`, height: `${frame.height}%` } }) }) }), _jsx(Field, { label: "Alt text for this use", hint: "Empty uses the asset's own alt.", children: _jsx("input", { className: "sm-input", value: alt, placeholder: asset.alt ?? "", onChange: (e) => setAlt(e.target.value) }) }), caption !== undefined && (_jsx(Field, { label: "Caption", hint: "Shown under the image.", children: _jsx("input", { className: "sm-input", value: cap, onChange: (e) => setCap(e.target.value) }) }))] })] }) }));
+}
+const titleOf = (name) => name[0].toUpperCase() + name.slice(1);
+/** A field with named crops: a tab per crop, one hotspot shared by all, a crop nobody framed following it. */
+function NamedCropEditor({ asset, value, onSave, onClose, ratios }) {
+    const names = Object.keys(ratios);
+    const width = asset.width ?? 1, height = asset.height ?? 1;
+    const imageAspect = width / height;
+    const [state, setState] = useState(() => initialNamed(value, ratios, width, height));
+    const [alt, setAlt] = useState(value.alt ?? "");
+    const stage = useRef(null);
+    const drag = useRef(null);
+    const { active, hotspot } = state;
+    const crop = effectiveCrop(state, active, ratios, width, height);
+    const begin = (kind) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        drag.current = { kind, x: e.clientX, y: e.clientY, start: state };
+    };
+    const move = (e) => {
+        const d = drag.current, el = stage.current;
+        if (!d || !el)
+            return;
+        const dx = (e.clientX - d.x) / el.clientWidth, dy = (e.clientY - d.y) / el.clientHeight;
+        const startHotspot = d.start.hotspot;
+        if (d.kind === "hotspot")
+            return setState(moveSharedHotspot(d.start, { x: startHotspot.x + dx, y: startHotspot.y + dy }));
+        const from = effectiveCrop(d.start, d.start.active, ratios, width, height);
+        const next = d.kind === "move" ? moveCrop(from, dx, dy) : resizeCrop(from, d.kind, dx, dy, parseAspect(ratios[d.start.active]) / imageAspect);
+        setState(frameCrop(d.start, d.start.active, next));
+    };
+    const end = () => { drag.current = null; };
+    const follows = (name) => state.crops[name] === null;
+    return (_jsx(Modal, { title: "Crop and focus", width: 960, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { onClick: () => onSave(savedNamed(value, state, alt)), children: "Save" })] }), children: _jsxs("div", { className: "sm-crop", children: [_jsxs("div", { className: "sm-crop__stage", ref: stage, onPointerMove: move, onPointerUp: end, onPointerCancel: end, children: [_jsx("img", { src: adminImageSrc(asset, 1280), alt: "", draggable: false }), _jsx("div", { className: "sm-crop__shade", style: { clipPath: shade(crop) } }), names.filter((n) => n !== active).map((n) => {
+                            const c = effectiveCrop(state, n, ratios, width, height);
+                            return _jsx("div", { className: "sm-crop__ghost", title: titleOf(n), style: { left: pct(c.left), top: pct(c.top), width: pct(c.width), height: pct(c.height) } }, n);
+                        }), _jsx("div", { className: "sm-crop__rect", style: { left: pct(crop.left), top: pct(crop.top), width: pct(crop.width), height: pct(crop.height) }, onPointerDown: begin("move"), children: ["nw", "ne", "sw", "se"].map((h) => (_jsx("span", { className: `sm-crop__handle sm-crop__handle--${h}`, onPointerDown: begin(h) }, h))) }), _jsx("div", { className: "sm-crop__hotspot", title: "Focus point", style: { left: pct(hotspot.x), top: pct(hotspot.y) }, onPointerDown: begin("hotspot") })] }), _jsxs("div", { className: "sm-crop__side", children: [_jsx(Field, { label: "Crop", asDiv: true, hint: "One focus point for every crop: a crop you have not framed follows it.", children: _jsx(Segmented, { options: names, value: active, onChange: (n) => setState((s) => selectCrop(s, n)), label: (n) => _jsxs(_Fragment, { children: [`${titleOf(n)} ${ratios[n]}`, follows(n) && _jsx("span", { className: "sm-crop__follows", title: "Follows the focus point", "aria-label": "Follows the focus point", children: "\u2022" })] }) }) }), !follows(active) && _jsx(Button, { variant: "secondary", onClick: () => setState((s) => resetCrop(s, s.active)), children: "Reset to focus point" }), _jsx(Field, { label: "Preview", asDiv: true, children: _jsx("div", { className: "sm-crop__previews", children: names.map((n) => {
+                                    const c = effectiveCrop(state, n, ratios, width, height);
+                                    const box = cropAspect(c, imageAspect);
+                                    const f = frameFor({ width, height, crop: c, hotspot }, box);
+                                    return (_jsxs("figure", { className: "sm-crop__figure", children: [_jsx("div", { className: "sm-crop__preview", style: { aspectRatio: String(box) }, children: _jsx("img", { src: adminImageSrc(asset, 640), alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }), _jsx("figcaption", { children: titleOf(n) })] }, n));
+                                }) }) }), _jsx(Field, { label: "Alt text for this use", hint: "Empty uses the asset's own alt.", children: _jsx("input", { className: "sm-input", value: alt, placeholder: asset.alt ?? "", onChange: (e) => setAlt(e.target.value) }) })] })] }) }));
 }

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

@@ -1,9 +1,11 @@
 import type { ReactElement } from "react";
 import type { AssetRecord, ImageValue } from "../../media.ts";
-export declare function ImagePreview({ asset, value, aspect, height }: {
+export declare function ImagePreview({ asset, value, aspect, crops, height }: {
     asset: AssetRecord;
     value: ImageValue;
     /** The field's declared aspect (one string); the value's own wins. */
     aspect?: string;
+    /** The field's named crops: the first, the main one, is shown (spec 2026-10-18 media on R2 and Images §6). */
+    crops?: Record<string, string>;
     height: number;
 }): ReactElement | null;

package/dist/admin/forms/ImagePreview.js

@@ -1,11 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { boxAspectOf, frameFor } from "../../image/crop-math.js";
-export function ImagePreview({ asset, value, aspect, height }) {
+import { adminImageSrc, effectiveCrop, initialNamed } from "./crop-editor.js";
+export function ImagePreview({ asset, value, aspect, crops, height }) {
     if (!asset.width || !asset.height)
         return null;
-    const image = { url: asset.url, width: asset.width, height: asset.height, mime: asset.mime, alt: "", crop: value.crop, hotspot: value.hotspot, aspect: value.aspect ?? aspect };
+    const first = crops ? Object.keys(crops)[0] : undefined;
+    const main = crops && first ? { crop: effectiveCrop(initialNamed(value, crops, asset.width, asset.height), first, crops, asset.width, asset.height), aspect: crops[first] } : null;
+    const image = {
+        url: asset.url, width: asset.width, height: asset.height, mime: asset.mime, alt: "", hotspot: value.hotspot,
+        crop: main ? main.crop : value.crop, aspect: main ? main.aspect : value.aspect ?? aspect,
+    };
     const box = boxAspectOf(image);
     const f = frameFor(image, box);
-    return (_jsx("div", { className: "sm-media__canvas", style: { maxHeight: height }, children: _jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(box), width: `calc(${height}px * ${box})`, maxHeight: height }, children: _jsx("img", { src: asset.url, alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }) }));
+    return (_jsx("div", { className: "sm-media__canvas", style: { maxHeight: height }, children: _jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(box), width: `calc(${height}px * ${box})`, maxHeight: height }, children: _jsx("img", { src: adminImageSrc(asset, 640), alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }) }));
 }

package/dist/admin/forms/MediaGrid.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatBytes } from "../shell/media-list.js";
+import { adminImageSrc } from "./crop-editor.js";
 export function AssetThumb({ asset, className }) {
     if (asset.kind === "image")
-        return _jsx("img", { className: className, src: asset.url, alt: "", loading: "lazy" });
+        return _jsx("img", { className: className, src: adminImageSrc(asset, 320), alt: "", loading: "lazy" });
     if (asset.kind === "video") {
         return asset.posterId
             ? _jsx("video", { className: className, src: asset.url, muted: true, playsInline: true, preload: "metadata" })

package/dist/admin/forms/MediaPicker.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // kind filter. `initialItems` seeds the grid (tests and the widget's
 // optimistic reopen); the effect loads the real list.
 import { useCallback, useEffect, useState } from "react";
-import { Banner, Segmented } from "../ui/primitives.js";
+import { Banner, Segmented, UploadProgress } from "../ui/primitives.js";
 import { Modal } from "../ui/Modal.js";
 import { useAssets } from "./assets-context.js";
 import { uploadFile } from "./upload.js";
@@ -16,7 +16,9 @@ export function MediaPicker({ kinds, onPick, onClose, initialItems = [] }) {
     const [items, setItems] = useState(initialItems);
     const [search, setSearch] = useState("");
     const [filter, setFilter] = useState(kinds.length === 1 ? (kinds[0] === "image" ? "Images" : kinds[0] === "video" ? "Video" : "Files") : "All");
-    const [busy, setBusy] = useState(false);
+    /** The fraction sent while a file uploads; null when none is. */
+    const [progress, setProgress] = useState(null);
+    const busy = progress !== null;
     const [error, setError] = useState(null);
     const filters = kinds.length === 1 ? [filter] : KIND_FILTERS;
     const load = useCallback(() => {
@@ -29,10 +31,10 @@ export function MediaPicker({ kinds, onPick, onClose, initialItems = [] }) {
         const file = files?.[0];
         if (!file)
             return;
-        setBusy(true);
+        setProgress(0);
         setError(null);
-        const r = await uploadFile(assets.ops, file, assets.upload);
-        setBusy(false);
+        const r = await uploadFile(assets.upload.send, file, assets.upload.measure, setProgress);
+        setProgress(null);
         if (!r.ok) {
             setError(r.message);
             return;
@@ -40,5 +42,6 @@ export function MediaPicker({ kinds, onPick, onClose, initialItems = [] }) {
         assets.remember(r.data);
         onPick(r.data);
     };
-    return (_jsxs(Modal, { title: "Media", onClose: onClose, children: [_jsxs("div", { className: "sm-picker-bar", children: [_jsx("input", { className: "sm-input", placeholder: "Search media", value: search, onChange: (e) => setSearch(e.target.value), style: { maxWidth: 260 } }), filters.length > 1 && _jsx(Segmented, { options: filters, value: filter, onChange: setFilter }), _jsxs("label", { className: "sm-btn sm-btn--primary", style: { marginLeft: "auto" }, children: [busy ? "Uploading…" : "Upload", _jsx("input", { type: "file", accept: acceptFor(kinds, assets.media.accept), hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] })] }), error && _jsx(Banner, { tone: "error", onDismiss: () => setError(null), children: error }), _jsx("div", { className: "sm-dropzone sm-dropzone--bar", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: "Drop a file here to upload it" }), _jsx(MediaGrid, { items: items, onSelect: onPick })] }));
+    return (_jsxs(Modal, { title: "Media", onClose: onClose, children: [_jsxs("div", { className: "sm-picker-bar", children: [_jsx("input", { className: "sm-input", placeholder: "Search media", value: search, onChange: (e) => setSearch(e.target.value), style: { maxWidth: 260 } }), filters.length > 1 && _jsx(Segmented, { options: filters, value: filter, onChange: setFilter }), _jsxs("label", { className: "sm-btn sm-btn--primary", style: { marginLeft: "auto" }, children: [busy ? "Uploading…" : "Upload", _jsx("input", { type: "file", accept: acceptFor(kinds, assets.media.accept), hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] })] }), error && _jsx(Banner, { tone: "error", onDismiss: () => setError(null), children: error }), _jsx("div", { className: "sm-dropzone sm-dropzone--bar", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); if (!busy)
+                    void onFiles(e.dataTransfer.files); }, children: progress !== null ? _jsx(UploadProgress, { fraction: progress }) : "Drop a file here to upload it" }), _jsx(MediaGrid, { items: items, onSelect: onPick })] }));
 }

package/dist/admin/forms/MediaWidget.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // The media field widget (spec 2026-09-08 media §10): empty is a drop
 // zone (upload straight away, or open the library); filled is the
 // thumbnail with the crop applied — contained on a canvas at most
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The record comes from the assets context (cached per id); `asset`
 // preloads it for static renders.
 import { useEffect, useState } from "react";
-import { Button, Field } from "../ui/primitives.js";
+import { Button, Field, UploadProgress } from "../ui/primitives.js";
 import { acceptFor, formatBytes } from "../shell/media-list.js";
 import { useAssets } from "./assets-context.js";
 import { uploadFile } from "./upload.js";
@@ -26,7 +26,9 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
     const kind = descriptor.type;
     const id = typeof value?.asset === "string" ? value.asset : null;
     const [asset, setAsset] = useState(preloaded ?? null);
-    const [busy, setBusy] = useState(false);
+    /** The fraction sent while a file uploads; null when none is. */
+    const [progress, setProgress] = useState(null);
+    const busy = progress !== null;
     const [error, setError] = useState(null);
     const [picker, setPicker] = useState(false);
     const [crop, setCrop] = useState(false);
@@ -54,10 +56,10 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
         const file = files?.[0];
         if (!file)
             return;
-        setBusy(true);
+        setProgress(0);
         setError(null);
-        const r = await uploadFile(assets.ops, file, assets.upload);
-        setBusy(false);
+        const r = await uploadFile(assets.upload.send, file, assets.upload.measure, setProgress);
+        setProgress(null);
         if (!r.ok) {
             setError(r.message);
             return;
@@ -65,10 +67,10 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
         select(r.data);
     };
     const accept = acceptFor([kind], assets.media.accept);
-    const fileInput = (label, variant = "secondary") => (_jsxs("label", { className: `sm-btn sm-btn--${variant}`, children: [busy ? "Uploading…" : label, _jsx("input", { type: "file", accept: accept, hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] }));
+    const fileInput = (label, variant = "secondary") => (_jsxs("label", { className: `sm-btn sm-btn--${variant}`, children: [progress !== null ? `Uploading… ${Math.round(progress * 100)}%` : label, _jsx("input", { type: "file", accept: accept, hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] }));
     let body;
     if (!id) {
-        body = (_jsxs("div", { className: "sm-dropzone", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: [_jsx("span", { children: "Drop a file here" }), _jsxs("div", { className: "sm-media__actions", children: [fileInput("Upload", "primary"), _jsx(Button, { variant: "secondary", onClick: () => setPicker(true), children: "Choose from library" })] })] }));
+        body = (_jsx("div", { className: "sm-dropzone", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: progress !== null ? _jsx(UploadProgress, { fraction: progress }) : _jsxs(_Fragment, { children: [_jsx("span", { children: "Drop a file here" }), _jsxs("div", { className: "sm-media__actions", children: [fileInput("Upload", "primary"), _jsx(Button, { variant: "secondary", onClick: () => setPicker(true), children: "Choose from library" })] })] }) }));
     }
     else if (!asset) {
         body = _jsx("div", { className: "sm-media__chip", children: "Loading\u2026" });
@@ -78,7 +80,7 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded, lab
     }
     else {
         const v = value;
-        const preview = asset.kind === "image" && asset.width && asset.height ? (_jsx(ImagePreview, { asset: asset, value: v, aspect: typeof descriptor.aspect === "string" ? descriptor.aspect : undefined, height: CANVAS_H })) : asset.kind === "video" ? (() => {
+        const preview = asset.kind === "image" && asset.width && asset.height ? (_jsx(ImagePreview, { asset: asset, value: v, aspect: typeof descriptor.aspect === "string" ? descriptor.aspect : undefined, crops: descriptor.crops && typeof descriptor.crops === "object" ? descriptor.crops : undefined, height: CANVAS_H })) : asset.kind === "video" ? (() => {
             const ratio = asset.width && asset.height ? asset.width / asset.height : 16 / 9;
             return (_jsx("div", { className: "sm-media__canvas", children: _jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(ratio), width: `calc(${CANVAS_H}px * ${ratio})` }, children: _jsx(AssetThumb, { asset: asset, className: "sm-mediacard__img" }) }) }));
         })() : (_jsxs("div", { className: "sm-media__chip", children: [_jsx("span", { style: { fontWeight: 500 }, children: asset.filename }), _jsx("span", { className: "sm-media__alt", children: formatBytes(asset.size) })] }));

package/dist/admin/forms/assets-context.d.ts

@@ -2,18 +2,22 @@ import { type ReactElement, type ReactNode } from "react";
 import type { AdminOps } from "../ops.ts";
 import type { AdminRegistry } from "../serialize.ts";
 import type { AssetRecord } from "../../media.ts";
-import { type UploadDeps } from "./upload.ts";
+import { type Measure, type UploadSend } from "./upload.ts";
+export type AssetsUpload = {
+    send: UploadSend;
+    measure: Measure;
+};
 export type AssetsApi = {
     ops: AdminOps["assets"];
     get(id: string): Promise<AssetRecord | null>;
     remember(record: AssetRecord): void;
-    upload: UploadDeps;
+    upload: AssetsUpload;
     media: AdminRegistry["media"];
 };
 export declare function AssetsProvider({ ops, media, upload, children }: {
     ops: AdminOps;
     media: AdminRegistry["media"];
-    upload?: UploadDeps;
+    upload?: Partial<AssetsUpload>;
     children: ReactNode;
 }): ReactElement;
 export declare function useAssets(): AssetsApi;

package/dist/admin/forms/assets-context.js

@@ -2,17 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // The one place widgets reach the assets ops: a context with a small
 // record cache (an id fetched once per shell lifetime), the field
-// limits from the registry, and the injectable upload deps.
+// limits from the registry, and the injectable upload (the send to the service's media route, the measure).
 import { createContext, useContext, useMemo, useRef } from "react";
-import { putSigned } from "./upload.js";
+import { checkedSend } from "./upload.js";
 import { measureFile } from "./measure.js";
+/** Where no send is given (a screen rendered outside the shell): an upload says so instead of failing silently. */
+const noSend = async () => ({ ok: false, code: "internal", message: "smoodly: uploads need the admin's media route — render inside the admin shell." });
 const Ctx = createContext(null);
 export function AssetsProvider({ ops, media, upload, children }) {
     const cache = useRef(new Map());
     const api = useMemo(() => ({
         ops: ops.assets,
         media,
-        upload: upload ?? { put: putSigned, measure: measureFile },
+        upload: { send: checkedSend(upload?.send ?? noSend, media), measure: upload?.measure ?? measureFile },
         remember: (record) => { cache.current.set(record.id, record); },
         get: async (id) => {
             const hit = cache.current.get(id);

package/dist/admin/forms/crop-editor.d.ts

@@ -1,13 +1,35 @@
-import { type Crop, type Hotspot, type ImageValue } from "../../media.ts";
+import { type AssetRecord, type Crop, type Hotspot, type ImageValue } from "../../media.ts";
 export type Handle = "nw" | "ne" | "sw" | "se";
 export type CropState = {
     crop: Crop;
     hotspot: Hotspot;
 };
-export declare const MIN_SIDE = 0.05;
 export declare function fitAspect(aspect: number, imageAspect: number): Crop;
 export declare function moveCrop(crop: Crop, dx: number, dy: number): Crop;
 export declare function resizeCrop(crop: Crop, handle: Handle, dx: number, dy: number, lock?: number, min?: number): Crop;
 export declare function placeHotspot(h: Hotspot, crop: Crop): Hotspot;
 export declare function relock(state: CropState, aspect: number | undefined, imageAspect: number): CropState;
 export declare function initialState(value: ImageValue | undefined, aspect: number | undefined, imageAspect: number): CropState;
+/** What the admin shows of an asset (spec 2026-10-18 media on R2 and Images §9): its thumbnail cut at the width asked,
+ *  never past the image's own (the grid and the picker 320, the field and the inspector 640, the crop window 1280),
+ *  else the original where the service cuts nothing; always at the default quality. */
+export declare function adminImageSrc(asset: AssetRecord, width: 320 | 640 | 1280): string;
+/** The window over a field with named crops: one hotspot for every crop, each crop framed or following it (null). */
+export type NamedCropState = {
+    hotspot: Hotspot;
+    crops: Record<string, Crop | null>;
+    active: string;
+};
+export declare function initialNamed(value: ImageValue, ratios: Record<string, string>, width: number, height: number): NamedCropState;
+/** The rectangle a crop shows: framed, or around the hotspot at its ratio. */
+export declare function effectiveCrop(state: NamedCropState, name: string, ratios: Record<string, string>, width: number, height: number): Crop;
+export declare const selectCrop: (state: NamedCropState, name: string) => NamedCropState;
+/** Dragged or resized: the crop is framed and stops following. */
+export declare const frameCrop: (state: NamedCropState, name: string, crop: Crop) => NamedCropState;
+/** Back on the hotspot. */
+export declare const resetCrop: (state: NamedCropState, name: string) => NamedCropState;
+/** The shared hotspot moves anywhere in the image; every following crop moves with it. */
+export declare const moveSharedHotspot: (state: NamedCropState, hotspot: Hotspot) => NamedCropState;
+/** What Save writes: the framed crops only, the hotspot and the alt; a crop or aspect saved before the field named
+ *  crops is dropped (the first crop took it over when it matched). Nothing touches the asset row. */
+export declare function savedNamed(value: ImageValue, state: NamedCropState, alt: string): ImageValue;

package/dist/admin/forms/crop-editor.js

@@ -2,8 +2,9 @@
 // fractions of the original image. A "lock" is the wanted pixel ratio
 // divided by the image's own, i.e. the ratio crop.width / crop.height
 // must keep.
-import { CENTER_HOTSPOT, FULL_CROP, clamp01 } from "../../media.js";
-export const MIN_SIDE = 0.05;
+import { CENTER_HOTSPOT, FULL_CROP, clamp01, followingCrop, framedCrop } from "../../media.js";
+import { cutUrl, cutWidths, DEFAULT_QUALITY } from "../../media-cut.js";
+const MIN_SIDE = 0.05;
 export function fitAspect(aspect, imageAspect) {
     const fa = aspect / imageAspect;
     const width = fa <= 1 ? fa : 1;
@@ -70,3 +71,36 @@ export function relock(state, aspect, imageAspect) {
 export function initialState(value, aspect, imageAspect) {
     return relock({ crop: value?.crop ?? FULL_CROP, hotspot: value?.hotspot ?? CENTER_HOTSPOT }, aspect, imageAspect);
 }
+/** What the admin shows of an asset (spec 2026-10-18 media on R2 and Images §9): its thumbnail cut at the width asked,
+ *  never past the image's own (the grid and the picker 320, the field and the inspector 640, the crop window 1280),
+ *  else the original where the service cuts nothing; always at the default quality. */
+export function adminImageSrc(asset, width) {
+    if (!asset.thumb || !asset.width)
+        return asset.url;
+    const widths = cutWidths(asset.width);
+    const fit = widths.filter((w) => w <= width);
+    return cutUrl(asset.thumb, fit.length > 0 ? fit[fit.length - 1] : widths[0], DEFAULT_QUALITY);
+}
+export function initialNamed(value, ratios, width, height) {
+    const names = Object.keys(ratios);
+    const crops = Object.fromEntries(names.map((n) => [n, framedCrop(value, names, n, ratios[n], width / height) ?? null]));
+    return { hotspot: value.hotspot ?? CENTER_HOTSPOT, crops, active: names[0] };
+}
+/** The rectangle a crop shows: framed, or around the hotspot at its ratio. */
+export function effectiveCrop(state, name, ratios, width, height) {
+    return state.crops[name] ?? followingCrop(ratios[name], state.hotspot, width, height);
+}
+export const selectCrop = (state, name) => ({ ...state, active: name });
+/** Dragged or resized: the crop is framed and stops following. */
+export const frameCrop = (state, name, crop) => ({ ...state, crops: { ...state.crops, [name]: crop } });
+/** Back on the hotspot. */
+export const resetCrop = (state, name) => ({ ...state, crops: { ...state.crops, [name]: null } });
+/** The shared hotspot moves anywhere in the image; every following crop moves with it. */
+export const moveSharedHotspot = (state, hotspot) => ({ ...state, hotspot: { x: clamp01(hotspot.x), y: clamp01(hotspot.y) } });
+/** What Save writes: the framed crops only, the hotspot and the alt; a crop or aspect saved before the field named
+ *  crops is dropped (the first crop took it over when it matched). Nothing touches the asset row. */
+export function savedNamed(value, state, alt) {
+    const { crop: _crop, aspect: _aspect, crops: _crops, alt: _alt, ...rest } = value;
+    const framed = Object.fromEntries(Object.entries(state.crops).filter((e) => e[1] !== null));
+    return { ...rest, ...(Object.keys(framed).length > 0 ? { crops: framed } : {}), hotspot: state.hotspot, ...(alt.trim() ? { alt: alt.trim() } : {}) };
+}

package/dist/admin/forms/date-picker.d.ts

@@ -4,7 +4,6 @@ export type Day = {
     m: number;
     d: number;
 };
-export declare function daysInMonth(y: number, m: number): number;
 /** Strict `YYYY-MM-DD`, and a day the calendar has (no 2026-02-30). */
 export declare function parseDay(s: string): Day | null;
 export declare const formatDay: (day: Day) => string;

package/dist/admin/forms/date-picker.js

@@ -7,7 +7,7 @@ const DAY_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
 const INSTANT_RE = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2}):00Z$/;
 const MS_PER_DAY = 86400000;
 const pad = (n) => String(n).padStart(2, "0");
-export function daysInMonth(y, m) {
+function daysInMonth(y, m) {
     return new Date(Date.UTC(y, m, 0)).getUTCDate();
 }
 /** Strict `YYYY-MM-DD`, and a day the calendar has (no 2026-02-30). */

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

@@ -17,7 +17,6 @@ export type FieldsHolder = {
     styles?: Record<string, AdminField>;
     css?: boolean;
 };
-export declare const CSS_DESCRIPTOR: AdminField;
 export declare function tabsFor(holder: FieldsHolder): {
     tab: TabName;
     groups: Group[];

package/dist/admin/forms/tabs.js

@@ -1,4 +1,4 @@
-export const CSS_DESCRIPTOR = { type: "css" };
+const CSS_DESCRIPTOR = { type: "css" };
 const entries = (ns, map) => Object.entries(map ?? {}).map(([key, descriptor]) => ({ key, ns, descriptor }));
 export function tabsFor(holder) {
     const content = [{ entries: entries("fields", holder.fields) }];

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

@@ -1,17 +1,24 @@
-import type { AdminOps, OpResult } from "../ops.ts";
-import { type AssetRecord } from "../../media.ts";
+import type { 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>;
+/** One upload request: the file, its parameters (name, mime, the measured dimensions, posterId), the progress as a
+ *  fraction of the bytes sent. */
+export type UploadSend = (file: Blob, params: Record<string, string>, onProgress?: (fraction: number) => void) => Promise<OpResult<AssetRecord>>;
+export type Measure = (file: Blob, mime: string) => Promise<Measured>;
+export declare function uploadFile(send: UploadSend, file: File, measure: Measure, onProgress?: (fraction: number) => void): Promise<OpResult<AssetRecord>>;
+export declare const uploadQuery: (params: Record<string, string>) => string;
+/** A send that first applies the space's media rules (its registry's `media`) with the store's own words, so a file
+ *  the space refuses is never sent; the service checks again, and its word is final. */
+export declare function checkedSend(send: UploadSend, rules: {
+    maxSize: number;
+    accept: readonly string[];
+}): UploadSend;
+/** The admin's send: an XMLHttpRequest PUT (fetch reports no upload progress) to the admin media route with the
+ *  editor's pass. A pass refused as expired renews once and the file is sent again, as an operation is
+ *  (client-ops.ts). */
+export declare function xhrSend(url: string, token: () => string | null, onExpired?: () => Promise<boolean> | void): UploadSend;