@vertebr/react 0.3.0 → 0.4.0

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

@@ -0,0 +1,27 @@
+import { isImageField, looksLikeUrl } from "../../../../lib/images";
+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/helpers/index.d.ts

@@ -0,0 +1,7 @@
+export { buildZodSchema } from "./schema";
+export { displayLabel, humanizeKey, optionLabel, } from "./labels";
+export { isMultilineField, isSpecsField, isStockField, spanFor, } from "./fields";
+export { fieldVisibilityKey, groupVisibilityKey, isPairedVisibilityField, showFlagKey, visibilityToggleKey, withSpecVisibility, withSpecVisibilityValues, } from "./visibility";
+export { groupFields } from "./groups";
+export { findPrimaryImageKey, firstImageUrl } from "./images";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/config/form/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EACL,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,OAAO,GACR,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,6 @@
+export { buildZodSchema } from "./schema";
+export { displayLabel, humanizeKey, optionLabel, } from "./labels";
+export { isMultilineField, isSpecsField, isStockField, spanFor, } from "./fields";
+export { fieldVisibilityKey, groupVisibilityKey, isPairedVisibilityField, showFlagKey, visibilityToggleKey, withSpecVisibility, withSpecVisibilityValues, } from "./visibility";
+export { groupFields } from "./groups";
+export { findPrimaryImageKey, firstImageUrl } from "./images";

package/dist/components/config/form/helpers/labels.d.ts

@@ -0,0 +1,5 @@
+import type { FieldSchema } from "@vertebr/client";
+export declare function humanizeKey(key: string): string;
+export declare function optionLabel(value: string, field?: FieldSchema): string;
+export declare function displayLabel(key: string, field: FieldSchema, group: string): string;
+//# sourceMappingURL=labels.d.ts.map

package/dist/components/config/form/helpers/labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/labels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK/C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAItE;AAMD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,MAAM,GACZ,MAAM,CAcR"}

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

@@ -0,0 +1,28 @@
+export function humanizeKey(key) {
+    return key
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .trim();
+}
+export function optionLabel(value, field) {
+    const labeled = field?.optionLabels?.[value]?.trim();
+    if (labeled)
+        return labeled;
+    return humanizeKey(value);
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+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;
+}

package/dist/components/config/form/helpers/schema.d.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+import type { FieldSchema } from "@vertebr/client";
+export declare function buildZodSchema(schema: Record<string, FieldSchema>): z.ZodObject<Record<string, z.ZodTypeAny>, "strip", z.ZodTypeAny, {
+    [x: string]: any;
+}, {
+    [x: string]: any;
+}>;
+//# sourceMappingURL=schema.d.ts.map

package/dist/components/config/form/helpers/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC;;;;GA0BjE"}

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

@@ -0,0 +1,30 @@
+import { z } from "zod";
+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[]":
+            case "enum[]":
+                zodField = z.array(z.string());
+                break;
+            default:
+                zodField = z.string();
+        }
+        if (!field.required) {
+            zodField = zodField.optional();
+        }
+        shape[key] = zodField;
+    }
+    return z.object(shape);
+}

package/dist/components/config/form/helpers/visibility.d.ts

@@ -0,0 +1,13 @@
+import type { FieldSchema } from "@vertebr/client";
+export declare function showFlagKey(fieldKey: string): string;
+/** Ensure each Specs field has a paired `showX` boolean in the editor schema. */
+export declare function withSpecVisibility(schema: Record<string, FieldSchema>): Record<string, FieldSchema>;
+export declare function withSpecVisibilityValues(schema: Record<string, FieldSchema>, value: Record<string, unknown>): Record<string, unknown>;
+/** `showMaterial` paired with `material`, `showPrice` with `priceCents`. */
+export declare function visibilityToggleKey(fieldKey: string, schema: Record<string, FieldSchema>): string | null;
+export declare function isPairedVisibilityField(key: string, schema: Record<string, FieldSchema>): boolean;
+/** Section-level storefront flag, e.g. Pricing → `showPrice`. */
+export declare function groupVisibilityKey(groupId: string, schema: Record<string, FieldSchema>): string | null;
+/** Field-level flag, skipped when the section header already owns it. */
+export declare function fieldVisibilityKey(fieldKey: string, schema: Record<string, FieldSchema>, groupId?: string): string | null;
+//# sourceMappingURL=visibility.d.ts.map

package/dist/components/config/form/helpers/visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAInD,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAClC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAc7B;AAED,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CASzB;AAMD,4EAA4E;AAC5E,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAClC,MAAM,GAAG,IAAI,CASf;AAcD,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAClC,OAAO,CAMT;AAED,iEAAiE;AACjE,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAClC,MAAM,GAAG,IAAI,CAIf;AAED,yEAAyE;AACzE,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,GAAG,IAAI,CAKf"}

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

@@ -0,0 +1,86 @@
+import { isSpecsField } from "./fields";
+import { humanizeKey } from "./labels";
+export function showFlagKey(fieldKey) {
+    return `show${fieldKey.charAt(0).toUpperCase()}${fieldKey.slice(1)}`;
+}
+/** Ensure each Specs field has a paired `showX` boolean in the editor schema. */
+export function withSpecVisibility(schema) {
+    const next = { ...schema };
+    for (const [key, field] of Object.entries(schema)) {
+        if (field.type === "boolean" || !isSpecsField(key, field))
+            continue;
+        const flag = showFlagKey(key);
+        if (!next[flag]) {
+            next[flag] = {
+                type: "boolean",
+                default: true,
+                label: `Show ${field.label ?? humanizeKey(key)}`,
+            };
+        }
+    }
+    return next;
+}
+export function withSpecVisibilityValues(schema, value) {
+    const next = { ...value };
+    for (const [key, field] of Object.entries(schema)) {
+        if (field.type === "boolean" || !isSpecsField(key, field))
+            continue;
+        const flag = showFlagKey(key);
+        if (!(flag in next) || next[flag] == null)
+            next[flag] = true;
+        else
+            next[flag] = next[flag] !== false;
+    }
+    return next;
+}
+function pascalToCamel(value) {
+    return value.charAt(0).toLowerCase() + value.slice(1);
+}
+/** `showMaterial` paired with `material`, `showPrice` with `priceCents`. */
+export function visibilityToggleKey(fieldKey, schema) {
+    const flag = showFlagKey(fieldKey);
+    const candidates = [flag];
+    if (fieldKey === "priceCents")
+        candidates.push("showPrice");
+    for (const key of candidates) {
+        if (schema[key]?.type === "boolean")
+            return key;
+    }
+    if (isSpecsField(fieldKey, schema[fieldKey]))
+        return flag;
+    return null;
+}
+const GROUP_VISIBILITY = {
+    Pricing: "showPrice",
+    Inventory: "showStock",
+    Content: "showDescription",
+};
+function groupVisibilityKeyFromField(key) {
+    return Object.keys(GROUP_VISIBILITY).find((group) => GROUP_VISIBILITY[group] === key);
+}
+export function isPairedVisibilityField(key, schema) {
+    if (!/^show[A-Z]/.test(key) || schema[key]?.type !== "boolean")
+        return false;
+    if (groupVisibilityKeyFromField(key))
+        return true;
+    const target = pascalToCamel(key.slice(4));
+    if (schema[target])
+        return true;
+    return key === "showPrice" && Boolean(schema.priceCents);
+}
+/** Section-level storefront flag, e.g. Pricing → `showPrice`. */
+export function groupVisibilityKey(groupId, schema) {
+    const key = GROUP_VISIBILITY[groupId];
+    if (key && schema[key]?.type === "boolean")
+        return key;
+    return null;
+}
+/** Field-level flag, skipped when the section header already owns it. */
+export function fieldVisibilityKey(fieldKey, schema, groupId) {
+    const paired = visibilityToggleKey(fieldKey, schema);
+    if (!paired)
+        return null;
+    if (groupId && groupVisibilityKey(groupId, schema) === paired)
+        return null;
+    return paired;
+}

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

@@ -4,6 +4,8 @@ export type ConfigFormProps = {
     schema: Record<string, FieldSchema>;
     value: Record<string, unknown>;
     onSave: (value: Record<string, unknown>) => Promise<void>;
+    /** Primary submit button label. @default "Save changes" */
+    submitLabel?: string;
     /** `record` uses a dense product-style editor. */
     variant?: ConfigFormVariant;
     /** Field-keyed upload capabilities from the host resource. */

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

@@ -1 +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"}
+{"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,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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/components/resources/ResourceCreateModal.d.ts

@@ -0,0 +1,18 @@
+import type { FieldSchema, GalleryItem, ResourceUploadMeta } from "@vertebr/client";
+export type ResourceCreateModalProps = {
+    title: string;
+    schema: Record<string, FieldSchema>;
+    value: Record<string, unknown>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
+    onListGallery?: () => Promise<GalleryItem[]>;
+    onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+    onClose: () => void;
+    onCreate: (value: Record<string, unknown>) => Promise<void>;
+};
+export declare function ResourceCreateModal({ title, schema, value, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onClose, onCreate, }: ResourceCreateModalProps): import("react").JSX.Element;
+//# sourceMappingURL=ResourceCreateModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCreateModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceCreateModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,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;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,wBAAwB,+BA+D1B"}

package/dist/components/resources/ResourceCreateModal.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ConfigForm } from "../config/ConfigForm";
+export function ResourceCreateModal({ title, schema, value, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onClose, onCreate, }) {
+    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]);
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-modal-form", role: "dialog", "aria-modal": "true", "aria-label": title, 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: "New record" }), _jsx("h2", { children: title })] }), _jsx("div", { className: "vertebr-modal-actions", children: _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, "aria-label": "Close", children: "Close" }) })] }), _jsx("div", { className: "vertebr-modal-body", children: _jsx(ConfigForm, { variant: "record", schema: schema, value: value, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, submitLabel: title, onSave: async (next) => {
+                            await onCreate(next);
+                            onClose();
+                        } }) })] }) }));
+}

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

@@ -8,6 +8,8 @@ type ResourcePanelProps = {
         delete?: boolean;
     };
     actions?: Record<string, ResourceActionMeta>;
+    /** Resource label, e.g. `"Products"` → Add product. */
+    label?: string;
     uploads?: Record<string, ResourceUploadMeta>;
     rowIdKeys?: string[];
     /** Persist column visibility under this key (e.g. resource id). */
@@ -24,7 +26,7 @@ type ResourcePanelProps = {
     onListGallery?: () => Promise<GalleryItem[]>;
     onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
 };
-export declare function ResourcePanel({ schema, items, permissions, actions, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ResourcePanelProps): import("react").JSX.Element;
+export declare function ResourcePanel({ schema, items, permissions, actions, label, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }: 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

@@ -1 +1 @@
-{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,WAAW,EACX,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;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;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,EACR,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,kBAAkB,+BA+ZpB;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"}
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAOzB,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,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;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;AA0EF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAY,EACZ,KAAK,EACL,OAAO,EACP,SAA0C,EAC1C,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,kBAAkB,+BAqdpB;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

@@ -5,6 +5,7 @@ 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,8 +76,9 @@ function titleFromFilename(name) {
         .replace(/\s+/g, " ")
         .trim();
 }
-export function ResourcePanel({ schema, items, permissions, actions = {}, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
+export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, 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);
@@ -79,6 +92,7 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
     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);
@@ -191,6 +205,23 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, upload
         getCoreRowModel: getCoreRowModel(),
     });
     const editingId = editing ? resolveRowId(editing, rowIdKeys) : null;
+    const createSchema = Object.fromEntries(Object.entries(schema)
+        .filter(([, field]) => !field.readOnly || field.required)
+        .map(([key, field]) => [
+        key,
+        field.readOnly ? { ...field, readOnly: false } : field,
+    ]));
+    const createDefaults = Object.fromEntries(Object.entries(createSchema).map(([key, field]) => [
+        key,
+        field.default ??
+            (field.type === "boolean"
+                ? false
+                : field.type === "number"
+                    ? undefined
+                    : field.type === "file[]"
+                        ? []
+                        : ""),
+    ]));
     if (editing && editingId && onUpdate) {
         const editableSchema = Object.fromEntries(Object.entries(schema).filter(([, field]) => !field.readOnly));
         const title = rowTitle(editing, rowIdKeys);
@@ -215,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 })] }), toolbar, _jsx("div", { className: "vertebr-table-wrap", ref: tableWrapRef, "data-overflow": tableOverflow.overflow ? "true" : undefined, "data-overflow-left": tableOverflow.canLeft ? "true" : undefined, "data-overflow-right": tableOverflow.canRight ? "true" : undefined, children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { className: header.column.id === "_actions"
+    return (_jsxs("div", { className: "vertebr-resource-body", children: [recordsHead, toolbar, _jsx("div", { className: "vertebr-table-wrap", ref: tableWrapRef, "data-overflow": tableOverflow.overflow ? "true" : undefined, "data-overflow-left": tableOverflow.canLeft ? "true" : undefined, "data-overflow-right": tableOverflow.canRight ? "true" : undefined, children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { className: header.column.id === "_actions"
                                         ? "vertebr-col-actions"
                                         : undefined, children: header.isPlaceholder
                                         ? null
@@ -232,12 +265,15 @@ 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" }) }));
 }

package/dist/index.d.ts

@@ -17,5 +17,9 @@ export type { VertebrControlsProviderProps } from "./hooks/useVertebrControls";
 export { createVertebrClient, VERTEBR_ENV_HEADER, renderMarkdown, } from "@vertebr/client";
 export { VertebrMarkdown } from "@vertebr/client/react";
 export type { VertebrMarkdownProps } from "@vertebr/client/react";
+export { 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,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAG/E,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,cAAc,EACd,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,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

@@ -12,3 +12,5 @@ export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "
 // Re-export the framework-agnostic client for convenience.
 export { createVertebrClient, VERTEBR_ENV_HEADER, renderMarkdown, } from "@vertebr/client";
 export { VertebrMarkdown } from "@vertebr/client/react";
+export { createVertebrCatalog, catalogHref, catalogMatch, } from "@vertebr/client";
+export { VertebrCatalogProvider, useVertebrCatalog, useVertebrCatalogItem, } from "@vertebr/client/react";

package/dist/styles/form.css

@@ -84,6 +84,23 @@
   gap: 0.65rem;
 }
 
+.vertebr-form-fields[data-layout="specs"] {
+  grid-template-columns: 1fr 1fr;
+}
+
+.vertebr-form-fields[data-layout="specs"] .vertebr-field[data-span="full"] {
+  grid-column: 1 / -1;
+}
+
+.vertebr-form-fields[data-layout="specs"] .vertebr-field-head {
+  min-height: 1.55rem;
+}
+
+.vertebr-form-fields[data-layout="specs"] .vertebr-visibility-btn {
+  width: 1.85rem;
+  height: 1.85rem;
+}
+
 .vertebr-form-fields[data-layout="chips"] .vertebr-field label {
   font-family: var(--vb-mono);
   font-size: 0.7rem;
@@ -164,6 +181,10 @@
 }
 
 .vertebr-record-block-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
   font-family: var(--vb-mono);
   font-size: 0.68rem;
   font-weight: 500;
@@ -174,6 +195,40 @@
   border-bottom: 1px solid var(--vb-border);
 }
 
+.vertebr-record-block[data-storefront="off"] {
+  opacity: 0.55;
+}
+
+.vertebr-visibility-btn {
+  appearance: none;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.7rem;
+  height: 1.7rem;
+  margin: -0.25rem 0;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vb-text-subtle);
+  cursor: pointer;
+}
+
+.vertebr-visibility-btn:hover {
+  color: var(--vb-text);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-visibility-btn[aria-pressed="true"] {
+  color: var(--vb-accent);
+}
+
+.vertebr-visibility-btn[aria-pressed="false"] {
+  color: var(--vb-text-subtle);
+}
+
 .vertebr-form[data-variant="record"] .vertebr-form-fields {
   padding: 0;
   gap: 0.75rem 0.9rem;
@@ -199,6 +254,96 @@
   grid-column: 1 / -1;
 }
 
+.vertebr-field-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+  min-height: 1.4rem;
+}
+
+.vertebr-field-head label {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.vertebr-field[data-storefront="off"] {
+  opacity: 0.55;
+}
+
+.vertebr-enum-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-sm);
+  background: var(--vb-bg);
+  overflow: hidden;
+}
+
+.vertebr-enum-list-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.45rem 0.55rem;
+  border-bottom: 1px solid var(--vb-border);
+}
+
+.vertebr-enum-list-row:last-child {
+  border-bottom: 0;
+}
+
+.vertebr-enum-list-row[data-on="false"] {
+  opacity: 0.55;
+}
+
+.vertebr-enum-list-label {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+  font-size: 0.86rem;
+  font-weight: 500;
+  color: var(--vb-text);
+  cursor: pointer;
+}
+
+.vertebr-enum-list-label input {
+  width: 0.95rem;
+  height: 0.95rem;
+  accent-color: var(--vb-accent);
+}
+
+.vertebr-enum-list-move {
+  display: flex;
+  gap: 0.2rem;
+}
+
+.vertebr-enum-list-move button {
+  appearance: none;
+  width: 1.7rem;
+  height: 1.7rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 6px;
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text-muted);
+  cursor: pointer;
+}
+
+.vertebr-enum-list-move button:hover:not(:disabled) {
+  color: var(--vb-text);
+  border-color: var(--vb-border-strong);
+}
+
+.vertebr-enum-list-move button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .vertebr-field label,
 .vertebr-field > span {
   font-size: 0.78rem;