vestrycms 0.0.0-stage → 0.2.0

package/dist/ui/components/ui.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, X, } from "lucide-react";
+import { createPortal } from "react-dom";
+import { cx } from "../lib/utils.js";
+// ---------------------------------------------------------------- Button
+export function Button({ variant = "default", size, icon, className, children, ...props }) {
+    return (_jsx("button", { type: "button", className: cx("v-btn", variant !== "default" && `v-btn--${variant}`, size && `v-btn--${size}`, icon && "v-btn--icon", className), ...props, children: children }));
+}
+// ---------------------------------------------------------------- Modal
+export function Modal({ title, onClose, children, footer, wide, }) {
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onClose]);
+    return (_jsx("div", { className: "v-modal-backdrop", onMouseDown: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: cx("v-modal", wide && "v-modal--wide"), role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: "v-modal__header", children: [_jsx("h2", { className: "v-modal__title", children: title }), _jsx(Button, { variant: "ghost", icon: true, onClick: onClose, "aria-label": "Close", children: _jsx(X, {}) })] }), _jsx("div", { className: "v-modal__body", children: children }), footer && _jsx("div", { className: "v-modal__footer", children: footer })] }) }));
+}
+export function ConfirmDialog({ title, message, confirmLabel = "Confirm", danger, onConfirm, onCancel, busy, }) {
+    return (_jsx(Modal, { title: title, onClose: onCancel, footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: onCancel, disabled: busy, children: "Cancel" }), _jsxs(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, disabled: busy, children: [busy ? _jsx(Spinner, {}) : null, confirmLabel] })] }), children: _jsx("p", { style: { margin: 0 }, children: message }) }));
+}
+const ToastContext = createContext(() => { });
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const push = useCallback((kind, message) => {
+        const id = Date.now() + Math.random();
+        setToasts((t) => [...t, { id, kind, message }]);
+        setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), kind === "error" ? 8000 : 4000);
+    }, []);
+    return (_jsxs(ToastContext.Provider, { value: push, children: [children, _jsx("div", { className: "v-toasts", children: toasts.map((t) => (_jsxs("div", { className: cx("v-toast", `v-toast--${t.kind}`), children: [t.kind === "success" ? (_jsx(CheckCircle2, {})) : t.kind === "error" ? (_jsx(AlertCircle, {})) : (_jsx(Info, {})), _jsx("span", { children: t.message })] }, t.id))) })] }));
+}
+export function useToast() {
+    return useContext(ToastContext);
+}
+// ---------------------------------------------------------------- Misc
+export function Spinner() {
+    return _jsx("span", { className: "v-spinner", "aria-hidden": "true" });
+}
+export function Loading({ label = "Loading…" }) {
+    return (_jsxs("div", { className: "v-loading", children: [_jsx(Spinner, {}), " ", label] }));
+}
+export function Alert({ kind = "info", children, }) {
+    return (_jsxs("div", { className: cx("v-alert", `v-alert--${kind}`), role: kind === "error" ? "alert" : undefined, children: [kind === "error" ? (_jsx(AlertCircle, {})) : kind === "warning" ? (_jsx(AlertTriangle, {})) : (_jsx(Info, {})), _jsx("div", { children: children })] }));
+}
+export function Badge({ status, children, }) {
+    if (!status)
+        return _jsx("span", { className: "v-badge v-badge--plain", children: children });
+    return (_jsx("span", { className: cx("v-badge", `v-badge--${status}`), children: children ?? (status === "published" ? "Published" : "Draft") }));
+}
+export function EmptyState({ icon, title, children, }) {
+    return (_jsxs("div", { className: "v-empty", children: [icon, _jsx("h3", { children: title }), children] }));
+}
+// ---------------------------------------------------------------- Menu
+export function Menu({ trigger, children, align = "left", }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const panelRef = useRef(null);
+    const [pos, setPos] = useState(null);
+    // The panel is portaled to <body> so table wrappers and scroll panes
+    // (overflow: auto/clip) can't crop it; it's positioned from the trigger.
+    const place = useCallback(() => {
+        const anchor = ref.current;
+        if (!anchor)
+            return;
+        const r = anchor.getBoundingClientRect();
+        setPos(align === "right"
+            ? { top: r.bottom + 6, right: window.innerWidth - r.right }
+            : { top: r.bottom + 6, left: r.left });
+    }, [align]);
+    useEffect(() => {
+        if (!open)
+            return;
+        place();
+        const onDown = (e) => {
+            const t = e.target;
+            if (ref.current?.contains(t) || panelRef.current?.contains(t))
+                return;
+            setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        // A scroll or resize while open closes the menu rather than leaving it
+        // floating away from its trigger.
+        const onMove = () => setOpen(false);
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        window.addEventListener("scroll", onMove, true);
+        window.addEventListener("resize", onMove);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+            window.removeEventListener("scroll", onMove, true);
+            window.removeEventListener("resize", onMove);
+        };
+    }, [open, place]);
+    const close = useCallback(() => setOpen(false), []);
+    const toggle = useCallback(() => setOpen((o) => !o), []);
+    const triggerNode = useMemo(() => trigger({ open, toggle }), [trigger, open, toggle]);
+    return (_jsxs("div", { className: "v-menu", ref: ref, children: [triggerNode, open &&
+                pos &&
+                createPortal(_jsx("div", { ref: panelRef, className: "v-menu__panel", style: { top: pos.top, left: pos.left, right: pos.right }, children: children(close) }), document.body)] }));
+}
+export function Toggle({ checked, onChange, label, disabled, }) {
+    return (_jsxs("label", { className: cx("v-toggle", checked && "is-on"), children: [_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked) }), _jsx("span", { className: "v-toggle__track" }), label && _jsx("span", { className: "v-toggle__label", children: label })] }));
+}

package/dist/ui/context.d.ts

@@ -0,0 +1,17 @@
+import type { VestryConfig } from "../config/types.js";
+import type { ApiClient, ClientConfig } from "./api.js";
+import type { VestryAuthClient } from "./auth-client.js";
+export interface VestryContextValue {
+    basePath: string;
+    name: string;
+    api: ApiClient;
+    /** Better Auth's browser client (sign-in, sign-out). */
+    authClient: VestryAuthClient;
+    client: ClientConfig;
+    config: VestryConfig;
+    refresh: () => Promise<void>;
+}
+export declare const VestryContext: import("react").Context<VestryContextValue | null>;
+export declare function useVestry(): VestryContextValue;
+/** Build a control-panel URL. */
+export declare function useHref(): (path: string) => string;

package/dist/ui/context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+export const VestryContext = createContext(null);
+export function useVestry() {
+    const ctx = useContext(VestryContext);
+    if (!ctx)
+        throw new Error("useVestry must be used inside <VestryContext.Provider>");
+    return ctx;
+}
+/** Build a control-panel URL. */
+export function useHref() {
+    const { basePath } = useVestry();
+    return (path) => `${basePath.replace(/\/$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
+}

package/dist/ui/lib/format.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Formats a file with the project's Prettier (via `virtual:vestry/formatter`).
+ * Prettier is loaded lazily on first save so it stays out of the initial bundle.
+ */
+export declare function formatSource(text: string, filepath: string): Promise<string>;

package/dist/ui/lib/format.js

@@ -0,0 +1,11 @@
+/// <reference path="../../env.d.ts" />
+/**
+ * Formats a file with the project's Prettier (via `virtual:vestry/formatter`).
+ * Prettier is loaded lazily on first save so it stays out of the initial bundle.
+ */
+export async function formatSource(text, filepath) {
+    const mod = await import("virtual:vestry/formatter");
+    if (!mod.available)
+        return text;
+    return mod.formatFile(text, filepath);
+}

package/dist/ui/lib/utils.d.ts

@@ -0,0 +1,24 @@
+import type { Field, Schema } from "../../config/types.js";
+export declare function cx(...parts: (string | false | null | undefined)[]): string;
+export declare function titleCase(key: string): string;
+export declare function fieldLabel(key: string, field: Field): string;
+export declare function formatBytes(n?: number): string;
+export declare function formatDate(value: unknown): string;
+export declare function relativeTime(iso: string): string;
+/** Default value for a field (used when creating entries / array items). */
+export declare function defaultValue(field: Field): unknown;
+export declare function defaultValues(schema: Schema): Record<string, unknown>;
+export interface ValidationError {
+    path: string;
+    message: string;
+}
+export declare function validate(schema: Schema, data: Record<string, unknown>, prefix?: string): ValidationError[];
+/** Short human summary of an object value, for list item headers. */
+export declare function summarize(value: unknown, field?: Field): string;
+export declare function isImagePath(p: string): boolean;
+export declare function basename(p: string): string;
+export declare function slugify(input: string): string;
+export declare function fillTemplate(template: string, values: Record<string, unknown>, slug?: boolean): string;
+export declare function deepEqual(a: unknown, b: unknown): boolean;
+/** Up to two initials for an avatar, from a name or an email address. */
+export declare function initials(nameOrEmail: string): string;

package/dist/ui/lib/utils.js

@@ -0,0 +1,255 @@
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+export function titleCase(key) {
+    return key
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .replace(/^\w/, (c) => c.toUpperCase());
+}
+export function fieldLabel(key, field) {
+    return field.label ?? titleCase(key);
+}
+export function formatBytes(n) {
+    if (n === undefined)
+        return "";
+    if (n < 1024)
+        return `${n} B`;
+    if (n < 1024 * 1024)
+        return `${(n / 1024).toFixed(0)} KB`;
+    return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+export function formatDate(value) {
+    if (value === null || value === undefined || value === "")
+        return "";
+    const d = value instanceof Date ? value : new Date(String(value));
+    if (Number.isNaN(d.getTime()))
+        return String(value);
+    const s = String(value);
+    const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(s);
+    if (dateOnly) {
+        const [y, m, day] = s.split("-").map(Number);
+        return new Date(y, m - 1, day).toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+    }
+    return d.toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+}
+export function relativeTime(iso) {
+    const diff = Date.now() - new Date(iso).getTime();
+    const m = Math.round(diff / 60000);
+    if (m < 1)
+        return "just now";
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.round(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    const d = Math.round(h / 24);
+    return `${d}d ago`;
+}
+/** Default value for a field (used when creating entries / array items). */
+export function defaultValue(field) {
+    switch (field.type) {
+        case "text":
+        case "textarea":
+        case "slug":
+        case "color":
+        case "image":
+        case "file":
+        case "reference":
+        case "markdown":
+        case "code":
+            return field.default ?? "";
+        case "number":
+            return field.default ?? null;
+        case "boolean":
+            return field.default ?? false;
+        case "date":
+            return field.default === "now"
+                ? new Date().toISOString().slice(0, 10)
+                : (field.default ?? "");
+        case "datetime":
+            if (field.default === "now") {
+                return field.storage === "local"
+                    ? new Date().toISOString().slice(0, 16)
+                    : new Date().toISOString();
+            }
+            return field.default ?? "";
+        case "select":
+            return (field.default ??
+                (field.clearable ? "" : (field.options[0]?.value ?? "")));
+        case "multiselect":
+            return field.default ?? [];
+        case "object":
+            return defaultValues(field.fields);
+        case "array":
+            return [];
+        case "json":
+            return field.default ?? null;
+        case "crop":
+        case "focalPoint":
+            return undefined;
+        case "tree":
+            return [];
+    }
+}
+export function defaultValues(schema) {
+    const out = {};
+    for (const [key, field] of Object.entries(schema)) {
+        const v = defaultValue(field);
+        if (v !== "" && v !== null && !(Array.isArray(v) && v.length === 0))
+            out[key] = v;
+        else if (field.type === "boolean")
+            out[key] = v;
+    }
+    return out;
+}
+export function validate(schema, data, prefix = "") {
+    const errors = [];
+    for (const [key, field] of Object.entries(schema)) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        const value = data?.[key];
+        const label = fieldLabel(key, field);
+        const empty = value === undefined ||
+            value === null ||
+            value === "" ||
+            (Array.isArray(value) && value.length === 0);
+        if (field.required && empty) {
+            errors.push({ path, message: `${label} is required` });
+            continue;
+        }
+        if (empty)
+            continue;
+        if (field.type === "text" && field.pattern && typeof value === "string") {
+            if (!new RegExp(field.pattern).test(value))
+                errors.push({
+                    path,
+                    message: `${label} is not in the expected format`,
+                });
+        }
+        if ((field.type === "text" || field.type === "textarea") &&
+            field.maxLength &&
+            typeof value === "string" &&
+            value.length > field.maxLength) {
+            errors.push({
+                path,
+                message: `${label} must be at most ${field.maxLength} characters`,
+            });
+        }
+        if (field.type === "number" && typeof value === "number") {
+            if (field.min !== undefined && value < field.min)
+                errors.push({
+                    path,
+                    message: `${label} must be at least ${field.min}`,
+                });
+            if (field.max !== undefined && value > field.max)
+                errors.push({ path, message: `${label} must be at most ${field.max}` });
+        }
+        if (field.type === "object" && value && typeof value === "object") {
+            errors.push(...validate(field.fields, value, path));
+        }
+        if (field.type === "tree" && Array.isArray(value)) {
+            const key = field.childrenKey ?? "children";
+            const walk = (nodes, prefix) => nodes.forEach((n, i) => {
+                if (!n || typeof n !== "object")
+                    return;
+                errors.push(...validate(field.fields, n, `${prefix}.${i}`));
+                const kids = n[key];
+                if (Array.isArray(kids))
+                    walk(kids, `${prefix}.${i}.${key}`);
+            });
+            walk(value, path);
+        }
+        if (field.type === "array" && Array.isArray(value)) {
+            if (field.min !== undefined && value.length < field.min)
+                errors.push({
+                    path,
+                    message: `${label} needs at least ${field.min} items`,
+                });
+            if (field.max !== undefined && value.length > field.max)
+                errors.push({
+                    path,
+                    message: `${label} allows at most ${field.max} items`,
+                });
+            if (field.of.type === "object") {
+                value.forEach((item, i) => errors.push(...validate(field.of.fields, item, `${path}.${i}`)));
+            }
+        }
+    }
+    return errors;
+}
+/** Short human summary of an object value, for list item headers. */
+export function summarize(value, field) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    if (Array.isArray(value))
+        return `${value.length} item${value.length === 1 ? "" : "s"}`;
+    if (typeof value === "object") {
+        const obj = value;
+        if (field?.type === "array" &&
+            field.itemLabel &&
+            obj[field.itemLabel] !== undefined)
+            return String(obj[field.itemLabel]);
+        for (const k of ["title", "label", "name", "heading", "id"]) {
+            if (typeof obj[k] === "string" && obj[k])
+                return obj[k];
+        }
+        const first = Object.values(obj).find((v) => typeof v === "string" && v);
+        return first ? String(first) : "";
+    }
+    return "";
+}
+export function isImagePath(p) {
+    return /\.(jpe?g|png|gif|webp|avif|svg)$/i.test(p);
+}
+export function basename(p) {
+    return p.slice(p.lastIndexOf("/") + 1);
+}
+export function slugify(input) {
+    return input
+        .normalize("NFKD")
+        .replace(/[̀-ͯ]/g, "")
+        .toLowerCase()
+        .replace(/['’"]/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+export function fillTemplate(template, values, slug = false) {
+    return template.replace(/\{([\w.]+)\}/g, (_, key) => {
+        const raw = key
+            .split(".")
+            .reduce((acc, k) => acc && typeof acc === "object"
+            ? acc[k]
+            : undefined, values);
+        if (raw === undefined || raw === null)
+            return "";
+        const s = String(raw);
+        return slug ? slugify(s) : s;
+    });
+}
+export function deepEqual(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+/** Up to two initials for an avatar, from a name or an email address. */
+export function initials(nameOrEmail) {
+    const parts = nameOrEmail
+        .replace(/@.*$/, "")
+        .split(/[\s._-]+/)
+        .filter(Boolean);
+    const first = parts[0]?.[0] ?? "?";
+    const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+    return `${first}${last ?? ""}`.toUpperCase();
+}

package/dist/ui/main.d.ts

@@ -0,0 +1 @@
+import "./styles.css";

package/dist/ui/main.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+import { StrictMode } from "react";
+import { App } from "./App.js";
+import "./styles.css";
+const root = document.getElementById("vestry-root");
+if (root) {
+    const basePath = root.dataset.base ?? "/admin";
+    const name = root.dataset.name ?? "Vestry";
+    createRoot(root).render(_jsx(StrictMode, { children: _jsx(App, { basePath: basePath, name: name }) }));
+}

package/dist/ui/pages/Assets.d.ts

@@ -0,0 +1 @@
+export declare function AssetsPage(): import("react").JSX.Element;

package/dist/ui/pages/Assets.js

@@ -0,0 +1,69 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ChevronRight, Copy, File as FileIcon, Folder, Trash2, Upload, } from "lucide-react";
+import { useRef, useState } from "react";
+import { useParams, useSearchParams } from "react-router";
+import { fileToBase64 } from "../api.js";
+import { Icon } from "../components/Icon.js";
+import { TopBar } from "../components/Layout.js";
+import { Alert, Button, ConfirmDialog, EmptyState, Loading, Modal, Spinner, useToast, } from "../components/ui.js";
+import { useVestry } from "../context.js";
+import { cx, formatBytes } from "../lib/utils.js";
+export function AssetsPage() {
+    const { container: key = "" } = useParams();
+    const { config, api } = useVestry();
+    const container = config.assets?.[key];
+    const [params, setParams] = useSearchParams();
+    const dir = params.get("dir") ?? "";
+    const toast = useToast();
+    const qc = useQueryClient();
+    const [selected, setSelected] = useState(null);
+    const [confirmDelete, setConfirmDelete] = useState(null);
+    const [over, setOver] = useState(false);
+    const fileInput = useRef(null);
+    const q = useQuery({
+        queryKey: ["assets", key, dir],
+        queryFn: () => api.listAssets(key, dir),
+        enabled: Boolean(container),
+    });
+    const upload = useMutation({
+        mutationFn: async (files) => {
+            const payload = await Promise.all(files.map(async (f) => ({
+                name: f.name,
+                base64: await fileToBase64(f),
+            })));
+            return api.uploadAssets(key, dir, payload);
+        },
+        onSuccess: (res) => {
+            toast("success", `Uploaded ${res.paths.length} file${res.paths.length === 1 ? "" : "s"}`);
+            qc.invalidateQueries({ queryKey: ["assets", key] });
+        },
+        onError: (e) => toast("error", e.message),
+    });
+    const remove = useMutation({
+        mutationFn: (path) => api.deleteAsset(key, path),
+        onSuccess: () => {
+            toast("success", "File deleted");
+            setConfirmDelete(null);
+            setSelected(null);
+            qc.invalidateQueries({ queryKey: ["assets", key] });
+        },
+        onError: (e) => toast("error", e.message),
+    });
+    if (!container)
+        return _jsxs(Alert, { kind: "error", children: ["Unknown asset container \u201C", key, "\u201D."] });
+    const crumbs = dir ? dir.split("/") : [];
+    const selectedItem = q.data?.items.find((i) => i.path === selected);
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { title: container.label, actions: _jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", hidden: true, multiple: true, accept: container.accept?.map((a) => `.${a}`).join(","), onChange: (e) => e.target.files && upload.mutate(Array.from(e.target.files)) }), _jsxs(Button, { variant: "primary", onClick: () => fileInput.current?.click(), disabled: upload.isPending, children: [upload.isPending ? _jsx(Spinner, {}) : _jsx(Upload, {}), " Upload"] })] }) }), _jsxs("div", { className: "v-page", children: [_jsx("div", { className: "v-toolbar", children: _jsxs("div", { className: "v-breadcrumbs", children: [_jsx("button", { type: "button", onClick: () => setParams({}), children: container.directory }), crumbs.map((c, i) => (_jsxs("span", { className: "v-row", style: { gap: 6 }, children: [_jsx(ChevronRight, { size: 14 }), _jsx("button", { type: "button", onClick: () => setParams({ dir: crumbs.slice(0, i + 1).join("/") }), children: c })] }, i)))] }) }), _jsxs("div", { className: cx("v-dropzone", over && "is-over"), onDragOver: (e) => {
+                            e.preventDefault();
+                            setOver(true);
+                        }, onDragLeave: () => setOver(false), onDrop: (e) => {
+                            e.preventDefault();
+                            setOver(false);
+                            if (e.dataTransfer.files.length)
+                                upload.mutate(Array.from(e.dataTransfer.files));
+                        }, children: ["Drop files here to upload to", " ", _jsx("span", { className: "v-mono", children: [container.directory, dir].filter(Boolean).join("/") })] }), q.isLoading && _jsx(Loading, {}), q.error && _jsx(Alert, { kind: "error", children: q.error.message }), q.data && (_jsxs(_Fragment, { children: [q.data.folders.length > 0 && (_jsx("div", { className: "v-asset-grid", style: { marginBottom: 14 }, children: q.data.folders.map((f) => (_jsxs("button", { type: "button", className: "v-folder", onClick: () => setParams({ dir: [dir, f].filter(Boolean).join("/") }), children: [_jsx(Folder, {}), " ", f] }, f))) })), q.data.items.length === 0 && q.data.folders.length === 0 ? (_jsx(EmptyState, { icon: _jsx(Icon, { name: container.icon ?? "image" }), title: "No files here yet", children: _jsx("p", { children: "Upload files with the button above or drop them onto this page." }) })) : (_jsx("div", { className: "v-asset-grid", children: q.data.items.map((item) => (_jsxs("button", { type: "button", className: cx("v-asset", selected === item.path && "is-selected"), onClick: () => setSelected(item.path), children: [_jsx("div", { className: "v-asset__preview", children: item.kind === "image" ? (_jsx("img", { src: api.fileUrl(item.path, item.sha), alt: "", loading: "lazy" })) : (_jsx(FileIcon, {})) }), _jsx("div", { className: "v-asset__name", title: item.name, children: item.name }), _jsx("div", { className: "v-asset__meta", children: formatBytes(item.size) })] }, item.path))) }))] }))] }), selectedItem && (_jsxs(Modal, { title: selectedItem.name, onClose: () => setSelected(null), footer: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "danger", onClick: () => setConfirmDelete(selectedItem.path), children: [_jsx(Trash2, {}), " Delete"] }), _jsxs(Button, { onClick: () => {
+                                navigator.clipboard.writeText(selectedItem.path);
+                                toast("success", "Path copied");
+                            }, children: [_jsx(Copy, {}), " Copy path"] }), _jsx(Button, { variant: "primary", onClick: () => setSelected(null), children: "Done" })] }), children: [selectedItem.kind === "image" && (_jsx("div", { style: { textAlign: "center", marginBottom: 14 }, children: _jsx("img", { src: api.fileUrl(selectedItem.path, selectedItem.sha), alt: "", style: { maxWidth: "100%", maxHeight: 360, borderRadius: 6 } }) })), _jsxs("dl", { className: "v-meta", children: [_jsx("dt", { children: "Path" }), _jsx("dd", { className: "v-mono", children: selectedItem.path }), _jsx("dt", { children: "Size" }), _jsx("dd", { children: formatBytes(selectedItem.size) }), container.directory.startsWith("public/") && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "URL" }), _jsxs("dd", { className: "v-mono", children: ["/", selectedItem.path.slice("public/".length)] })] }))] })] })), confirmDelete && (_jsx(ConfirmDialog, { title: "Delete file?", message: _jsxs(_Fragment, { children: [_jsx("span", { className: "v-mono", children: confirmDelete }), " will be removed from the repository. Pages that reference it will break."] }), confirmLabel: "Delete", danger: true, busy: remove.isPending, onCancel: () => setConfirmDelete(null), onConfirm: () => remove.mutate(confirmDelete) }))] }));
+}

package/dist/ui/pages/CollectionList.d.ts

@@ -0,0 +1,6 @@
+import type { Field } from "../../config/types.js";
+export declare function CollectionListPage(): import("react").JSX.Element;
+export declare function CellValue({ field, value }: {
+    field?: Field;
+    value: unknown;
+}): import("react").JSX.Element;