smoodly 0.0.23 → 0.0.25

package/dist/admin/editor/PageSettings.js

@@ -10,6 +10,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { updatedLine } from "../ui/format.js";
 import { Field, InfoRow, SectionLabel } from "../ui/primitives.js";
+import { confirmLiveUrl } from "../shell/live-url.js";
 export function PageSettings({ record, locale, registry, path, fixed, onRename }) {
     const row = record.locales[locale];
     const [draft, setDraft] = useState({ title: row?.title ?? "", slug: row?.slug ?? "" });
@@ -30,6 +31,11 @@ export function PageSettings({ record, locale, registry, path, fixed, onRename }
             setError(`A ${key} is required — nothing falls back to another locale.`);
             return;
         }
+        // A published slug is a live URL: one confirm, Cancel restores the input (members management §5).
+        if (key === "slug" && !(await confirmLiveUrl({ status: row.status, from: row.slug, to: next }, { name: row.title, path }))) {
+            setDraft((d) => ({ ...d, slug: row.slug }));
+            return;
+        }
         setError(await onRename({ [key]: next }));
     };
     const onKey = (key) => (e) => {

package/dist/admin/editor/SeoSettings.js

@@ -11,5 +11,5 @@ function Counter({ n, max }) {
 export function SeoSettings({ meta, onPatch }) {
     const title = str(meta.title);
     const description = str(meta.description);
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(Field, { label: "Title", counter: _jsx(Counter, { n: title.length, max: SEO_TITLE_MAX }), hint: "Used in search results and link previews. Empty: the page title.", children: _jsx("input", { className: "sm-input", value: title, onChange: (e) => onPatch("title", e.target.value) }) }), _jsx(Field, { label: "Description", counter: _jsx(Counter, { n: description.length, max: SEO_DESCRIPTION_MAX }), children: _jsx("textarea", { className: "sm-textarea", rows: 3, value: description, onChange: (e) => onPatch("description", e.target.value) }) }), _jsx(Field, { label: "Social image", hint: "1200\u00D7630 recommended", asDiv: true, children: _jsx(MediaWidget, { descriptor: { type: "image" }, value: meta.ogImage, onChange: (v) => onPatch("ogImage", v) }) }), _jsx(Field, { label: "Hide from search engines", asDiv: true, children: _jsx(Switch, { checked: meta.noindex === true, onChange: (v) => onPatch("noindex", v), label: "Hide from search engines" }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(Field, { label: "Title", counter: _jsx(Counter, { n: title.length, max: SEO_TITLE_MAX }), hint: "Used in search results and link previews. Empty: the page title.", children: _jsx("input", { className: "sm-input", value: title, onChange: (e) => onPatch("title", e.target.value) }) }), _jsx(Field, { label: "Description", counter: _jsx(Counter, { n: description.length, max: SEO_DESCRIPTION_MAX }), children: _jsx("textarea", { className: "sm-textarea", rows: 3, value: description, onChange: (e) => onPatch("description", e.target.value) }) }), _jsx(MediaWidget, { descriptor: { type: "image" }, value: meta.ogImage, onChange: (v) => onPatch("ogImage", v), label: "Social image", hint: "1200\u00D7630 recommended" }), _jsx(Field, { label: "Hide from search engines", asDiv: true, children: _jsx(Switch, { checked: meta.noindex === true, onChange: (v) => onPatch("noindex", v), label: "Hide from search engines" }) })] }));
 }

package/dist/admin/editor/locale-url.d.ts

@@ -1,12 +1,15 @@
 import type { AdminRegistry } from "../serialize.ts";
 type Locales = AdminRegistry["locales"];
-/** A supported ?locale from the query string, else the default. */
-export declare function localeFromSearch(search: string, locales: Locales): string;
+/** A supported ?locale from the query string, else the fallback (the default). */
+export declare function localeFromSearch(search: string, locales: Locales, fallback?: string): string;
 /** The same URL pointed at a locale, keeping the rest of the query
  *  string — a bare `?locale=…` would drop every other param. */
 export declare function withLocale(href: string, next: string): string;
+/** The URL's locale, else the remembered one, else the default — and
+ *  remembered from here on. Read once per screen, not per render. */
 export declare function localeFromUrl(registry: AdminRegistry): string;
-/** Point the current URL at a locale in place. A replace, so the router
- *  never asks the leave guard — the form's own confirm covers a switch. */
+/** Point the current URL at a locale in place, remembering it. A replace,
+ *  so the router never asks the leave guard — the form's own confirm
+ *  covers a switch. */
 export declare function writeLocaleToUrl(next: string): void;
 export {};

package/dist/admin/editor/locale-url.js

@@ -1,8 +1,9 @@
 import { navigate } from "../shell/router.js";
-/** A supported ?locale from the query string, else the default. */
-export function localeFromSearch(search, locales) {
+import { rememberLocale, rememberedLocale } from "../shell/locale-memory.js";
+/** A supported ?locale from the query string, else the fallback (the default). */
+export function localeFromSearch(search, locales, fallback = locales.default) {
     const l = new URLSearchParams(search).get("locale");
-    return l && locales.supported.includes(l) ? l : locales.default;
+    return l && locales.supported.includes(l) ? l : fallback;
 }
 /** The same URL pointed at a locale, keeping the rest of the query
  *  string — a bare `?locale=…` would drop every other param. */
@@ -11,20 +12,26 @@ export function withLocale(href, next) {
     u.searchParams.set("locale", next);
     return u.toString();
 }
+/** The URL's locale, else the remembered one, else the default — and
+ *  remembered from here on. Read once per screen, not per render. */
 export function localeFromUrl(registry) {
     try {
-        return localeFromSearch(window.location.search, registry.locales);
+        const locale = localeFromSearch(window.location.search, registry.locales, rememberedLocale(registry.locales));
+        rememberLocale(locale);
+        return locale;
     }
     catch {
         // no window — the default is fine
         return registry.locales.default;
     }
 }
-/** Point the current URL at a locale in place. A replace, so the router
- *  never asks the leave guard — the form's own confirm covers a switch. */
+/** Point the current URL at a locale in place, remembering it. A replace,
+ *  so the router never asks the leave guard — the form's own confirm
+ *  covers a switch. */
 export function writeLocaleToUrl(next) {
+    rememberLocale(next);
     try {
-        navigate(withLocale(window.location.href, next), { replace: true });
+        void navigate(withLocale(window.location.href, next), { replace: true });
     }
     catch {
         // no window (or no history) — the URL is cosmetic here

package/dist/admin/editor/usePageLocale.js

@@ -5,6 +5,7 @@
 import { useState } from "react";
 import { sourceLocaleOf } from "../shell/pages-tree.js";
 import { localeFromUrl, writeLocaleToUrl } from "./locale-url.js";
+import { confirm } from "../ui/confirm.js";
 export function usePageLocale({ registry, ops, id, record, setRecord, flush, fail, clearBanner, reload }) {
     const [locale, setLocale] = useState(() => localeFromUrl(registry));
     const [adding, setAdding] = useState(false);
@@ -59,7 +60,14 @@ export function usePageLocale({ registry, ops, id, record, setRecord, flush, fai
         const remaining = Object.keys(record.locales).filter((l) => l !== locale);
         if (remaining.length === 0)
             return;
-        if (!window.confirm(`Remove this page from ${locale}? Its ${locale} content and history are deleted.`))
+        const ok = await confirm({
+            title: `Remove this page from ${locale}?`,
+            body: `Its ${locale} content and history are deleted. Other languages are not affected.`,
+            confirmLabel: `Remove from ${locale}`,
+            destructive: true,
+            subject: { name: record.locales[locale]?.title ?? id },
+        });
+        if (!ok)
             return;
         // Let a pending save land before the row goes, so no save races the
         // delete — and if it cannot land, stop: a retry mid-flight would

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[];