vestrycms 0.0.0-stage → 0.2.0

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;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useVestry } from "../../context.js";
+import { RichTextEditor } from "../editor/RichTextEditor.js";
+/** A Markdown-valued frontmatter field (e.g. a hero tagline) edited with the rich text editor. */
+export function MarkdownField({ value, onChange, components, placeholder, }) {
+    const { config } = useVestry();
+    const env = useMemo(() => ({
+        components: Object.fromEntries((components ?? [])
+            .map((n) => [n, config.components?.[n]])
+            .filter(([, c]) => c)),
+        toRepoPath: () => null,
+        toDocPath: (p) => p,
+    }), [components, config.components]);
+    return (_jsx(RichTextEditor, { value: value, onChange: onChange, components: components ?? [], env: env, placeholder: placeholder, compact: true }));
+}

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

@@ -0,0 +1,13 @@
+import type { TreeField } from "../../../config/types.js";
+import { type ValidationError } from "../../lib/utils.js";
+import { type FieldContext } from "./FieldRenderer.js";
+type NodeData = Record<string, unknown>;
+export declare function TreeInput({ field, value, onChange, errors, ctx, path, }: {
+    field: TreeField;
+    value: unknown;
+    onChange: (v: NodeData[]) => void;
+    errors?: ValidationError[];
+    ctx?: FieldContext;
+    path: string;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ChevronDown, ChevronRight, CornerDownRight, GripVertical, Pencil, Plus, Trash2, } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cx, defaultValues, fieldLabel, } from "../../lib/utils.js";
+import { Button } from "../ui.js";
+import { FieldSet } from "./FieldRenderer.js";
+const INDENT = 28;
+let nextId = 0;
+const newId = () => `node-${++nextId}`;
+function annotate(value, key) {
+    if (!Array.isArray(value))
+        return [];
+    return value.map((raw) => {
+        const node = raw && typeof raw === "object" ? raw : {};
+        const { [key]: children, ...data } = node;
+        return { id: newId(), data, children: annotate(children, key) };
+    });
+}
+function strip(nodes, key) {
+    return nodes.map((n) => n.children.length
+        ? { ...n.data, [key]: strip(n.children, key) }
+        : { ...n.data });
+}
+function flatten(nodes, collapsed, parentId = null, depth = 0) {
+    return nodes.flatMap((n) => [
+        { id: n.id, data: n.data, depth, parentId, childCount: n.children.length },
+        ...(collapsed.has(n.id)
+            ? []
+            : flatten(n.children, collapsed, n.id, depth + 1)),
+    ]);
+}
+function findNode(nodes, id) {
+    for (const n of nodes) {
+        if (n.id === id)
+            return n;
+        const inner = findNode(n.children, id);
+        if (inner)
+            return inner;
+    }
+    return null;
+}
+function mapTree(nodes, fn) {
+    return nodes.map((n) => fn({ ...n, children: mapTree(n.children, fn) }));
+}
+function removeNode(nodes, id) {
+    return nodes
+        .filter((n) => n.id !== id)
+        .map((n) => ({ ...n, children: removeNode(n.children, id) }));
+}
+function insertNode(nodes, parentId, index, node) {
+    if (parentId === null) {
+        const next = [...nodes];
+        next.splice(index, 0, node);
+        return next;
+    }
+    return nodes.map((n) => n.id === parentId
+        ? { ...n, children: insertNode(n.children, null, index, node) }
+        : { ...n, children: insertNode(n.children, parentId, index, node) });
+}
+function descendantIds(node) {
+    return node.children.flatMap((c) => [c.id, ...descendantIds(c)]);
+}
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+/** Where the dragged item would land: depth and parent, from its horizontal offset. */
+function getProjection(items, activeId, overId, offsetX, maxDepth) {
+    const overIndex = items.findIndex((i) => i.id === overId);
+    const activeIndex = items.findIndex((i) => i.id === activeId);
+    const active = items[activeIndex];
+    if (!active || overIndex === -1)
+        return null;
+    const moved = arrayMove(items, activeIndex, overIndex);
+    const previous = moved[overIndex - 1];
+    const next = moved[overIndex + 1];
+    const projected = active.depth + Math.round(offsetX / INDENT);
+    const upper = Math.min(previous ? previous.depth + 1 : 0, maxDepth - 1);
+    const lower = next ? next.depth : 0;
+    const depth = clamp(projected, Math.min(lower, upper), upper);
+    let parentId = null;
+    if (depth > 0 && previous) {
+        if (depth === previous.depth)
+            parentId = previous.parentId;
+        else if (depth > previous.depth)
+            parentId = previous.id;
+        else {
+            const ancestor = moved
+                .slice(0, overIndex)
+                .reverse()
+                .find((i) => i.depth === depth);
+            parentId = ancestor?.parentId ?? null;
+        }
+    }
+    return { depth, parentId, overIndex, moved };
+}
+export function TreeInput({ field, value, onChange, errors, ctx, path, }) {
+    const key = field.childrenKey ?? "children";
+    const maxDepth = field.maxDepth ?? 99;
+    const labelKey = field.itemLabel ?? "title";
+    const detailKey = field.itemDetail ??
+        Object.keys(field.fields).find((k) => k !== labelKey && field.fields[k].type === "text");
+    const [tree, setTree] = useState(() => annotate(value, key));
+    const lastEmitted = useRef(JSON.stringify(strip(tree, key)));
+    useEffect(() => {
+        const incoming = JSON.stringify(Array.isArray(value) ? value : []);
+        if (incoming !== lastEmitted.current) {
+            lastEmitted.current = incoming;
+            setTree(annotate(value, key));
+        }
+    }, [value, key]);
+    const commit = (next) => {
+        setTree(next);
+        const plain = strip(next, key);
+        lastEmitted.current = JSON.stringify(plain);
+        onChange(plain);
+    };
+    const [collapsed, setCollapsed] = useState(new Set());
+    const [editing, setEditing] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const [overId, setOverId] = useState(null);
+    const [offsetX, setOffsetX] = useState(0);
+    const flat = useMemo(() => flatten(tree, collapsed), [tree, collapsed]);
+    // While dragging, the active node's descendants travel with it and are hidden.
+    const visible = useMemo(() => {
+        if (!activeId)
+            return flat;
+        const node = findNode(tree, activeId);
+        const hidden = new Set(node ? descendantIds(node) : []);
+        return flat.filter((i) => !hidden.has(i.id));
+    }, [flat, activeId, tree]);
+    const projection = activeId && overId
+        ? getProjection(visible, activeId, overId, offsetX, maxDepth)
+        : null;
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+    const onDragEnd = (e) => {
+        const active = String(e.active.id);
+        setActiveId(null);
+        setOverId(null);
+        setOffsetX(0);
+        if (!projection || !e.over)
+            return;
+        const node = findNode(tree, active);
+        if (!node)
+            return;
+        const { parentId, moved, overIndex } = projection;
+        const siblingsBefore = moved
+            .slice(0, overIndex)
+            .filter((i) => i.parentId === parentId && i.id !== active).length;
+        const without = removeNode(tree, active);
+        commit(insertNode(without, parentId, siblingsBefore, node));
+        if (parentId)
+            setCollapsed((c) => {
+                const n = new Set(c);
+                n.delete(parentId);
+                return n;
+            });
+    };
+    const update = (id, data) => commit(mapTree(tree, (n) => (n.id === id ? { ...n, data } : n)));
+    const remove = (id) => {
+        commit(removeNode(tree, id));
+        if (editing === id)
+            setEditing(null);
+    };
+    const add = (parentId) => {
+        const node = {
+            id: newId(),
+            data: defaultValues(field.fields),
+            children: [],
+        };
+        const parent = parentId ? findNode(tree, parentId) : null;
+        commit(insertNode(tree, parentId, parent ? parent.children.length : tree.length, node));
+        if (parentId)
+            setCollapsed((c) => {
+                const n = new Set(c);
+                n.delete(parentId);
+                return n;
+            });
+        setEditing(node.id);
+    };
+    const toggle = (id) => setCollapsed((c) => {
+        const n = new Set(c);
+        if (n.has(id))
+            n.delete(id);
+        else
+            n.add(id);
+        return n;
+    });
+    const labelOf = (data) => {
+        const v = data[labelKey];
+        return typeof v === "string" && v.trim() ? v : "Untitled";
+    };
+    const detailOf = (data) => detailKey && typeof data[detailKey] === "string"
+        ? data[detailKey]
+        : "";
+    const activeNode = activeId ? findNode(tree, activeId) : null;
+    return (_jsxs("div", { className: "v-tree", children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: (e) => {
+                    setActiveId(String(e.active.id));
+                    setOverId(String(e.active.id));
+                    setEditing(null);
+                }, onDragMove: (e) => setOffsetX(e.delta.x), onDragOver: (e) => setOverId(e.over ? String(e.over.id) : null), onDragEnd: onDragEnd, onDragCancel: () => {
+                    setActiveId(null);
+                    setOverId(null);
+                    setOffsetX(0);
+                }, children: [_jsxs(SortableContext, { items: visible.map((i) => i.id), strategy: verticalListSortingStrategy, children: [visible.length === 0 && (_jsx("div", { className: "v-tree__empty", children: "No items yet." })), visible.map((item) => (_jsx(TreeRow, { item: item, depth: activeId === item.id && projection
+                                    ? projection.depth
+                                    : item.depth, label: labelOf(item.data), detail: detailOf(item.data), collapsed: collapsed.has(item.id), editing: editing === item.id, canAddChild: item.depth + 1 < maxDepth, onToggle: () => toggle(item.id), onEdit: () => setEditing(editing === item.id ? null : item.id), onAddChild: () => add(item.id), onRemove: () => remove(item.id), children: editing === item.id && (_jsx("div", { className: "v-tree__form", children: _jsx(FieldSet, { schema: field.fields, values: item.data, onChange: (v) => update(item.id, v), errors: errors, ctx: ctx, pathPrefix: `${path}.${item.id}` }) })) }, item.id)))] }), createPortal(_jsx(DragOverlay, { dropAnimation: null, children: activeNode && (_jsxs("div", { className: "v-tree__item v-tree__ghost", children: [_jsx("span", { className: "v-list__handle", children: _jsx(GripVertical, {}) }), _jsx("span", { className: "v-tree__label", children: labelOf(activeNode.data) }), activeNode.children.length > 0 && (_jsxs("span", { className: "v-tree__count", children: ["+", descendantIds(activeNode).length] }))] })) }), document.body)] }), _jsxs(Button, { size: "sm", className: "v-list__add", onClick: () => add(null), children: [_jsx(Plus, {}), " ", field.addLabel ?? `Add ${fieldLabel("item", field).toLowerCase()}`] })] }));
+}
+function TreeRow({ item, depth, label, detail, collapsed, editing, canAddChild, onToggle, onEdit, onAddChild, onRemove, children, }) {
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: item.id });
+    return (_jsxs("div", { ref: setNodeRef, className: cx("v-tree__row", isDragging && "is-placeholder", editing && "is-editing"), style: {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            paddingLeft: depth * INDENT,
+            "--v-tree-indent": `${depth * INDENT}px`,
+        }, children: [_jsxs("div", { className: "v-tree__item", children: [_jsx("span", { className: "v-list__handle", title: "Drag to move; drag sideways to nest", ref: setActivatorNodeRef, ...attributes, ...listeners, onPointerDown: (e) => {
+                            e.stopPropagation();
+                            listeners?.onPointerDown?.(e);
+                        }, children: _jsx(GripVertical, {}) }), item.childCount > 0 ? (_jsx("button", { type: "button", className: "v-tree__toggle", onClick: onToggle, title: collapsed ? "Expand" : "Collapse", children: collapsed ? _jsx(ChevronRight, {}) : _jsx(ChevronDown, {}) })) : (_jsx("span", { className: "v-tree__toggle v-tree__toggle--leaf" })), _jsxs("button", { type: "button", className: "v-tree__text", onClick: onEdit, children: [_jsx("span", { className: "v-tree__label", children: label }), detail && _jsx("span", { className: "v-tree__detail", children: detail }), collapsed && item.childCount > 0 && (_jsx("span", { className: "v-tree__count", children: item.childCount }))] }), _jsxs("div", { className: "v-list__actions", children: [canAddChild && (_jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Add child", onClick: onAddChild, children: _jsx(CornerDownRight, {}) })), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: editing ? "Done" : "Edit", onClick: onEdit, children: _jsx(Pencil, {}) }), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Remove", onClick: onRemove, children: _jsx(Trash2, {}) })] })] }), children] }));
+}

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

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+export declare function Button({ variant, size, icon, className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "default" | "primary" | "danger" | "ghost";
+    size?: "sm" | "xs";
+    icon?: boolean;
+}): import("react").JSX.Element;
+export declare function Modal({ title, onClose, children, footer, wide, }: {
+    title: ReactNode;
+    onClose: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    wide?: boolean;
+}): import("react").JSX.Element;
+export declare function ConfirmDialog({ title, message, confirmLabel, danger, onConfirm, onCancel, busy, }: {
+    title: string;
+    message: ReactNode;
+    confirmLabel?: string;
+    danger?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    busy?: boolean;
+}): import("react").JSX.Element;
+interface Toast {
+    id: number;
+    kind: "success" | "error" | "info";
+    message: ReactNode;
+}
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): (kind: Toast["kind"], message: ReactNode) => void;
+export declare function Spinner(): import("react").JSX.Element;
+export declare function Loading({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+export declare function Alert({ kind, children, }: {
+    kind?: "error" | "warning" | "info";
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Badge({ status, children, }: {
+    status?: "published" | "draft" | null;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function EmptyState({ icon, title, children, }: {
+    icon?: ReactNode;
+    title: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Menu({ trigger, children, align, }: {
+    trigger: (props: {
+        open: boolean;
+        toggle: () => void;
+    }) => ReactNode;
+    children: (close: () => void) => ReactNode;
+    align?: "left" | "right";
+}): import("react").JSX.Element;
+export declare function Toggle({ checked, onChange, label, disabled, }: {
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export {};