@vertebr/react 0.2.0 → 0.4.0

package/dist/components/resources/ResourceTable.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+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 { ResourceViewModal } from "./ResourceViewModal";
 function resolveRowId(row, keys) {
     for (const key of keys) {
@@ -57,6 +58,17 @@ function writeVisibility(storageKey, value) {
         /* ignore quota / private mode */
     }
 }
+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,15 +76,23 @@ 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, }) {
+export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, 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 tableWrapRef = useRef(null);
+    const [tableOverflow, setTableOverflow] = useState({
+        overflow: false,
+        canLeft: false,
+        canRight: false,
+    });
     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 createLabel = addRecordLabel(label);
     const canUpload = Boolean(uploads && onUpload && Object.keys(uploads).length);
     const actionEntries = Object.entries(actions);
     const fieldKeys = Object.keys(schema);
@@ -82,6 +102,43 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
     useEffect(() => {
         writeVisibility(storageKey, columnVisibility);
     }, [storageKey, columnVisibility]);
+    const updateTableOverflow = useCallback(() => {
+        const el = tableWrapRef.current;
+        if (!el) {
+            setTableOverflow({ overflow: false, canLeft: false, canRight: false });
+            return;
+        }
+        const overflow = el.scrollWidth > el.clientWidth + 2;
+        setTableOverflow({
+            overflow,
+            canLeft: overflow && el.scrollLeft > 2,
+            canRight: overflow && el.scrollLeft + el.clientWidth < el.scrollWidth - 2,
+        });
+    }, []);
+    useEffect(() => {
+        const el = tableWrapRef.current;
+        if (!el)
+            return;
+        updateTableOverflow();
+        const onScroll = () => updateTableOverflow();
+        el.addEventListener("scroll", onScroll, { passive: true });
+        const observer = new ResizeObserver(updateTableOverflow);
+        observer.observe(el);
+        return () => {
+            el.removeEventListener("scroll", onScroll);
+            observer.disconnect();
+        };
+    }, [updateTableOverflow, items.length, columnVisibility]);
+    const scrollTable = (direction) => {
+        const el = tableWrapRef.current;
+        if (!el)
+            return;
+        const amount = Math.max(220, Math.round(el.clientWidth * 0.55));
+        el.scrollBy({
+            left: direction === "left" ? -amount : amount,
+            behavior: "smooth",
+        });
+    };
     const columnOptions = useMemo(() => fieldKeys.map((key) => ({
         id: key,
         label: schema[key]?.label ?? humanizeKey(key),
@@ -148,15 +205,32 @@ 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);
-        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) => {
+        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, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, 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 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 bulkModal = bulkOpen && uploads && onUpload ? (_jsx(BulkImageUploadModal, { uploads: uploads, canCreate: canCreate, fieldLabels: Object.fromEntries(Object.keys(uploads).map((key) => [
             key,
             schema[key]?.label ?? humanizeKey(key),
@@ -172,10 +246,12 @@ 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 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 ? toolbar : null, _jsx("div", { className: "vertebr-empty", children: "No rows yet." }), bulkModal, createModal] }));
     }
-    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"
+    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
                                         ? null
@@ -189,12 +265,21 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
                                         : 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, 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" }) }));
+}
+function ChevronRightIcon() {
+    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: "m9 18 6-6-6-6" }) }));
+}
 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/hooks/useVertebrControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVertebrControls.d.ts","sourceRoot":"","sources":["../../src/hooks/useVertebrControls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAIF,MAAM,MAAM,4BAA4B,GAAG;IACzC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,OAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,4BAA4B,+BAuC9B;AAYD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,GACV;IACD,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAMA;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}
+{"version":3,"file":"useVertebrControls.d.ts","sourceRoot":"","sources":["../../src/hooks/useVertebrControls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAIF,MAAM,MAAM,4BAA4B,GAAG;IACzC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,OAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,4BAA4B,+BAyC9B;AAYD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,GACV;IACD,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAMA;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}

package/dist/hooks/useVertebrControls.js

@@ -13,11 +13,11 @@ export function VertebrControlsProvider({ apiBase = "/admin/api", environment, c
         apiBase,
         getEnvironment: () => environment,
     }), [apiBase, environment]);
-    const refresh = useCallback(async () => {
+    const load = useCallback(async (opts) => {
         setLoading(true);
         setError(null);
         try {
-            const next = await client.getPublicControls();
+            const next = await client.getPublicControls(opts);
             setControls(next);
         }
         catch (err) {
@@ -27,9 +27,10 @@ export function VertebrControlsProvider({ apiBase = "/admin/api", environment, c
             setLoading(false);
         }
     }, [client]);
+    const refresh = useCallback(() => load({ fresh: true }), [load]);
     useEffect(() => {
-        void refresh();
-    }, [refresh]);
+        void load();
+    }, [load]);
     const value = useMemo(() => ({ environment, controls, loading, error, refresh }), [environment, controls, loading, error, refresh]);
     return (_jsx(ControlsContext.Provider, { value: value, children: children }));
 }

package/dist/index.d.ts

@@ -6,11 +6,20 @@ export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTab
 export { ThemeToggle } from "./components/theme/ThemeToggle";
 export type { ThemeToggleProps } from "./components/theme/ThemeToggle";
 export { ConfigForm } from "./components/config/ConfigForm";
+export { formatPrice, formatPriceInput, parsePriceInput, isCentsField, isPriceField, } from "./lib/price";
+export { isDescriptionField, descriptionStats, applyMarkdown, } from "./lib/description";
+export type { MarkdownCommand, MarkdownEdit } from "./lib/description";
 export { EnvSelect } from "./components/env/EnvSelect";
 export { useVertebrTheme } from "./hooks/useVertebrTheme";
 export type { VbTheme } from "./hooks/useVertebrTheme";
 export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./hooks/useVertebrControls";
 export type { VertebrControlsProviderProps } from "./hooks/useVertebrControls";
-export { createVertebrClient, VERTEBR_ENV_HEADER, } from "@vertebr/client";
-export type { VertebrClient, VertebrClientOptions, 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 { createVertebrClient, VERTEBR_ENV_HEADER, renderMarkdown, } from "@vertebr/client";
+export { VertebrMarkdown } from "@vertebr/client/react";
+export type { VertebrMarkdownProps } from "@vertebr/client/react";
+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, 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";
 //# 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,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,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,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,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,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"}

package/dist/index.js

@@ -4,8 +4,13 @@ export { GalleryBoard } from "./components/gallery/GalleryBoard";
 export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
 export { ThemeToggle } from "./components/theme/ThemeToggle";
 export { ConfigForm } from "./components/config/ConfigForm";
+export { formatPrice, formatPriceInput, parsePriceInput, isCentsField, isPriceField, } from "./lib/price";
+export { isDescriptionField, descriptionStats, applyMarkdown, } from "./lib/description";
 export { EnvSelect } from "./components/env/EnvSelect";
 export { useVertebrTheme } from "./hooks/useVertebrTheme";
 export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./hooks/useVertebrControls";
 // Re-export the framework-agnostic client for convenience.
-export { createVertebrClient, VERTEBR_ENV_HEADER, } from "@vertebr/client";
+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/description.d.ts

@@ -0,0 +1,18 @@
+import type { FieldSchema } from "@vertebr/client";
+export declare function isDescriptionField(key: string, field?: Pick<FieldSchema, "label" | "type">): boolean;
+export declare function descriptionStats(value: unknown): {
+    characters: number;
+    words: number;
+};
+export type MarkdownCommand = "bold" | "italic" | "heading" | "ul" | "ol" | "link";
+export type MarkdownEdit = {
+    next: string;
+    inserted: string;
+    replaceStart: number;
+    replaceEnd: number;
+    selectionStart: number;
+    selectionEnd: number;
+};
+/** Apply a markdown format command around the current selection. */
+export declare function applyMarkdown(text: string, start: number, end: number, command: MarkdownCommand): MarkdownEdit;
+//# sourceMappingURL=description.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.d.ts","sourceRoot":"","sources":["../../src/lib/description.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,GAC1C,OAAO,CAIT;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAOA;AAED,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,QAAQ,GACR,SAAS,GACT,IAAI,GACJ,IAAI,GACJ,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AA8CF,oEAAoE;AACpE,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,eAAe,GACvB,YAAY,CAsCd"}

package/dist/lib/description.js

@@ -0,0 +1,85 @@
+const DESCRIPTION_KEY = /(description|body|content|summary|bio|copy|caption|details)/i;
+export function isDescriptionField(key, field) {
+    if (field?.type === "richtext")
+        return true;
+    const hay = `${key} ${field?.label ?? ""}`;
+    return DESCRIPTION_KEY.test(hay);
+}
+export function descriptionStats(value) {
+    const text = typeof value === "string" ? value.trim() : "";
+    if (!text)
+        return { characters: 0, words: 0 };
+    return {
+        characters: text.length,
+        words: text.split(/\s+/).filter(Boolean).length,
+    };
+}
+function wrap(text, start, end, before, after, placeholder) {
+    const selected = text.slice(start, end) || placeholder;
+    const inserted = before + selected + after;
+    return {
+        next: text.slice(0, start) + inserted + text.slice(end),
+        inserted,
+        replaceStart: start,
+        replaceEnd: end,
+        selectionStart: start + before.length,
+        selectionEnd: start + before.length + selected.length,
+    };
+}
+function prefixLines(text, start, end, prefixFor) {
+    const lineStart = text.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
+    const lineEndIndex = text.indexOf("\n", end);
+    const lineEnd = lineEndIndex === -1 ? text.length : lineEndIndex;
+    const block = text.slice(lineStart, lineEnd) || "";
+    const lines = block.split("\n");
+    const inserted = lines
+        .map((line, index) => prefixFor(index, line))
+        .join("\n");
+    return {
+        next: text.slice(0, lineStart) + inserted + text.slice(lineEnd),
+        inserted,
+        replaceStart: lineStart,
+        replaceEnd: lineEnd,
+        selectionStart: lineStart,
+        selectionEnd: lineStart + inserted.length,
+    };
+}
+/** Apply a markdown format command around the current selection. */
+export function applyMarkdown(text, start, end, command) {
+    const from = Math.max(0, Math.min(start, end, text.length));
+    const to = Math.max(0, Math.min(Math.max(start, end), text.length));
+    switch (command) {
+        case "bold":
+            return wrap(text, from, to, "**", "**", "bold text");
+        case "italic":
+            return wrap(text, from, to, "*", "*", "italic text");
+        case "link": {
+            const selected = text.slice(from, to) || "link text";
+            const inserted = `[${selected}](https://)`;
+            const urlStart = from + selected.length + 3;
+            return {
+                next: text.slice(0, from) + inserted + text.slice(to),
+                inserted,
+                replaceStart: from,
+                replaceEnd: to,
+                selectionStart: urlStart,
+                selectionEnd: urlStart + "https://".length,
+            };
+        }
+        case "heading":
+            return prefixLines(text, from, to, (_index, line) => {
+                const stripped = line.replace(/^#{1,6}\s+/, "");
+                return `## ${stripped || "Heading"}`;
+            });
+        case "ul":
+            return prefixLines(text, from, to, (_index, line) => {
+                const stripped = line.replace(/^[-*]\s+/, "").replace(/^\d+\.\s+/, "");
+                return `- ${stripped || "List item"}`;
+            });
+        case "ol":
+            return prefixLines(text, from, to, (index, line) => {
+                const stripped = line.replace(/^[-*]\s+/, "").replace(/^\d+\.\s+/, "");
+                return `${index + 1}. ${stripped || "List item"}`;
+            });
+    }
+}

package/dist/lib/images.d.ts

@@ -0,0 +1,14 @@
+import type { FieldSchema } from "@vertebr/client";
+export type RecordImage = {
+    id: string;
+    url: string;
+    name: string;
+    field: string;
+};
+declare function looksLikeUrl(value: string): boolean;
+export declare function isImageField(key: string, field?: Pick<FieldSchema, "label" | "type">): boolean;
+/** Flatten record image fields (single URL or URL lists) for the editor picker. */
+export declare function collectRecordImages(schema: Record<string, FieldSchema>, values: Record<string, unknown> | undefined): RecordImage[];
+export declare function urlsFromValue(value: unknown): string[];
+export { looksLikeUrl };
+//# sourceMappingURL=images.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/lib/images.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE5C;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,GAC1C,OAAO,CAIT;AAqBD,mFAAmF;AACnF,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC1C,WAAW,EAAE,CAmBf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,CAYtD;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/images.js

@@ -0,0 +1,63 @@
+function looksLikeUrl(value) {
+    return /^https?:\/\//i.test(value) || value.startsWith("//");
+}
+export function isImageField(key, field) {
+    if (field?.type === "file[]")
+        return true;
+    const hay = `${key} ${field?.label ?? ""}`;
+    return /(image|img|photo|avatar|thumbnail|thumb|cover)/i.test(hay);
+}
+function urlFromUnknown(value) {
+    if (typeof value === "string" && looksLikeUrl(value)) {
+        return { url: value };
+    }
+    if (value && typeof value === "object" && "url" in value) {
+        const url = value.url;
+        const name = value.name;
+        if (typeof url === "string" && looksLikeUrl(url)) {
+            return {
+                url,
+                name: typeof name === "string" ? name : undefined,
+            };
+        }
+    }
+    return null;
+}
+/** Flatten record image fields (single URL or URL lists) for the editor picker. */
+export function collectRecordImages(schema, values) {
+    const images = [];
+    for (const [key, field] of Object.entries(schema)) {
+        if (!isImageField(key, field))
+            continue;
+        const label = field.label?.trim() || key;
+        const value = values?.[key];
+        const items = Array.isArray(value) ? value : [value];
+        items.forEach((item, index) => {
+            const parsed = urlFromUnknown(item);
+            if (!parsed)
+                return;
+            images.push({
+                id: `${key}:${index}`,
+                url: parsed.url,
+                name: parsed.name || (items.length > 1 ? `${label} ${index + 1}` : label),
+                field: key,
+            });
+        });
+    }
+    return images;
+}
+export function urlsFromValue(value) {
+    const items = Array.isArray(value)
+        ? value
+        : value == null || value === ""
+            ? []
+            : [value];
+    const urls = [];
+    for (const item of items) {
+        const parsed = urlFromUnknown(item);
+        if (parsed)
+            urls.push(parsed.url);
+    }
+    return urls;
+}
+export { looksLikeUrl };

package/dist/lib/price.d.ts

@@ -0,0 +1,15 @@
+import type { FieldSchema } from "@vertebr/client";
+export declare function isCentsField(key: string, field?: Pick<FieldSchema, "label">): boolean;
+export declare function isPriceField(key: string, field?: Pick<FieldSchema, "label">): boolean;
+export declare function dollarsFromStored(value: number, asCents: boolean): number;
+export declare function storedFromDollars(dollars: number, asCents: boolean): number;
+/** Format a stored number for display (`3800` cents → `$38.00`). */
+export declare function formatPrice(value: number, options?: {
+    asCents?: boolean;
+    currency?: string;
+}): string;
+/** Value shown in an editable money input (`3800` → `38.00`). */
+export declare function formatPriceInput(value: unknown, asCents?: boolean): string;
+/** Parse typed money (`$38`, `38.00`, `38`) back to stored units. */
+export declare function parsePriceInput(raw: string, asCents?: boolean): number | undefined;
+//# sourceMappingURL=price.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../src/lib/price.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKnD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GACjC,OAAO,CAET;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GACjC,OAAO,CAGT;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAEzE;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAE3E;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD,MAAM,CAcR;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,OAAO,EACd,OAAO,UAAO,GACb,MAAM,CAGR;AAED,qEAAqE;AACrE,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,OAAO,UAAO,GACb,MAAM,GAAG,SAAS,CAQpB"}

package/dist/lib/price.js

@@ -0,0 +1,50 @@
+const CENTS_KEY = /(cents|priceCents|amountCents)/i;
+const PRICE_KEY = /(price|amount|cost|total|msrp)/i;
+export function isCentsField(key, field) {
+    return CENTS_KEY.test(key) || /cents/i.test(field?.label ?? "");
+}
+export function isPriceField(key, field) {
+    if (isCentsField(key, field))
+        return true;
+    return PRICE_KEY.test(key) || PRICE_KEY.test(field?.label ?? "");
+}
+export function dollarsFromStored(value, asCents) {
+    return asCents ? value / 100 : value;
+}
+export function storedFromDollars(dollars, asCents) {
+    return asCents ? Math.round(dollars * 100) : dollars;
+}
+/** Format a stored number for display (`3800` cents → `$38.00`). */
+export function formatPrice(value, options) {
+    const asCents = options?.asCents ?? true;
+    const currency = options?.currency ?? "USD";
+    const amount = dollarsFromStored(value, asCents);
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount);
+    }
+    catch {
+        return `$${amount.toFixed(2)}`;
+    }
+}
+/** Value shown in an editable money input (`3800` → `38.00`). */
+export function formatPriceInput(value, asCents = true) {
+    if (typeof value !== "number" || !Number.isFinite(value))
+        return "";
+    return dollarsFromStored(value, asCents).toFixed(2);
+}
+/** Parse typed money (`$38`, `38.00`, `38`) back to stored units. */
+export function parsePriceInput(raw, asCents = true) {
+    const cleaned = raw.replace(/[^0-9.-]/g, "");
+    if (!cleaned || cleaned === "-" || cleaned === "." || cleaned === "-.") {
+        return undefined;
+    }
+    const dollars = Number(cleaned);
+    if (!Number.isFinite(dollars))
+        return undefined;
+    return storedFromDollars(dollars, asCents);
+}