@vertebr/react 0.3.0 → 0.4.0

package/dist/components/admin/VertebrAdmin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtF,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAiCF,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BA+mBnB"}
+{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../../../src/components/admin/VertebrAdmin.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtF,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAiCF,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,eAAiC,EACjC,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BAgnBnB"}

package/dist/components/admin/VertebrAdmin.js

@@ -332,7 +332,7 @@ export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane",
                                             await client.deleteGalleryItem(id);
                                             await refreshGallery();
                                         }
-                                        : undefined })) : null, selection?.kind === "resource" && resourceData ? (_jsx(ResourcePanel, { schema: resourceData.schema, items: resourceData.items, permissions: resourceData.permissions, actions: resourceData.actions, uploads: resourceData.uploads, storageKey: resourceData.id, onUpdate: resourceData.permissions.update
+                                        : undefined })) : null, selection?.kind === "resource" && resourceData ? (_jsx(ResourcePanel, { schema: resourceData.schema, items: resourceData.items, label: resourceData.label, permissions: resourceData.permissions, actions: resourceData.actions, uploads: resourceData.uploads, storageKey: resourceData.id, onUpdate: resourceData.permissions.update
                                         ? async (rowId, value) => {
                                             await client.updateResource(resourceData.id, rowId, value);
                                             await refreshResource();

package/dist/components/config/EnumInput.d.ts

@@ -0,0 +1,10 @@
+import type { FieldSchema } from "@vertebr/client";
+export type EnumInputProps = {
+    id: string;
+    value: unknown;
+    field: FieldSchema;
+    readOnly?: boolean;
+    onChange: (value: string) => void;
+};
+export declare function EnumInput({ id, value, field, readOnly, onChange, }: EnumInputProps): import("react").JSX.Element;
+//# sourceMappingURL=EnumInput.d.ts.map

package/dist/components/config/EnumInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/EnumInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,+BAmDhB"}

package/dist/components/config/EnumInput.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Select from "@radix-ui/react-select";
+import { optionLabel } from "./form/helpers/labels";
+export function EnumInput({ id, value, field, readOnly, onChange, }) {
+    const options = field.options?.filter(Boolean) ?? [];
+    const current = typeof value === "string" && options.includes(value)
+        ? value
+        : (options[0] ?? "");
+    if (options.length === 0) {
+        return (_jsx("input", { id: id, type: "text", readOnly: readOnly, value: current, disabled: true }));
+    }
+    return (_jsxs(Select.Root, { value: current, onValueChange: onChange, disabled: readOnly, children: [_jsxs(Select.Trigger, { id: id, className: "vertebr-select-trigger", children: [_jsx("span", { className: "vertebr-select-value", children: _jsx(Select.Value, { children: optionLabel(current, field) }) }), _jsx(Select.Icon, { className: "vertebr-select-icon", children: _jsx(ChevronIcon, {}) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: "vertebr-select-content", position: "popper", sideOffset: 6, children: _jsx(Select.Viewport, { className: "vertebr-select-viewport", children: options.map((option) => (_jsxs(Select.Item, { value: option, className: "vertebr-select-item", children: [_jsx(Select.ItemText, { children: optionLabel(option, field) }), _jsx(Select.ItemIndicator, { className: "vertebr-select-check", children: _jsx(CheckIcon, {}) })] }, option))) }) }) })] }));
+}
+function ChevronIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function CheckIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 6.2 5 8.7 9.5 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/components/config/EnumListInput.d.ts

@@ -0,0 +1,10 @@
+import type { FieldSchema } from "@vertebr/client";
+export type EnumListInputProps = {
+    id: string;
+    value: unknown;
+    field: FieldSchema;
+    readOnly?: boolean;
+    onChange: (value: string[]) => void;
+};
+export declare function EnumListInput({ id, value, field, readOnly, onChange, }: EnumListInputProps): import("react").JSX.Element;
+//# sourceMappingURL=EnumListInput.d.ts.map

package/dist/components/config/EnumListInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnumListInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/EnumListInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC,CAAC;AAiBF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAiEpB"}

package/dist/components/config/EnumListInput.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { optionLabel } from "./form/helpers/labels";
+function asStringList(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.map((item) => String(item).trim()).filter(Boolean);
+}
+function orderedRows(options, selected) {
+    const known = new Set(options);
+    const picked = selected.filter((id) => known.has(id));
+    const rest = options.filter((id) => !picked.includes(id));
+    return [
+        ...picked.map((id) => ({ id, on: true })),
+        ...rest.map((id) => ({ id, on: false })),
+    ];
+}
+export function EnumListInput({ id, value, field, readOnly, onChange, }) {
+    const options = field.options?.filter(Boolean) ?? [];
+    const selected = asStringList(value);
+    const rows = orderedRows(options, selected);
+    const commit = (nextRows) => {
+        onChange(nextRows.filter((row) => row.on).map((row) => row.id));
+    };
+    return (_jsx("ul", { id: id, className: "vertebr-enum-list", children: rows.map((row, index) => (_jsxs("li", { className: "vertebr-enum-list-row", "data-on": row.on, children: [_jsxs("label", { className: "vertebr-enum-list-label", children: [_jsx("input", { type: "checkbox", checked: row.on, disabled: readOnly, onChange: (event) => {
+                                const next = rows.map((item) => item.id === row.id
+                                    ? { ...item, on: event.target.checked }
+                                    : item);
+                                commit(next);
+                            } }), _jsx("span", { children: optionLabel(row.id, field) })] }), _jsxs("div", { className: "vertebr-enum-list-move", children: [_jsx("button", { type: "button", "aria-label": `Move ${optionLabel(row.id, field)} up`, disabled: readOnly || index === 0, onClick: () => {
+                                if (index === 0)
+                                    return;
+                                const next = [...rows];
+                                const current = next[index];
+                                next[index] = next[index - 1];
+                                next[index - 1] = current;
+                                commit(next);
+                            }, children: "\u2191" }), _jsx("button", { type: "button", "aria-label": `Move ${optionLabel(row.id, field)} down`, disabled: readOnly || index === rows.length - 1, onClick: () => {
+                                if (index >= rows.length - 1)
+                                    return;
+                                const next = [...rows];
+                                const current = next[index];
+                                next[index] = next[index + 1];
+                                next[index + 1] = current;
+                                commit(next);
+                            }, children: "\u2193" })] })] }, row.id))) }));
+}

package/dist/components/config/VisibilityEye.d.ts

@@ -0,0 +1,8 @@
+import type { UseFormReturn } from "react-hook-form";
+export type VisibilityEyeButtonProps = {
+    name: string;
+    label: string;
+    form: UseFormReturn<Record<string, unknown>>;
+};
+export declare function VisibilityEyeButton({ name, label, form, }: VisibilityEyeButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=VisibilityEye.d.ts.map

package/dist/components/config/VisibilityEye.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisibilityEye.d.ts","sourceRoot":"","sources":["../../../src/components/config/VisibilityEye.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAC9C,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,IAAI,GACL,EAAE,wBAAwB,+BA0B1B"}

package/dist/components/config/VisibilityEye.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+export function VisibilityEyeButton({ name, label, form, }) {
+    const visible = form.watch(name) !== false;
+    useEffect(() => {
+        form.register(name);
+    }, [form, name]);
+    return (_jsx("button", { type: "button", className: "vertebr-visibility-btn", "aria-pressed": visible, "aria-label": visible ? `Hide ${label} on storefront` : `Show ${label} on storefront`, title: visible ? "Visible on storefront" : "Hidden on storefront", onClick: () => form.setValue(name, !visible, {
+            shouldDirty: true,
+            shouldTouch: true,
+        }), children: visible ? _jsx(EyeIcon, {}) : _jsx(EyeOffIcon, {}) }));
+}
+function EyeIcon() {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+}
+function EyeOffIcon() {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }), _jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }), _jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }), _jsx("path", { d: "m2 2 20 20" })] }));
+}

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

@@ -16,6 +16,7 @@ export type ConfigFieldProps = GalleryHandlers & {
     }>>;
     hideImagePreview?: boolean;
     hideUpload?: boolean;
+    visibilityGroup?: string;
 };
-export declare function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, hideImagePreview, hideUpload, }: ConfigFieldProps): import("react").JSX.Element;
+export declare function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, hideImagePreview, hideUpload, visibilityGroup, }: ConfigFieldProps): import("react").JSX.Element;
 //# sourceMappingURL=ConfigField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAYvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,UAAU,GACX,EAAE,gBAAgB,+BA0LlB"}
+{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAoBvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,eAAe,GAChB,EAAE,gBAAgB,+BA8OlB"}

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

@@ -2,15 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import * as Label from "@radix-ui/react-label";
 import * as Switch from "@radix-ui/react-switch";
+import { VisibilityEyeButton } from "../VisibilityEye";
 import { isDescriptionField } from "../../../lib/description";
 import { collectRecordImages, isImageField, urlsFromValue, } from "../../../lib/images";
 import { isCentsField, isPriceField } from "../../../lib/price";
 import { ImageUploadControl } from "../../resources/ImageUploadControl";
 import { DescriptionInput } from "../DescriptionInput";
+import { EnumInput } from "../EnumInput";
+import { EnumListInput } from "../EnumListInput";
 import { PriceInput } from "../PriceInput";
-import { displayLabel, firstImageUrl, spanFor } from "./helpers";
-export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, hideImagePreview, hideUpload, }) {
+import { displayLabel, firstImageUrl, isMultilineField, fieldVisibilityKey, spanFor, } from "./helpers";
+export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, hideImagePreview, hideUpload, visibilityGroup, }) {
     const label = displayLabel(fieldKey, field, groupLabel);
+    const visibilityKey = fieldVisibilityKey(fieldKey, schema, visibilityGroup ?? groupLabel);
+    const visibilityOn = !visibilityKey || watched?.[visibilityKey] !== false;
     const showInlinePreview = !hideImagePreview &&
         field.type !== "file[]" &&
         isImageField(fieldKey, field) &&
@@ -18,7 +23,7 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
     if (field.type === "boolean") {
         return (_jsxs("div", { className: "vertebr-switch-row", children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), _jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(Switch.Root, { className: "vertebr-switch", id: fieldKey, checked: Boolean(controllerField.value), onCheckedChange: controllerField.onChange, children: _jsx(Switch.Thumb, { className: "vertebr-switch-thumb" }) })) })] }));
     }
-    return (_jsxs("div", { className: "vertebr-field", "data-span": spanFor(fieldKey, field, variant), "data-kind": isImageField(fieldKey, field) ? "image" : undefined, children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), showInlinePreview ? (_jsxs("div", { className: "vertebr-field-media", children: [_jsx("img", { src: firstImageUrl(watched[fieldKey]) ?? "", alt: "" }), _jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })] })) : field.type === "richtext" || isDescriptionField(fieldKey, field) ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(DescriptionInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: typeof controllerField.value === "string"
+    return (_jsxs("div", { className: "vertebr-field", "data-span": spanFor(fieldKey, field, variant), "data-kind": isImageField(fieldKey, field) ? "image" : undefined, "data-storefront": visibilityKey ? (visibilityOn ? "on" : "off") : undefined, children: [_jsxs("div", { className: "vertebr-field-head", children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), visibilityKey ? (_jsx(VisibilityEyeButton, { name: visibilityKey, label: label, form: form })) : null] }), showInlinePreview ? (_jsxs("div", { className: "vertebr-field-media", children: [_jsx("img", { src: firstImageUrl(watched[fieldKey]) ?? "", alt: "" }), _jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })] })) : field.type === "richtext" || isDescriptionField(fieldKey, field) ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(DescriptionInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: typeof controllerField.value === "string"
                         ? controllerField.value
                         : "", readOnly: field.readOnly, recordImages: collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onBlur: controllerField.onBlur, onChange: controllerField.onChange })) })) : field.type === "file[]" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => {
                     const urls = urlsFromValue(controllerField.value);
@@ -29,7 +34,7 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
                         : "", onBlur: controllerField.onBlur, onChange: (event) => {
                         const next = event.target.value;
                         controllerField.onChange(next === "" ? undefined : Number(next));
-                    }, name: controllerField.name, ref: controllerField.ref })) })) : (_jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })), !hideUpload && uploads?.[fieldKey] && onUpload && !field.readOnly ? (_jsx(ImageUploadControl, { meta: uploads[fieldKey], multiple: field.type === "file[]", onUpload: async (files) => {
+                    }, name: controllerField.name, ref: controllerField.ref })) })) : field.type === "enum" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(EnumInput, { id: fieldKey, value: controllerField.value, field: field, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : field.type === "enum[]" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(EnumListInput, { id: fieldKey, value: controllerField.value, field: field, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : isMultilineField(fieldKey, field) ? (_jsx("textarea", { id: fieldKey, rows: 5, readOnly: field.readOnly, ...form.register(fieldKey) })) : (_jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })), !hideUpload && uploads?.[fieldKey] && onUpload && !field.readOnly ? (_jsx(ImageUploadControl, { meta: uploads[fieldKey], multiple: field.type === "file[]", onUpload: async (files) => {
                     const uploaded = await onUpload(fieldKey, files);
                     const urls = uploaded
                         .map((item) => item.url)

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

@@ -1,4 +1,4 @@
 import type { ConfigFormProps } from "./types";
 export type { ConfigFormProps, ConfigFormVariant } from "./types";
-export declare function ConfigForm({ schema, value, onSave, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ConfigFormProps): import("react").JSX.Element;
+export declare function ConfigForm({ schema, value, onSave, submitLabel, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ConfigFormProps): import("react").JSX.Element;
 //# sourceMappingURL=ConfigForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigForm.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,eAAe,+BA0EjB"}
+{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigForm.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAkB,EAClB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,eAAe,+BAyFjB"}

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

@@ -2,22 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useForm, useWatch } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { buildZodSchema, groupFields } from "./helpers";
+import { buildZodSchema, groupFields, withSpecVisibility, withSpecVisibilityValues, } from "./helpers";
 import { RecordConfigForm } from "./RecordConfigForm";
 import { SettingsConfigForm } from "./SettingsConfigForm";
-export function ConfigForm({ schema, value, onSave, variant = "config", uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
-    const zodSchema = useMemo(() => buildZodSchema(schema), [schema]);
-    const groups = useMemo(() => groupFields(schema, variant), [schema, variant]);
+export function ConfigForm({ schema, value, onSave, submitLabel, variant = "config", uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
+    const editorSchema = useMemo(() => (variant === "record" ? withSpecVisibility(schema) : schema), [schema, variant]);
+    const editorValue = useMemo(() => variant === "record"
+        ? withSpecVisibilityValues(editorSchema, value)
+        : value, [editorSchema, value, variant]);
+    const zodSchema = useMemo(() => buildZodSchema(editorSchema), [editorSchema]);
+    const groups = useMemo(() => groupFields(editorSchema, variant), [editorSchema, variant]);
     const [status, setStatus] = useState(null);
     const [tone, setTone] = useState();
     const form = useForm({
         resolver: zodResolver(zodSchema),
-        defaultValues: value,
+        defaultValues: editorValue,
     });
     const watched = useWatch({ control: form.control });
     useEffect(() => {
-        form.reset(value);
-    }, [value, form]);
+        form.reset(editorValue);
+    }, [editorValue, form]);
     const onSubmit = form.handleSubmit(async (data) => {
         setStatus("Saving…");
         setTone(undefined);
@@ -43,12 +47,12 @@ export function ConfigForm({ schema, value, onSave, variant = "config", uploads,
         return () => window.removeEventListener("keydown", onKeyDown);
     }, [onSubmit]);
     const onDiscard = () => {
-        form.reset(value);
+        form.reset(editorValue);
         setStatus(null);
         setTone(undefined);
     };
     const shared = {
-        schema,
+        schema: editorSchema,
         groups,
         watched,
         form,
@@ -62,6 +66,7 @@ export function ConfigForm({ schema, value, onSave, variant = "config", uploads,
         status,
         tone,
         onDiscard,
+        submitLabel,
     };
     if (variant === "record") {
         return _jsx(RecordConfigForm, { ...shared });

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

@@ -5,6 +5,7 @@ export type ConfigFormActionsProps = {
     status: string | null;
     tone?: "ok" | "danger";
     onDiscard: () => void;
+    submitLabel?: string;
 };
-export declare function ConfigFormActions({ form, isDirty, status, tone, onDiscard, }: ConfigFormActionsProps): import("react").JSX.Element;
+export declare function ConfigFormActions({ form, isDirty, status, tone, onDiscard, submitLabel, }: ConfigFormActionsProps): import("react").JSX.Element;
 //# sourceMappingURL=ConfigFormActions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigFormActions.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigFormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,+BA0BxB"}
+{"version":3,"file":"ConfigFormActions.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigFormActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAA4B,GAC7B,EAAE,sBAAsB,+BA0BxB"}

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ConfigFormActions({ form, isDirty, status, tone, onDiscard, }) {
-    return (_jsxs("div", { className: "vertebr-actions", children: [_jsx("button", { className: "vertebr-btn vertebr-btn-primary", type: "submit", disabled: form.formState.isSubmitting || !isDirty, children: form.formState.isSubmitting ? "Saving…" : "Save changes" }), isDirty ? (_jsx("button", { className: "vertebr-btn", type: "button", onClick: onDiscard, children: "Discard" })) : null, isDirty ? (_jsx("span", { className: "vertebr-dirty", children: "Unsaved" })) : status ? (_jsx("span", { className: "vertebr-status", "data-tone": tone, children: status })) : null, _jsx("span", { className: "vertebr-actions-spacer" }), _jsx("span", { className: "vertebr-kbd", children: "\u2318S" })] }));
+export function ConfigFormActions({ form, isDirty, status, tone, onDiscard, submitLabel = "Save changes", }) {
+    return (_jsxs("div", { className: "vertebr-actions", children: [_jsx("button", { className: "vertebr-btn vertebr-btn-primary", type: "submit", disabled: form.formState.isSubmitting || !isDirty, children: form.formState.isSubmitting ? "Saving…" : submitLabel }), isDirty ? (_jsx("button", { className: "vertebr-btn", type: "button", onClick: onDiscard, children: "Discard" })) : null, isDirty ? (_jsx("span", { className: "vertebr-dirty", children: "Unsaved" })) : status ? (_jsx("span", { className: "vertebr-status", "data-tone": tone, children: status })) : null, _jsx("span", { className: "vertebr-actions-spacer" }), _jsx("span", { className: "vertebr-kbd", children: "\u2318S" })] }));
 }

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

@@ -16,6 +16,7 @@ export type RecordConfigFormProps = GalleryHandlers & {
     status: string | null;
     tone?: "ok" | "danger";
     onDiscard: () => void;
+    submitLabel?: string;
 };
-export declare function RecordConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }: RecordConfigFormProps): import("react").JSX.Element;
+export declare function RecordConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, submitLabel, }: RecordConfigFormProps): import("react").JSX.Element;
 //# sourceMappingURL=RecordConfigForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RecordConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/RecordConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAUvE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IACpD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,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,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,GACV,EAAE,qBAAqB,+BA4HvB"}
+{"version":3,"file":"RecordConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/RecordConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAYvE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IACpD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,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,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,GACZ,EAAE,qBAAqB,+BAoJvB"}

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

@@ -3,12 +3,13 @@ import { looksLikeUrl } from "../../../lib/images";
 import { ImageUploadControl } from "../../resources/ImageUploadControl";
 import { ConfigField } from "./ConfigField";
 import { ConfigFormActions } from "./ConfigFormActions";
-import { findPrimaryImageKey, firstImageUrl, isStockField, } from "./helpers";
-export function RecordConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }) {
+import { VisibilityEyeButton } from "../VisibilityEye";
+import { findPrimaryImageKey, firstImageUrl, groupVisibilityKey, isStockField, } from "./helpers";
+export function RecordConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, submitLabel, }) {
     const imageKey = findPrimaryImageKey(schema, watched);
     const imageValue = imageKey ? firstImageUrl(watched?.[imageKey]) ?? "" : "";
-    const asideGroups = groups.filter((group) => /^(Media|Status)$/i.test(group.id));
-    const mainGroups = groups.filter((group) => !/^(Media|Status)$/i.test(group.id));
+    const asideGroups = groups.filter((group) => /^(Media|Display|Status)$/i.test(group.id));
+    const mainGroups = groups.filter((group) => !/^(Media|Display|Status)$/i.test(group.id));
     const fieldProps = {
         variant: "record",
         schema,
@@ -28,10 +29,17 @@ export function RecordConfigForm({ schema, groups, watched, form, uploads, onUpl
                                                 shouldTouch: true,
                                             });
                                         }
-                                    } })) : null, asideGroups.map((group) => (_jsxs("div", { className: "vertebr-record-block", "data-layout": /^inventory$/i.test(group.id) ? "chips" : undefined, children: [_jsx("div", { className: "vertebr-record-block-label", children: group.label }), _jsx("div", { className: "vertebr-form-fields", "data-layout": isStockField(group.fields[0]?.[0] ?? "", group.fields[0]?.[1])
+                                    } })) : null, asideGroups.map((group) => (_jsxs("div", { className: "vertebr-record-block", "data-layout": /^inventory$/i.test(group.id) ? "chips" : undefined, children: [_jsx(RecordBlockLabel, { groupId: group.id, label: group.label, schema: schema, form: form }), _jsx("div", { className: "vertebr-form-fields", "data-layout": isStockField(group.fields[0]?.[0] ?? "", group.fields[0]?.[1])
                                                 ? "chips"
-                                                : undefined, children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, hideImagePreview: true, hideUpload: key === imageKey, ...fieldProps }, key))) })] }, group.id)))] }), _jsx("div", { className: "vertebr-record-main", children: mainGroups.map((group) => {
+                                                : undefined, children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, visibilityGroup: group.id, hideImagePreview: true, hideUpload: key === imageKey, ...fieldProps }, key))) })] }, group.id)))] }), _jsx("div", { className: "vertebr-record-main", children: mainGroups.map((group) => {
                                 const inventory = /^inventory$/i.test(group.id);
-                                return (_jsxs("div", { className: "vertebr-record-block", "data-layout": inventory ? "chips" : undefined, children: [_jsx("div", { className: "vertebr-record-block-label", children: group.label }), _jsx("div", { className: "vertebr-form-fields", "data-layout": inventory ? "chips" : undefined, children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, ...fieldProps }, key))) })] }, group.id));
-                            }) })] }) }), _jsx(ConfigFormActions, { form: form, isDirty: isDirty, status: status, tone: tone, onDiscard: onDiscard })] }));
+                                const specs = /^specs$/i.test(group.id);
+                                const sectionKey = groupVisibilityKey(group.id, schema);
+                                const sectionOn = !sectionKey || watched?.[sectionKey] !== false;
+                                return (_jsxs("div", { className: "vertebr-record-block", "data-layout": inventory ? "chips" : specs ? "specs" : undefined, "data-storefront": sectionKey ? (sectionOn ? "on" : "off") : undefined, children: [_jsx(RecordBlockLabel, { groupId: group.id, label: group.label, schema: schema, form: form }), _jsx("div", { className: "vertebr-form-fields", "data-layout": inventory ? "chips" : specs ? "specs" : undefined, children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, visibilityGroup: group.id, ...fieldProps }, key))) })] }, group.id));
+                            }) })] }) }), _jsx(ConfigFormActions, { form: form, isDirty: isDirty, status: status, tone: tone, onDiscard: onDiscard, submitLabel: submitLabel })] }));
+}
+function RecordBlockLabel({ groupId, label, schema, form, }) {
+    const visibilityKey = groupVisibilityKey(groupId, schema);
+    return (_jsxs("div", { className: "vertebr-record-block-label", children: [_jsx("span", { children: label }), visibilityKey ? (_jsx(VisibilityEyeButton, { name: visibilityKey, label: label, form: form })) : null] }));
 }

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

@@ -16,6 +16,7 @@ export type SettingsConfigFormProps = GalleryHandlers & {
     status: string | null;
     tone?: "ok" | "danger";
     onDiscard: () => void;
+    submitLabel?: string;
 };
-export declare function SettingsConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }: SettingsConfigFormProps): import("react").JSX.Element;
+export declare function SettingsConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, submitLabel, }: SettingsConfigFormProps): import("react").JSX.Element;
 //# sourceMappingURL=SettingsConfigForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/SettingsConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,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,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,GACV,EAAE,uBAAuB,+BAmDzB"}
+{"version":3,"file":"SettingsConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/SettingsConfigForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,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,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,GACZ,EAAE,uBAAuB,+BAoDzB"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ConfigField } from "./ConfigField";
 import { ConfigFormActions } from "./ConfigFormActions";
-export function SettingsConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, }) {
+export function SettingsConfigForm({ schema, groups, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, onSubmit, isDirty, status, tone, onDiscard, submitLabel, }) {
     const singleGroup = groups.length === 1;
-    return (_jsxs("form", { className: "vertebr-form", "data-variant": "config", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: groups.map((group) => (_jsxs("div", { className: "vertebr-form-section", "data-plain": singleGroup ? "true" : undefined, children: [!singleGroup ? (_jsxs("div", { className: "vertebr-form-section-head", children: [_jsx("h3", { children: group.label }), _jsx("span", { className: "vertebr-form-section-count", children: group.fields.length })] })) : null, _jsx("div", { className: "vertebr-form-fields", children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, variant: "config", schema: schema, watched: watched, form: form, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery }, key))) })] }, group.id))) }), _jsx(ConfigFormActions, { form: form, isDirty: isDirty, status: status, tone: tone, onDiscard: onDiscard })] }));
+    return (_jsxs("form", { className: "vertebr-form", "data-variant": "config", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: groups.map((group) => (_jsxs("div", { className: "vertebr-form-section", "data-plain": singleGroup ? "true" : undefined, children: [!singleGroup ? (_jsxs("div", { className: "vertebr-form-section-head", children: [_jsx("h3", { children: group.label }), _jsx("span", { className: "vertebr-form-section-count", children: group.fields.length })] })) : null, _jsx("div", { className: "vertebr-form-fields", children: group.fields.map(([key, field]) => (_jsx(ConfigField, { fieldKey: key, field: field, groupLabel: group.label, variant: "config", schema: schema, watched: watched, form: form, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery }, key))) })] }, group.id))) }), _jsx(ConfigFormActions, { form: form, isDirty: isDirty, status: status, tone: tone, onDiscard: onDiscard, submitLabel: submitLabel })] }));
 }

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

@@ -0,0 +1,7 @@
+import type { FieldSchema } from "@vertebr/client";
+import type { ConfigFormVariant } from "../types";
+export declare function isStockField(key: string, field?: FieldSchema): boolean;
+export declare function isSpecsField(key: string, field?: FieldSchema): boolean;
+export declare function isMultilineField(key: string, field?: FieldSchema): boolean;
+export declare function spanFor(key: string, field: FieldSchema, variant: ConfigFormVariant): "wide" | "full" | undefined;
+//# sourceMappingURL=fields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/fields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAGtE;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAKtE;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,OAAO,CAG1E;AAED,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,iBAAiB,GACzB,MAAM,GAAG,MAAM,GAAG,SAAS,CAO7B"}

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

@@ -0,0 +1,31 @@
+import { isDescriptionField } from "../../../../lib/description";
+import { isImageField } from "../../../../lib/images";
+export function isStockField(key, field) {
+    const hay = `${key} ${field?.label ?? ""}`;
+    return /(stock|inventory|qty|quantity)/i.test(hay);
+}
+export function isSpecsField(key, field) {
+    if (/^show[A-Z]/.test(key))
+        return false;
+    if (/^specs$/i.test(field?.group ?? ""))
+        return true;
+    const hay = `${key} ${field?.label ?? ""}`;
+    return /(material|fit|care|fabric|composition|^details$)/i.test(hay);
+}
+export function isMultilineField(key, field) {
+    const hay = `${key} ${field?.label ?? ""}`;
+    return /(detail|notes|bio|bullets)/i.test(hay);
+}
+export function spanFor(key, field, variant) {
+    if (field.type === "boolean")
+        return "full";
+    if (field.type === "enum[]")
+        return "full";
+    if (field.type === "richtext" || isDescriptionField(key, field))
+        return "full";
+    if (isMultilineField(key, field))
+        return "full";
+    if (variant === "record" && isImageField(key, field))
+        return "full";
+    return undefined;
+}

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

@@ -0,0 +1,4 @@
+import type { FieldSchema } from "@vertebr/client";
+import type { ConfigFormVariant, FieldGroup } from "../types";
+export declare function groupFields(schema: Record<string, FieldSchema>, variant: ConfigFormVariant): FieldGroup[];
+//# sourceMappingURL=groups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/groups.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EACV,iBAAiB,EAEjB,UAAU,EACX,MAAM,UAAU,CAAC;AA4ElB,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,OAAO,EAAE,iBAAiB,GACzB,UAAU,EAAE,CA6Cd"}

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

@@ -0,0 +1,107 @@
+import { isSpecsField } from "./fields";
+import { humanizeKey } from "./labels";
+import { isPairedVisibilityField } from "./visibility";
+const RECORD_GROUP_ORDER = [
+    "Details",
+    "Content",
+    "Specs",
+    "Pricing",
+    "Inventory",
+    "Media",
+    "Display",
+    "Status",
+];
+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 (/^display$/i.test(field.group ?? "") || /^show[A-Z]/.test(key)) {
+        return "Display";
+    }
+    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";
+    }
+    if (isSpecsField(key, field)) {
+        return "Specs";
+    }
+    return "Details";
+}
+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;
+        if (isPairedVisibilityField(key, schema))
+            continue;
+        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);
+}

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

@@ -0,0 +1,4 @@
+import type { FieldSchema } from "@vertebr/client";
+export declare function firstImageUrl(value: unknown): string | null;
+export declare function findPrimaryImageKey(schema: Record<string, FieldSchema>, values: Record<string, unknown> | undefined): string | null;
+//# sourceMappingURL=images.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../../../src/components/config/form/helpers/images.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAU3D;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,EACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAC1C,MAAM,GAAG,IAAI,CASf"}