smoodly 0.0.9 → 0.0.11

package/dist/admin/editor/useCanvasBridge.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from "react";
+import type { BridgeRect, ToBridge, ZoneRect } from "./protocol.ts";
+export type Geometry = "waiting" | "ok" | "missing";
+export declare function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover }: {
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+    iframeSrc: string | null;
+    onSelect(id: string | null): void;
+    onHover(id: string | null): void;
+}): {
+    rects: BridgeRect[];
+    emptyZones: ZoneRect[];
+    docH: number;
+    geometry: Geometry;
+    postToCanvas: (m: ToBridge) => void;
+};

package/dist/admin/editor/useCanvasBridge.js

@@ -0,0 +1,53 @@
+// The admin side of the editor⇄canvas protocol: the geometry the bridge
+// reports (node rects, empty zones, document height), select/hover
+// forwarded from the iframe, and `postToCanvas` for refresh/scroll.
+// Geometry silence is survivable — after GEOMETRY_TIMEOUT_MS the overlay
+// goes dark, the iframe and the outline keep working.
+import { useCallback, useEffect, useRef, useState } from "react";
+const GEOMETRY_TIMEOUT_MS = 4000;
+export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover }) {
+    const [rects, setRects] = useState([]);
+    const [emptyZones, setEmptyZones] = useState([]);
+    const [docH, setDocH] = useState(900);
+    const [geometry, setGeometry] = useState("waiting");
+    // The listener registers once; the handlers are read through refs.
+    const handlers = useRef({ onSelect, onHover });
+    handlers.current = { onSelect, onHover };
+    // A new canvas URL (a locale switch, a rename) means new geometry — the
+    // previous page's rects are stale the instant the iframe starts loading
+    // a different route, so clear them alongside resetting geometry.
+    useEffect(() => { setGeometry("waiting"); setRects([]); setEmptyZones([]); }, [iframeSrc]);
+    const postToCanvas = useCallback((m) => {
+        iframeRef.current?.contentWindow?.postMessage(m, "*");
+    }, [iframeRef]);
+    useEffect(() => {
+        const onMessage = (e) => {
+            const m = e.data;
+            if (m?.source !== "smoodly")
+                return;
+            if (e.source !== iframeRef.current?.contentWindow)
+                return;
+            if (m.kind === "rects") {
+                setRects(m.nodes);
+                setEmptyZones(m.emptyZones);
+                setDocH(m.docH);
+                setGeometry("ok");
+            }
+            else if (m.kind === "select") {
+                handlers.current.onSelect(m.id);
+            }
+            else if (m.kind === "hover") {
+                handlers.current.onHover(m.id);
+            }
+        };
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [iframeRef]);
+    useEffect(() => {
+        if (!iframeSrc || geometry !== "waiting")
+            return;
+        const t = setTimeout(() => setGeometry((g) => (g === "waiting" ? "missing" : g)), GEOMETRY_TIMEOUT_MS);
+        return () => clearTimeout(t);
+    }, [iframeSrc, geometry]);
+    return { rects, emptyZones, docH, geometry, postToCanvas };
+}

package/dist/admin/editor/usePageLocale.d.ts

@@ -0,0 +1,23 @@
+import type { PageRecord } from "../../store.ts";
+import type { AdminOps } from "../ops.ts";
+import type { AdminRegistry } from "../serialize.ts";
+export declare function usePageLocale({ registry, ops, id, record, setRecord, flush, fail, clearBanner, reload }: {
+    registry: AdminRegistry;
+    ops: AdminOps;
+    id: string;
+    record: PageRecord | null;
+    setRecord(record: PageRecord): void;
+    /** Flush the pending autosave; false when it could not land. */
+    flush(): Promise<boolean>;
+    /** Show an error banner. */
+    fail(text: string): void;
+    clearBanner(): void;
+    /** Reload the editor for the current locale. */
+    reload(): void;
+}): {
+    locale: string;
+    adding: boolean;
+    switchLocale: (next: string) => Promise<void>;
+    doAddLocale: (target: string) => Promise<void>;
+    doRemoveLocale: () => Promise<void>;
+};

package/dist/admin/editor/usePageLocale.js

@@ -0,0 +1,88 @@
+// The editor's locale lifecycle: which locale is being edited (from the
+// URL), switching, adding this page to a locale, removing it from one.
+// Every transition flushes the pending autosave first — a save landing
+// after the switch would persist THIS tree under the new locale.
+import { useState } from "react";
+import { sourceLocaleOf } from "../shell/pages-tree.js";
+import { localeFromUrl, writeLocaleToUrl } from "./locale-url.js";
+export function usePageLocale({ registry, ops, id, record, setRecord, flush, fail, clearBanner, reload }) {
+    const [locale, setLocale] = useState(() => localeFromUrl(registry));
+    const [adding, setAdding] = useState(false);
+    const switchLocale = async (next) => {
+        if (next === locale)
+            return;
+        const flushed = await flush();
+        if (!flushed) {
+            fail("Couldn't save your latest changes — switch cancelled.");
+            return;
+        }
+        writeLocaleToUrl(next);
+        clearBanner();
+        setLocale(next);
+    };
+    /** Add a locale, copying the tree on screen (or the record's source locale when this one is absent). */
+    const doAddLocale = async (target) => {
+        if (!record || adding)
+            return;
+        const from = record.locales[locale] ? locale : sourceLocaleOf(record, registry);
+        if (from === locale) {
+            const flushed = await flush();
+            if (!flushed) {
+                fail("Couldn't save your latest changes — add cancelled.");
+                return;
+            }
+        }
+        setAdding(true);
+        let result;
+        try {
+            result = await ops.pages.addLocale(id, target, { from });
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        setAdding(false);
+        if (!result.ok) {
+            fail(result.message);
+            return;
+        }
+        // The record now HAS the locale; keep it, or the pane below would go
+        // on offering "doesn't exist yet" until the reload lands.
+        setRecord(result.data);
+        if (target === locale)
+            reload();
+        else
+            void switchLocale(target);
+    };
+    const doRemoveLocale = async () => {
+        if (!record)
+            return;
+        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.`))
+            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
+        // recreate the very draft the removal is deleting.
+        const flushed = await flush();
+        if (!flushed) {
+            fail("Couldn't save your latest changes — removal cancelled.");
+            return;
+        }
+        let result;
+        try {
+            result = await ops.pages.removeLocale(id, locale);
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!result.ok) {
+            fail(result.message);
+            return;
+        }
+        const next = remaining.includes(registry.locales.default) ? registry.locales.default : remaining[0];
+        writeLocaleToUrl(next);
+        setLocale(next);
+    };
+    return { locale, adding, switchLocale, doAddLocale, doRemoveLocale };
+}

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

@@ -0,0 +1,10 @@
+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 }: {
+    asset: AssetRecord;
+    descriptor: AdminField;
+    value: ImageValue;
+    onSave(next: ImageValue): void;
+    onClose(): void;
+}): ReactElement;

package/dist/admin/forms/CropEditor.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The crop and hotspot modal (spec 2026-09-08 media §10): the full image,
+// a draggable rectangle (locked to the declared aspect, a segmented
+// 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.
+import { useRef, useState } from "react";
+import { parseAspect } from "../../media.js";
+import { frameFor } from "../../image/crop-math.js";
+import { Button, Field, Segmented } from "../ui/primitives.js";
+import { Modal } from "../ui/Modal.js";
+import { initialState, moveCrop, placeHotspot, relock, resizeCrop } from "./crop-editor.js";
+const pct = (n) => `${n * 100}%`;
+export function CropEditor({ asset, descriptor, value, 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;
+    const imageAspect = width / height;
+    const [chosen, setChosen] = useState(options.includes(value.aspect ?? "") ? value.aspect : options[0]);
+    const aspect = chosen ? parseAspect(chosen) : undefined;
+    const [state, setState] = useState(() => initialState(value, aspect, imageAspect));
+    const [alt, setAlt] = useState(value.alt ?? "");
+    const stage = useRef(null);
+    const drag = useRef(null);
+    const pick = (next) => { setChosen(next); setState((s) => relock(s, parseAspect(next), imageAspect)); };
+    const begin = (kind) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        drag.current = { kind, x: e.clientX, y: e.clientY, start: state };
+    };
+    const move = (e) => {
+        const d = drag.current, el = stage.current;
+        if (!d || !el)
+            return;
+        const dx = (e.clientX - d.x) / el.clientWidth, dy = (e.clientY - d.y) / el.clientHeight;
+        const lock = aspect === undefined ? undefined : aspect / imageAspect;
+        if (d.kind === "move") {
+            const crop = moveCrop(d.start.crop, dx, dy);
+            setState({ crop, hotspot: placeHotspot(d.start.hotspot, crop) });
+        }
+        else if (d.kind === "hotspot") {
+            setState({ crop: d.start.crop, hotspot: placeHotspot({ x: d.start.hotspot.x + dx, y: d.start.hotspot.y + dy }, d.start.crop) });
+        }
+        else {
+            const crop = resizeCrop(d.start.crop, d.kind, dx, dy, lock);
+            setState({ crop, hotspot: placeHotspot(d.start.hotspot, crop) });
+        }
+    };
+    const end = () => { drag.current = null; };
+    const { crop, hotspot } = state;
+    const previewAspect = aspect ?? (crop.width * imageAspect) / crop.height;
+    const frame = frameFor({ width, height, crop, hotspot }, previewAspect);
+    const save = () => onSave({
+        ...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) }) })] })] }) }));
+}

package/dist/admin/forms/FieldWidget.js

@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Objects and lists recurse through this same component; the list's
 // logic lives in ./list.ts as pure functions.
 import { useState } from "react";
-import { plainToRichtext, richtextToPlain } from "../richtext.js";
+import { RichtextWidget } from "./RichtextWidget.js";
+import { MediaWidget } from "./MediaWidget.js";
 import { Button, Field, IconButton } from "../ui/primitives.js";
 import { addItem, itemSummary, moveIndex, moveItem, patchObject, removeIndex, removeItem } from "./list.js";
 const label = (key) => key.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase());
@@ -41,15 +42,16 @@ export function FieldWidget({ descriptor: d, value, onChange, errors, path: path
             break;
         }
         case "richtext":
-            control = _jsx(RichtextArea, { value: value, onChange: onChange });
+            // The toolbar holds buttons, so this control can never sit in a <label>.
+            asDiv = true;
+            control = _jsx(RichtextWidget, { value: value, toolset: d.toolset, onChange: onChange });
             break;
         case "image":
         case "video":
-        case "file": {
-            const url = value?.url ?? "";
-            control = (_jsx("input", { className: "sm-input", placeholder: "https://\u2026", value: url, onChange: (e) => onChange(e.target.value ? { url: e.target.value } : undefined) }));
+        case "file":
+            asDiv = true; // buttons inside
+            control = _jsx(MediaWidget, { descriptor: d, value: value, onChange: onChange });
             break;
-        }
         case "ref":
             control = (_jsxs("select", { className: "sm-select", value: String(value ?? ""), onChange: (e) => onChange(e.target.value || undefined), children: [_jsx("option", { value: "", children: "\u2014" }), refOptions.map((o) => _jsx("option", { value: o.id, children: optionTitle(o) }, o.id))] }));
             break;
@@ -110,23 +112,3 @@ export function FieldWidget({ descriptor: d, value, onChange, errors, path: path
 function ListRow({ index, count, summary, open, onToggle, onMove, onRemove, children }) {
     return (_jsxs("div", { className: "sm-listrow", children: [_jsxs("div", { className: "sm-listrow__head", children: [_jsxs("button", { type: "button", className: "sm-listrow__toggle", "aria-expanded": open, onClick: onToggle, children: [_jsx("span", { "aria-hidden": "true", children: open ? "▾" : "▸" }), _jsx("span", { className: "sm-listrow__summary", children: summary })] }), _jsx(IconButton, { label: "Move up", disabled: index === 0, onClick: () => onMove(index - 1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", disabled: index === count - 1, onClick: () => onMove(index + 1), children: "\u2193" }), _jsx(IconButton, { label: "Remove", onClick: onRemove, children: "\u00D7" })] }), open && _jsx("div", { className: "sm-listrow__body", children: children })] }));
 }
-/** The interim richtext widget owns its text: the line syntax drops a trailing
- *  newline on the round trip, so deriving the value from the document each
- *  render would snap the caret back after Enter at the end of the text. Re-seeds
- *  when the document changes underneath it (load, locale switch). The parent must
- *  store the emitted document by reference — a clone or a server copy handed back
- *  would re-seed the text and bring the caret snap back. */
-function RichtextArea({ value, onChange }) {
-    const [text, setText] = useState(() => richtextToPlain(value));
-    const [seen, setSeen] = useState(value);
-    if (value !== seen) {
-        setSeen(value);
-        setText(richtextToPlain(value));
-    }
-    return (_jsx("textarea", { className: "sm-textarea", rows: 5, value: text, onChange: (e) => {
-            const doc = plainToRichtext(e.target.value);
-            setText(e.target.value);
-            setSeen(doc);
-            onChange(doc);
-        } }));
-}

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

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import type { AssetRecord } from "../../media.ts";
+export declare function AssetThumb({ asset, className }: {
+    asset: AssetRecord;
+    className?: string;
+}): ReactElement;
+export declare function MediaGrid({ items, selectedId, onSelect }: {
+    items: AssetRecord[];
+    selectedId?: string | null;
+    onSelect(asset: AssetRecord): void;
+}): ReactElement;

package/dist/admin/forms/MediaGrid.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatBytes } from "../shell/media-list.js";
+export function AssetThumb({ asset, className }) {
+    if (asset.kind === "image")
+        return _jsx("img", { className: className, src: asset.url, alt: "", loading: "lazy" });
+    if (asset.kind === "video") {
+        return asset.posterId
+            ? _jsx("video", { className: className, src: asset.url, muted: true, playsInline: true, preload: "metadata" })
+            : _jsx("span", { className: `${className ?? ""} sm-thumb--chip`, children: "Video" });
+    }
+    return _jsx("span", { className: `${className ?? ""} sm-thumb--chip`, children: asset.filename.split(".").pop()?.toUpperCase() ?? "File" });
+}
+export function MediaGrid({ items, selectedId, onSelect }) {
+    return (_jsxs("div", { className: "sm-mediagrid", children: [items.map((asset) => (_jsxs("button", { type: "button", className: "sm-mediacard", "aria-pressed": asset.id === selectedId, onClick: () => onSelect(asset), children: [_jsx("span", { className: "sm-mediacard__thumb", children: _jsx(AssetThumb, { asset: asset, className: "sm-mediacard__img" }) }), _jsx("span", { className: "sm-mediacard__name", children: asset.title ?? asset.filename }), _jsxs("span", { className: "sm-mediacard__meta", children: [asset.width && asset.height ? `${asset.width}×${asset.height} · ` : "", formatBytes(asset.size)] })] }, asset.id))), items.length === 0 && _jsx("div", { className: "sm-empty", children: "No media yet." })] }));
+}

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

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import type { AssetKind, AssetRecord } from "../../media.ts";
+export declare function MediaPicker({ kinds, onPick, onClose, initialItems }: {
+    kinds: AssetKind[];
+    onPick(asset: AssetRecord): void;
+    onClose(): void;
+    initialItems?: AssetRecord[];
+}): ReactElement;

package/dist/admin/forms/MediaPicker.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The library modal (spec 2026-09-08 media §10): grid first, an upload
+// zone above it that uploads and selects in one motion, search and a
+// kind filter. `initialItems` seeds the grid (tests and the widget's
+// optimistic reopen); the effect loads the real list.
+import { useCallback, useEffect, useState } from "react";
+import { Banner, Segmented } from "../ui/primitives.js";
+import { Modal } from "../ui/Modal.js";
+import { useAssets } from "./assets-context.js";
+import { uploadFile } from "./upload.js";
+import { MediaGrid } from "./MediaGrid.js";
+import { KIND_FILTERS, acceptFor, kindOfFilter } from "../shell/media-list.js";
+export function MediaPicker({ kinds, onPick, onClose, initialItems = [] }) {
+    const assets = useAssets();
+    const [items, setItems] = useState(initialItems);
+    const [search, setSearch] = useState("");
+    const [filter, setFilter] = useState(kinds.length === 1 ? (kinds[0] === "image" ? "Images" : kinds[0] === "video" ? "Video" : "Files") : "All");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const filters = kinds.length === 1 ? [filter] : KIND_FILTERS;
+    const load = useCallback(() => {
+        assets.ops.list({ kind: kindOfFilter(filter), search: search || undefined })
+            .then((r) => (r.ok ? setItems(r.data.items.filter((a) => kinds.includes(a.kind))) : setError(r.message)))
+            .catch(() => setError("Couldn't reach the server."));
+    }, [assets, filter, search, kinds]);
+    useEffect(load, [load]);
+    const onFiles = async (files) => {
+        const file = files?.[0];
+        if (!file)
+            return;
+        setBusy(true);
+        setError(null);
+        const r = await uploadFile(assets.ops, file, assets.upload);
+        setBusy(false);
+        if (!r.ok) {
+            setError(r.message);
+            return;
+        }
+        assets.remember(r.data);
+        onPick(r.data);
+    };
+    return (_jsxs(Modal, { title: "Media", onClose: onClose, children: [_jsxs("div", { className: "sm-picker-bar", children: [_jsx("input", { className: "sm-input", placeholder: "Search media", value: search, onChange: (e) => setSearch(e.target.value), style: { maxWidth: 260 } }), filters.length > 1 && _jsx(Segmented, { options: filters, value: filter, onChange: setFilter }), _jsxs("label", { className: "sm-btn sm-btn--primary", style: { marginLeft: "auto" }, children: [busy ? "Uploading…" : "Upload", _jsx("input", { type: "file", accept: acceptFor(kinds, assets.media.accept), hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] })] }), error && _jsx(Banner, { tone: "error", onDismiss: () => setError(null), children: error }), _jsx("div", { className: "sm-dropzone sm-dropzone--bar", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: "Drop a file here to upload it" }), _jsx(MediaGrid, { items: items, onSelect: onPick })] }));
+}

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

@@ -0,0 +1,9 @@
+import { type ReactElement } from "react";
+import type { AssetRecord } from "../../media.ts";
+import type { AdminField } from "../serialize.ts";
+export declare function MediaWidget({ descriptor, value, onChange, asset: preloaded }: {
+    descriptor: AdminField;
+    value: unknown;
+    onChange(value: unknown): void;
+    asset?: AssetRecord | null;
+}): ReactElement;

package/dist/admin/forms/MediaWidget.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The media field widget (spec 2026-09-08 media §10): empty is a drop
+// zone (upload straight away, or open the library); filled is the
+// thumbnail with the crop applied, the alt, and Replace / Edit / Remove.
+// 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 { 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";
+export function MediaWidget({ descriptor, value, onChange, asset: preloaded }) {
+    const assets = useAssets();
+    const kind = descriptor.type;
+    const id = typeof value?.asset === "string" ? value.asset : null;
+    const [asset, setAsset] = useState(preloaded ?? null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [picker, setPicker] = useState(false);
+    const [crop, setCrop] = useState(false);
+    useEffect(() => {
+        if (!id) {
+            setAsset(null);
+            return;
+        }
+        if (preloaded?.id === id) {
+            setAsset(preloaded);
+            return;
+        }
+        let live = true;
+        assets.get(id).then((r) => { if (live)
+            setAsset(r); });
+        return () => { live = false; };
+    }, [id, assets, preloaded]);
+    const select = (record) => {
+        assets.remember(record);
+        setAsset(record);
+        setPicker(false);
+        onChange({ asset: record.id });
+    };
+    const onFiles = async (files) => {
+        const file = files?.[0];
+        if (!file)
+            return;
+        setBusy(true);
+        setError(null);
+        const r = await uploadFile(assets.ops, file, assets.upload);
+        setBusy(false);
+        if (!r.ok) {
+            setError(r.message);
+            return;
+        }
+        select(r.data);
+    };
+    const accept = acceptFor([kind], assets.media.accept);
+    const fileInput = (label, variant = "secondary") => (_jsxs("label", { className: `sm-btn sm-btn--${variant}`, children: [busy ? "Uploading…" : label, _jsx("input", { type: "file", accept: accept, hidden: true, disabled: busy, onChange: (e) => { void onFiles(e.target.files); } })] }));
+    let body;
+    if (!id) {
+        body = (_jsxs("div", { className: "sm-dropzone", onDragOver: (e) => e.preventDefault(), onDrop: (e) => { e.preventDefault(); void onFiles(e.dataTransfer.files); }, children: [_jsx("span", { children: "Drop a file here" }), _jsxs("div", { className: "sm-media__actions", children: [fileInput("Upload", "primary"), _jsx(Button, { variant: "secondary", onClick: () => setPicker(true), children: "Choose from library" })] })] }));
+    }
+    else if (!asset) {
+        body = _jsx("div", { className: "sm-media__chip", children: "Loading\u2026" });
+    }
+    else if (asset.status === "pending") {
+        body = _jsx("div", { className: "sm-media__chip", children: "Uploading\u2026" });
+    }
+    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__thumb", style: { aspectRatio: String(box) }, children: _jsx("img", { src: asset.url, alt: "", style: { left: `${f.left}%`, top: `${f.top}%`, width: `${f.width}%`, height: `${f.height}%` } }) }));
+        })() : asset.kind === "video" ? (_jsx("div", { className: "sm-media__thumb", style: { aspectRatio: asset.width && asset.height ? `${asset.width} / ${asset.height}` : "16 / 9" }, 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" })] })] }));
+    }
+    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) }))] }));
+}

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

@@ -0,0 +1,20 @@
+import type { Allowed } from "../../toolset.ts";
+export type ToolbarCommand = "bold" | "italic" | "link" | "bulletList" | "orderedList" | "blockquote" | {
+    heading: number;
+};
+export type ActiveState = {
+    bold: boolean;
+    italic: boolean;
+    link: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    blockquote: boolean;
+    /** The active heading level, or null in a paragraph. */
+    heading: number | null;
+};
+export declare const INACTIVE: ActiveState;
+export declare function RichtextToolbar({ allowed, active, onCommand }: {
+    allowed: Allowed;
+    active: ActiveState;
+    onCommand(command: ToolbarCommand): void;
+}): import("react").JSX.Element | null;

package/dist/admin/forms/RichtextToolbar.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bold, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Italic, Link, List, ListOrdered, Quote } from "lucide-react";
+import { IconButton } from "../ui/primitives.js";
+export const INACTIVE = {
+    bold: false, italic: false, link: false, bulletList: false, orderedList: false, blockquote: false, heading: null,
+};
+const HEADING_ICONS = { 1: Heading1, 2: Heading2, 3: Heading3, 4: Heading4, 5: Heading5, 6: Heading6 };
+const ICON = 14;
+/** Keep the editor's selection: a toolbar press must not blur the content. */
+const keepFocus = (e) => e.preventDefault();
+export function RichtextToolbar({ allowed, active, onCommand }) {
+    const button = (label, pressed, command, Icon) => (_jsx(IconButton, { label: label, "aria-pressed": pressed, onMouseDown: keepFocus, onClick: () => onCommand(command), children: _jsx(Icon, { size: ICON, "aria-hidden": "true" }) }, label));
+    const groups = [];
+    const marks = [
+        allowed.marks.has("bold") && button("Bold", active.bold, "bold", Bold),
+        allowed.marks.has("italic") && button("Italic", active.italic, "italic", Italic),
+        allowed.marks.has("link") && button("Link", active.link, "link", Link),
+    ].filter(Boolean);
+    if (marks.length > 0)
+        groups.push(marks);
+    const headings = allowed.headingLevels
+        .filter((l) => l >= 1 && l <= 6)
+        .map((l) => button(`Heading ${l}`, active.heading === l, { heading: l }, HEADING_ICONS[l]));
+    if (headings.length > 0)
+        groups.push(headings);
+    const blocks = [
+        allowed.nodes.has("bulletList") && button("Bullet list", active.bulletList, "bulletList", List),
+        allowed.nodes.has("orderedList") && button("Numbered list", active.orderedList, "orderedList", ListOrdered),
+        allowed.nodes.has("blockquote") && button("Quote", active.blockquote, "blockquote", Quote),
+    ].filter(Boolean);
+    if (blocks.length > 0)
+        groups.push(blocks);
+    if (groups.length === 0)
+        return null;
+    return (_jsx("div", { className: "sm-richtext__bar", role: "toolbar", "aria-label": "Formatting", children: groups.map((group, i) => (_jsxs("span", { style: { display: "contents" }, children: [i > 0 && _jsx("span", { className: "sm-richtext__sep", "aria-hidden": "true" }), group] }, i))) }));
+}

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

@@ -0,0 +1,5 @@
+export declare function RichtextWidget({ value, toolset, onChange }: {
+    value: unknown;
+    toolset: unknown;
+    onChange(doc: unknown): void;
+}): import("react").JSX.Element;