vestrycms 0.0.0-stage → 0.2.0

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;

package/dist/ui/pages/EntryEditor.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlertTriangle, ExternalLink, Save, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { serializeEntry } from "../../core/entries.js";
+import { collectionFormat, dirname, entryPath, fillTemplate as fillPathTemplate, normalizePath, parsePathPattern, relativePath, resolveRelative, slugify, } from "../../core/paths.js";
+import { applyAutoFields, assetToRepoPath, repoPathToAsset, toStoredValues, } from "../../core/values.js";
+import { ApiError } from "../api.js";
+import { RichTextEditor } from "../components/editor/RichTextEditor.js";
+import { FieldSet } from "../components/fields/FieldRenderer.js";
+import { TopBar } from "../components/Layout.js";
+import { Alert, Badge, Button, ConfirmDialog, Loading, Spinner, Toggle, useToast, } from "../components/ui.js";
+import { useVestry } from "../context.js";
+import { formatSource } from "../lib/format.js";
+import { defaultValues, deepEqual, fieldLabel, fillTemplate, formatDate, validate, } from "../lib/utils.js";
+export function CollectionEntryPage() {
+    const { collection = "", "*": slug = "" } = useParams();
+    return (_jsx(EntryEditor, { kind: "collection", collectionKey: collection, slug: slug || null }, `${collection}:${slug}`));
+}
+export function NewEntryPage() {
+    const { collection = "" } = useParams();
+    return (_jsx(EntryEditor, { kind: "collection", collectionKey: collection, slug: null, isNew: true }, `${collection}:new`));
+}
+export function SingletonPage() {
+    const { singleton = "" } = useParams();
+    return (_jsx(EntryEditor, { kind: "singleton", collectionKey: singleton, slug: null }, `singleton:${singleton}`));
+}
+function EntryEditor({ kind, collectionKey, slug, isNew = false, }) {
+    const { config, api, client } = useVestry();
+    const navigate = useNavigate();
+    const toast = useToast();
+    const qc = useQueryClient();
+    const col = kind === "collection"
+        ? config.collections?.[collectionKey]
+        : config.singletons?.[collectionKey];
+    const collection = kind === "collection" ? col : null;
+    const query = useQuery({
+        queryKey: kind === "collection"
+            ? ["entry", collectionKey, slug]
+            : ["singleton", collectionKey],
+        queryFn: () => kind === "collection"
+            ? api.getEntry(collectionKey, slug)
+            : api.getSingleton(collectionKey),
+        enabled: Boolean(col) && !isNew,
+        staleTime: 0,
+    });
+    const [state, setState] = useState(null);
+    const [initial, setInitial] = useState(null);
+    const [errors, setErrors] = useState([]);
+    const [uploads, setUploads] = useState({});
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [slugInput, setSlugInput] = useState("");
+    const [sha, setSha] = useState(null);
+    // Initialise state from the loaded entry (or defaults for a new one).
+    useEffect(() => {
+        if (!col || state)
+            return;
+        if (isNew) {
+            const init = { data: defaultValues(col.schema), body: "" };
+            setState(init);
+            setInitial(init);
+            return;
+        }
+        if (query.data) {
+            const init = { data: query.data.data, body: query.data.body };
+            setState(init);
+            setInitial(init);
+            setSha(query.data.sha);
+        }
+    }, [col, isNew, query.data, state]);
+    const dirty = state !== null && initial !== null && !deepEqual(state, initial);
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const onBeforeUnload = (e) => {
+            e.preventDefault();
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, [dirty]);
+    const format = col ? collectionFormat(col) : "mdx";
+    const pattern = useMemo(() => (col ? parsePathPattern(col.path) : null), [col]);
+    const effectiveSlug = useMemo(() => {
+        if (!collection || !state)
+            return slug ?? "";
+        if (!isNew)
+            return slug ?? "";
+        if (slugInput)
+            return slugInput;
+        const template = collection.slug?.template;
+        if (template)
+            return fillPathTemplate(template, state.data, { slug: true });
+        const from = collection.slug?.from ?? collection.titleField ?? "title";
+        const v = state.data[from];
+        return slugify(String(v ?? ""));
+    }, [collection, state, isNew, slug, slugInput]);
+    const filePath = useMemo(() => {
+        if (!pattern)
+            return "";
+        if (kind === "singleton")
+            return normalizePath(col.path);
+        if (pattern.single)
+            return pattern.prefix;
+        return entryPath(pattern, effectiveSlug || "new-entry");
+    }, [pattern, kind, col, effectiveSlug]);
+    // Body editor environment: resolve image references relative to this file.
+    const bodyConfig = col?.body === false ? null : (col?.body ?? {});
+    const env = useMemo(() => {
+        const images = bodyConfig?.images;
+        const fileDir = dirname(filePath);
+        const toRepoPath = (src) => {
+            if (/^https?:\/\//.test(src))
+                return null;
+            if (images)
+                return assetToRepoPath(images, src, filePath);
+            if (src.startsWith("/"))
+                return `public${src}`;
+            if (src.startsWith("."))
+                return resolveRelative(fileDir, src);
+            return null;
+        };
+        const components = Object.fromEntries((bodyConfig?.components ?? [])
+            .map((n) => [n, config.components?.[n]])
+            .filter(([, c]) => c));
+        return {
+            components,
+            imageDirectory: images?.directory,
+            toRepoPath,
+            toDocPath: (repoPath) => images
+                ? repoPathToAsset(images, repoPath, filePath)
+                : relativePath(fileDir, repoPath),
+            resolveImage: (src) => {
+                const repo = toRepoPath(src);
+                if (!repo)
+                    return src;
+                const pending = uploads[repo];
+                return pending ? pending.previewUrl : api.fileUrl(repo);
+            },
+        };
+    }, [bodyConfig, filePath, config.components, uploads, api]);
+    const save = useMutation({
+        mutationFn: async () => {
+            if (!col || !state)
+                throw new Error("Nothing to save");
+            const errs = validate(col.schema, state.data);
+            setErrors(errs);
+            if (errs.length)
+                throw new Error(errs[0].message);
+            const data = applyAutoFields(col.schema, state.data);
+            const input = {
+                data,
+                body: state.body,
+                sha: isNew ? undefined : sha,
+                uploads: Object.values(uploads).map((u) => ({
+                    path: u.path,
+                    base64: u.base64,
+                })),
+            };
+            // Compose the whole file here (and format it with the project's
+            // Prettier) whenever the file holds just this entry. Single-file
+            // collections are merged on the server instead.
+            if (kind === "singleton" || (pattern && !pattern.single)) {
+                const stored = toStoredValues(col.schema, data, filePath);
+                let raw = serializeEntry(format, { data: stored, body: state.body });
+                try {
+                    raw = await formatSource(raw, filePath);
+                }
+                catch (e) {
+                    console.warn("[vestry] formatting failed, saving unformatted", e);
+                }
+                input.raw = raw;
+            }
+            if (kind === "singleton")
+                return {
+                    ...(await api.saveSingleton(collectionKey, input)),
+                    slug: collectionKey,
+                    data,
+                };
+            if (isNew) {
+                input.slug = effectiveSlug;
+                return { ...(await api.createEntry(collectionKey, input)), data };
+            }
+            return { ...(await api.updateEntry(collectionKey, slug, input)), data };
+        },
+        onSuccess: (res) => {
+            toast("success", client.mode === "local" ? "Saved to disk" : "Saved and committed");
+            setUploads({});
+            setSha(res.sha);
+            setInitial(state ? { data: res.data, body: state.body } : null);
+            setState((s) => (s ? { ...s, data: res.data } : s));
+            qc.invalidateQueries({ queryKey: ["entries", collectionKey] });
+            qc.invalidateQueries({ queryKey: ["assets"] });
+            if (kind === "collection")
+                qc.setQueryData(["entry", collectionKey, res.slug], undefined);
+            if (isNew)
+                navigate(`/collections/${collectionKey}/${res.slug}`, {
+                    replace: true,
+                });
+        },
+        onError: (e) => {
+            if (e instanceof ApiError && e.status === 409) {
+                toast("error", `${e.message} Reload the page to pick up the latest version.`);
+            }
+            else {
+                toast("error", e.message);
+            }
+        },
+    });
+    const remove = useMutation({
+        mutationFn: () => api.deleteEntry(collectionKey, slug),
+        onSuccess: () => {
+            toast("success", "Entry deleted");
+            qc.invalidateQueries({ queryKey: ["entries", collectionKey] });
+            navigate(`/collections/${collectionKey}`);
+        },
+        onError: (e) => toast("error", e.message),
+    });
+    const saveRef = useRef(save);
+    saveRef.current = save;
+    useEffect(() => {
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
+                e.preventDefault();
+                if (!saveRef.current.isPending)
+                    saveRef.current.mutate();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    const setData = useCallback((data) => setState((s) => (s ? { ...s, data } : s)), []);
+    const setBody = useCallback((body) => setState((s) => (s ? { ...s, body } : s)), []);
+    const addUpload = useCallback((u) => setUploads((m) => ({ ...m, [u.path]: u })), []);
+    if (!col)
+        return (_jsxs(Alert, { kind: "error", children: ["Unknown ", kind, " \u201C", collectionKey, "\u201D."] }));
+    if (!isNew && query.isLoading)
+        return _jsx(Loading, {});
+    if (!isNew && query.error) {
+        return (_jsx("div", { className: "v-page", children: _jsx(Alert, { kind: "error", children: query.error.message }) }));
+    }
+    if (!state)
+        return _jsx(Loading, {});
+    const titleField = kind === "collection" ? (collection.titleField ?? "title") : null;
+    const titleIsText = titleField
+        ? col.schema[titleField]?.type === "text"
+        : false;
+    const statusField = collection?.status?.field ?? null;
+    const publishedWhen = collection?.status?.publishedWhen ?? true;
+    const isPublished = statusField
+        ? Boolean(state.data[statusField]) === publishedWhen
+        : null;
+    const titleValue = titleField
+        ? String(state.data[titleField] ?? "")
+        : col.label;
+    const previewHref = col.previewUrl && !isNew
+        ? `${config.siteUrl ?? ""}${fillTemplate(col.previewUrl, { ...state.data, slug: effectiveSlug })}`
+        : null;
+    const entry = query.data;
+    const sections = col.sections ?? [];
+    const sectioned = new Set(sections.flatMap((s) => (typeof s === "string" ? [] : s.fields)));
+    const isEditable = (key) => key !== statusField && !(titleIsText && key === titleField);
+    const isMain = (key, f) => !f.sidebar && !sectioned.has(key) && isEditable(key);
+    const isSidebar = (key, f) => Boolean(f.sidebar) && !sectioned.has(key) && isEditable(key);
+    const hasVisible = (filter) => Object.entries(col.schema).some(([k, f]) => filter(k, f) && !f.hidden);
+    const bodyPlaced = sections.includes("body");
+    const sectionCard = (section, i) => {
+        const inSection = (key) => section.fields.includes(key) && isEditable(key);
+        if (!hasVisible(inSection))
+            return null;
+        // A lone field named like its section doesn't need a second heading.
+        const lone = section.fields.length === 1 ? section.fields[0] : null;
+        const hideLabels = lone &&
+            col.schema[lone] &&
+            fieldLabel(lone, col.schema[lone]) === section.label
+            ? [lone]
+            : undefined;
+        return (_jsxs("div", { className: "v-card", children: [_jsxs("div", { className: "v-card__header", children: [_jsx("h3", { className: "v-card__title", children: section.label }), section.description && (_jsx("span", { className: "v-muted", style: { fontSize: 12.5 }, children: section.description }))] }), _jsx("div", { className: "v-card__body", children: _jsx(FieldSet, { schema: Object.fromEntries(section.fields
+                            .filter((k) => col.schema[k])
+                            .map((k) => [k, col.schema[k]])), values: state.data, onChange: setData, errors: errors, filter: inSection, ctx: ctx, hideLabels: hideLabels }) })] }, `section-${i}`));
+    };
+    const bodyCard = bodyConfig && (format === "md" || format === "mdx") ? (_jsxs("div", { className: "v-card v-card--editor", children: [_jsx("div", { className: "v-card__header", children: _jsx("h3", { className: "v-card__title", children: bodyConfig.label ?? "Content" }) }), _jsx(RichTextEditor, { value: state.body, onChange: setBody, components: bodyConfig.components ?? [], env: env, format: format, placeholder: bodyConfig.placeholder, onUpload: addUpload, flush: true })] }, "body")) : null;
+    const ctx = {
+        addUpload,
+        pendingUploads: uploads,
+        isNew,
+        siblings: state.data,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { status: isPublished === null ? null : isPublished ? "published" : "draft", crumbs: kind === "collection"
+                    ? [
+                        {
+                            label: collection.label,
+                            to: `/collections/${collectionKey}`,
+                        },
+                    ]
+                    : undefined, title: isNew
+                    ? `New ${collection?.singular ?? "entry"}`
+                    : titleValue || effectiveSlug, actions: _jsxs(_Fragment, { children: [dirty && (_jsxs("span", { className: "v-unsaved", children: [_jsx(AlertTriangle, { size: 13 }), " Unsaved changes"] })), previewHref && (_jsxs("a", { className: "v-btn", href: previewHref, target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, {}), " View"] })), kind === "collection" &&
+                            !isNew &&
+                            collection.delete !== false && (_jsx(Button, { variant: "danger", icon: true, title: "Delete", onClick: () => setConfirmDelete(true), children: _jsx(Trash2, {}) })), _jsxs(Button, { variant: "primary", onClick: () => save.mutate(), disabled: save.isPending ||
+                                (!dirty && !isNew && Object.keys(uploads).length === 0), children: [save.isPending ? _jsx(Spinner, {}) : _jsx(Save, {}), " ", isNew ? "Create" : "Save", _jsx("span", { className: "v-kbd", children: "\u2318S" })] })] }) }), _jsxs("div", { className: "v-page", children: [errors.length > 0 && (_jsx("div", { style: { marginBottom: 18 }, children: _jsxs(Alert, { kind: "error", children: [_jsx("strong", { children: "Please fix the following:" }), _jsx("ul", { style: { margin: "4px 0 0 16px", padding: 0 }, children: errors.map((e) => (_jsx("li", { children: e.message }, e.path))) })] }) })), _jsxs("div", { className: "v-editor-layout", children: [_jsxs("div", { className: "v-stack", style: { gap: 20 }, children: [titleIsText && (_jsx("div", { className: "v-card", children: _jsxs("div", { className: "v-card__body", style: { padding: "14px 18px" }, children: [_jsx("input", { className: "v-title-input", value: titleValue, placeholder: `${fieldLabel(titleField, col.schema[titleField])}…`, onChange: (e) => setData({ ...state.data, [titleField]: e.target.value }), autoFocus: isNew }), errors.some((e) => e.path === titleField) && (_jsx("div", { className: "v-field__error", children: errors.find((e) => e.path === titleField).message }))] }) })), sections.map((section, i) => section === "body"
+                                        ? bodyCard
+                                        : section.sidebar
+                                            ? null
+                                            : sectionCard(section, i)), hasVisible(isMain) && (_jsxs("div", { className: "v-card", children: [_jsx("div", { className: "v-card__header", children: _jsx("h3", { className: "v-card__title", children: "Details" }) }), _jsx("div", { className: "v-card__body", children: _jsx(FieldSet, { schema: col.schema, values: state.data, onChange: setData, errors: errors, filter: isMain, ctx: ctx }) })] })), !bodyPlaced && bodyCard] }), _jsxs("aside", { className: "v-editor-sidebar v-stack", children: [(statusField || kind === "collection") && (_jsxs("div", { className: "v-card", children: [_jsxs("div", { className: "v-card__header", children: [_jsx("h3", { className: "v-card__title", children: "Publish" }), isPublished !== null && (_jsx("span", { style: { marginLeft: "auto" }, children: _jsx(Badge, { status: isPublished ? "published" : "draft" }) }))] }), _jsxs("div", { className: "v-card__body v-stack", children: [statusField && (_jsx(Toggle, { checked: isPublished ?? false, label: isPublished ? "Published" : "Draft", onChange: (on) => setData({
+                                                            ...state.data,
+                                                            [statusField]: on ? publishedWhen : !publishedWhen,
+                                                        }) })), kind === "collection" && (_jsxs("div", { children: [_jsx("label", { className: "v-field__label", children: "Slug" }), isNew && !pattern?.single ? (_jsx("input", { className: "v-input v-input--mono", value: slugInput || effectiveSlug, onChange: (e) => setSlugInput(e.target.value), placeholder: "auto" })) : (_jsx("input", { className: "v-input v-input--mono", readOnly: true, value: effectiveSlug })), isNew && pattern && !pattern.single && (_jsx("div", { className: "v-field__hint v-mono", style: { fontSize: 11.5 }, children: entryPath(pattern, effectiveSlug || "…") }))] })), entry && (_jsxs("dl", { className: "v-meta", children: [_jsx("dt", { children: "File" }), _jsx("dd", { title: entry.path, children: entry.path }), Object.entries(col.schema)
+                                                                .filter(([, f]) => f.type === "datetime" && f.autoUpdate)
+                                                                .map(([k]) => (_jsxs("span", { style: { display: "contents" }, children: [_jsx("dt", { children: fieldLabel(k, col.schema[k]) }), _jsx("dd", { children: state.data[k] ? formatDate(state.data[k]) : "—" })] }, k)))] }))] })] })), sections.map((section, i) => section !== "body" && section.sidebar
+                                        ? sectionCard(section, i)
+                                        : null), hasVisible(isSidebar) && (_jsx("div", { className: "v-card", children: _jsx("div", { className: "v-card__body", children: _jsx(FieldSet, { schema: col.schema, values: state.data, onChange: setData, errors: errors, filter: isSidebar, ctx: ctx }) }) })), Object.keys(uploads).length > 0 && (_jsxs(Alert, { kind: "info", children: [Object.keys(uploads).length, " new file", Object.keys(uploads).length === 1 ? "" : "s", " will be committed with this entry."] }))] })] })] }), confirmDelete && (_jsx(ConfirmDialog, { title: `Delete “${titleValue}”?`, message: "The file will be removed from the repository in a new commit.", confirmLabel: "Delete", danger: true, busy: remove.isPending, onCancel: () => setConfirmDelete(false), onConfirm: () => remove.mutate() }))] }));
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Two-step sign-in: an email address, then the six-digit code we emailed.
+ * The first step always "succeeds" so the page never reveals who has an
+ * account.
+ */
+export declare function LoginPage(): import("react").JSX.Element;

package/dist/ui/pages/Login.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, KeyRound, Mail } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { authErrorMessage } from "../auth-client.js";
+import { Alert, Spinner } from "../components/ui.js";
+import { useVestry } from "../context.js";
+/**
+ * Two-step sign-in: an email address, then the six-digit code we emailed.
+ * The first step always "succeeds" so the page never reveals who has an
+ * account.
+ */
+export function LoginPage() {
+    const { api, authClient, client, name, refresh } = useVestry();
+    const [step, setStep] = useState("email");
+    const [email, setEmail] = useState("");
+    const [code, setCode] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const codeRef = useRef(null);
+    useEffect(() => {
+        if (step === "code")
+            codeRef.current?.focus();
+    }, [step]);
+    const logo = client.config.logo
+        ? /^https?:\/\//.test(client.config.logo)
+            ? client.config.logo
+            : api.fileUrl(client.config.logo)
+        : null;
+    /** Asks for a code; resolves true when the request was accepted. */
+    async function requestCode(e) {
+        e?.preventDefault();
+        setError(null);
+        setNotice(null);
+        setBusy(true);
+        try {
+            const result = await authClient.emailOtp.sendVerificationOtp({
+                email: email.trim(),
+                type: "sign-in",
+            });
+            if (result.error)
+                throw result.error;
+            setCode("");
+            setStep("code");
+            return true;
+        }
+        catch (err) {
+            setError(authErrorMessage(err));
+            return false;
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function verify(e) {
+        e.preventDefault();
+        setError(null);
+        setBusy(true);
+        try {
+            const result = await authClient.signIn.emailOtp({
+                email: email.trim(),
+                otp: code,
+            });
+            if (result.error)
+                throw result.error;
+            // Once the config reloads with a user, the /login route redirects to `next`.
+            await refresh();
+        }
+        catch (err) {
+            const e = err;
+            setError(authErrorMessage(e));
+            if (e.code === "OTP_EXPIRED" || e.code === "TOO_MANY_ATTEMPTS") {
+                setStep("email");
+            }
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsx("div", { className: "v-login", children: _jsxs("div", { className: "v-card v-login__card", children: [logo ? (_jsx("div", { className: "v-login__logo", children: _jsx("img", { src: logo, alt: name }) })) : (_jsx("div", { className: "v-login__mark", children: name.slice(0, 1) })), _jsx("h1", { children: name }), client.setupError ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Vestry isn't configured yet." }), _jsx(Alert, { kind: "error", children: client.setupError })] })) : step === "email" ? (_jsxs("form", { onSubmit: requestCode, className: "v-login__form", children: [_jsx("p", { children: "Enter your email address and we'll send you a code to sign in." }), _jsxs("label", { className: "v-login__field", children: [_jsx("span", { className: "v-field__label", children: "Email" }), _jsx("input", { className: "v-input", type: "email", name: "email", autoComplete: "email", autoFocus: true, required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.org" })] }), error && _jsx(Alert, { kind: "error", children: error }), _jsxs("button", { className: "v-btn v-btn--primary", type: "submit", disabled: busy || !email, children: [busy ? _jsx(Spinner, {}) : _jsx(Mail, {}), " Email me a code"] })] })) : (_jsxs("form", { onSubmit: verify, className: "v-login__form", children: [_jsxs("p", { children: ["If ", _jsx("strong", { children: email }), " can edit this site, we've emailed it a six-digit code. It expires in 10 minutes."] }), _jsxs("label", { className: "v-login__field", children: [_jsx("span", { className: "v-field__label", children: "Code" }), _jsx("input", { ref: codeRef, className: "v-input v-login__code", inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9 ]*", maxLength: 7, required: true, value: code, onChange: (e) => setCode(e.target.value.replace(/[^\d]/g, "").slice(0, 6)), placeholder: "123456" })] }), error && _jsx(Alert, { kind: "error", children: error }), notice && _jsx(Alert, { kind: "info", children: notice }), _jsxs("button", { className: "v-btn v-btn--primary", type: "submit", disabled: busy || code.length !== 6, children: [busy ? _jsx(Spinner, {}) : _jsx(KeyRound, {}), " Sign in"] }), _jsxs("div", { className: "v-login__links", children: [_jsxs("button", { type: "button", className: "v-link", disabled: busy, onClick: () => {
+                                        setStep("email");
+                                        setError(null);
+                                        setNotice(null);
+                                    }, children: [_jsx(ArrowLeft, { size: 13 }), " Use a different email"] }), _jsx("button", { type: "button", className: "v-link", disabled: busy, onClick: async () => {
+                                        if (await requestCode())
+                                            setNotice("We sent a new code.");
+                                    }, children: "Send a new code" })] })] }))] }) }));
+}

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

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