@vertebr/react 0.3.0 → 0.5.0

package/dist/components/resources/ResourceTable.js

@@ -1,11 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table";
 import { ConfigForm } from "../config/ConfigForm";
 import { BulkImageUploadModal } from "./BulkImageUploadModal";
 import { ColumnVisibilityMenu } from "./ColumnVisibilityMenu";
 import { ResourceCell } from "./ResourceCell";
+import { ResourceCreateModal } from "./ResourceCreateModal";
+import { actionInputSchema, ResourceActionModal, } from "./ResourceActionModal";
+import { ResourceMailModal } from "./ResourceMailModal";
 import { ResourceViewModal } from "./ResourceViewModal";
+function actionHasInput(meta) {
+    return Boolean(meta?.input && Object.keys(meta.input).length > 0);
+}
+function actionIsMail(meta) {
+    return Boolean(meta?.mail);
+}
+function toggleId(current, id) {
+    const next = new Set(current);
+    if (next.has(id))
+        next.delete(id);
+    else
+        next.add(id);
+    return next;
+}
 function resolveRowId(row, keys) {
     for (const key of keys) {
         const value = row[key];
@@ -31,32 +48,69 @@ function rowTitle(row, keys) {
     }
     return "Record";
 }
-function readVisibility(storageKey) {
+function writeVisibility(storageKey, value) {
     if (!storageKey || typeof localStorage === "undefined")
-        return {};
+        return;
     try {
-        const raw = localStorage.getItem(`vertebr:columns:${storageKey}`);
-        if (!raw)
-            return {};
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== "object")
-            return {};
-        return parsed;
+        localStorage.setItem(`vertebr:columns:v2:${storageKey}`, JSON.stringify(value));
     }
     catch {
-        return {};
+        /* ignore quota / private mode */
     }
 }
-function writeVisibility(storageKey, value) {
+function isDefaultHiddenColumn(key, field, schema) {
+    if (/^show[A-Z]/.test(key))
+        return true;
+    if (field?.type === "richtext")
+        return true;
+    if (key === "updatedAt" || key === "createdAt")
+        return true;
+    if ((key === "imageSrc" || key === "imageAlt") && "images" in schema) {
+        return true;
+    }
+    if (key === "slug" && "name" in schema)
+        return true;
+    if (field?.type === "string" && /^(details|description)$/i.test(key)) {
+        return true;
+    }
+    return false;
+}
+function defaultVisibility(schema) {
+    const next = {};
+    for (const [key, field] of Object.entries(schema)) {
+        if (isDefaultHiddenColumn(key, field, schema))
+            next[key] = false;
+    }
+    return next;
+}
+function readVisibility(storageKey, schema) {
+    const defaults = defaultVisibility(schema);
     if (!storageKey || typeof localStorage === "undefined")
-        return;
+        return defaults;
     try {
-        localStorage.setItem(`vertebr:columns:${storageKey}`, JSON.stringify(value));
+        const raw = localStorage.getItem(`vertebr:columns:v2:${storageKey}`);
+        if (!raw)
+            return defaults;
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object")
+            return defaults;
+        return { ...defaults, ...parsed };
     }
     catch {
-        /* ignore quota / private mode */
+        return defaults;
     }
 }
+function addRecordLabel(resourceLabel) {
+    const name = resourceLabel?.trim();
+    if (!name)
+        return "Add record";
+    const singular = /ies$/i.test(name)
+        ? name.replace(/ies$/i, "y")
+        : /s$/i.test(name)
+            ? name.slice(0, -1)
+            : name;
+    return `Add ${singular.toLowerCase()}`;
+}
 function titleFromFilename(name) {
     return name
         .replace(/\.[^.]+$/, "")
@@ -64,26 +118,106 @@ function titleFromFilename(name) {
         .replace(/\s+/g, " ")
         .trim();
 }
-export function ResourcePanel({ schema, items, permissions, actions = {}, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
+export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions = {}, onCollectionAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
     const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
     const [viewing, setViewing] = useState(null);
     const [bulkOpen, setBulkOpen] = useState(false);
     const [busyAction, setBusyAction] = useState(null);
+    const [selected, setSelected] = useState(new Set());
+    const [pendingAction, setPendingAction] = useState(null);
+    const [pendingCollectionAction, setPendingCollectionAction] = useState(null);
     const tableWrapRef = useRef(null);
     const [tableOverflow, setTableOverflow] = useState({
         overflow: false,
         canLeft: false,
         canRight: false,
     });
-    const [columnVisibility, setColumnVisibility] = useState(() => readVisibility(storageKey));
+    const [columnVisibility, setColumnVisibility] = useState(() => readVisibility(storageKey, schema));
     const canUpdate = Boolean(permissions?.update && onUpdate);
     const canCreate = Boolean(permissions?.create && onCreate);
     const canDelete = Boolean(permissions?.delete && onDelete);
+    const createLabel = addRecordLabel(label);
     const canUpload = Boolean(uploads && onUpload && Object.keys(uploads).length);
     const actionEntries = Object.entries(actions);
+    const collectionActionEntries = Object.entries(collectionActions);
     const fieldKeys = Object.keys(schema);
+    const selectable = Boolean(onAction && actionEntries.length > 0);
     useEffect(() => {
-        setColumnVisibility(readVisibility(storageKey));
+        const valid = new Set(items
+            .map((row) => resolveRowId(row, rowIdKeys))
+            .filter((id) => Boolean(id)));
+        setSelected((current) => {
+            const next = new Set([...current].filter((id) => valid.has(id)));
+            return next.size === current.size ? current : next;
+        });
+    }, [items, rowIdKeys]);
+    const runActions = useCallback(async (actionId, rowIds, input) => {
+        if (!onAction || rowIds.length === 0)
+            return;
+        setBusyAction(actionId);
+        const errors = [];
+        try {
+            for (const rowId of rowIds) {
+                try {
+                    await onAction(rowId, actionId, input);
+                }
+                catch (error) {
+                    errors.push(`${rowId}: ${error instanceof Error ? error.message : "Failed"}`);
+                }
+            }
+            await onActionDone?.();
+            setSelected(new Set());
+            if (errors.length > 0) {
+                window.alert(`Finished with ${errors.length} error(s).\n\n${errors.slice(0, 8).join("\n")}`);
+            }
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [onAction, onActionDone]);
+    const queueAction = useCallback((actionId, rowIds) => {
+        const meta = actions[actionId];
+        if (!meta || rowIds.length === 0 || !onAction)
+            return;
+        if (actionIsMail(meta) || actionHasInput(meta)) {
+            setPendingAction({ actionId, rowIds });
+            return;
+        }
+        const who = rowIds.length === 1 ? "this person" : `${rowIds.length} people`;
+        if (!window.confirm(`${meta.label} for ${who}?`))
+            return;
+        void runActions(actionId, rowIds);
+    }, [actions, onAction, runActions]);
+    const runCollectionAction = useCallback(async (actionId, input) => {
+        if (!onCollectionAction)
+            return;
+        setBusyAction(actionId);
+        try {
+            await onCollectionAction(actionId, input);
+            await onActionDone?.();
+        }
+        catch (error) {
+            window.alert(error instanceof Error ? error.message : "Action failed");
+        }
+        finally {
+            setBusyAction(null);
+        }
+    }, [onCollectionAction, onActionDone]);
+    const queueCollectionAction = useCallback((actionId) => {
+        const meta = collectionActions[actionId];
+        if (!meta || !onCollectionAction)
+            return;
+        if (actionHasInput(meta)) {
+            setPendingCollectionAction(actionId);
+            return;
+        }
+        if (!window.confirm(`${meta.label}?`))
+            return;
+        void runCollectionAction(actionId);
+    }, [collectionActions, onCollectionAction, runCollectionAction]);
+    useEffect(() => {
+        setColumnVisibility(readVisibility(storageKey, schema));
     }, [storageKey]);
     useEffect(() => {
         writeVisibility(storageKey, columnVisibility);
@@ -110,6 +244,9 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
         el.addEventListener("scroll", onScroll, { passive: true });
         const observer = new ResizeObserver(updateTableOverflow);
         observer.observe(el);
+        const table = el.querySelector("table");
+        if (table)
+            observer.observe(table);
         return () => {
             el.removeEventListener("scroll", onScroll);
             observer.disconnect();
@@ -130,7 +267,33 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
         label: schema[key]?.label ?? humanizeKey(key),
     })), [fieldKeys, schema]);
     const columns = useMemo(() => {
-        const defs = fieldKeys.length === 0
+        const defs = [];
+        if (selectable) {
+            const visibleIds = items
+                .map((row) => resolveRowId(row, rowIdKeys))
+                .filter((id) => Boolean(id));
+            const allSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
+            defs.push({
+                id: "_select",
+                enableHiding: false,
+                header: () => (_jsx("input", { type: "checkbox", className: "vertebr-row-check", checked: allSelected, "aria-label": "Select all", onChange: () => {
+                        setSelected((current) => {
+                            if (visibleIds.every((id) => current.has(id))) {
+                                return new Set();
+                            }
+                            return new Set(visibleIds);
+                        });
+                    } })),
+                cell: ({ row }) => {
+                    const rowId = resolveRowId(row.original, rowIdKeys);
+                    if (!rowId)
+                        return null;
+                    return (_jsx("input", { type: "checkbox", className: "vertebr-row-check", checked: selected.has(rowId), "aria-label": "Select row", onClick: (event) => event.stopPropagation(), onChange: () => setSelected((current) => toggleId(current, rowId)) }));
+                },
+                size: 44,
+            });
+        }
+        defs.push(...(fieldKeys.length === 0
             ? [
                 {
                     id: "raw",
@@ -147,10 +310,10 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
                     accessorKey: key,
                     header: field?.label ?? humanizeKey(key),
                     meta: { fieldKey: key, field },
-                    cell: ({ getValue }) => (_jsx(ResourceCell, { fieldKey: key, field: field, value: getValue() })),
+                    cell: ({ getValue, }) => (_jsx(ResourceCell, { fieldKey: key, field: field, value: getValue() })),
                     size: isImage ? 220 : undefined,
                 };
-            });
+            })));
         defs.push({
             id: "_actions",
             header: () => _jsx("span", { className: "vertebr-sr-only", children: "Actions" }),
@@ -158,12 +321,7 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
             cell: ({ row }) => {
                 const rowId = resolveRowId(row.original, rowIdKeys);
                 return (_jsxs("div", { className: "vertebr-row-actions", onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setViewing(row.original), children: "View" }), canUpdate ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setEditing(row.original), children: "Edit" })) : null, rowId
-                            ? actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction === `${rowId}:${actionId}`, onClick: () => {
-                                    if (!onAction)
-                                        return;
-                                    setBusyAction(`${rowId}:${actionId}`);
-                                    void onAction(rowId, actionId).finally(() => setBusyAction(null));
-                                }, children: meta.label }, actionId)))
+                            ? actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [rowId]), children: meta.label }, actionId)))
                             : null, canDelete && rowId ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-danger-quiet", onClick: () => {
                                 if (window.confirm("Delete this row? This cannot be undone.")) {
                                     void onDelete?.(rowId);
@@ -175,11 +333,14 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
     }, [
         schema,
         fieldKeys,
+        items,
+        selected,
+        selectable,
         canUpdate,
         canDelete,
         actionEntries,
         busyAction,
-        onAction,
+        queueAction,
         onDelete,
         rowIdKeys,
     ]);
@@ -191,6 +352,23 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
         getCoreRowModel: getCoreRowModel(),
     });
     const editingId = editing ? resolveRowId(editing, rowIdKeys) : null;
+    const createSchema = Object.fromEntries(Object.entries(schema)
+        .filter(([, field]) => !field.readOnly || field.required)
+        .map(([key, field]) => [
+        key,
+        field.readOnly ? { ...field, readOnly: false } : field,
+    ]));
+    const createDefaults = Object.fromEntries(Object.entries(createSchema).map(([key, field]) => [
+        key,
+        field.default ??
+            (field.type === "boolean"
+                ? false
+                : field.type === "number"
+                    ? undefined
+                    : field.type === "file[]"
+                        ? []
+                        : ""),
+    ]));
     if (editing && editingId && onUpdate) {
         const editableSchema = Object.fromEntries(Object.entries(schema).filter(([, field]) => !field.readOnly));
         const title = rowTitle(editing, rowIdKeys);
@@ -199,7 +377,7 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
                         setEditing(null);
                     } })] }));
     }
-    const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [columnOptions.length > 0 ? (_jsx(ColumnVisibilityMenu, { columns: columnOptions, visibility: columnVisibility, onChange: setColumnVisibility })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null] }), tableOverflow.overflow ? (_jsxs("div", { className: "vertebr-table-scroll-controls", role: "group", "aria-label": "Scroll columns", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canLeft, onClick: () => scrollTable("left"), "aria-label": "Scroll columns left", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canRight, onClick: () => scrollTable("right"), "aria-label": "Scroll columns right", children: _jsx(ChevronRightIcon, {}) })] })) : null] }));
+    const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [columnOptions.length > 0 ? (_jsx(ColumnVisibilityMenu, { columns: columnOptions, visibility: columnVisibility, onChange: setColumnVisibility })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null, collectionActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueCollectionAction(actionId), children: meta.label }, actionId))), selectable && selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [selected.size, " selected"] }), actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [...selected]), children: meta.label }, actionId))), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setSelected(new Set()), children: "Clear" })] })) : null] }), tableOverflow.overflow ? (_jsxs("div", { className: "vertebr-table-scroll-controls", role: "group", "aria-label": "Scroll columns", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canLeft, onClick: () => scrollTable("left"), "aria-label": "Scroll columns left", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canRight, onClick: () => scrollTable("right"), "aria-label": "Scroll columns right", children: _jsx(ChevronRightIcon, {}) })] })) : null] }));
     const bulkModal = bulkOpen && uploads && onUpload ? (_jsx(BulkImageUploadModal, { uploads: uploads, canCreate: canCreate, fieldLabels: Object.fromEntries(Object.keys(uploads).map((key) => [
             key,
             schema[key]?.label ?? humanizeKey(key),
@@ -215,29 +393,57 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
                 }
             }
             : undefined })) : null;
+    const createModal = creating && onCreate ? (_jsx(ResourceCreateModal, { title: createLabel, schema: createSchema, value: createDefaults, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setCreating(false), onCreate: onCreate })) : null;
+    const pendingActionModal = pendingAction ? (actionIsMail(actions[pendingAction.actionId]) && onPreviewMail ? (_jsx(ResourceMailModal, { title: actions[pendingAction.actionId]?.label ?? "Send email", count: pendingAction.rowIds.length, schema: actionInputSchema(actions[pendingAction.actionId]?.input ?? {}), submitLabel: busyAction
+            ? "Sending…"
+            : pendingAction.rowIds.length === 1
+                ? "Send"
+                : `Send to ${pendingAction.rowIds.length}`, onClose: () => setPendingAction(null), onPreview: (value) => onPreviewMail(pendingAction.rowIds[0], pendingAction.actionId, value), onSubmit: (value) => runActions(pendingAction.actionId, pendingAction.rowIds, value) })) : actions[pendingAction.actionId]?.input ? (_jsx(ResourceActionModal, { title: actions[pendingAction.actionId]?.label ?? "Run action", count: pendingAction.rowIds.length, schema: actionInputSchema(actions[pendingAction.actionId].input), submitLabel: busyAction
+            ? "Sending…"
+            : pendingAction.rowIds.length === 1
+                ? actions[pendingAction.actionId]?.label ?? "Send"
+                : `Send to ${pendingAction.rowIds.length}`, onClose: () => setPendingAction(null), onSubmit: (value) => runActions(pendingAction.actionId, pendingAction.rowIds, value) })) : null) : null;
+    const pendingCollectionModal = pendingCollectionAction &&
+        collectionActions[pendingCollectionAction]?.input ? (_jsx(ResourceActionModal, { title: collectionActions[pendingCollectionAction]?.label ?? "Run action", eyebrow: "This resource", schema: actionInputSchema(collectionActions[pendingCollectionAction].input), submitLabel: busyAction ? "Working…" : "Run", onClose: () => setPendingCollectionAction(null), onSubmit: (value) => runCollectionAction(pendingCollectionAction, value) })) : null;
+    const recordsHead = (_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsxs("div", { className: "vertebr-panel-head-actions", children: [canCreate ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setCreating(true), children: [_jsx(PlusIcon, {}), createLabel] })) : null, _jsx("span", { className: "vertebr-count", children: items.length })] })] }));
     if (items.length === 0) {
-        return (_jsxs("div", { className: "vertebr-resource-body", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsx("span", { className: "vertebr-count", children: "0" })] }), canUpload || columnOptions.length > 0 ? toolbar : null, _jsx("div", { className: "vertebr-empty", children: "No rows yet." }), bulkModal] }));
+        return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, canUpload ||
+                    columnOptions.length > 0 ||
+                    collectionActionEntries.length > 0
+                    ? toolbar
+                    : null, _jsx("div", { className: "vertebr-empty", children: "No rows yet." }), bulkModal, createModal, pendingActionModal, pendingCollectionModal] }));
     }
-    return (_jsxs("div", { className: "vertebr-resource-body", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsx("span", { className: "vertebr-count", children: items.length })] }), toolbar, _jsx("div", { className: "vertebr-table-wrap", ref: tableWrapRef, "data-overflow": tableOverflow.overflow ? "true" : undefined, "data-overflow-left": tableOverflow.canLeft ? "true" : undefined, "data-overflow-right": tableOverflow.canRight ? "true" : undefined, children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { className: header.column.id === "_actions"
+    return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, toolbar, _jsx("div", { className: "vertebr-table-wrap", ref: tableWrapRef, "data-overflow": tableOverflow.overflow ? "true" : undefined, "data-overflow-left": tableOverflow.canLeft ? "true" : undefined, "data-overflow-right": tableOverflow.canRight ? "true" : undefined, children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { className: header.column.id === "_actions"
                                         ? "vertebr-col-actions"
-                                        : undefined, children: header.isPlaceholder
+                                        : header.column.id === "_select"
+                                            ? "vertebr-col-select"
+                                            : undefined, children: header.isPlaceholder
                                         ? null
-                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: "vertebr-table-row-clickable", tabIndex: 0, onClick: () => setViewing(row.original), onKeyDown: (event) => {
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: "vertebr-table-row-clickable", "data-selected": selectable &&
+                                    resolveRowId(row.original, rowIdKeys) &&
+                                    selected.has(resolveRowId(row.original, rowIdKeys))
+                                    ? "true"
+                                    : undefined, tabIndex: 0, onClick: () => setViewing(row.original), onKeyDown: (event) => {
                                     if (event.key === "Enter" || event.key === " ") {
                                         event.preventDefault();
                                         setViewing(row.original);
                                     }
                                 }, children: row.getVisibleCells().map((cell) => (_jsx("td", { className: cell.column.id === "_actions"
                                         ? "vertebr-col-actions"
-                                        : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), viewing ? (_jsx(ResourceViewModal, { schema: schema, row: viewing, title: rowTitle(viewing, rowIdKeys), canEdit: canUpdate, onClose: () => setViewing(null), onEdit: () => {
+                                        : cell.column.id === "_select"
+                                            ? "vertebr-col-select"
+                                            : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), viewing ? (_jsx(ResourceViewModal, { schema: schema, row: viewing, title: rowTitle(viewing, rowIdKeys), canEdit: canUpdate, onClose: () => setViewing(null), onEdit: () => {
                     setEditing(viewing);
                     setViewing(null);
-                } })) : null, bulkModal] }));
+                } })) : null, pendingActionModal, pendingCollectionModal, bulkModal, createModal] }));
 }
 /** @deprecated Prefer ResourcePanel */
 export function ResourceTable(props) {
     return _jsx(ResourcePanel, { ...props });
 }
+function PlusIcon() {
+    return (_jsxs("svg", { className: "vertebr-btn-glyph", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 5v14" }), _jsx("path", { d: "M5 12h14" })] }));
+}
 function ChevronLeftIcon() {
     return (_jsx("svg", { className: "vertebr-btn-glyph", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m15 18-6-6 6-6" }) }));
 }

package/dist/index.d.ts

@@ -2,6 +2,12 @@ export { VertebrAdmin } from "./components/admin/VertebrAdmin";
 export type { VertebrAdminProps } from "./components/admin/VertebrAdmin";
 export { MetricsBoard } from "./components/metrics/MetricsBoard";
 export { GalleryBoard } from "./components/gallery/GalleryBoard";
+export { EmailsBoard } from "./components/emails/EmailsBoard";
+export type { EmailsBoardProps } from "./components/emails/EmailsBoard";
+export type { EmailRecipientOption } from "./components/emails/EmailRecipientSelect";
+export type { MultiCheckOption } from "./components/emails/MultiCheckSelect";
+export type { EmailsLibraryPanelProps } from "./components/emails/EmailsLibraryPanel";
+export type { EmailsActivityPanelProps } from "./components/emails/EmailsActivityPanel";
 export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
 export { ThemeToggle } from "./components/theme/ThemeToggle";
 export type { ThemeToggleProps } from "./components/theme/ThemeToggle";
@@ -17,5 +23,9 @@ export type { VertebrControlsProviderProps } from "./hooks/useVertebrControls";
 export { createVertebrClient, VERTEBR_ENV_HEADER, renderMarkdown, } from "@vertebr/client";
 export { VertebrMarkdown } from "@vertebr/client/react";
 export type { VertebrMarkdownProps } from "@vertebr/client/react";
-export type { VertebrClient, VertebrClientOptions, VertebrReadOptions, AdminEnvironment, BootstrapResponse, CatalogResponse, CatalogResource, CatalogConfig, CatalogConfigSection, EnvironmentAuthPublic, FieldSchema, FieldType, GalleryItem, GalleryMeta, GalleryResponse, MetricCard, MetricsResponse, ResourceListResponse, ResourceActionMeta, ResourceUploadMeta, ResourceUploadResponse, ResourceBulkUploadResponse, ConfigResponse, VertebrControlsMap, } from "@vertebr/client";
+export { createVertebrCatalog, catalogHref, catalogMatch, } from "@vertebr/client";
+export type { VertebrCatalog, VertebrCatalogOptions, PublicResourceResponse, } from "@vertebr/client";
+export { VertebrCatalogProvider, useVertebrCatalog, useVertebrCatalogItem, } from "@vertebr/client/react";
+export type { VertebrCatalogProviderProps, VertebrCatalogState, } from "@vertebr/client/react";
+export type { VertebrClient, VertebrClientOptions, VertebrMetricsOptions, VertebrReadOptions, AdminEnvironment, BootstrapResponse, CatalogResponse, CatalogResource, CatalogConfig, CatalogConfigSection, EnvironmentAuthPublic, FieldSchema, FieldType, GalleryItem, GalleryMeta, GalleryResponse, MailPreviewResponse, MailLibraryTemplate, MailHistoryEntry, MailProductOption, MailDiscountOption, EmailsBoardResponse, MetricCard, MetricChart, MetricsResponse, ResourceListResponse, ResourceActionMeta, ResourceUploadMeta, ResourceUploadResponse, ResourceBulkUploadResponse, ConfigResponse, VertebrControlsMap, } from "@vertebr/client";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAG/E,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,cAAc,EACd,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AACrF,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACtF,YAAY,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAG/E,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,YAAY,GACb,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,2BAA2B,EAC3B,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,cAAc,EACd,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,6 +1,7 @@
 export { VertebrAdmin } from "./components/admin/VertebrAdmin";
 export { MetricsBoard } from "./components/metrics/MetricsBoard";
 export { GalleryBoard } from "./components/gallery/GalleryBoard";
+export { EmailsBoard } from "./components/emails/EmailsBoard";
 export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
 export { ThemeToggle } from "./components/theme/ThemeToggle";
 export { ConfigForm } from "./components/config/ConfigForm";
@@ -12,3 +13,5 @@ export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "
 // Re-export the framework-agnostic client for convenience.
 export { createVertebrClient, VERTEBR_ENV_HEADER, renderMarkdown, } from "@vertebr/client";
 export { VertebrMarkdown } from "@vertebr/client/react";
+export { createVertebrCatalog, catalogHref, catalogMatch, } from "@vertebr/client";
+export { VertebrCatalogProvider, useVertebrCatalog, useVertebrCatalogItem, } from "@vertebr/client/react";

package/dist/lib/metricsRanges.d.ts

@@ -0,0 +1,20 @@
+export declare const METRICS_RANGES: readonly [{
+    readonly id: "7d";
+    readonly label: "Last 7 days";
+}, {
+    readonly id: "14d";
+    readonly label: "Last 14 days";
+}, {
+    readonly id: "30d";
+    readonly label: "Last 30 days";
+}, {
+    readonly id: "this_month";
+    readonly label: "This month";
+}, {
+    readonly id: "last_month";
+    readonly label: "Last month";
+}];
+export type MetricsRangeId = (typeof METRICS_RANGES)[number]["id"];
+export declare const DEFAULT_METRICS_RANGE: MetricsRangeId;
+export declare function parseMetricsRangeId(raw: string | null | undefined): MetricsRangeId;
+//# sourceMappingURL=metricsRanges.d.ts.map

package/dist/lib/metricsRanges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metricsRanges.d.ts","sourceRoot":"","sources":["../../src/lib/metricsRanges.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EAMjB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEnE,eAAO,MAAM,qBAAqB,EAAE,cAAsB,CAAC;AAI3D,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC7B,cAAc,CAGhB"}

package/dist/lib/metricsRanges.js

@@ -0,0 +1,14 @@
+export const METRICS_RANGES = [
+    { id: "7d", label: "Last 7 days" },
+    { id: "14d", label: "Last 14 days" },
+    { id: "30d", label: "Last 30 days" },
+    { id: "this_month", label: "This month" },
+    { id: "last_month", label: "Last month" },
+];
+export const DEFAULT_METRICS_RANGE = "14d";
+const RANGE_IDS = new Set(METRICS_RANGES.map((item) => item.id));
+export function parseMetricsRangeId(raw) {
+    if (raw && RANGE_IDS.has(raw))
+        return raw;
+    return DEFAULT_METRICS_RANGE;
+}

package/dist/styles/cells.css

@@ -137,6 +137,11 @@
 }
 
 .vertebr-chip {
+  display: inline-block;
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   border: 1px solid var(--vb-border);
   border-radius: 999px;
   padding: 0.1rem 0.45rem;
@@ -145,6 +150,43 @@
   background: var(--vb-surface-tint);
 }
 
+.vertebr-cell-thumbs {
+  display: flex;
+  align-items: center;
+}
+
+.vertebr-cell-thumbs img {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: var(--vb-radius-sm);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  flex: none;
+}
+
+.vertebr-cell-thumbs img + img {
+  margin-left: -0.55rem;
+  box-shadow: -2px 0 0 var(--vb-bg-elevated);
+}
+
+.vertebr-cell-thumbs-more {
+  margin-left: 0.4rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-cell-thumbs-detail {
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.vertebr-cell-thumbs-detail img + img {
+  margin-left: 0;
+  box-shadow: none;
+}
+
 .vertebr-empty {
   flex: 1 1 auto;
   display: grid;