@vertebr/react 0.1.1 → 0.2.0

package/dist/components/gallery/GalleryBoard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageUploadControl } from "../resources/ImageUploadControl";
+export function GalleryBoard({ label = "Gallery", items, accept, maxBytes, canDelete, loading, onRefresh, onUpload, onDelete, }) {
+    const meta = {
+        field: "gallery",
+        accept,
+        maxBytes,
+    };
+    return (_jsxs("div", { className: "vertebr-gallery", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), _jsxs("div", { className: "vertebr-gallery-head-actions", children: [_jsx("span", { className: "vertebr-count", children: items.length }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })] }), _jsxs("div", { className: "vertebr-gallery-body", children: [_jsx(ImageUploadControl, { meta: meta, multiple: true, label: "Drop images here or browse to add to the gallery", onUpload: onUpload }), items.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No images in the gallery yet." })) : (_jsx("div", { className: "vertebr-gallery-grid", children: items.map((item) => (_jsxs("article", { className: "vertebr-gallery-card", children: [_jsx("a", { className: "vertebr-gallery-thumb", href: item.url, target: "_blank", rel: "noreferrer", title: item.name ?? item.url, children: _jsx("img", { src: item.url, alt: item.name ?? "", loading: "lazy" }) }), _jsxs("div", { className: "vertebr-gallery-meta", children: [_jsx("strong", { title: item.name ?? item.id, children: item.name ?? item.id }), _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url.replace(/^https?:\/\//i, "") })] }), canDelete && onDelete ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-danger-quiet", onClick: () => {
+                                        if (window.confirm("Delete this image from the gallery?")) {
+                                            void onDelete(item.id);
+                                        }
+                                    }, children: "Delete" })) : null] }, item.id))) }))] })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { VertebrAdmin } from "./admin/VertebrAdmin";
+export type { VertebrAdminProps } from "./admin/VertebrAdmin";
+export { ConfigForm } from "./config/ConfigForm";
+export { EnvSelect } from "./env/EnvSelect";
+export { MetricsBoard } from "./metrics/MetricsBoard";
+export { ResourcePanel, ResourceTable } from "./resources/ResourceTable";
+export { ThemeToggle } from "./theme/ThemeToggle";
+export type { ThemeToggleProps } from "./theme/ThemeToggle";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export { VertebrAdmin } from "./admin/VertebrAdmin";
+export { ConfigForm } from "./config/ConfigForm";
+export { EnvSelect } from "./env/EnvSelect";
+export { MetricsBoard } from "./metrics/MetricsBoard";
+export { ResourcePanel, ResourceTable } from "./resources/ResourceTable";
+export { ThemeToggle } from "./theme/ThemeToggle";

package/dist/{MetricsBoard.d.ts → components/metrics/MetricsBoard.d.ts}

@@ -1,4 +1,4 @@
-import type { MetricCard } from "./types";
+import type { MetricCard } from "@vertebr/client";
 type MetricsBoardProps = {
     label?: string;
     metrics: MetricCard[];

package/dist/components/metrics/MetricsBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsBoard.d.ts","sourceRoot":"","sources":["../../../src/components/metrics/MetricsBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,OAAO,EACP,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAqCnB"}

package/dist/components/resources/BulkImageUploadModal.d.ts

@@ -0,0 +1,17 @@
+import type { ResourceUploadMeta } from "@vertebr/client";
+export type BulkImageUploadModalProps = {
+    uploads: Record<string, ResourceUploadMeta>;
+    canCreate?: boolean;
+    fieldLabels: Record<string, string>;
+    onClose: () => void;
+    onUpload: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    onCreateFromUploads?: (field: string, files: Array<{
+        url: string;
+        name?: string;
+    }>) => Promise<void>;
+};
+export declare function BulkImageUploadModal({ uploads, canCreate, fieldLabels, onClose, onUpload, onCreateFromUploads, }: BulkImageUploadModalProps): import("react").JSX.Element | null;
+//# sourceMappingURL=BulkImageUploadModal.d.ts.map

package/dist/components/resources/BulkImageUploadModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkImageUploadModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/BulkImageUploadModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KACzC,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,mBAAmB,GACpB,EAAE,yBAAyB,sCA6H3B"}

package/dist/components/resources/BulkImageUploadModal.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ImageUploadControl } from "./ImageUploadControl";
+export function BulkImageUploadModal({ uploads, canCreate, fieldLabels, onClose, onUpload, onCreateFromUploads, }) {
+    const fields = useMemo(() => Object.keys(uploads), [uploads]);
+    const [field, setField] = useState(fields[0] ?? "");
+    const [createRows, setCreateRows] = useState(Boolean(canCreate));
+    const [results, setResults] = useState([]);
+    const [status, setStatus] = useState(null);
+    const meta = uploads[field];
+    useEffect(() => {
+        if (!fields.includes(field) && fields[0])
+            setField(fields[0]);
+    }, [field, fields]);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    if (!meta)
+        return null;
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-modal-sm", role: "dialog", "aria-modal": "true", "aria-label": "Bulk image upload", onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Media" }), _jsx("h2", { children: "Bulk image upload" })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, children: "Close" })] }), _jsxs("div", { className: "vertebr-modal-body", children: [fields.length > 1 ? (_jsxs("label", { className: "vertebr-field", children: [_jsx("span", { children: "Target field" }), _jsx("select", { className: "vertebr-native-select", value: field, onChange: (event) => {
+                                        setField(event.target.value);
+                                        setResults([]);
+                                        setStatus(null);
+                                    }, children: fields.map((key) => (_jsx("option", { value: key, children: fieldLabels[key] ?? key }, key))) })] })) : null, canCreate && onCreateFromUploads ? (_jsxs("label", { className: "vertebr-upload-check", children: [_jsx("input", { type: "checkbox", checked: createRows, onChange: (event) => setCreateRows(event.target.checked) }), _jsx("span", { children: "Create a record for each uploaded image" })] })) : null, _jsx(ImageUploadControl, { meta: meta, multiple: true, onUpload: async (files) => {
+                                setStatus(`Uploading ${files.length} image${files.length === 1 ? "" : "s"}…`);
+                                const uploaded = await onUpload(field, files);
+                                setResults(uploaded);
+                                if (createRows && onCreateFromUploads) {
+                                    setStatus("Creating records…");
+                                    await onCreateFromUploads(field, uploaded);
+                                    setStatus(`Uploaded ${uploaded.length} and created records.`);
+                                }
+                                else {
+                                    setStatus(`Uploaded ${uploaded.length} image${uploaded.length === 1 ? "" : "s"}.`);
+                                }
+                            } }), status ? _jsx("p", { className: "vertebr-upload-status", children: status }) : null, results.length > 0 ? (_jsx("ul", { className: "vertebr-upload-results", children: results.map((item) => (_jsxs("li", { children: [_jsx("img", { src: item.url, alt: "" }), _jsxs("div", { children: [_jsx("strong", { children: item.name ?? "Image" }), _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url })] })] }, item.url))) })) : null] })] }) }));
+}

package/dist/components/resources/ColumnVisibilityMenu.d.ts

@@ -0,0 +1,11 @@
+export type ColumnOption = {
+    id: string;
+    label: string;
+};
+export type ColumnVisibilityMenuProps = {
+    columns: ColumnOption[];
+    visibility: Record<string, boolean>;
+    onChange: (next: Record<string, boolean>) => void;
+};
+export declare function ColumnVisibilityMenu({ columns, visibility, onChange, }: ColumnVisibilityMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=ColumnVisibilityMenu.d.ts.map

package/dist/components/resources/ColumnVisibilityMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnVisibilityMenu.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ColumnVisibilityMenu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,UAAU,EACV,QAAQ,GACT,EAAE,yBAAyB,+BAkF3B"}

package/dist/components/resources/ColumnVisibilityMenu.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+export function ColumnVisibilityMenu({ columns, visibility, onChange, }) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const menuId = useId();
+    const hiddenCount = columns.filter((col) => visibility[col.id] === false).length;
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        window.addEventListener("mousedown", onPointerDown);
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            window.removeEventListener("mousedown", onPointerDown);
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open]);
+    const visibleCount = columns.length - hiddenCount;
+    return (_jsxs("div", { className: "vertebr-col-menu", ref: rootRef, children: [_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", "aria-expanded": open, "aria-controls": menuId, onClick: () => setOpen((value) => !value), children: ["Columns", hiddenCount > 0 ? (_jsx("span", { className: "vertebr-col-menu-count", children: visibleCount })) : null] }), open ? (_jsxs("div", { className: "vertebr-col-menu-panel", id: menuId, role: "menu", children: [_jsxs("div", { className: "vertebr-col-menu-head", children: [_jsx("span", { children: "Visible fields" }), _jsx("button", { type: "button", className: "vertebr-link-btn", onClick: () => {
+                                    const next = {};
+                                    for (const col of columns)
+                                        next[col.id] = true;
+                                    onChange(next);
+                                }, children: "Show all" })] }), _jsx("ul", { className: "vertebr-col-menu-list", children: columns.map((col) => {
+                            const checked = visibility[col.id] !== false;
+                            return (_jsx("li", { children: _jsxs("label", { className: "vertebr-col-menu-item", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: checked && visibleCount <= 1, onChange: () => {
+                                                const next = { ...visibility, [col.id]: !checked };
+                                                onChange(next);
+                                            } }), _jsx("span", { children: col.label })] }) }, col.id));
+                        }) })] })) : null] }));
+}

package/dist/components/resources/ImageUploadControl.d.ts

@@ -0,0 +1,10 @@
+import type { ResourceUploadMeta } from "@vertebr/client";
+export type ImageUploadControlProps = {
+    meta: ResourceUploadMeta;
+    disabled?: boolean;
+    multiple?: boolean;
+    label?: string;
+    onUpload: (files: File[]) => Promise<void>;
+};
+export declare function ImageUploadControl({ meta, disabled, multiple, label, onUpload, }: ImageUploadControlProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageUploadControl.d.ts.map

package/dist/components/resources/ImageUploadControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadControl.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ImageUploadControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5C,CAAC;AAMF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,uBAAuB,+BA8EzB"}

package/dist/components/resources/ImageUploadControl.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+function acceptAttr(accept) {
+    return accept.join(",");
+}
+export function ImageUploadControl({ meta, disabled, multiple = false, label, onUpload, }) {
+    const inputRef = useRef(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [dragOver, setDragOver] = useState(false);
+    const run = async (fileList) => {
+        if (!fileList || disabled || busy)
+            return;
+        const files = Array.from(fileList);
+        if (!files.length)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await onUpload(multiple ? files : files.slice(0, 1));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Upload failed");
+        }
+        finally {
+            setBusy(false);
+            if (inputRef.current)
+                inputRef.current.value = "";
+        }
+    };
+    return (_jsxs("div", { className: "vertebr-upload", children: [_jsxs("div", { className: "vertebr-upload-drop", "data-busy": busy ? "true" : undefined, "data-drag": dragOver ? "true" : undefined, onDragEnter: (event) => {
+                    event.preventDefault();
+                    setDragOver(true);
+                }, onDragOver: (event) => {
+                    event.preventDefault();
+                    setDragOver(true);
+                }, onDragLeave: (event) => {
+                    event.preventDefault();
+                    setDragOver(false);
+                }, onDrop: (event) => {
+                    event.preventDefault();
+                    setDragOver(false);
+                    void run(event.dataTransfer.files);
+                }, children: [_jsx("p", { className: "vertebr-upload-copy", children: busy
+                            ? "Uploading…"
+                            : label ??
+                                (multiple
+                                    ? "Drop images here or browse"
+                                    : "Drop an image here or browse") }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled || busy, onClick: () => inputRef.current?.click(), children: multiple ? "Choose images" : "Choose image" }), _jsx("input", { ref: inputRef, type: "file", accept: acceptAttr(meta.accept), multiple: multiple, hidden: true, onChange: (event) => void run(event.target.files) })] }), error ? (_jsx("p", { className: "vertebr-upload-error", role: "alert", children: error })) : null] }));
+}

package/dist/components/resources/ResourceCell.d.ts

@@ -0,0 +1,10 @@
+import type { FieldSchema } from "@vertebr/client";
+export type ResourceCellProps = {
+    fieldKey: string;
+    field?: FieldSchema;
+    value: unknown;
+    /** `detail` expands images/text for modals. */
+    variant?: "table" | "detail";
+};
+export declare function ResourceCell({ fieldKey, field, value, variant, }: ResourceCellProps): import("react").JSX.Element;
+//# sourceMappingURL=ResourceCell.d.ts.map

package/dist/components/resources/ResourceCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCell.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAuDnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAiB,GAClB,EAAE,iBAAiB,+BAsInB"}

package/dist/components/resources/ResourceCell.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IMAGE_KEY = /(image|img|photo|avatar|thumbnail|thumb|cover)/i;
+const URL_KEY = /(url|href|link|src)/i;
+const CENTS_KEY = /(cents|priceCents|amountCents)/i;
+const PRICE_KEY = /(price|amount|cost|total)/i;
+const IMAGE_EXT = /\.(png|jpe?g|gif|webp|svg|avif)(\?|#|$)/i;
+function looksLikeUrl(value) {
+    return /^https?:\/\//i.test(value) || value.startsWith("//");
+}
+function looksLikeImageUrl(value) {
+    if (!looksLikeUrl(value))
+        return false;
+    if (IMAGE_EXT.test(value))
+        return true;
+    // CDN URLs often omit extensions but include image query params / paths.
+    return /(image|img|media|cdn|photo)/i.test(value);
+}
+function formatDate(value) {
+    if (value instanceof Date && !Number.isNaN(value.getTime())) {
+        return value.toLocaleString();
+    }
+    if (value &&
+        typeof value === "object" &&
+        "toDate" in value &&
+        typeof value.toDate === "function") {
+        try {
+            return value.toDate().toLocaleString();
+        }
+        catch {
+            return null;
+        }
+    }
+    if (typeof value === "string" || typeof value === "number") {
+        const date = new Date(value);
+        if (!Number.isNaN(date.getTime()))
+            return date.toLocaleString();
+    }
+    return null;
+}
+function formatMoney(value, asCents) {
+    const amount = asCents ? value / 100 : value;
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency: "USD",
+            maximumFractionDigits: asCents || !Number.isInteger(amount) ? 2 : 0,
+        }).format(amount);
+    }
+    catch {
+        return asCents ? `$${(value / 100).toFixed(2)}` : String(value);
+    }
+}
+export function ResourceCell({ fieldKey, field, value, variant = "table", }) {
+    const detail = variant === "detail";
+    if (value == null || value === "") {
+        return _jsx("span", { className: "vertebr-cell-empty", children: "\u2014" });
+    }
+    const type = field?.type;
+    if (type === "boolean" || typeof value === "boolean") {
+        const on = Boolean(value);
+        return (_jsx("span", { className: "vertebr-badge", "data-tone": on ? "ok" : "neutral", children: on ? "Active" : "Off" }));
+    }
+    if (type === "datetime") {
+        const formatted = formatDate(value);
+        if (formatted) {
+            return _jsx("span", { className: "vertebr-cell-datetime", children: formatted });
+        }
+    }
+    if (type === "number" || typeof value === "number") {
+        if (typeof value === "number" && Number.isFinite(value)) {
+            if (CENTS_KEY.test(fieldKey) || /cents/i.test(field?.label ?? "")) {
+                return (_jsx("span", { className: "vertebr-cell-money", children: formatMoney(value, true) }));
+            }
+            if (PRICE_KEY.test(fieldKey)) {
+                return (_jsx("span", { className: "vertebr-cell-money", children: formatMoney(value, false) }));
+            }
+            return (_jsx("span", { className: "vertebr-cell-number", children: new Intl.NumberFormat().format(value) }));
+        }
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return _jsx("span", { className: "vertebr-cell-empty", children: "\u2014" });
+        }
+        if (value.every((entry) => typeof entry === "string")) {
+            return (_jsx("div", { className: "vertebr-chip-row", children: value.map((entry) => (_jsx("span", { className: "vertebr-chip", children: entry }, entry))) }));
+        }
+    }
+    if (typeof value === "string") {
+        const showImage = IMAGE_KEY.test(fieldKey) ||
+            (URL_KEY.test(fieldKey) && looksLikeImageUrl(value)) ||
+            looksLikeImageUrl(value);
+        if (showImage && looksLikeUrl(value)) {
+            return (_jsxs("a", { className: detail ? "vertebr-cell-media vertebr-cell-media-detail" : "vertebr-cell-media", href: value, target: "_blank", rel: "noreferrer", title: value, onClick: (event) => event.stopPropagation(), children: [_jsx("img", { src: value, alt: "", loading: "lazy" }), detail ? (_jsx("span", { className: "vertebr-cell-link", children: value })) : (_jsx("span", { className: "vertebr-cell-truncate", children: value }))] }));
+        }
+        if (URL_KEY.test(fieldKey) || looksLikeUrl(value)) {
+            return (_jsx("a", { className: "vertebr-cell-link", href: value.startsWith("//") ? `https:${value}` : value, target: "_blank", rel: "noreferrer", title: value, onClick: (event) => event.stopPropagation(), children: detail ? value : value.replace(/^https?:\/\//i, "") }));
+        }
+        if (!detail && (type === "richtext" || value.length > 80)) {
+            return (_jsx("span", { className: "vertebr-cell-clamp", title: value, children: value }));
+        }
+        if (detail && (type === "richtext" || value.length > 80)) {
+            return _jsx("p", { className: "vertebr-cell-prose", children: value });
+        }
+        return _jsx("span", { className: "vertebr-cell-text", children: value });
+    }
+    const date = formatDate(value);
+    if (date) {
+        return _jsx("span", { className: "vertebr-cell-datetime", children: date });
+    }
+    if (typeof value === "object") {
+        return (_jsx("code", { className: "vertebr-cell-json", title: JSON.stringify(value), children: JSON.stringify(value) }));
+    }
+    return _jsx("span", { className: "vertebr-cell-text", children: String(value) });
+}

package/dist/{ResourceTable.d.ts → components/resources/ResourceTable.d.ts}

@@ -1,4 +1,4 @@
-import type { FieldSchema, ResourceActionMeta } from "./types";
+import type { FieldSchema, ResourceActionMeta, ResourceUploadMeta } from "@vertebr/client";
 type ResourcePanelProps = {
     schema: Record<string, FieldSchema>;
     items: Record<string, unknown>[];
@@ -8,12 +8,20 @@ type ResourcePanelProps = {
         delete?: boolean;
     };
     actions?: Record<string, ResourceActionMeta>;
+    uploads?: Record<string, ResourceUploadMeta>;
     rowIdKeys?: string[];
+    /** Persist column visibility under this key (e.g. resource id). */
+    storageKey?: string;
     onUpdate?: (rowId: string, value: Record<string, unknown>) => Promise<void>;
+    onCreate?: (value: Record<string, unknown>) => Promise<void>;
     onDelete?: (rowId: string) => Promise<void>;
     onAction?: (rowId: string, actionId: string) => Promise<void>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
 };
-export declare function ResourcePanel({ schema, items, permissions, actions, rowIdKeys, onUpdate, onDelete, onAction, }: ResourcePanelProps): import("react").JSX.Element;
+export declare function ResourcePanel({ schema, items, permissions, actions, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, }: ResourcePanelProps): import("react").JSX.Element;
 /** @deprecated Prefer ResourcePanel */
 export declare function ResourceTable(props: {
     schema: Record<string, FieldSchema>;

package/dist/components/resources/ResourceTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAMzB,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AA+DF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAY,EACZ,OAAO,EACP,SAA0C,EAC1C,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAoVpB;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;CAClC,+BAEA"}

package/dist/components/resources/ResourceTable.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, 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 { ResourceViewModal } from "./ResourceViewModal";
+function resolveRowId(row, keys) {
+    for (const key of keys) {
+        const value = row[key];
+        if (typeof value === "string" && value.trim())
+            return value;
+        if (typeof value === "number")
+            return String(value);
+    }
+    return null;
+}
+function humanizeKey(key) {
+    return key
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .replace(/\bcents\b/i, "")
+        .trim();
+}
+function rowTitle(row, keys) {
+    for (const key of ["name", "title", "label", ...keys]) {
+        const value = row[key];
+        if (typeof value === "string" && value.trim())
+            return value;
+    }
+    return "Record";
+}
+function readVisibility(storageKey) {
+    if (!storageKey || typeof localStorage === "undefined")
+        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;
+    }
+    catch {
+        return {};
+    }
+}
+function writeVisibility(storageKey, value) {
+    if (!storageKey || typeof localStorage === "undefined")
+        return;
+    try {
+        localStorage.setItem(`vertebr:columns:${storageKey}`, JSON.stringify(value));
+    }
+    catch {
+        /* ignore quota / private mode */
+    }
+}
+function titleFromFilename(name) {
+    return name
+        .replace(/\.[^.]+$/, "")
+        .replace(/[_-]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+export function ResourcePanel({ schema, items, permissions, actions = {}, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, }) {
+    const [editing, setEditing] = useState(null);
+    const [viewing, setViewing] = useState(null);
+    const [bulkOpen, setBulkOpen] = useState(false);
+    const [busyAction, setBusyAction] = useState(null);
+    const [columnVisibility, setColumnVisibility] = useState(() => readVisibility(storageKey));
+    const canUpdate = Boolean(permissions?.update && onUpdate);
+    const canCreate = Boolean(permissions?.create && onCreate);
+    const canDelete = Boolean(permissions?.delete && onDelete);
+    const canUpload = Boolean(uploads && onUpload && Object.keys(uploads).length);
+    const actionEntries = Object.entries(actions);
+    const fieldKeys = Object.keys(schema);
+    useEffect(() => {
+        setColumnVisibility(readVisibility(storageKey));
+    }, [storageKey]);
+    useEffect(() => {
+        writeVisibility(storageKey, columnVisibility);
+    }, [storageKey, columnVisibility]);
+    const columnOptions = useMemo(() => fieldKeys.map((key) => ({
+        id: key,
+        label: schema[key]?.label ?? humanizeKey(key),
+    })), [fieldKeys, schema]);
+    const columns = useMemo(() => {
+        const defs = fieldKeys.length === 0
+            ? [
+                {
+                    id: "raw",
+                    header: "Item",
+                    cell: ({ row }) => (_jsx(ResourceCell, { fieldKey: "raw", value: row.original })),
+                },
+            ]
+            : fieldKeys.map((key) => {
+                const field = schema[key];
+                const isImage = /(image|img|photo|avatar|thumbnail|thumb|cover)/i.test(key) ||
+                    /(image|img|photo)/i.test(field?.label ?? "");
+                return {
+                    id: key,
+                    accessorKey: key,
+                    header: field?.label ?? humanizeKey(key),
+                    meta: { fieldKey: key, field },
+                    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" }),
+            enableHiding: false,
+            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)))
+                            : 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);
+                                }
+                            }, children: "Delete" })) : null] }));
+            },
+        });
+        return defs;
+    }, [
+        schema,
+        fieldKeys,
+        canUpdate,
+        canDelete,
+        actionEntries,
+        busyAction,
+        onAction,
+        onDelete,
+        rowIdKeys,
+    ]);
+    const table = useReactTable({
+        data: items,
+        columns,
+        state: { columnVisibility },
+        onColumnVisibilityChange: setColumnVisibility,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const editingId = editing ? resolveRowId(editing, rowIdKeys) : null;
+    if (editing && editingId && onUpdate) {
+        const editableSchema = Object.fromEntries(Object.entries(schema).filter(([, field]) => !field.readOnly));
+        const title = rowTitle(editing, rowIdKeys);
+        return (_jsxs("div", { className: "vertebr-resource-edit", children: [_jsxs("div", { className: "vertebr-resource-edit-head", children: [_jsxs("div", { className: "vertebr-resource-edit-heading", children: [_jsx("p", { className: "vertebr-resource-edit-eyebrow", children: "Editing record" }), _jsx("h2", { children: title }), _jsx("p", { className: "vertebr-resource-edit-id", children: editingId })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => setEditing(null), children: "Back" })] }), _jsx(ConfigForm, { variant: "record", schema: editableSchema, value: editing, uploads: uploads, onUpload: onUpload, onSave: async (next) => {
+                        await onUpdate(editingId, next);
+                        setEditing(null);
+                    } })] }));
+    }
+    const toolbar = (_jsx("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] }) }));
+    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),
+        ])), onClose: () => setBulkOpen(false), onUpload: onUpload, onCreateFromUploads: canCreate && onCreate
+            ? async (field, files) => {
+                for (const file of files) {
+                    const name = titleFromFilename(file.name ?? "Image");
+                    await onCreate({
+                        [field]: file.url,
+                        name,
+                        title: name,
+                    });
+                }
+            }
+            : undefined })) : null;
+    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: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsx("span", { className: "vertebr-count", children: items.length })] }), canUpload || columnOptions.length > 0 ? toolbar : null, _jsx("div", { className: "vertebr-table-wrap", 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
+                                        ? 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) => {
+                                    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: () => {
+                    setEditing(viewing);
+                    setViewing(null);
+                } })) : null, bulkModal] }));
+}
+/** @deprecated Prefer ResourcePanel */
+export function ResourceTable(props) {
+    return _jsx(ResourcePanel, { ...props });
+}
+function ImageUploadIcon() {
+    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: "M16 5h6" }), _jsx("path", { d: "M19 2v6" }), _jsx("rect", { x: "3", y: "7", width: "14", height: "14", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "12.5", r: "1.5" }), _jsx("path", { d: "m17 21-4.5-4.5L7 21" })] }));
+}

package/dist/components/resources/ResourceViewModal.d.ts

@@ -0,0 +1,11 @@
+import type { FieldSchema } from "@vertebr/client";
+export type ResourceViewModalProps = {
+    schema: Record<string, FieldSchema>;
+    row: Record<string, unknown>;
+    title: string;
+    canEdit?: boolean;
+    onClose: () => void;
+    onEdit?: () => void;
+};
+export declare function ResourceViewModal({ schema, row, title, canEdit, onClose, onEdit, }: ResourceViewModalProps): import("react").JSX.Element;
+//# sourceMappingURL=ResourceViewModal.d.ts.map

package/dist/components/resources/ResourceViewModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceViewModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceViewModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA4BF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE,sBAAsB,+BAsFxB"}