smoodly 0.0.24 → 0.0.25

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

@@ -1,10 +1,12 @@
 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, onSave, onClose }: {
+export declare function CropEditor({ asset, descriptor, value, caption, onSave, onClose }: {
     asset: AssetRecord;
     descriptor: AdminField;
     value: ImageValue;
-    onSave(next: ImageValue): void;
+    /** Given, a Caption field is shown and its text handed back beside the value. */
+    caption?: string;
+    onSave(next: ImageValue, caption?: string): void;
     onClose(): void;
 }): ReactElement;

package/dist/admin/forms/CropEditor.js

@@ -5,6 +5,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // switch when several), a draggable hotspot, the per-use alt override
 // 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.
 import { useRef, useState } from "react";
 import { parseAspect } from "../../media.js";
 import { frameFor } from "../../image/crop-math.js";
@@ -12,7 +14,7 @@ import { Button, Field, Segmented } from "../ui/primitives.js";
 import { Modal } from "../ui/Modal.js";
 import { initialState, moveCrop, placeHotspot, relock, resizeCrop } from "./crop-editor.js";
 const pct = (n) => `${n * 100}%`;
-export function CropEditor({ asset, descriptor, value, onSave, onClose }) {
+export function CropEditor({ 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;
@@ -21,6 +23,7 @@ export function CropEditor({ asset, descriptor, value, onSave, onClose }) {
     const aspect = chosen ? parseAspect(chosen) : undefined;
     const [state, setState] = useState(() => initialState(value, aspect, imageAspect));
     const [alt, setAlt] = useState(value.alt ?? "");
+    const [cap, setCap] = useState(caption ?? "");
     const stage = useRef(null);
     const drag = useRef(null);
     const pick = (next) => { setChosen(next); setState((s) => relock(s, parseAspect(next), imageAspect)); };
@@ -56,6 +59,6 @@ export function CropEditor({ asset, descriptor, value, onSave, onClose }) {
         ...value, crop, hotspot,
         ...(alt.trim() ? { alt: alt.trim() } : { alt: undefined }),
         ...(options.length > 1 && chosen ? { aspect: chosen } : { aspect: undefined }),
-    });
-    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 ? 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) }) }))] })] }) }));
 }

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

@@ -0,0 +1,9 @@
+export declare function DatePicker({ kind, value, onChange, label, initialOpen }: {
+    kind: "date" | "datetime";
+    value: unknown;
+    onChange(value: unknown): void;
+    /** Accessible name of the text box; "Date" when absent. */
+    label?: string;
+    /** Start open: static-markup tests. */
+    initialOpen?: boolean;
+}): import("react").JSX.Element;

package/dist/admin/forms/DatePicker.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The date and datetime widget (spec 2026-09-25 date pickers §4): a text
+// box the editor may type into, a calendar button opening a month grid,
+// and for datetime an hour and a minute select plus a hint naming the
+// zone. The stored value is the field's string (a calendar day, or a UTC
+// instant); the picker edits a datetime in the site's zone from the
+// context, else the browser's. The input is the ONE focus owner: grid and
+// head buttons swallow mousedown, so focus leaving the control is the
+// close signal besides Escape (as the Combobox does). Math in
+// ./date-picker.ts.
+import { useLayoutEffect, useRef, useState } from "react";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { browserZone } from "../../time-zone.js";
+import { cx } from "../ui/primitives.js";
+import { clipBand } from "../ui/Combobox.js";
+import { opensUp } from "../ui/combo-box.js";
+import { useTimeZone } from "./time-zone-context.js";
+import { HOURS, formatDay, fromLocalParts, isSameDay, minuteOptions, monthGrid, monthLabel, parseDay, stepDay, toLocalParts, todayIn, weekdayLabels, } from "./date-picker.js";
+const DEFAULT_HOUR = 9;
+const keepFocus = (e) => e.preventDefault();
+const pad = (n) => String(n).padStart(2, "0");
+export function DatePicker({ kind, value, onChange, label, initialOpen = false }) {
+    const configured = useTimeZone();
+    const zone = configured ?? browserZone();
+    const stored = typeof value === "string" ? value : "";
+    // What the value means on screen: the day (and the zone's clock, for a datetime).
+    const local = kind === "datetime" ? toLocalParts(stored, zone) : null;
+    const day = kind === "date" ? parseDay(stored) : local?.day ?? null;
+    const dayText = kind === "date" ? stored : local ? formatDay(local.day) : "";
+    const hour = local?.hour ?? DEFAULT_HOUR;
+    const minute = local?.minute ?? 0;
+    // A datetime's text box holds a draft until it parses (the value cannot carry a half-typed day).
+    const [draft, setDraft] = useState(null);
+    const [open, setOpen] = useState(initialOpen);
+    const [month, setMonth] = useState(() => { const d = day ?? todayIn(zone); return { y: d.y, m: d.m }; });
+    const [focus, setFocus] = useState(null);
+    const [up, setUp] = useState(false);
+    const root = useRef(null);
+    const pop = useRef(null);
+    const btn = useRef(null);
+    /** The popover's left inside the field: its right edge under the calendar button's (2026-09-26). */
+    const [x, setX] = useState(0);
+    useLayoutEffect(() => {
+        if (!open || !root.current || !pop.current)
+            return;
+        const box = root.current.getBoundingClientRect();
+        const band = clipBand(root.current);
+        setUp(opensUp({ below: band.bottom - box.bottom - 4, above: box.top - band.top - 4, height: pop.current.offsetHeight }));
+        const b = btn.current?.getBoundingClientRect();
+        if (b)
+            setX(Math.max(0, Math.round(b.right - box.left - pop.current.offsetWidth)));
+    }, [open, month]);
+    const emitDay = (next) => {
+        if (next === null) {
+            onChange(undefined);
+            return;
+        }
+        onChange(kind === "date" ? formatDay(next) : fromLocalParts(next, hour, minute, zone));
+    };
+    const showMonth = (d) => setMonth({ y: d.y, m: d.m });
+    const openAt = (d) => {
+        const at = d ?? todayIn(zone);
+        showMonth(at);
+        setFocus(at);
+        setOpen(true);
+    };
+    const close = () => { setOpen(false); setFocus(null); };
+    const pick = (d) => { emitDay(d); setDraft(null); close(); };
+    const moveFocus = (d) => { setFocus(d); showMonth(d); };
+    const stepMonth = (n) => setMonth((c) => { const next = stepDay({ ...c, d: 1 }, "month", n); return { y: next.y, m: next.m }; });
+    const onText = (text) => {
+        if (kind === "date") {
+            onChange(text === "" ? undefined : text);
+            return;
+        }
+        if (text === "") {
+            setDraft(null);
+            onChange(undefined);
+            return;
+        }
+        const parsed = parseDay(text);
+        if (parsed) {
+            setDraft(null);
+            emitDay(parsed);
+        }
+        else
+            setDraft(text);
+    };
+    const onKey = (e) => {
+        if (!open) {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                openAt(day);
+            }
+            return;
+        }
+        const at = focus ?? day ?? todayIn(zone);
+        const steps = {
+            ArrowLeft: ["day", -1], ArrowRight: ["day", 1], ArrowUp: ["week", -1], ArrowDown: ["week", 1], PageUp: ["month", -1], PageDown: ["month", 1],
+        };
+        if (e.key in steps) {
+            e.preventDefault();
+            const [by, n] = steps[e.key];
+            moveFocus(stepDay(at, by, n));
+            return;
+        }
+        if (e.key === "Enter") {
+            e.preventDefault();
+            pick(at);
+            return;
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+    };
+    const onBlur = (e) => {
+        if (root.current && e.relatedTarget instanceof Node && root.current.contains(e.relatedTarget))
+            return;
+        setDraft(null);
+        close();
+    };
+    const onTime = (h, m) => { if (day)
+        onChange(fromLocalParts(day, h, m, zone)); };
+    const today = todayIn(zone);
+    const hint = kind === "datetime"
+        ? configured
+            ? `${zone} time · stored as UTC`
+            : `Your browser's time (${zone}) · stored as UTC — set timeZone in smoodly.config`
+        : null;
+    return (_jsxs("div", { ref: root, className: cx("sm-date", kind === "datetime" && "sm-date--time"), onBlur: onBlur, children: [_jsxs("div", { className: "sm-date__row", children: [_jsxs("span", { className: "sm-inputwrap sm-date__wrap", children: [_jsx("input", { className: "sm-input", "aria-label": label ?? "Date", placeholder: "YYYY-MM-DD", value: draft ?? dayText, onChange: (e) => onText(e.target.value), onKeyDown: onKey }), _jsx("button", { ref: btn, type: "button", className: "sm-date__btn", "aria-label": "Open calendar", "aria-expanded": open, onMouseDown: keepFocus, onClick: () => (open ? close() : openAt(day)), children: _jsx(CalendarDays, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), kind === "datetime" && (_jsxs(_Fragment, { children: [_jsx("select", { className: "sm-select sm-date__time", "aria-label": "Hour", value: hour, disabled: !day, onChange: (e) => onTime(Number(e.target.value), minute), children: HOURS.map((h) => _jsx("option", { value: h, children: pad(h) }, h)) }), _jsx("span", { className: "sm-date__colon", "aria-hidden": "true", children: ":" }), _jsx("select", { className: "sm-select sm-date__time", "aria-label": "Minute", value: minute, disabled: !day, onChange: (e) => onTime(hour, Number(e.target.value)), children: minuteOptions(local ? local.minute : null).map((m) => _jsx("option", { value: m, children: pad(m) }, m)) })] }))] }), hint && _jsx("span", { className: "sm-hint", children: hint }), open && (_jsxs("div", { ref: pop, className: cx("sm-cal", up && "sm-cal--up"), style: { left: x }, role: "dialog", "aria-label": "Calendar", onMouseDown: keepFocus, children: [_jsxs("div", { className: "sm-cal__head", children: [_jsx("button", { type: "button", className: "sm-cal__nav", "aria-label": "Previous month", onClick: () => stepMonth(-1), children: _jsx(ChevronLeft, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("span", { className: "sm-cal__month", children: monthLabel(month.y, month.m) }), _jsx("button", { type: "button", className: "sm-cal__nav", "aria-label": "Next month", onClick: () => stepMonth(1), children: _jsx(ChevronRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { className: "sm-cal__grid", role: "grid", children: [weekdayLabels().map((w) => _jsx("span", { className: "sm-cal__wd", role: "columnheader", children: w }, w)), monthGrid(month.y, month.m).flat().map((d) => (_jsx("button", { type: "button", role: "gridcell", className: cx("sm-cal__day", d.m !== month.m && "sm-cal__day--out", isSameDay(d, today) && "sm-cal__day--today", focus !== null && isSameDay(d, focus) && "sm-cal__day--focus"), "aria-pressed": day !== null && isSameDay(d, day), tabIndex: -1, onClick: () => pick(d), children: d.d }, formatDay(d))))] }), _jsx("div", { className: "sm-cal__foot", children: _jsx("button", { type: "button", className: "sm-field__action", onClick: () => pick(today), children: "Today" }) })] }))] }));
+}

package/dist/admin/forms/FieldWidget.js

@@ -6,6 +6,7 @@ import { ListField } from "./ListField.js";
 import { RefPicker } from "./RefPicker.js";
 import { TagsField } from "./TagsField.js";
 import { RowsWidget } from "./RowsWidget.js";
+import { DatePicker } from "./DatePicker.js";
 import { optionsOf } from "../../fields.js";
 import { isHidden } from "../../conditions.js";
 import { cssProblem } from "../../css.js";
@@ -31,14 +32,18 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
     switch (d.type) {
         case "text":
         case "link":
-        case "slug":
-        case "date": {
+        case "slug": {
             const input = (_jsx("input", { className: d.type === "slug" ? "sm-input sm-input--mono" : "sm-input", value: String(value ?? ""), onChange: (e) => onChange(e.target.value) }));
             control = d.type === "slug" && prefix
                 ? _jsxs("span", { className: "sm-inputwrap", children: [_jsx("span", { className: "sm-prefix", children: prefix }), input] })
                 : input;
             break;
         }
+        case "date":
+        case "datetime":
+            asDiv = true; // the calendar button and the time selects: never inside one implicit label
+            control = _jsx(DatePicker, { kind: d.type, value: value, onChange: onChange, label: label(fieldKey) });
+            break;
         case "number":
             control = (_jsx("input", { className: "sm-input", type: "number", value: value == null ? "" : String(value), onChange: (e) => onChange(e.target.value === "" ? undefined : Number(e.target.value)) }));
             break;
@@ -97,9 +102,10 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
         case "image":
         case "video":
         case "file":
-            asDiv = true; // buttons inside
-            control = _jsx(MediaWidget, { descriptor: d, value: value, onChange: onChange });
-            break;
+            // The widget renders its own Field: its Edit / Replace / Remove sit in the head.
+            return bare
+                ? _jsx(MediaWidget, { descriptor: d, value: value, onChange: onChange, error: message, path: path })
+                : _jsx(MediaWidget, { descriptor: d, value: value, onChange: onChange, label: label(fieldKey), mark: mark, error: message, path: path });
         case "ref":
         case "refList": {
             asDiv = true; // rows of buttons: never inside one implicit label

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

@@ -0,0 +1,9 @@
+import type { ReactElement } from "react";
+import type { AssetRecord, ImageValue } from "../../media.ts";
+export declare function ImagePreview({ asset, value, aspect, height }: {
+    asset: AssetRecord;
+    value: ImageValue;
+    /** The field's declared aspect (one string); the value's own wins. */
+    aspect?: string;
+    height: number;
+}): ReactElement | null;

package/dist/admin/forms/ImagePreview.js

@@ -0,0 +1,11 @@
+"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 }) {
+    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 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}%` } }) }) }));
+}

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

@@ -1,9 +1,15 @@
-import { type ReactElement } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import type { AssetRecord } from "../../media.ts";
 import type { AdminField } from "../serialize.ts";
-export declare function MediaWidget({ descriptor, value, onChange, asset: preloaded }: {
+export declare function MediaWidget({ descriptor, value, onChange, asset: preloaded, label, mark, hint, error: fieldError, path }: {
     descriptor: AdminField;
     value: unknown;
     onChange(value: unknown): void;
     asset?: AssetRecord | null;
+    /** The field head's label and mark, its hint and error, its reveal path — the widget owns the Field. */
+    label?: ReactNode;
+    mark?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    path?: string;
 }): ReactElement;

package/dist/admin/forms/MediaWidget.js

@@ -1,24 +1,27 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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
 // CANVAS_H tall, the frame sized min(CANVAS_H tall, full width) so it
-// keeps its aspect — the alt, and Replace / Edit / Remove.
+// keeps its aspect — the alt, and Edit / Replace / Remove as small text
+// actions in the field's head, right of the label (2026-09-25; the same
+// row a richtext image card shows). The widget renders its own Field so
+// the actions can sit in the head.
 // The record comes from the assets context (cached per id); `asset`
 // preloads it for static renders.
 import { useEffect, useState } from "react";
-import { frameFor, boxAspectOf } from "../../image/crop-math.js";
-import { Button } from "../ui/primitives.js";
+import { Button, Field } from "../ui/primitives.js";
 import { acceptFor, formatBytes } from "../shell/media-list.js";
 import { useAssets } from "./assets-context.js";
 import { uploadFile } from "./upload.js";
 import { MediaPicker } from "./MediaPicker.js";
 import { CropEditor } from "./CropEditor.js";
 import { AssetThumb } from "./MediaGrid.js";
+import { ImagePreview } from "./ImagePreview.js";
 /** The filled preview's canvas height cap (the stylesheet repeats it). */
 const CANVAS_H = 300;
-export function MediaWidget({ descriptor, value, onChange, asset: preloaded }) {
+export function MediaWidget({ descriptor, value, onChange, asset: preloaded, label, mark, hint, error: fieldError, path }) {
     const assets = useAssets();
     const kind = descriptor.type;
     const id = typeof value?.asset === "string" ? value.asset : null;
@@ -75,16 +78,13 @@ export function MediaWidget({ descriptor, value, onChange, asset: preloaded }) {
     }
     else {
         const v = value;
-        const preview = asset.kind === "image" && asset.width && asset.height ? (() => {
-            const image = { url: asset.url, width: asset.width, height: asset.height, mime: asset.mime, alt: "", crop: v.crop, hotspot: v.hotspot, aspect: v.aspect ?? (typeof descriptor.aspect === "string" ? descriptor.aspect : undefined) };
-            const box = boxAspectOf(image);
-            const f = frameFor(image, box);
-            return (_jsx("div", { className: "sm-media__canvas", children: _jsx("div", { className: "sm-media__thumb", style: { aspectRatio: String(box), width: `calc(${CANVAS_H}px * ${box})` }, children: _jsx("img", { src: asset.url, alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }) }));
-        })() : 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, 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) })] }));
-        body = (_jsxs("div", { className: "sm-media", children: [preview, asset.kind === "image" && _jsx("span", { className: "sm-media__alt", children: v.alt ?? asset.alt ?? "No alt text" }), _jsxs("div", { className: "sm-media__actions", children: [_jsx(Button, { variant: "secondary", onClick: () => setPicker(true), children: "Replace" }), asset.kind === "image" && _jsx(Button, { variant: "secondary", onClick: () => setCrop(true), children: "Edit" }), _jsx(Button, { variant: "secondary", onClick: () => onChange(undefined), children: "Remove" })] })] }));
+        body = (_jsxs("div", { className: "sm-media", children: [preview, asset.kind === "image" && _jsx("span", { className: "sm-media__alt", children: v.alt ?? asset.alt ?? "No alt text" })] }));
     }
-    return (_jsxs(_Fragment, { children: [body, error && _jsx("span", { className: "sm-error", children: error }), picker && _jsx(MediaPicker, { kinds: [kind], onPick: select, onClose: () => setPicker(false) }), crop && asset && (_jsx(CropEditor, { asset: asset, descriptor: descriptor, value: value, onSave: (next) => { onChange(next); setCrop(false); }, onClose: () => setCrop(false) }))] }));
+    // Edit only for an image that has its dimensions (the crop editor's frame needs them).
+    const actions = id && asset ? (_jsxs("span", { className: "sm-field__actions", children: [asset.kind === "image" && asset.width && asset.height && (_jsx("button", { type: "button", className: "sm-field__action", onClick: () => setCrop(true), children: "Edit" })), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => setPicker(true), children: "Replace" }), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => onChange(undefined), children: "Remove" })] })) : undefined;
+    return (_jsxs(Field, { label: label, mark: mark, hint: hint, error: fieldError, path: path, action: actions, asDiv: true, children: [body, error && _jsx("span", { className: "sm-error", children: error }), picker && _jsx(MediaPicker, { kinds: [kind], onPick: select, onClose: () => setPicker(false) }), crop && asset && (_jsx(CropEditor, { asset: asset, descriptor: descriptor, value: value, onSave: (next) => { onChange(next); setCrop(false); }, onClose: () => setCrop(false) }))] }));
 }

package/dist/admin/forms/RichtextElementCard.js

@@ -39,5 +39,5 @@ export function RichtextElementCard({ node, editor, getPos, updateAttributes, de
     const scope = { fields, settings };
     const visibleFields = Object.entries(element?.fields ?? {}).filter(([, d]) => !isHidden(d, { self: fields, ...scope }));
     const visibleSettings = Object.entries(element?.settings ?? {}).filter(([, d]) => !isHidden(d, { self: settings, ...scope }));
-    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [visibleFields.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, scope: scope, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), visibleSettings.length > 0 && _jsx(SectionLabel, { mono: true, children: "Settings" }), visibleSettings.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: settings[key], errors: form.errors, path: `${base}.settings.${key}`, scope: scope, onChange: (v) => updateAttributes({ settings: { ...settings, [key]: v } }) }, `setting-${key}`)))] }))] }));
+    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, children: [_jsxs("div", { className: "sm-rtcard__head", "data-drag-handle": true, onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: element?.icon ?? "▤" }), _jsx("span", { className: "sm-rtcard__title", children: element?.title ?? `Unknown element "${name}"` }), _jsx(IconButton, { label: open ? "Collapse" : "Expand", onClick: (e) => { e.stopPropagation(); setOpen((o) => !o); }, children: open ? "▾" : "▸" }), _jsx(IconButton, { label: "Delete element", onClick: (e) => { e.stopPropagation(); deleteNode(); }, children: "\u00D7" })] }), open && element && (_jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [visibleFields.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], errors: form.errors, path: `${base}.${key}`, scope: scope, onChange: (v) => updateAttributes({ fields: { ...fields, [key]: v } }) }, key))), visibleSettings.length > 0 && _jsx(SectionLabel, { caps: true, children: "Settings" }), visibleSettings.map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: settings[key], errors: form.errors, path: `${base}.settings.${key}`, scope: scope, onChange: (v) => updateAttributes({ settings: { ...settings, [key]: v } }) }, `setting-${key}`)))] }))] }));
 }

package/dist/admin/forms/RichtextImageCard.js

@@ -1,16 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The image node view (spec 2026-09-08 block nodes §3): thumbnail,
-// filename, an alt input whose placeholder is the library's alt, a
-// caption input, Replace and Delete. Attribute edits go through
-// updateAttributes so the outer history sees them. Inputs stop keys from
-// reaching the editor (TipTap's node view stops events from form
-// controls), so Backspace in the caption never deletes the node.
+// The image node view (spec 2026-09-08 block nodes §3): the cropped
+// frame, the caption as centred text, and in the head Edit /
+// Replace / Remove — the media field's three, as the same small text
+// actions (2026-09-25). Edit is the crop editor, which also carries the
+// alt and the caption: the card itself holds no inputs. The node's
+// `image` attr is an ImageValue like the field's, so a crop and hotspot
+// store there; the bound renderer applies them. Attribute edits go
+// through updateAttributes so the outer history sees them.
 import { useEffect, useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
-import { IconButton } from "../ui/primitives.js";
 import { useAssets } from "./assets-context.js";
 import { MediaPicker } from "./MediaPicker.js";
+import { CropEditor } from "./CropEditor.js";
+import { ImagePreview } from "./ImagePreview.js";
 import { cardClass, useRichtextForm } from "./richtext-form-context.js";
 export function RichtextImageCard({ node, editor, getPos, updateAttributes, deleteNode, selected }) {
     const assets = useAssets();
@@ -20,6 +23,7 @@ export function RichtextImageCard({ node, editor, getPos, updateAttributes, dele
     const id = typeof value.asset === "string" ? value.asset : null;
     const [asset, setAsset] = useState(null);
     const [picker, setPicker] = useState(false);
+    const [crop, setCrop] = useState(false);
     useEffect(() => {
         if (!id) {
             setAsset(null);
@@ -32,11 +36,12 @@ export function RichtextImageCard({ node, editor, getPos, updateAttributes, dele
     }, [id, assets]);
     const select = () => { const pos = getPos(); if (typeof pos === "number")
         editor.commands.setNodeSelection(pos); };
-    const setAlt = (alt) => updateAttributes({ image: alt === "" ? { asset: id } : { asset: id, alt } });
+    // A new asset keeps the alt and drops the crop: the frame was drawn on the old picture.
     const replace = (record) => {
         assets.remember(record);
         setPicker(false);
         updateAttributes({ image: value.alt ? { asset: record.id, alt: value.alt } : { asset: record.id } });
     };
-    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, "data-drag-handle": true, children: [_jsxs("div", { className: "sm-rtcard__head", onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: "\u25A3" }), _jsx("span", { className: "sm-rtcard__title", children: "Image" }), _jsx(IconButton, { label: "Replace image", onClick: () => setPicker(true), children: "\u21BB" }), _jsx(IconButton, { label: "Delete image", onClick: () => deleteNode(), children: "\u00D7" })] }), _jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [asset ? _jsx("img", { className: "sm-rtcard__thumb", src: asset.url, alt: "" }) : _jsx("div", { className: "sm-rtcard__thumb", style: { height: 80 } }), asset && _jsx("span", { className: "sm-rtcard__file", children: asset.filename }), _jsx("input", { className: "sm-input", "aria-label": "Alt text", placeholder: asset?.alt ?? "Alt text", value: value.alt ?? "", onChange: (e) => setAlt(e.target.value) }), _jsx("input", { className: "sm-input", "aria-label": "Caption", placeholder: "Caption", value: caption, onChange: (e) => updateAttributes({ caption: e.target.value }) })] }), picker && _jsx(MediaPicker, { kinds: ["image"], onPick: replace, onClose: () => setPicker(false) })] }));
+    const editable = asset !== null && asset.kind === "image" && !!asset.width && !!asset.height;
+    return (_jsxs(NodeViewWrapper, { className: cardClass(selected, form.canvas), "data-theme": form.canvas ? "light" : undefined, "data-drag-handle": true, children: [_jsxs("div", { className: "sm-rtcard__head", onClick: select, children: [_jsx("span", { className: "sm-rtcard__icon", "aria-hidden": "true", children: "\u25A3" }), _jsx("span", { className: "sm-rtcard__title", children: "Image" }), _jsxs("span", { className: "sm-field__actions", children: [editable && _jsx("button", { type: "button", className: "sm-field__action", onClick: () => setCrop(true), children: "Edit" }), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => setPicker(true), children: "Replace" }), _jsx("button", { type: "button", className: "sm-field__action", onClick: () => deleteNode(), children: "Remove" })] })] }), _jsxs("div", { className: "sm-rtcard__body", contentEditable: false, children: [asset && id ? _jsx(ImagePreview, { asset: asset, value: { ...value, asset: id }, height: 160 }) : _jsx("div", { className: "sm-rtcard__thumb", style: { height: 80 } }), caption !== "" && _jsx("span", { className: "sm-rtcard__caption", children: caption })] }), picker && _jsx(MediaPicker, { kinds: ["image"], onPick: replace, onClose: () => setPicker(false) }), crop && asset && id && (_jsx(CropEditor, { asset: asset, descriptor: { type: "image" }, value: { ...value, asset: id }, caption: caption, onSave: (next, cap) => { updateAttributes({ image: next, caption: cap ?? "" }); setCrop(false); }, onClose: () => setCrop(false) }))] }));
 }

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

@@ -0,0 +1,44 @@
+/** A calendar day; `m` is 1–12. */
+export type Day = {
+    y: number;
+    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;
+export declare const isSameDay: (a: Day, b: Day) => boolean;
+export declare const isCalendarDay: (s: string) => boolean;
+/** A day `n` days, weeks or months on (negative: back). A month step keeps the day, clamped to the target month's length. */
+export declare function stepDay(day: Day, by: "day" | "week" | "month", n: number): Day;
+/** Six rows of seven, Monday first, the month's days padded with the neighbours'. */
+export declare function monthGrid(y: number, m: number): Day[][];
+/** "September 2026" in a language; English when none is given (static renders). */
+export declare function monthLabel(y: number, m: number, locale?: string): string;
+/** Short weekday names, Monday first (2024-01-01 was a Monday). */
+export declare function weekdayLabels(locale?: string): string[];
+/** Strict ISO to the minute, seconds 00, Z. */
+export declare function parseInstant(s: string): Date | null;
+export declare const formatInstant: (date: Date) => string;
+export declare const isInstant: (s: string) => boolean;
+/** The clock of a zone at an instant, through Intl; `hourCycle: "h23"` so midnight is 0, never 24. */
+export declare function zoneParts(date: Date, zone: string): {
+    day: Day;
+    hour: number;
+    minute: number;
+};
+export declare function toLocalParts(iso: string, zone: string): {
+    day: Day;
+    hour: number;
+    minute: number;
+} | null;
+/** The instant at which the zone's clock reads the given wall time. A
+ *  fixed point: read the zone's clock at a guess, shift by the difference,
+ *  twice for a daylight-saving edge. A wall time that does not exist (the
+ *  spring-forward gap) lands on the instant an hour on. */
+export declare function fromLocalParts(day: Day, hour: number, minute: number, zone: string): string;
+export declare function todayIn(zone: string, now?: Date): Day;
+export declare const HOURS: number[];
+/** The five-minute grid, plus a stored minute that is not on it. */
+export declare function minuteOptions(current: number | null): number[];

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

@@ -0,0 +1,117 @@
+// Pure calendar and instant math for the date and datetime pickers (spec
+// 2026-09-25 date pickers §3). No DOM. Day arithmetic runs in UTC and
+// every zone conversion goes through Intl parts with an explicit zone —
+// never Date's local getters — so a test can pin any zone without
+// touching the process zone, and a browser's own zone never leaks in.
+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) {
+    return new Date(Date.UTC(y, m, 0)).getUTCDate();
+}
+/** Strict `YYYY-MM-DD`, and a day the calendar has (no 2026-02-30). */
+export function parseDay(s) {
+    const m = DAY_RE.exec(s);
+    if (!m)
+        return null;
+    const day = { y: Number(m[1]), m: Number(m[2]), d: Number(m[3]) };
+    if (day.m < 1 || day.m > 12 || day.d < 1 || day.d > daysInMonth(day.y, day.m))
+        return null;
+    return day;
+}
+export const formatDay = (day) => `${String(day.y).padStart(4, "0")}-${pad(day.m)}-${pad(day.d)}`;
+export const isSameDay = (a, b) => a.y === b.y && a.m === b.m && a.d === b.d;
+export const isCalendarDay = (s) => parseDay(s) !== null;
+const dayOf = (t) => {
+    const dt = new Date(t);
+    return { y: dt.getUTCFullYear(), m: dt.getUTCMonth() + 1, d: dt.getUTCDate() };
+};
+/** A day `n` days, weeks or months on (negative: back). A month step keeps the day, clamped to the target month's length. */
+export function stepDay(day, by, n) {
+    if (by === "month") {
+        const total = day.y * 12 + (day.m - 1) + n;
+        const y = Math.floor(total / 12);
+        const m = total - y * 12 + 1;
+        return { y, m, d: Math.min(day.d, daysInMonth(y, m)) };
+    }
+    return dayOf(Date.UTC(day.y, day.m - 1, day.d) + n * (by === "week" ? 7 : 1) * MS_PER_DAY);
+}
+/** Six rows of seven, Monday first, the month's days padded with the neighbours'. */
+export function monthGrid(y, m) {
+    const lead = (new Date(Date.UTC(y, m - 1, 1)).getUTCDay() + 6) % 7; // Monday = 0
+    let day = stepDay({ y, m, d: 1 }, "day", -lead);
+    const rows = [];
+    for (let r = 0; r < 6; r++) {
+        const row = [];
+        for (let c = 0; c < 7; c++) {
+            row.push(day);
+            day = stepDay(day, "day", 1);
+        }
+        rows.push(row);
+    }
+    return rows;
+}
+/** "September 2026" in a language; English when none is given (static renders). */
+export function monthLabel(y, m, locale = "en") {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(new Date(Date.UTC(y, m - 1, 1)));
+}
+/** Short weekday names, Monday first (2024-01-01 was a Monday). */
+export function weekdayLabels(locale = "en") {
+    const f = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+    return [0, 1, 2, 3, 4, 5, 6].map((i) => f.format(new Date(Date.UTC(2024, 0, 1 + i))));
+}
+/** Strict ISO to the minute, seconds 00, Z. */
+export function parseInstant(s) {
+    const m = INSTANT_RE.exec(s);
+    if (!m)
+        return null;
+    const day = parseDay(m[1]);
+    if (!day)
+        return null;
+    const hour = Number(m[2]), minute = Number(m[3]);
+    if (hour > 23 || minute > 59)
+        return null;
+    return new Date(Date.UTC(day.y, day.m - 1, day.d, hour, minute));
+}
+export const formatInstant = (date) => `${formatDay(dayOf(date.getTime()))}T${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:00Z`;
+export const isInstant = (s) => parseInstant(s) !== null;
+/** The clock of a zone at an instant, through Intl; `hourCycle: "h23"` so midnight is 0, never 24. */
+export function zoneParts(date, zone) {
+    const parts = new Intl.DateTimeFormat("en-US", {
+        timeZone: zone, hourCycle: "h23", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit",
+    }).formatToParts(date);
+    const get = (type) => Number(parts.find((p) => p.type === type)?.value);
+    return { day: { y: get("year"), m: get("month"), d: get("day") }, hour: get("hour") % 24, minute: get("minute") };
+}
+export function toLocalParts(iso, zone) {
+    const date = parseInstant(iso);
+    return date ? zoneParts(date, zone) : null;
+}
+/** The instant at which the zone's clock reads the given wall time. A
+ *  fixed point: read the zone's clock at a guess, shift by the difference,
+ *  twice for a daylight-saving edge. A wall time that does not exist (the
+ *  spring-forward gap) lands on the instant an hour on. */
+export function fromLocalParts(day, hour, minute, zone) {
+    const want = Date.UTC(day.y, day.m - 1, day.d, hour, minute);
+    let guess = want;
+    for (let i = 0; i < 2; i++) {
+        const p = zoneParts(new Date(guess), zone);
+        const wall = Date.UTC(p.day.y, p.day.m - 1, p.day.d, p.hour, p.minute);
+        if (wall === want)
+            break;
+        guess += want - wall;
+    }
+    return formatInstant(new Date(guess));
+}
+export function todayIn(zone, now = new Date()) {
+    return zoneParts(now, zone).day;
+}
+export const HOURS = Array.from({ length: 24 }, (_, i) => i);
+/** The five-minute grid, plus a stored minute that is not on it. */
+export function minuteOptions(current) {
+    const grid = Array.from({ length: 12 }, (_, i) => i * 5);
+    if (current === null || grid.includes(current))
+        return grid;
+    return [...grid, current].sort((a, b) => a - b);
+}

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

@@ -1,5 +1,8 @@
 import { type ReactElement, type ReactNode } from "react";
 import type { AdminElement } from "../serialize.ts";
+/** The list is handed on by content: the registry is re-serialized on every
+ *  server render (each autosave), and the richtext editor's deps must not
+ *  see a new array for the same elements (see useRichtextEditor, 2026-09-26). */
 export declare function ElementsProvider({ elements, children }: {
     elements: AdminElement[];
     children: ReactNode;

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

@@ -3,10 +3,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // The serialized element descriptors, for the richtext widget's insert
 // menu and element cards. Defaults to none, so a form rendered without
 // the shell (tests, a bare page) still works.
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 const Ctx = createContext([]);
+/** The list is handed on by content: the registry is re-serialized on every
+ *  server render (each autosave), and the richtext editor's deps must not
+ *  see a new array for the same elements (see useRichtextEditor, 2026-09-26). */
 export function ElementsProvider({ elements, children }) {
-    return _jsx(Ctx.Provider, { value: elements, children: children });
+    const key = JSON.stringify(elements);
+    const stable = useMemo(() => elements, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+    return _jsx(Ctx.Provider, { value: stable, children: children });
 }
 export function useElements() {
     return useContext(Ctx);

package/dist/admin/forms/time-zone-context.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare function TimeZoneProvider({ zone, children }: {
+    zone?: string;
+    children: ReactNode;
+}): ReactElement;
+/** The configured zone, or undefined. */
+export declare function useTimeZone(): string | undefined;