vestrycms 0.0.0-stage → 0.1.0

package/dist/ui/components/fields/FieldRenderer.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown, ChevronRight, ChevronUp, Copy, GripVertical, Image as ImageIcon, Plus, Trash2, X, } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { restrictToParentElement, restrictToVerticalAxis, } from "@dnd-kit/modifiers";
+import { useVestry } from "../../context.js";
+import { basename, cx, defaultValue, fieldLabel, isImagePath, slugify, summarize, } from "../../lib/utils.js";
+import { AssetPicker } from "../AssetPicker.js";
+import { Button, Toggle } from "../ui.js";
+import { MarkdownField } from "./MarkdownField.js";
+import { CodeInput } from "./CodeInput.js";
+import { CropInput, FocalPointInput } from "./ImageTools.js";
+import { TreeInput } from "./TreeInput.js";
+/** Renders a schema as a responsive grid of fields. */
+export function FieldSet({ schema, values, onChange, errors, filter, ctx, pathPrefix = "", hideLabels, }) {
+    const entries = Object.entries(schema).filter(([k, f]) => !f.hidden && (!filter || filter(k, f)));
+    if (!entries.length)
+        return null;
+    return (_jsx("div", { className: "v-fields", children: entries.map(([key, field]) => (_jsx("div", { className: cx("v-field", field.width === "half" && "v-field--half", field.width === "third" && "v-field--third"), children: _jsx(FieldRenderer, { fieldKey: key, path: pathPrefix ? `${pathPrefix}.${key}` : key, field: field, value: values[key], onChange: (v) => onChange({ ...values, [key]: v }), errors: errors, ctx: { ...ctx, siblings: values }, hideLabel: hideLabels?.includes(key) }) }, key))) }));
+}
+export function FieldRenderer(props) {
+    const { field, fieldKey, path, errors } = props;
+    const id = useId();
+    const error = errors?.find((e) => e.path === path)?.message;
+    const label = fieldLabel(fieldKey, field);
+    const inline = field.type === "boolean";
+    return (_jsxs("div", { className: cx(error && "has-error"), children: [!inline && !props.hideLabel && (_jsxs("label", { className: "v-field__label", htmlFor: id, children: [label, field.required && _jsx("span", { className: "v-field__required", children: "*" })] })), _jsx(FieldInput, { ...props, id: id, label: label }), field.type === "date" &&
+                field.timeHint &&
+                typeof props.value === "string" &&
+                props.value.length <= 10 && (_jsxs("div", { className: "v-field__hint", children: ["Time: ", field.timeHint] })), field.description && (_jsx("div", { className: "v-field__hint", children: field.description })), error && _jsx("div", { className: "v-field__error", children: error })] }));
+}
+function FieldInput(props) {
+    const { field, value, onChange, id, label, ctx } = props;
+    const readOnly = field.readOnly;
+    switch (field.type) {
+        case "text":
+            return (_jsx("input", { id: id, className: "v-input", value: value ?? "", placeholder: field.placeholder, maxLength: field.maxLength, readOnly: readOnly, onChange: (e) => onChange(e.target.value) }));
+        case "slug":
+            return (_jsx(SlugInput, { id: id, value: value ?? "", onChange: onChange, from: field.from, ctx: ctx, readOnly: readOnly }));
+        case "textarea":
+            return (_jsx("textarea", { id: id, className: "v-textarea", rows: field.rows ?? 4, value: value ?? "", placeholder: field.placeholder, maxLength: field.maxLength, readOnly: readOnly, onChange: (e) => onChange(e.target.value) }));
+        case "number":
+            return (_jsx("input", { id: id, type: "number", className: "v-input", value: value === null || value === undefined ? "" : String(value), min: field.min, max: field.max, step: field.step ?? "any", readOnly: readOnly, onChange: (e) => onChange(e.target.value === "" ? null : Number(e.target.value)) }));
+        case "boolean":
+            return (_jsx(Toggle, { checked: Boolean(value), onChange: onChange, label: label, disabled: readOnly }));
+        case "date": {
+            const str = typeof value === "string"
+                ? value
+                : value instanceof Date
+                    ? value.toISOString()
+                    : "";
+            const datePart = str.slice(0, 10);
+            const timePart = str.length > 10 ? str.slice(11, 16) : "";
+            if (!field.time) {
+                return (_jsx("input", { id: id, type: "date", className: "v-input", value: datePart, readOnly: readOnly, onChange: (e) => onChange(e.target.value) }));
+            }
+            return (_jsxs("div", { className: "v-input-group", children: [_jsx("input", { id: id, type: "date", className: "v-input", value: datePart, readOnly: readOnly, onChange: (e) => onChange(timePart && e.target.value
+                            ? `${e.target.value}T${timePart}`
+                            : e.target.value) }), _jsx("input", { type: "time", className: "v-input", style: { flex: "0 0 130px" }, value: timePart, readOnly: readOnly, title: field.timeHint, onChange: (e) => onChange(e.target.value && datePart
+                            ? `${datePart}T${e.target.value}`
+                            : datePart) })] }));
+        }
+        case "datetime": {
+            if (field.autoUpdate) {
+                return (_jsx("input", { id: id, className: "v-input", readOnly: true, value: value ? new Date(String(value)).toLocaleString() : "Set on save" }));
+            }
+            return (_jsx(DatetimeInput, { id: id, value: value, storage: field.storage ?? "local", onChange: onChange, readOnly: readOnly }));
+        }
+        case "select":
+            return (_jsxs("div", { className: "v-row", children: [field.options.find((o) => o.value === value)?.color && (_jsx("span", { className: "v-swatch", style: {
+                            background: field.options.find((o) => o.value === value).color,
+                        } })), _jsxs("select", { id: id, className: "v-select", value: value ?? "", disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), children: [(field.clearable || value === undefined || value === "") && (_jsx("option", { value: "", children: "\u2014" })), field.options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] }));
+        case "multiselect": {
+            const selected = Array.isArray(value) ? value : [];
+            return (_jsx("div", { className: "v-chips", children: field.options.map((o) => {
+                    const on = selected.includes(o.value);
+                    return (_jsxs("button", { type: "button", className: cx("v-chip", on && "is-on"), onClick: () => onChange(on
+                            ? selected.filter((v) => v !== o.value)
+                            : [...selected, o.value]), disabled: readOnly, children: [o.color && (_jsx("span", { className: "v-swatch", style: { background: o.color } })), o.label] }, o.value));
+                }) }));
+        }
+        case "color":
+            return (_jsxs("div", { className: "v-input-group", children: [_jsx("input", { type: "color", value: value || "#000000", onChange: (e) => onChange(e.target.value), disabled: readOnly, style: { width: 44, height: 36, padding: 2 } }), _jsx("input", { id: id, className: "v-input v-input--mono", value: value ?? "", onChange: (e) => onChange(e.target.value), readOnly: readOnly })] }));
+        case "image":
+        case "file":
+            return _jsx(AssetInput, { ...props });
+        case "reference":
+            return (_jsx(ReferenceInput, { id: id, collection: field.collection, value: value ?? "", onChange: onChange, readOnly: readOnly }));
+        case "object": {
+            const obj = (value && typeof value === "object" ? value : {});
+            const body = (_jsx(FieldSet, { schema: field.fields, values: obj, onChange: onChange, errors: props.errors, ctx: ctx, pathPrefix: props.path }));
+            return field.inline ? (body) : (_jsx("div", { className: "v-group", children: _jsx("div", { className: "v-group__body", children: body }) }));
+        }
+        case "array":
+            return _jsx(ArrayInput, { ...props, field: field });
+        case "markdown":
+            return (_jsx(MarkdownField, { value: value ?? "", onChange: onChange, components: field.components, placeholder: field.description }));
+        case "code":
+            return (_jsx(CodeInput, { value: value ?? "", onChange: onChange, language: field.language ?? "text", rows: field.rows, readOnly: readOnly }));
+        case "json":
+            return (_jsx(JsonInput, { value: value, onChange: onChange, readOnly: readOnly }));
+        case "crop":
+            return (_jsx(CropInput, { field: field, value: value, onChange: onChange, siblings: ctx?.siblings, pendingUploads: ctx?.pendingUploads }));
+        case "focalPoint":
+            return (_jsx(FocalPointInput, { field: field, value: value, onChange: onChange, siblings: ctx?.siblings, pendingUploads: ctx?.pendingUploads }));
+        case "tree":
+            return (_jsx(TreeInput, { field: field, value: value, onChange: onChange, errors: props.errors, ctx: ctx, path: props.path }));
+        default:
+            return _jsx("input", { className: "v-input", readOnly: true, value: String(value ?? "") });
+    }
+}
+function SlugInput({ id, value, onChange, from, ctx, readOnly, }) {
+    const source = from ? ctx?.siblings?.[from] : undefined;
+    const suggestion = typeof source === "string" ? slugify(source) : "";
+    return (_jsxs("div", { className: "v-input-group", children: [_jsx("input", { id: id, className: "v-input v-input--mono", value: value, readOnly: readOnly, onChange: (e) => onChange(e.target.value), placeholder: suggestion || undefined }), suggestion && suggestion !== value && !readOnly && (_jsx(Button, { size: "sm", onClick: () => onChange(suggestion), children: "Generate" }))] }));
+}
+function DatetimeInput({ id, value, storage, onChange, readOnly, }) {
+    // Display in local wall-clock; store either as `YYYY-MM-DDTHH:mm` or ISO.
+    let display = "";
+    if (typeof value === "string" && value) {
+        if (storage === "local")
+            display = value.slice(0, 16);
+        else {
+            const d = new Date(value);
+            if (!Number.isNaN(d.getTime())) {
+                const pad = (n) => String(n).padStart(2, "0");
+                display = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+            }
+        }
+    }
+    return (_jsx("input", { id: id, type: "datetime-local", className: "v-input", value: display, readOnly: readOnly, onChange: (e) => {
+            const v = e.target.value;
+            if (!v)
+                return onChange("");
+            onChange(storage === "local" ? v : new Date(v).toISOString());
+        } }));
+}
+function AssetInput(props) {
+    const { api } = useVestry();
+    const field = props.field;
+    const value = props.value ?? "";
+    const [open, setOpen] = useState(false);
+    const pending = props.ctx?.pendingUploads?.[value];
+    const isImage = field.type === "image" || isImagePath(value);
+    const previewUrl = value
+        ? pending
+            ? pending.previewUrl
+            : /^https?:/.test(value)
+                ? value
+                : api.fileUrl(value)
+        : null;
+    const accept = field.accept ??
+        (field.type === "image"
+            ? ["jpg", "jpeg", "png", "gif", "webp", "avif", "svg"]
+            : undefined);
+    return (_jsxs("div", { className: "v-image-field", children: [_jsx("div", { className: "v-image-field__preview", children: previewUrl && isImage ? (_jsx("img", { src: previewUrl, alt: "" })) : (_jsx(ImageIcon, {})) }), _jsxs("div", { className: "v-image-field__info", children: [value ? (_jsxs("div", { className: "v-image-field__path", children: [_jsx("strong", { style: { color: "var(--v-text)" }, children: basename(value) }), _jsx("br", {}), value.slice(0, value.length - basename(value).length)] })) : (_jsx("div", { className: "v-muted", style: { marginBottom: 8 }, children: "No file selected" })), _jsxs("div", { className: "v-image-field__actions", children: [_jsx(Button, { size: "sm", onClick: () => setOpen(true), disabled: field.readOnly, children: value ? "Replace" : "Choose" }), value && (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => props.onChange(""), disabled: field.readOnly, children: [_jsx(X, {}), " Clear"] }))] })] }), open && (_jsx(AssetPicker, { directory: field.directory, accept: accept, allowUpload: field.upload !== false, title: field.type === "image" ? "Choose an image" : "Choose a file", deferUploads: Boolean(props.ctx?.addUpload), onClose: () => setOpen(false), onPick: (path, upload) => {
+                    if (upload)
+                        props.ctx?.addUpload?.(upload);
+                    props.onChange(path);
+                    setOpen(false);
+                } }))] }));
+}
+function ReferenceInput({ id, collection, value, onChange, readOnly, }) {
+    const { api } = useVestry();
+    const q = useQuery({
+        queryKey: ["entries", collection],
+        queryFn: () => api.listEntries(collection),
+        staleTime: 60_000,
+    });
+    const entries = q.data?.entries ?? [];
+    return (_jsxs("select", { id: id, className: "v-select", value: value, disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), children: [_jsx("option", { value: "", children: q.isLoading ? "Loading…" : "—" }), value && !entries.some((e) => e.slug === value) && (_jsx("option", { value: value, children: value })), entries.map((e) => (_jsx("option", { value: e.slug, children: e.title }, e.slug)))] }));
+}
+let nextRowId = 0;
+const newRowId = () => `row-${++nextRowId}`;
+/**
+ * A sortable list item. dnd-kit moves the neighbours out of the way with
+ * transforms so a gap opens where the row will land; the row itself stays in
+ * flow as a dimmed placeholder while a clone floats in the DragOverlay.
+ */
+function SortableRow({ id, className, children, }) {
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id });
+    return (_jsx("div", { ref: setNodeRef, className: cx(className, isDragging && "is-placeholder"), style: { transform: CSS.Translate.toString(transform), transition }, children: children({
+            ref: setActivatorNodeRef,
+            listeners: {
+                ...listeners,
+                // Keep the pointer-down from reaching an enclosing rich text
+                // editor, which would otherwise treat it as a selection drag.
+                onPointerDown: (e) => {
+                    e.stopPropagation();
+                    listeners?.onPointerDown?.(e);
+                },
+            },
+            attributes: attributes,
+        }, isDragging) }));
+}
+function ArrayInput(props) {
+    const { field, onChange, ctx } = props;
+    const items = Array.isArray(props.value) ? props.value : [];
+    const [openIdx, setOpenIdx] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const isObject = field.of.type === "object";
+    // Stable ids for dnd-kit, kept parallel to the items array.
+    const idsRef = useRef([]);
+    if (idsRef.current.length < items.length) {
+        idsRef.current = [
+            ...idsRef.current,
+            ...Array.from({ length: items.length - idsRef.current.length }, newRowId),
+        ];
+    }
+    else if (idsRef.current.length > items.length) {
+        idsRef.current = idsRef.current.slice(0, items.length);
+    }
+    const ids = idsRef.current;
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const update = (next, nextIds) => {
+        if (nextIds)
+            idsRef.current = nextIds;
+        onChange(next);
+    };
+    const move = (from, to) => {
+        if (to < 0 || to >= items.length || from === to)
+            return;
+        update(arrayMove(items, from, to), arrayMove(ids, from, to));
+        setOpenIdx((o) => (o === from ? to : o));
+    };
+    const remove = (i) => update(items.filter((_, j) => j !== i), ids.filter((_, j) => j !== i));
+    const duplicate = (i) => update([
+        ...items.slice(0, i + 1),
+        JSON.parse(JSON.stringify(items[i])),
+        ...items.slice(i + 1),
+    ], [...ids.slice(0, i + 1), newRowId(), ...ids.slice(i + 1)]);
+    const setItem = (i, v) => update(items.map((x, j) => (j === i ? v : x)));
+    const moveButtons = (i) => (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Move up", onClick: () => move(i, i - 1), disabled: i === 0, children: _jsx(ChevronUp, {}) }), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Move down", onClick: () => move(i, i + 1), disabled: i === items.length - 1, children: _jsx(ChevronDown, {}) })] }));
+    /** Header of an object item; `overlay` renders a static clone for the drag preview. */
+    const objectHeader = (i, open, handle) => {
+        const item = items[i];
+        const title = summarize(item, field) || `${fieldLabel("item", field.of)} ${i + 1}`;
+        return (_jsxs("div", { className: "v-list__header", onClick: handle ? () => setOpenIdx(open ? null : i) : undefined, children: [_jsx("span", { className: "v-list__handle", title: "Drag to reorder", ref: handle?.ref, ...(handle?.listeners ?? {}), ...(handle?.attributes ?? {}), children: _jsx(GripVertical, {}) }), open ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), _jsx("span", { className: "v-list__title", children: title }), handle && (_jsxs("div", { className: "v-list__actions", onClick: (e) => e.stopPropagation(), children: [moveButtons(i), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Duplicate", onClick: () => duplicate(i), children: _jsx(Copy, {}) }), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Remove", onClick: () => remove(i), children: _jsx(Trash2, {}) })] }))] }));
+    };
+    const scalarRow = (i, handle) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "v-list__handle", title: "Drag to reorder", ref: handle?.ref, ...(handle?.listeners ?? {}), ...(handle?.attributes ?? {}), children: _jsx(GripVertical, {}) }), _jsx("div", { className: "v-grow", children: _jsx(FieldInput, { fieldKey: `${props.fieldKey}.${i}`, path: `${props.path}.${i}`, field: field.of, value: items[i], onChange: (v) => setItem(i, v), errors: props.errors, ctx: ctx, id: handle ? `${props.path}.${i}` : `${props.path}.${i}.overlay`, label: "" }) }), _jsxs("div", { className: "v-list__actions", children: [moveButtons(i), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Remove", onClick: () => remove(i), children: _jsx(Trash2, {}) })] })] }));
+    const rowClass = (i) => cx(isObject ? "v-list__item" : "v-list__row", isDisabled(items[i]) && "is-disabled");
+    const activeIdx = activeId ? ids.indexOf(activeId) : -1;
+    return (_jsxs("div", { children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis, restrictToParentElement], onDragStart: (e) => {
+                    setActiveId(String(e.active.id));
+                    if (isObject)
+                        setOpenIdx(null);
+                }, onDragEnd: (e) => {
+                    setActiveId(null);
+                    const from = ids.indexOf(String(e.active.id));
+                    const to = e.over ? ids.indexOf(String(e.over.id)) : -1;
+                    if (from !== -1 && to !== -1)
+                        move(from, to);
+                }, onDragCancel: () => setActiveId(null), children: [_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: _jsx("div", { className: "v-list", children: items.map((item, i) => {
+                                const open = openIdx === i;
+                                return (_jsx(SortableRow, { id: ids[i], className: rowClass(i), children: (handle) => isObject ? (_jsxs(_Fragment, { children: [objectHeader(i, open, handle), open && (_jsx("div", { className: "v-list__body", children: _jsx(FieldSet, { schema: field.of.fields, values: (item ?? {}), onChange: (v) => setItem(i, v), errors: props.errors, ctx: ctx, pathPrefix: `${props.path}.${i}` }) }))] })) : (scalarRow(i, handle)) }, ids[i]));
+                            }) }) }), createPortal(_jsx(DragOverlay, { dropAnimation: {
+                            duration: 180,
+                            easing: "cubic-bezier(0.2, 0, 0, 1)",
+                        }, children: activeIdx !== -1 && (_jsx("div", { className: cx(rowClass(activeIdx), "v-list__ghost"), children: isObject
+                                ? objectHeader(activeIdx, false, null)
+                                : scalarRow(activeIdx, null) })) }), document.body)] }), _jsxs(Button, { size: "sm", className: "v-list__add", disabled: field.max !== undefined && items.length >= field.max, onClick: () => {
+                    update([...items, defaultValue(field.of)], [...ids, newRowId()]);
+                    setOpenIdx(items.length);
+                }, children: [_jsx(Plus, {}), " ", field.addLabel ?? "Add item"] })] }));
+}
+function JsonInput({ value, onChange, readOnly, }) {
+    const [text, setText] = useState(() => value === undefined ? "" : JSON.stringify(value, null, 2));
+    const [error, setError] = useState(null);
+    return (_jsxs("div", { children: [_jsx(CodeInput, { value: text, language: "json", readOnly: readOnly, onChange: (t) => {
+                    setText(t);
+                    if (!t.trim()) {
+                        setError(null);
+                        onChange(undefined);
+                        return;
+                    }
+                    try {
+                        onChange(JSON.parse(t));
+                        setError(null);
+                    }
+                    catch (e) {
+                        setError(e.message);
+                    }
+                } }), error && _jsx("div", { className: "v-field__error", children: error })] }));
+}
+/** Items with `enabled: false` (a common toggle in page-builder data) are shown dimmed. */
+function isDisabled(item) {
+    return (typeof item === "object" &&
+        item !== null &&
+        item.enabled === false);
+}
+export function FieldGroup({ title, children, }) {
+    return (_jsxs("div", { className: "v-card", children: [_jsx("div", { className: "v-card__header", children: _jsx("h3", { className: "v-card__title", children: title }) }), _jsx("div", { className: "v-card__body", children: children })] }));
+}

package/dist/ui/components/fields/ImageTools.d.ts

@@ -0,0 +1,31 @@
+import type { CropField, FocalPointField } from "../../../config/types.js";
+import type { PendingUpload } from "../AssetPicker.js";
+export interface CropRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface FocalPoint {
+    x: number;
+    y: number;
+}
+/** Largest rectangle of the given aspect that fits the image, centred. */
+export declare function defaultCrop(natural: {
+    width: number;
+    height: number;
+}, aspect?: number): CropRect;
+export declare function CropInput({ field, value, onChange, siblings, pendingUploads, }: {
+    field: CropField;
+    value: unknown;
+    onChange: (v: CropRect | undefined) => void;
+    siblings?: Record<string, unknown>;
+    pendingUploads?: Record<string, PendingUpload>;
+}): import("react").JSX.Element;
+export declare function FocalPointInput({ field, value, onChange, siblings, pendingUploads, }: {
+    field: FocalPointField;
+    value: unknown;
+    onChange: (v: FocalPoint | undefined) => void;
+    siblings?: Record<string, unknown>;
+    pendingUploads?: Record<string, PendingUpload>;
+}): import("react").JSX.Element;

package/dist/ui/components/fields/ImageTools.js

@@ -0,0 +1,296 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Crosshair, Maximize2, RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { useVestry } from "../../context.js";
+import { cx } from "../../lib/utils.js";
+import { Button } from "../ui.js";
+/** Resolve the sibling image field's value to a URL the browser can load. */
+function useImageSource(imagePath, pendingUploads) {
+    const { api } = useVestry();
+    if (typeof imagePath !== "string" || !imagePath)
+        return null;
+    const pending = pendingUploads?.[imagePath];
+    if (pending)
+        return pending.previewUrl;
+    return /^https?:\/\//.test(imagePath) ? imagePath : api.fileUrl(imagePath);
+}
+/** Load the image, track its natural size, and fit it into the available width. */
+function useFittedImage(src, maxHeight) {
+    const containerRef = useRef(null);
+    const [natural, setNatural] = useState(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [error, setError] = useState(false);
+    useEffect(() => {
+        setNatural(null);
+        setError(false);
+        if (!src)
+            return;
+        const img = new Image();
+        img.onload = () => setNatural({ width: img.naturalWidth, height: img.naturalHeight });
+        img.onerror = () => setError(true);
+        img.src = src;
+    }, [src]);
+    useLayoutEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const update = () => setContainerWidth(el.clientWidth);
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [src]);
+    let fitted = null;
+    if (natural && containerWidth > 0) {
+        const scale = Math.min(containerWidth / natural.width, maxHeight / natural.height, 1);
+        fitted = {
+            natural,
+            display: {
+                width: Math.round(natural.width * scale),
+                height: Math.round(natural.height * scale),
+            },
+        };
+    }
+    return { containerRef, fitted, error };
+}
+/** Dragging a handle must not start a text selection elsewhere on the page. */
+const preventSelection = (e) => e.preventDefault();
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+/** Largest rectangle of the given aspect that fits the image, centred. */
+export function defaultCrop(natural, aspect) {
+    if (!aspect)
+        return { x: 0, y: 0, width: natural.width, height: natural.height };
+    let width = natural.width;
+    let height = Math.round(width / aspect);
+    if (height > natural.height) {
+        height = natural.height;
+        width = Math.round(height * aspect);
+    }
+    return {
+        x: Math.round((natural.width - width) / 2),
+        y: Math.round((natural.height - height) / 2),
+        width,
+        height,
+    };
+}
+function normalizeCrop(rect, natural, aspect, minSize) {
+    let width = clamp(Math.round(rect.width), minSize, natural.width);
+    let height = clamp(Math.round(rect.height), minSize, natural.height);
+    if (aspect) {
+        height = Math.round(width / aspect);
+        if (height > natural.height) {
+            height = natural.height;
+            width = Math.round(height * aspect);
+        }
+    }
+    const x = clamp(Math.round(rect.x), 0, natural.width - width);
+    const y = clamp(Math.round(rect.y), 0, natural.height - height);
+    return { x, y, width, height };
+}
+const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+export function CropInput({ field, value, onChange, siblings, pendingUploads, }) {
+    const src = useImageSource(siblings?.[field.image], pendingUploads);
+    const { containerRef, fitted, error } = useFittedImage(src, 440);
+    const minSize = field.minSize ?? 16;
+    const aspect = field.aspect;
+    const rect = isCropRect(value) ? value : null;
+    const drag = useRef(null);
+    // Once the image is known, seed a default crop or clamp an out-of-range one.
+    useEffect(() => {
+        if (!fitted)
+            return;
+        if (!rect) {
+            onChange(defaultCrop(fitted.natural, aspect));
+            return;
+        }
+        const fixed = normalizeCrop(rect, fitted.natural, aspect, minSize);
+        if (fixed.x !== rect.x ||
+            fixed.y !== rect.y ||
+            fixed.width !== rect.width ||
+            fixed.height !== rect.height)
+            onChange(fixed);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fitted?.natural.width, fitted?.natural.height]);
+    const scale = fitted ? fitted.display.width / fitted.natural.width : 1;
+    const onPointerDown = (mode) => (e) => {
+        if (!rect || !fitted)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        drag.current = {
+            mode,
+            start: { x: e.clientX, y: e.clientY },
+            origin: rect,
+        };
+    };
+    const onPointerMove = (e) => {
+        const d = drag.current;
+        if (!d || !fitted)
+            return;
+        const dx = (e.clientX - d.start.x) / scale;
+        const dy = (e.clientY - d.start.y) / scale;
+        const o = d.origin;
+        let next;
+        if (d.mode === "move") {
+            next = { ...o, x: o.x + dx, y: o.y + dy };
+        }
+        else {
+            let { x, y, width, height } = o;
+            if (d.mode.includes("e"))
+                width = o.width + dx;
+            if (d.mode.includes("s"))
+                height = o.height + dy;
+            if (d.mode.includes("w")) {
+                width = o.width - dx;
+                x = o.x + dx;
+            }
+            if (d.mode.includes("n")) {
+                height = o.height - dy;
+                y = o.y + dy;
+            }
+            if (aspect) {
+                // Drive the locked dimension from whichever one the handle moves most.
+                const horizontal = d.mode === "e" || d.mode === "w";
+                const vertical = d.mode === "n" || d.mode === "s";
+                if (vertical || (!horizontal && Math.abs(dy) > Math.abs(dx)))
+                    width = height * aspect;
+                else
+                    height = width / aspect;
+                if (d.mode.includes("w"))
+                    x = o.x + o.width - width;
+                if (d.mode.includes("n"))
+                    y = o.y + o.height - height;
+            }
+            next = {
+                x,
+                y,
+                width: Math.max(minSize, width),
+                height: Math.max(minSize, height),
+            };
+        }
+        onChange(normalizeCrop(next, fitted.natural, aspect, minSize));
+    };
+    const onPointerUp = () => {
+        drag.current = null;
+    };
+    const onKeyDown = (e) => {
+        if (!rect || !fitted)
+            return;
+        const step = e.shiftKey ? 10 : 1;
+        const moves = {
+            ArrowLeft: [-step, 0],
+            ArrowRight: [step, 0],
+            ArrowUp: [0, -step],
+            ArrowDown: [0, step],
+        };
+        const m = moves[e.key];
+        if (!m)
+            return;
+        e.preventDefault();
+        onChange(normalizeCrop({ ...rect, x: rect.x + m[0], y: rect.y + m[1] }, fitted.natural, aspect, minSize));
+    };
+    if (!src)
+        return (_jsxs("div", { className: "v-image-tool__empty", children: ["Choose an image in \u201C", field.image, "\u201D first."] }));
+    if (error)
+        return (_jsx("div", { className: "v-image-tool__empty", children: "The image could not be loaded." }));
+    const disp = rect && fitted
+        ? {
+            left: rect.x * scale,
+            top: rect.y * scale,
+            width: rect.width * scale,
+            height: rect.height * scale,
+        }
+        : null;
+    return (_jsxs("div", { className: "v-image-tool", children: [_jsxs("div", { ref: containerRef, className: "v-image-tool__stage", children: [fitted && (_jsxs("div", { className: "v-crop", style: {
+                            width: fitted.display.width,
+                            height: fitted.display.height,
+                        }, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx("img", { src: src, alt: "", draggable: false, style: {
+                                    width: fitted.display.width,
+                                    height: fitted.display.height,
+                                } }), disp && (_jsxs(_Fragment, { children: [_jsx("div", { className: "v-crop__shade", style: { top: 0, left: 0, right: 0, height: disp.top } }), _jsx("div", { className: "v-crop__shade", style: {
+                                            top: disp.top + disp.height,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 0,
+                                        } }), _jsx("div", { className: "v-crop__shade", style: {
+                                            top: disp.top,
+                                            left: 0,
+                                            width: disp.left,
+                                            height: disp.height,
+                                        } }), _jsx("div", { className: "v-crop__shade", style: {
+                                            top: disp.top,
+                                            left: disp.left + disp.width,
+                                            right: 0,
+                                            height: disp.height,
+                                        } }), _jsxs("div", { className: "v-crop__box", style: {
+                                            left: disp.left,
+                                            top: disp.top,
+                                            width: disp.width,
+                                            height: disp.height,
+                                        }, tabIndex: 0, role: "slider", "aria-label": "Crop area", onPointerDown: onPointerDown("move"), onMouseDown: preventSelection, onKeyDown: onKeyDown, children: [_jsx("div", { className: "v-crop__grid" }), HANDLES.map((h) => (_jsx("div", { className: cx("v-crop__handle", `v-crop__handle--${h}`), onPointerDown: onPointerDown(h), onMouseDown: preventSelection }, h)))] })] }))] })), !fitted && _jsx("div", { className: "v-image-tool__loading", children: "Loading image\u2026" })] }), _jsxs("div", { className: "v-image-tool__bar", children: [_jsxs("span", { className: "v-mono v-muted", children: [rect
+                                ? `${rect.width} × ${rect.height} px at ${rect.x}, ${rect.y}`
+                                : "—", fitted &&
+                                ` · image ${fitted.natural.width} × ${fitted.natural.height}`, aspect && ` · ${formatAspect(aspect)}`] }), _jsx("span", { className: "v-grow" }), _jsxs(Button, { size: "xs", onClick: () => fitted && onChange(defaultCrop(fitted.natural, aspect)), disabled: !fitted, title: "Largest crop, centred", children: [_jsx(Maximize2, {}), " Fit"] })] })] }));
+}
+function isCropRect(v) {
+    return (typeof v === "object" &&
+        v !== null &&
+        ["x", "y", "width", "height"].every((k) => typeof v[k] === "number"));
+}
+function formatAspect(aspect) {
+    for (const [w, h] of [
+        [1, 1],
+        [4, 3],
+        [3, 4],
+        [3, 2],
+        [2, 3],
+        [16, 9],
+        [9, 16],
+        [8, 9],
+        [21, 9],
+        [1.91, 1],
+    ]) {
+        if (Math.abs(w / h - aspect) < 0.005)
+            return `${w}:${h}`;
+    }
+    return `${aspect.toFixed(3)}:1`;
+}
+export function FocalPointInput({ field, value, onChange, siblings, pendingUploads, }) {
+    const src = useImageSource(siblings?.[field.image], pendingUploads);
+    const { containerRef, fitted, error } = useFittedImage(src, 360);
+    const point = isFocalPoint(value) ? value : { x: 50, y: 50 };
+    const dragging = useRef(false);
+    const setFromEvent = useCallback((e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        const x = clamp(((e.clientX - r.left) / r.width) * 100, 0, 100);
+        const y = clamp(((e.clientY - r.top) / r.height) * 100, 0, 100);
+        onChange({ x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 });
+    }, [onChange]);
+    if (!src)
+        return (_jsxs("div", { className: "v-image-tool__empty", children: ["Choose an image in \u201C", field.image, "\u201D first."] }));
+    if (error)
+        return (_jsx("div", { className: "v-image-tool__empty", children: "The image could not be loaded." }));
+    const previews = field.previews ?? ["16:9", "1:1", "3:4"];
+    const position = `${point.x}% ${point.y}%`;
+    return (_jsxs("div", { className: "v-image-tool", children: [_jsx("div", { ref: containerRef, className: "v-image-tool__stage", children: fitted ? (_jsxs("div", { className: "v-focal", style: {
+                        width: fitted.display.width,
+                        height: fitted.display.height,
+                    }, onMouseDown: preventSelection, onPointerDown: (e) => {
+                        dragging.current = true;
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                        setFromEvent(e);
+                    }, onPointerMove: (e) => dragging.current && setFromEvent(e), onPointerUp: () => (dragging.current = false), onPointerCancel: () => (dragging.current = false), children: [_jsx("img", { src: src, alt: "", draggable: false, style: {
+                                width: fitted.display.width,
+                                height: fitted.display.height,
+                            } }), _jsx("div", { className: "v-focal__line v-focal__line--v", style: { left: `${point.x}%` } }), _jsx("div", { className: "v-focal__line v-focal__line--h", style: { top: `${point.y}%` } }), _jsx("div", { className: "v-focal__marker", style: { left: `${point.x}%`, top: `${point.y}%` }, role: "img", "aria-label": `Focal point at ${point.x}%, ${point.y}%`, children: _jsx(Crosshair, {}) })] })) : (_jsx("div", { className: "v-image-tool__loading", children: "Loading image\u2026" })) }), _jsxs("div", { className: "v-image-tool__bar", children: [_jsxs("span", { className: "v-mono v-muted", children: [point.x, "% ", point.y, "%"] }), _jsx("div", { className: "v-focal__previews", children: previews.map((p) => {
+                            const [w, h] = p.split(":").map(Number);
+                            return (_jsx("div", { className: "v-focal__preview", style: { aspectRatio: `${w} / ${h}` }, title: `${p} preview`, children: _jsx("img", { src: src, alt: "", style: { objectPosition: position } }) }, p));
+                        }) }), _jsx("span", { className: "v-grow" }), _jsxs(Button, { size: "xs", onClick: () => onChange({ x: 50, y: 50 }), title: "Back to centre", children: [_jsx(RotateCcw, {}), " Centre"] })] })] }));
+}
+function isFocalPoint(v) {
+    return (typeof v === "object" &&
+        v !== null &&
+        typeof v.x === "number" &&
+        typeof v.y === "number");
+}

package/dist/ui/components/fields/MarkdownField.d.ts

@@ -0,0 +1,7 @@
+/** A Markdown-valued frontmatter field (e.g. a hero tagline) edited with the rich text editor. */
+export declare function MarkdownField({ value, onChange, components, placeholder, }: {
+    value: string;
+    onChange: (v: string) => void;
+    components?: string[];
+    placeholder?: string;
+}): import("react").JSX.Element;