vestrycms 0.0.0-stage → 0.2.0

package/dist/ui/components/editor/schema.d.ts

@@ -0,0 +1,12 @@
+export interface EditorExtensionOptions {
+    /** Maps a stored image path to a URL the browser can load. */
+    resolveSrc?: (src: string) => string;
+    placeholder?: string;
+}
+/**
+ * The rich text editor's extensions. Its schema must accept every node type
+ * and attribute `parseMdx` produces, or they are lost when a page is saved.
+ */
+export declare function editorExtensions(options?: EditorExtensionOptions): (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Node<{
+    resolveSrc: (src: string) => string;
+} & Record<string, unknown>, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-superscript").SuperscriptExtensionOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any>)[];

package/dist/ui/components/editor/schema.js

@@ -0,0 +1,37 @@
+import { TableKit } from "@tiptap/extension-table";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { Placeholder } from "@tiptap/extensions";
+import StarterKit from "@tiptap/starter-kit";
+import { FootnoteDefinition, FootnoteReference, ListAttributes, MdxComponent, MdxEsm, MdxExpression, MdxImage, MdxInlineComponent, MdxInlineExpression, RawHtml, RawInlineHtml, } from "./extensions.js";
+/**
+ * The rich text editor's extensions. Its schema must accept every node type
+ * and attribute `parseMdx` produces, or they are lost when a page is saved.
+ */
+export function editorExtensions(options = {}) {
+    return [
+        StarterKit.configure({
+            heading: { levels: [1, 2, 3, 4] },
+            link: { openOnClick: false, autolink: true, defaultProtocol: "https" },
+            codeBlock: { languageClassPrefix: "language-" },
+            dropcursor: { color: "var(--v-primary)", width: 2 },
+        }),
+        Superscript,
+        Subscript,
+        MdxImage.configure({ resolveSrc: options.resolveSrc ?? ((src) => src) }),
+        TableKit.configure({ table: { resizable: false } }),
+        Placeholder.configure({
+            placeholder: options.placeholder ?? "Start writing…",
+        }),
+        MdxComponent,
+        MdxInlineComponent,
+        MdxExpression,
+        MdxInlineExpression,
+        MdxEsm,
+        RawHtml,
+        RawInlineHtml,
+        ListAttributes,
+        FootnoteDefinition,
+        FootnoteReference,
+    ];
+}

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

@@ -0,0 +1,10 @@
+export interface CodeInputProps {
+    value: string;
+    onChange: (v: string) => void;
+    language?: "markdown" | "yaml" | "json" | "javascript" | "text";
+    rows?: number;
+    readOnly?: boolean;
+    minHeight?: string;
+}
+/** Code editor (CodeMirror, loaded on demand) with a textarea fallback while it loads. */
+export declare function CodeInput(props: CodeInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+const CodeMirrorInput = lazy(() => import("./CodeMirrorInput.js"));
+/** Code editor (CodeMirror, loaded on demand) with a textarea fallback while it loads. */
+export function CodeInput(props) {
+    const fallback = (_jsx("textarea", { className: "v-textarea v-input--mono", rows: props.rows ?? 6, value: props.value, readOnly: props.readOnly, onChange: (e) => props.onChange(e.target.value), spellCheck: false }));
+    return (_jsx(Suspense, { fallback: fallback, children: _jsx(CodeMirrorInput, { ...props }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { CodeInputProps } from "./CodeInput.js";
+export default function CodeMirrorInput({ value, onChange, language, rows, readOnly, minHeight, }: CodeInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CodeMirror from "@uiw/react-codemirror";
+import { markdown } from "@codemirror/lang-markdown";
+import { yaml } from "@codemirror/lang-yaml";
+import { EditorView } from "@codemirror/view";
+import { useMemo } from "react";
+const theme = EditorView.theme({
+    "&": {
+        fontSize: "13px",
+        border: "1px solid var(--v-border-strong)",
+        borderRadius: "6px",
+        background: "#fff",
+    },
+    "&.cm-focused": {
+        outline: "none",
+        borderColor: "var(--v-primary)",
+        boxShadow: "0 0 0 3px var(--v-primary-ring)",
+    },
+    ".cm-scroller": { fontFamily: "var(--v-mono)", lineHeight: "1.55" },
+    ".cm-gutters": {
+        background: "#f9fafb",
+        borderRight: "1px solid var(--v-border)",
+        color: "#9ca3af",
+    },
+    ".cm-activeLineGutter": { background: "#f3f4f6" },
+    ".cm-activeLine": { background: "rgba(37, 99, 235, 0.04)" },
+    ".cm-content": { padding: "8px 0" },
+});
+export default function CodeMirrorInput({ value, onChange, language = "text", rows, readOnly, minHeight, }) {
+    const extensions = useMemo(() => {
+        const ext = [theme, EditorView.lineWrapping];
+        if (language === "markdown")
+            ext.push(markdown());
+        if (language === "yaml")
+            ext.push(yaml());
+        return ext;
+    }, [language]);
+    return (_jsx(CodeMirror, { value: value, onChange: onChange, extensions: extensions, readOnly: readOnly, editable: !readOnly, minHeight: minHeight ?? (rows ? `${rows * 1.55 * 13 + 16}px` : "120px"), basicSetup: {
+            lineNumbers: language !== "text",
+            foldGutter: false,
+            highlightActiveLine: true,
+            autocompletion: false,
+        } }));
+}

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

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import type { Field, Schema } from "../../../config/types.js";
+import { type ValidationError } from "../../lib/utils.js";
+import { type PendingUpload } from "../AssetPicker.js";
+export interface FieldContext {
+    /** Collects files picked through image/file fields so they're committed with the entry. */
+    addUpload?: (upload: PendingUpload) => void;
+    pendingUploads?: Record<string, PendingUpload>;
+    /** Marks the entry as new so slug fields auto-fill. */
+    isNew?: boolean;
+    /** Values of sibling fields (for slug `from`). */
+    siblings?: Record<string, unknown>;
+}
+export interface FieldProps<F extends Field = Field> {
+    fieldKey: string;
+    path: string;
+    field: F;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    errors?: ValidationError[];
+    ctx?: FieldContext;
+    /** Omit the label (e.g. when the surrounding card already names the field). */
+    hideLabel?: boolean;
+}
+/** Renders a schema as a responsive grid of fields. */
+export declare function FieldSet({ schema, values, onChange, errors, filter, ctx, pathPrefix, hideLabels, }: {
+    schema: Schema;
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    errors?: ValidationError[];
+    filter?: (key: string, field: Field) => boolean;
+    ctx?: FieldContext;
+    pathPrefix?: string;
+    /** Keys whose label should be omitted. */
+    hideLabels?: string[];
+}): import("react").JSX.Element | null;
+export declare function FieldRenderer(props: FieldProps): import("react").JSX.Element;
+export declare function FieldGroup({ title, children, }: {
+    title: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

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;