@vertebr/react 0.1.1 → 0.3.0

package/dist/components/config/form/helpers.js

@@ -0,0 +1,186 @@
+import { z } from "zod";
+import { isDescriptionField } from "../../../lib/description";
+import { isImageField, looksLikeUrl } from "../../../lib/images";
+const RECORD_GROUP_ORDER = [
+    "Details",
+    "Content",
+    "Pricing",
+    "Inventory",
+    "Media",
+    "Status",
+];
+export function buildZodSchema(schema) {
+    const shape = {};
+    for (const [key, field] of Object.entries(schema)) {
+        let zodField;
+        switch (field.type) {
+            case "number":
+                zodField = z.number();
+                if (field.min != null)
+                    zodField = zodField.min(field.min);
+                if (field.max != null)
+                    zodField = zodField.max(field.max);
+                break;
+            case "boolean":
+                zodField = z.boolean();
+                break;
+            case "file[]":
+                zodField = z.array(z.string());
+                break;
+            default:
+                zodField = z.string();
+        }
+        if (!field.required) {
+            zodField = zodField.optional();
+        }
+        shape[key] = zodField;
+    }
+    return z.object(shape);
+}
+export function humanizeKey(key) {
+    return key
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .trim();
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+export function isStockField(key, field) {
+    const hay = `${key} ${field?.label ?? ""}`;
+    return /(stock|inventory|qty|quantity)/i.test(hay);
+}
+export function spanFor(key, field, variant) {
+    if (field.type === "boolean")
+        return "full";
+    if (field.type === "richtext" || isDescriptionField(key, field))
+        return "full";
+    if (variant === "record" && isImageField(key, field))
+        return "full";
+    return undefined;
+}
+function inferConfigGroup(key, field) {
+    if (field.group?.trim())
+        return field.group.trim();
+    const source = field.label?.trim() || humanizeKey(key);
+    const words = source.split(/\s+/).filter(Boolean);
+    if (words.length >= 2)
+        return words[0];
+    return "General";
+}
+function inferRecordGroup(key, field) {
+    if (field.group?.trim())
+        return field.group.trim();
+    const k = key.toLowerCase();
+    const label = (field.label ?? "").toLowerCase();
+    const hay = `${k} ${label}`;
+    if (/(image|img|photo|avatar|thumbnail|thumb|cover|media_url)/i.test(hay)) {
+        return "Media";
+    }
+    if (/(price|cost|cents|amount|msrp)/i.test(hay)) {
+        return "Pricing";
+    }
+    if (/(stock|inventory|qty|quantity)/i.test(hay)) {
+        return "Inventory";
+    }
+    if (field.type === "boolean" ||
+        /(^|_)(active|enabled|published|status|visible)(_|$)/i.test(k) ||
+        /^(active|enabled|published|status|visible)$/i.test(label)) {
+        return "Status";
+    }
+    if (field.type === "richtext" ||
+        /(description|body|content|summary|bio)/i.test(hay)) {
+        return "Content";
+    }
+    return "Details";
+}
+export function displayLabel(key, field, group) {
+    const label = field.label?.trim() || humanizeKey(key);
+    const stripped = label.replace(new RegExp(`^${escapeRegExp(group)}\\s+`, "i"), "");
+    if (/^inventory$/i.test(group)) {
+        const stock = label.replace(/^stock\s+/i, "").trim();
+        if (stock && stock !== label)
+            return stock;
+    }
+    if (/^pricing$/i.test(group) && /cents/i.test(label)) {
+        return label.replace(/\s*\(cents\)/i, "").trim() || label;
+    }
+    return stripped || label;
+}
+function sortGroups(groups, variant) {
+    if (variant !== "record")
+        return groups;
+    const rank = (id) => {
+        const index = RECORD_GROUP_ORDER.indexOf(id);
+        return index === -1 ? RECORD_GROUP_ORDER.length + 1 : index;
+    };
+    return [...groups].sort((a, b) => rank(a.id) - rank(b.id));
+}
+export function groupFields(schema, variant) {
+    const order = [];
+    const map = new Map();
+    const explicit = new Set();
+    for (const entry of Object.entries(schema)) {
+        const [key, field] = entry;
+        const group = variant === "record"
+            ? inferRecordGroup(key, field)
+            : inferConfigGroup(key, field);
+        if (field.group?.trim())
+            explicit.add(group);
+        if (!map.has(group)) {
+            map.set(group, []);
+            order.push(group);
+        }
+        map.get(group).push(entry);
+    }
+    if (variant === "config") {
+        for (const [group, fields] of [...map.entries()]) {
+            if (fields.length > 1 || explicit.has(group) || group === "General") {
+                continue;
+            }
+            if (!map.has("General")) {
+                map.set("General", []);
+                order.unshift("General");
+            }
+            map.get("General").push(...fields);
+            map.delete(group);
+            const idx = order.indexOf(group);
+            if (idx >= 0)
+                order.splice(idx, 1);
+        }
+    }
+    const groups = order
+        .filter((id) => map.has(id))
+        .map((id) => ({
+        id,
+        label: id,
+        fields: map.get(id),
+    }));
+    return sortGroups(groups, variant);
+}
+export function firstImageUrl(value) {
+    const items = Array.isArray(value) ? value : [value];
+    for (const item of items) {
+        if (typeof item === "string" && looksLikeUrl(item))
+            return item;
+        if (item && typeof item === "object" && "url" in item) {
+            const url = item.url;
+            if (typeof url === "string" && looksLikeUrl(url))
+                return url;
+        }
+    }
+    return null;
+}
+export function findPrimaryImageKey(schema, values) {
+    for (const [key, field] of Object.entries(schema)) {
+        if (!isImageField(key, field))
+            continue;
+        if (firstImageUrl(values?.[key]))
+            return key;
+    }
+    for (const [key, field] of Object.entries(schema)) {
+        if (isImageField(key, field))
+            return key;
+    }
+    return null;
+}

package/dist/components/config/form/types.d.ts

@@ -0,0 +1,27 @@
+import type { FieldSchema, GalleryItem, ResourceUploadMeta } from "@vertebr/client";
+export type ConfigFormVariant = "config" | "record";
+export type ConfigFormProps = {
+    schema: Record<string, FieldSchema>;
+    value: Record<string, unknown>;
+    onSave: (value: Record<string, unknown>) => Promise<void>;
+    /** `record` uses a dense product-style editor. */
+    variant?: ConfigFormVariant;
+    /** Field-keyed upload capabilities from the host resource. */
+    uploads?: Record<string, ResourceUploadMeta>;
+    /** Upload files for a field; return public URL(s). */
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
+    onListGallery?: () => Promise<GalleryItem[]>;
+    onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+};
+export type FieldEntry = [string, FieldSchema];
+export type FieldGroup = {
+    id: string;
+    label: string;
+    fields: FieldEntry[];
+};
+export type GalleryHandlers = Pick<ConfigFormProps, "galleryUpload" | "onListGallery" | "onUploadGallery">;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/config/form/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,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;IACpD,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,eAAe,GAAG,eAAe,GAAG,iBAAiB,CACtD,CAAC"}

package/dist/{EnvSelect.d.ts → components/env/EnvSelect.d.ts}

@@ -1,4 +1,4 @@
-import type { AdminEnvironment } from "./types";
+import type { AdminEnvironment } from "@vertebr/client";
 type EnvSelectProps = {
     environments: AdminEnvironment[];
     value: string;

package/dist/components/env/EnvSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvSelect.d.ts","sourceRoot":"","sources":["../../../src/components/env/EnvSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,KAAK,cAAc,GAAG;IACpB,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAqD1E"}

package/dist/components/gallery/GalleryBoard.d.ts

@@ -0,0 +1,14 @@
+import type { GalleryItem } from "@vertebr/client";
+export type GalleryBoardProps = {
+    label?: string;
+    items: GalleryItem[];
+    accept: string[];
+    maxBytes: number;
+    canDelete?: boolean;
+    loading?: boolean;
+    onRefresh?: () => void;
+    onUpload: (files: File[]) => Promise<void>;
+    onDelete?: (id: string) => Promise<void>;
+};
+export declare function GalleryBoard({ label, items, accept, maxBytes, canDelete, loading, onRefresh, onUpload, onDelete, }: GalleryBoardProps): import("react").JSX.Element;
+//# sourceMappingURL=GalleryBoard.d.ts.map

package/dist/components/gallery/GalleryBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryBoard.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/GalleryBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,+BAiFnB"}

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;AA6CnD,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,+BA0InB"}

package/dist/components/resources/ResourceCell.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatPrice, isCentsField, isPriceField, } from "../../lib/price";
+const IMAGE_KEY = /(image|img|photo|avatar|thumbnail|thumb|cover)/i;
+const URL_KEY = /(url|href|link|src)/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;
+}
+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 (isCentsField(fieldKey, field)) {
+                return (_jsx("span", { className: "vertebr-cell-money", children: formatPrice(value, { asCents: true }) }));
+            }
+            if (isPriceField(fieldKey, field)) {
+                return (_jsx("span", { className: "vertebr-cell-money", children: formatPrice(value, { asCents: 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) });
+}