vestrycms 0.0.0-stage → 0.1.0

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;

package/dist/ui/pages/CollectionList.js

@@ -0,0 +1,115 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowDown, ArrowUp, ExternalLink, Plus, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Link, useParams } from "react-router";
+import { Icon } from "../components/Icon.js";
+import { TopBar } from "../components/Layout.js";
+import { Alert, Badge, EmptyState, Loading } from "../components/ui.js";
+import { useVestry } from "../context.js";
+import { cx, fieldLabel, fillTemplate, formatDate, titleCase, } from "../lib/utils.js";
+export function CollectionListPage() {
+    const { collection: key = "" } = useParams();
+    const { config, api } = useVestry();
+    const col = config.collections?.[key];
+    const [search, setSearch] = useState("");
+    const [status, setStatus] = useState("all");
+    const [sort, setSort] = useState(null);
+    const q = useQuery({
+        queryKey: ["entries", key],
+        queryFn: () => api.listEntries(key),
+        enabled: Boolean(col),
+    });
+    const columns = useMemo(() => {
+        if (!col)
+            return [];
+        const list = col.columns ?? (col.sort?.field ? [col.sort.field] : []);
+        return list.map((c) => (typeof c === "string" ? { field: c } : c));
+    }, [col]);
+    const entries = useMemo(() => {
+        let list = q.data?.entries ?? [];
+        if (status !== "all")
+            list = list.filter((e) => e.status === status);
+        if (search.trim()) {
+            const s = search.toLowerCase();
+            const fields = col?.searchFields ?? [col?.titleField ?? "title"];
+            list = list.filter((e) => e.title.toLowerCase().includes(s) ||
+                e.slug.toLowerCase().includes(s) ||
+                fields.some((f) => String(e.data[f] ?? "")
+                    .toLowerCase()
+                    .includes(s)));
+        }
+        if (sort) {
+            const dir = sort.dir === "asc" ? 1 : -1;
+            list = [...list].sort((a, b) => {
+                const av = sort.field === "title"
+                    ? a.title
+                    : sort.field === "slug"
+                        ? a.slug
+                        : String(a.data[sort.field] ?? "");
+                const bv = sort.field === "title"
+                    ? b.title
+                    : sort.field === "slug"
+                        ? b.slug
+                        : String(b.data[sort.field] ?? "");
+                return av < bv ? -dir : av > bv ? dir : 0;
+            });
+        }
+        return list;
+    }, [q.data, status, search, sort, col]);
+    if (!col)
+        return _jsxs(Alert, { kind: "error", children: ["Unknown collection \u201C", key, "\u201D."] });
+    const toggleSort = (field) => setSort((s) => s?.field === field
+        ? { field, dir: s.dir === "asc" ? "desc" : "asc" }
+        : { field, dir: "asc" });
+    const header = (field, label) => (_jsx("th", { children: _jsxs("button", { type: "button", onClick: () => toggleSort(field), children: [label, sort?.field === field &&
+                    (sort.dir === "asc" ? _jsx(ArrowUp, {}) : _jsx(ArrowDown, {}))] }) }, field));
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { title: col.label, actions: col.create !== false && (_jsxs(Link, { to: `/collections/${key}/new`, className: "v-btn v-btn--primary", children: [_jsx(Plus, {}), " New ", col.singular ?? "entry"] })) }), _jsxs("div", { className: "v-page", children: [_jsxs("div", { className: "v-toolbar", children: [_jsxs("div", { className: "v-search", children: [_jsx(Search, {}), _jsx("input", { className: "v-input", placeholder: `Search ${col.label.toLowerCase()}…`, value: search, onChange: (e) => setSearch(e.target.value) })] }), col.status && (_jsx("div", { className: "v-segment", children: ["all", "published", "draft"].map((s) => (_jsx("button", { type: "button", className: cx(status === s && "is-active"), onClick: () => setStatus(s), children: titleCase(s) }, s))) }))] }), _jsxs("div", { className: "v-card", children: [q.isLoading && _jsx(Loading, {}), q.error && (_jsx("div", { style: { padding: 18 }, children: _jsx(Alert, { kind: "error", children: q.error.message }) })), q.data && entries.length === 0 && (_jsx(EmptyState, { icon: _jsx(Icon, { name: col.icon ?? "files" }), title: search ? "No matches" : `No ${col.label.toLowerCase()} yet`, children: !search && col.create !== false && (_jsx("p", { children: _jsxs(Link, { to: `/collections/${key}/new`, className: "v-btn", children: [_jsx(Plus, {}), " Create the first", " ", col.singular?.toLowerCase() ?? "entry"] }) })) })), q.data && entries.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "v-table-wrap", children: _jsxs("table", { className: "v-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [header("title", "Title"), columns.map((c) => {
+                                                                if (c.field === "status" || c.field === "slug")
+                                                                    return header(c.field, c.label ?? titleCase(c.field));
+                                                                const f = col.schema[c.field];
+                                                                return header(c.field, c.label ??
+                                                                    (f ? fieldLabel(c.field, f) : titleCase(c.field)));
+                                                            }), col.status &&
+                                                                !columns.some((c) => c.field === "status") && (_jsx("th", { children: "Status" })), _jsx("th", {})] }) }), _jsx("tbody", { children: entries.map((e) => (_jsxs("tr", { children: [_jsxs("td", { className: "v-table__main", children: [_jsx(Link, { className: "v-table__title", to: `/collections/${key}/${e.slug}`, children: e.title }), e.data[col.titleField ?? "title"] !== undefined &&
+                                                                        e.data.subtitle ? (_jsx("span", { className: "v-table__sub", children: String(e.data.subtitle) })) : (e.excerpt && (_jsx("span", { className: "v-table__sub", children: e.excerpt })))] }), columns.map((c) => (_jsx("td", { style: { whiteSpace: "nowrap" }, children: c.field === "status" ? (_jsx(Badge, { status: e.status })) : c.field === "slug" ? (_jsx("span", { className: "v-mono", children: e.slug })) : (_jsx(CellValue, { field: col.schema[c.field], value: e.data[c.field] })) }, c.field))), col.status &&
+                                                                !columns.some((c) => c.field === "status") && (_jsx("td", { children: _jsx(Badge, { status: e.status }) })), _jsx("td", { className: "v-table__actions", children: col.previewUrl && (_jsx("a", { className: "v-btn v-btn--ghost v-btn--xs v-btn--icon", title: "View on site", target: "_blank", rel: "noreferrer", href: `${config.siteUrl ?? ""}${fillTemplate(col.previewUrl, { ...e.data, slug: e.slug })}`, children: _jsx(ExternalLink, {}) })) })] }, e.slug))) })] }) }), _jsxs("div", { className: "v-table__footer", children: [entries.length, " of ", q.data.entries.length, " ", col.label.toLowerCase()] })] }))] })] })] }));
+}
+export function CellValue({ field, value }) {
+    const { api } = useVestry();
+    if (value === undefined || value === null || value === "")
+        return _jsx("span", { className: "v-faint", children: "\u2014" });
+    if (!field)
+        return _jsx(_Fragment, { children: String(value) });
+    switch (field.type) {
+        case "date":
+        case "datetime":
+            return _jsx(_Fragment, { children: formatDate(value) });
+        case "boolean":
+            return _jsx(_Fragment, { children: value ? "Yes" : "No" });
+        case "select": {
+            const opt = field.options.find((o) => o.value === value);
+            return (_jsxs("span", { className: "v-row", style: { gap: 6 }, children: [opt?.color && (_jsx("span", { className: "v-swatch", style: { background: opt.color } })), opt?.label ?? String(value)] }));
+        }
+        case "image":
+            return (_jsx("img", { className: "v-thumb", src: api.fileUrl(String(value)), alt: "", loading: "lazy" }));
+        case "reference":
+            return (_jsx(ReferenceLabel, { collection: field.collection, id: String(value) }));
+        case "array":
+            return _jsx(_Fragment, { children: Array.isArray(value) ? `${value.length} items` : "" });
+        case "object":
+            return _jsx("span", { className: "v-muted", children: "\u2026" });
+        default:
+            return _jsx(_Fragment, { children: String(value) });
+    }
+}
+function ReferenceLabel({ collection, id, }) {
+    const { api } = useVestry();
+    const q = useQuery({
+        queryKey: ["entries", collection],
+        queryFn: () => api.listEntries(collection),
+        staleTime: 60_000,
+    });
+    const e = q.data?.entries.find((x) => x.slug === id);
+    return _jsx(_Fragment, { children: e?.title ?? id });
+}

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

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

package/dist/ui/pages/Dashboard.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
+import { ArrowRight, Clock } from "lucide-react";
+import { Link } from "react-router";
+import { TopBar } from "../components/Layout.js";
+import { Icon } from "../components/Icon.js";
+import { Badge } from "../components/ui.js";
+import { useVestry } from "../context.js";
+import { formatDate } from "../lib/utils.js";
+const DEFAULT_RECENT = 5;
+/** Which date field (if any) a collection's recent list should show. */
+function recentDateField(col) {
+    const field = col.sort?.field;
+    if (!field)
+        return null;
+    const type = col.schema[field]?.type;
+    return type === "date" || type === "datetime" ? field : null;
+}
+function recentCount(col) {
+    if (col.recent === false)
+        return 0;
+    if (typeof col.recent === "number")
+        return col.recent;
+    if (col.recent === true)
+        return DEFAULT_RECENT;
+    return recentDateField(col) ? DEFAULT_RECENT : 0;
+}
+export function DashboardPage() {
+    const { config, api, client } = useVestry();
+    const collections = Object.entries(config.collections ?? {});
+    const queries = useQueries({
+        queries: collections.map(([key]) => ({
+            queryKey: ["entries", key],
+            queryFn: () => api.listEntries(key),
+            staleTime: 30_000,
+        })),
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { title: "Dashboard" }), _jsxs("div", { className: "v-page", children: [collections.length > 0 && (_jsxs("section", { className: "v-section", children: [_jsx("h2", { className: "v-section-title", children: "Collections" }), _jsx("div", { className: "v-stats", children: collections.map(([key, col], i) => {
+                                    const q = queries[i];
+                                    const count = q.data?.entries.length;
+                                    const drafts = q.data?.entries.filter((e) => e.status === "draft").length ??
+                                        0;
+                                    return (_jsxs(Link, { to: `/collections/${key}`, className: "v-card v-stat", children: [_jsx("span", { className: "v-stat__icon", children: _jsx(Icon, { name: col.icon ?? "files" }) }), _jsxs("span", { className: "v-stat__body", children: [_jsx("span", { className: "v-stat__label", children: col.label }), _jsxs("span", { className: "v-stat__meta", children: [count === undefined
+                                                                ? "…"
+                                                                : `${count} ${count === 1 ? "entry" : "entries"}`, drafts > 0 &&
+                                                                ` · ${drafts} draft${drafts === 1 ? "" : "s"}`] })] })] }, key));
+                                }) })] })), collections.map(([key, col], i) => {
+                        const limit = recentCount(col);
+                        const recent = limit
+                            ? (queries[i].data?.entries.slice(0, limit) ?? [])
+                            : [];
+                        if (!recent.length)
+                            return null;
+                        const dateField = recentDateField(col);
+                        return (_jsxs("section", { className: "v-section", children: [_jsxs("h2", { className: "v-section-title", children: ["Recent ", col.label.toLowerCase()] }), _jsx("div", { className: "v-card", children: _jsxs("table", { className: "v-table", children: [_jsx("tbody", { children: recent.map((e) => (_jsxs("tr", { children: [_jsxs("td", { className: "v-table__main", children: [_jsx(Link, { className: "v-table__title", to: `/collections/${key}/${e.slug}`, children: e.title }), e.excerpt && (_jsx("span", { className: "v-table__sub", children: e.excerpt }))] }), dateField && (_jsxs("td", { className: "v-muted", style: { whiteSpace: "nowrap" }, children: [_jsx(Clock, { size: 13, style: { verticalAlign: -2, marginRight: 6 } }), formatDate(e.data[dateField])] })), _jsx("td", { style: { width: 1 }, children: e.status && _jsx(Badge, { status: e.status }) })] }, e.slug))) }), _jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: 3, className: "v-table__more", children: _jsxs(Link, { to: `/collections/${key}`, children: ["All ", col.label.toLowerCase(), " ", _jsx(ArrowRight, { size: 12, style: { verticalAlign: -1 } })] }) }) }) })] }) })] }, key));
+                    }), client.mode === "local" && (_jsx("p", { className: "v-muted", style: { marginTop: 28, fontSize: 12.5 }, children: "Local mode: changes are written straight to your working copy. Commit them with git when you're happy." }))] })] }));
+}

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

@@ -0,0 +1,3 @@
+export declare function CollectionEntryPage(): import("react").JSX.Element;
+export declare function NewEntryPage(): import("react").JSX.Element;
+export declare function SingletonPage(): import("react").JSX.Element;