@vertebr/react 0.2.0 → 0.4.0

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/ImagePickerModal.d.ts

@@ -0,0 +1,18 @@
+import type { GalleryItem, ResourceUploadMeta } from "@vertebr/client";
+import type { RecordImage } from "../../lib/images";
+export type PickerImage = {
+    id: string;
+    url: string;
+    name: string;
+    source: "record" | "gallery" | "url";
+};
+export type ImagePickerModalProps = {
+    recordImages?: RecordImage[];
+    galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
+    onListGallery?: () => Promise<GalleryItem[]>;
+    onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+    onClose: () => void;
+    onInsert: (images: PickerImage[]) => void;
+};
+export declare function ImagePickerModal({ recordImages, galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, }: ImagePickerModalProps): import("react").JSX.Element;
+//# sourceMappingURL=ImagePickerModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/config/ImagePickerModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,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,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAIF,wBAAgB,gBAAgB,CAAC,EAC/B,YAAiB,EACjB,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,qBAAqB,+BA4PvB"}

package/dist/components/config/ImagePickerModal.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ImageUploadControl } from "../resources/ImageUploadControl";
+export function ImagePickerModal({ recordImages = [], galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, }) {
+    const hasGallery = Boolean(onListGallery);
+    const [tab, setTab] = useState(recordImages.length ? "record" : "gallery");
+    const [gallery, setGallery] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selected, setSelected] = useState({});
+    const [url, setUrl] = useState("");
+    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]);
+    useEffect(() => {
+        if (!hasGallery)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        void onListGallery()
+            .then((items) => {
+            if (!cancelled)
+                setGallery(items);
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setError(err instanceof Error ? err.message : "Could not load gallery");
+            }
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [hasGallery, onListGallery]);
+    const recordTiles = useMemo(() => recordImages.map((image) => ({
+        id: `record:${image.id}`,
+        url: image.url,
+        name: image.name,
+        source: "record",
+    })), [recordImages]);
+    const galleryTiles = useMemo(() => gallery.map((item) => ({
+        id: `gallery:${item.id}`,
+        url: item.url,
+        name: item.name ?? item.id,
+        source: "gallery",
+    })), [gallery]);
+    const tiles = tab === "record" ? recordTiles : galleryTiles;
+    const picked = Object.values(selected);
+    const canGalleryUpload = Boolean(galleryUpload && onUploadGallery);
+    const toggle = (image) => {
+        setSelected((current) => {
+            const next = { ...current };
+            if (next[image.id])
+                delete next[image.id];
+            else
+                next[image.id] = image;
+            return next;
+        });
+    };
+    const addUrl = () => {
+        const href = url.trim();
+        if (!href)
+            return;
+        const image = {
+            id: `url:${href}`,
+            url: href,
+            name: "Image",
+            source: "url",
+        };
+        setSelected((current) => ({ ...current, [image.id]: image }));
+        setUrl("");
+    };
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal", role: "dialog", "aria-modal": "true", "aria-label": "Insert images", onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Media" }), _jsx("h2", { children: "Insert images" })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, children: "Close" })] }), _jsxs("div", { className: "vertebr-modal-body vertebr-picker-body", children: [recordImages.length > 0 && hasGallery ? (_jsxs("div", { className: "vertebr-picker-tabs", role: "tablist", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "record", "data-active": tab === "record" || undefined, onClick: () => setTab("record"), children: ["Product photos", _jsx("span", { children: recordTiles.length })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "gallery", "data-active": tab === "gallery" || undefined, onClick: () => setTab("gallery"), children: ["Gallery", _jsx("span", { children: loading ? "…" : galleryTiles.length })] })] })) : null, tab === "gallery" && canGalleryUpload ? (_jsx(ImageUploadControl, { meta: {
+                                field: "gallery",
+                                accept: galleryUpload.accept,
+                                maxBytes: galleryUpload.maxBytes,
+                            }, multiple: true, label: "Drop images to add them to the gallery", onUpload: async (files) => {
+                                const items = await onUploadGallery(files);
+                                setGallery((current) => [...items, ...current]);
+                                setSelected((current) => {
+                                    const next = { ...current };
+                                    for (const item of items) {
+                                        const image = {
+                                            id: `gallery:${item.id}`,
+                                            url: item.url,
+                                            name: item.name ?? item.id,
+                                            source: "gallery",
+                                        };
+                                        next[image.id] = image;
+                                    }
+                                    return next;
+                                });
+                            } })) : null, _jsxs("label", { className: "vertebr-field", children: [_jsx("span", { children: "Or paste an image URL" }), _jsxs("div", { className: "vertebr-picker-url", children: [_jsx("input", { type: "url", value: url, placeholder: "https://", onChange: (event) => setUrl(event.target.value), onKeyDown: (event) => {
+                                                if (event.key === "Enter") {
+                                                    event.preventDefault();
+                                                    addUrl();
+                                                }
+                                            } }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: !url.trim(), onClick: addUrl, children: "Add" })] })] }), error ? (_jsx("p", { className: "vertebr-status", "data-tone": "danger", children: error })) : null, loading && tab === "gallery" ? (_jsx("div", { className: "vertebr-empty", children: "Loading gallery\u2026" })) : tiles.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: tab === "record"
+                                ? "No product photos on this record yet."
+                                : hasGallery
+                                    ? "No images in the gallery yet."
+                                    : "No gallery is configured. Paste a URL or add product photos." })) : (_jsx("div", { className: "vertebr-picker-grid", children: tiles.map((image) => {
+                                const active = Boolean(selected[image.id]);
+                                return (_jsxs("button", { type: "button", className: "vertebr-picker-tile", "data-selected": active || undefined, onClick: () => toggle(image), children: [_jsx("span", { className: "vertebr-picker-thumb", children: _jsx("img", { src: image.url, alt: "" }) }), _jsx("span", { className: "vertebr-picker-name", children: image.name })] }, image.id));
+                            }) }))] }), _jsxs("footer", { className: "vertebr-picker-foot", children: [_jsxs("span", { className: "vertebr-picker-count", children: [picked.length, " selected"] }), _jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: picked.length === 0, onClick: () => onInsert(picked), children: ["Insert ", picked.length || "", picked.length === 1 ? " image" : " images"] })] })] }) }));
+}

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

@@ -0,0 +1,12 @@
+export type PriceInputProps = {
+    id: string;
+    name?: string;
+    value: unknown;
+    asCents?: boolean;
+    readOnly?: boolean;
+    onBlur?: () => void;
+    onChange: (next: number | undefined) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+export declare function PriceInput({ id, name, value, asCents, readOnly, onBlur, onChange, inputRef, }: PriceInputProps): import("react").JSX.Element;
+//# sourceMappingURL=PriceInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/PriceInput.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACxC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAc,EACd,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,+BAwCjB"}

package/dist/components/config/PriceInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { formatPrice, formatPriceInput, parsePriceInput, } from "../../lib/price";
+export function PriceInput({ id, name, value, asCents = true, readOnly, onBlur, onChange, inputRef, }) {
+    const [draft, setDraft] = useState(() => formatPriceInput(value, asCents));
+    useEffect(() => {
+        setDraft(formatPriceInput(value, asCents));
+    }, [value, asCents]);
+    const preview = typeof value === "number" && Number.isFinite(value)
+        ? formatPrice(value, { asCents })
+        : null;
+    return (_jsxs("div", { className: "vertebr-field-money", children: [_jsx("span", { className: "vertebr-field-money-prefix", "aria-hidden": "true", children: "$" }), _jsx("input", { id: id, name: name, ref: inputRef, type: "text", inputMode: "decimal", autoComplete: "off", readOnly: readOnly, value: draft, placeholder: "0.00", "aria-label": preview ? `Price ${preview}` : "Price", onChange: (event) => {
+                    const next = event.target.value;
+                    setDraft(next);
+                    onChange(parsePriceInput(next, asCents));
+                }, onBlur: () => {
+                    setDraft(formatPriceInput(value, asCents));
+                    onBlur?.();
+                } })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type UseFormReturn } from "react-hook-form";
+import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
+import type { ConfigFormVariant, GalleryHandlers } from "./types";
+export type ConfigFieldProps = GalleryHandlers & {
+    fieldKey: string;
+    field: FieldSchema;
+    groupLabel: string;
+    variant: ConfigFormVariant;
+    schema: Record<string, FieldSchema>;
+    watched: Record<string, unknown>;
+    form: UseFormReturn<Record<string, unknown>>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    hideImagePreview?: boolean;
+    hideUpload?: boolean;
+    visibilityGroup?: string;
+};
+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

@@ -0,0 +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;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

@@ -0,0 +1,53 @@
+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, 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) &&
+        Boolean(firstImageUrl(watched?.[fieldKey]));
+    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, "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);
+                    return (_jsx("div", { className: "vertebr-field-files", children: urls.length > 0 ? (_jsx("ul", { className: "vertebr-field-files-list", children: urls.map((url) => (_jsxs("li", { children: [_jsx("img", { src: url, alt: "" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => controllerField.onChange(urls.filter((item) => item !== url)), children: "Remove" })] }, url))) })) : (_jsx("p", { className: "vertebr-field-files-empty", children: "No photos yet" })) }));
+                } })) : field.type === "number" && isPriceField(fieldKey, field) ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(PriceInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: controllerField.value, asCents: isCentsField(fieldKey, field) || /^pricing$/i.test(groupLabel), readOnly: field.readOnly, onBlur: controllerField.onBlur, onChange: controllerField.onChange })) })) : field.type === "number" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx("input", { id: fieldKey, type: "number", readOnly: field.readOnly, value: typeof controllerField.value === "number" &&
+                        Number.isFinite(controllerField.value)
+                        ? controllerField.value
+                        : "", onBlur: controllerField.onBlur, onChange: (event) => {
+                        const next = event.target.value;
+                        controllerField.onChange(next === "" ? undefined : Number(next));
+                    }, 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)
+                        .filter(Boolean);
+                    if (!urls.length)
+                        return;
+                    if (field.type === "file[]") {
+                        form.setValue(fieldKey, [...urlsFromValue(form.getValues(fieldKey)), ...urls], { shouldDirty: true, shouldTouch: true });
+                        return;
+                    }
+                    form.setValue(fieldKey, urls[0], {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                    });
+                } })) : null] }));
+}

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

@@ -0,0 +1,4 @@
+import type { ConfigFormProps } from "./types";
+export type { ConfigFormProps, ConfigFormVariant } from "./types";
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,75 @@
+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, withSpecVisibility, withSpecVisibilityValues, } from "./helpers";
+import { RecordConfigForm } from "./RecordConfigForm";
+import { SettingsConfigForm } from "./SettingsConfigForm";
+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: editorValue,
+    });
+    const watched = useWatch({ control: form.control });
+    useEffect(() => {
+        form.reset(editorValue);
+    }, [editorValue, form]);
+    const onSubmit = form.handleSubmit(async (data) => {
+        setStatus("Saving…");
+        setTone(undefined);
+        try {
+            await onSave(data);
+            setStatus("Saved");
+            setTone("ok");
+        }
+        catch (error) {
+            setStatus(error instanceof Error ? error.message : "Save failed");
+            setTone("danger");
+        }
+    });
+    const isDirty = form.formState.isDirty;
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+                event.preventDefault();
+                void onSubmit();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [onSubmit]);
+    const onDiscard = () => {
+        form.reset(editorValue);
+        setStatus(null);
+        setTone(undefined);
+    };
+    const shared = {
+        schema: editorSchema,
+        groups,
+        watched,
+        form,
+        uploads,
+        onUpload,
+        galleryUpload,
+        onListGallery,
+        onUploadGallery,
+        onSubmit,
+        isDirty,
+        status,
+        tone,
+        onDiscard,
+        submitLabel,
+    };
+    if (variant === "record") {
+        return _jsx(RecordConfigForm, { ...shared });
+    }
+    return _jsx(SettingsConfigForm, { ...shared });
+}

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

@@ -0,0 +1,11 @@
+import type { UseFormReturn } from "react-hook-form";
+export type ConfigFormActionsProps = {
+    form: UseFormReturn<Record<string, unknown>>;
+    isDirty: boolean;
+    status: string | null;
+    tone?: "ok" | "danger";
+    onDiscard: () => void;
+    submitLabel?: string;
+};
+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

@@ -0,0 +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;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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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

@@ -0,0 +1,22 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
+import type { FieldGroup, GalleryHandlers } from "./types";
+export type RecordConfigFormProps = GalleryHandlers & {
+    schema: Record<string, FieldSchema>;
+    groups: FieldGroup[];
+    watched: Record<string, unknown>;
+    form: UseFormReturn<Record<string, unknown>>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    isDirty: boolean;
+    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, submitLabel, }: RecordConfigFormProps): import("react").JSX.Element;
+//# sourceMappingURL=RecordConfigForm.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { looksLikeUrl } from "../../../lib/images";
+import { ImageUploadControl } from "../../resources/ImageUploadControl";
+import { ConfigField } from "./ConfigField";
+import { ConfigFormActions } from "./ConfigFormActions";
+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|Display|Status)$/i.test(group.id));
+    const mainGroups = groups.filter((group) => !/^(Media|Display|Status)$/i.test(group.id));
+    const fieldProps = {
+        variant: "record",
+        schema,
+        watched,
+        form,
+        uploads,
+        onUpload,
+        galleryUpload,
+        onListGallery,
+        onUploadGallery,
+    };
+    return (_jsxs("form", { className: "vertebr-form", "data-variant": "record", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-scroll", children: _jsxs("div", { className: "vertebr-record-layout", children: [_jsxs("aside", { className: "vertebr-record-aside", children: [_jsx("div", { className: "vertebr-record-preview", children: imageValue && looksLikeUrl(imageValue) ? (_jsx("img", { src: imageValue, alt: "" })) : (_jsx("div", { className: "vertebr-record-preview-empty", children: "No image" })) }), imageKey && uploads?.[imageKey] && onUpload ? (_jsx(ImageUploadControl, { meta: uploads[imageKey], label: "Drop a new image or browse", onUpload: async (files) => {
+                                        const [first] = await onUpload(imageKey, files);
+                                        if (first?.url) {
+                                            form.setValue(imageKey, first.url, {
+                                                shouldDirty: true,
+                                                shouldTouch: true,
+                                            });
+                                        }
+                                    } })) : 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, 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);
+                                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

@@ -0,0 +1,22 @@
+import type { UseFormReturn } from "react-hook-form";
+import type { FieldSchema, ResourceUploadMeta } from "@vertebr/client";
+import type { FieldGroup, GalleryHandlers } from "./types";
+export type SettingsConfigFormProps = GalleryHandlers & {
+    schema: Record<string, FieldSchema>;
+    groups: FieldGroup[];
+    watched: Record<string, unknown>;
+    form: UseFormReturn<Record<string, unknown>>;
+    uploads?: Record<string, ResourceUploadMeta>;
+    onUpload?: (field: string, files: File[]) => Promise<Array<{
+        url: string;
+        name?: string;
+    }>>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+    isDirty: boolean;
+    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, submitLabel, }: SettingsConfigFormProps): import("react").JSX.Element;
+//# sourceMappingURL=SettingsConfigForm.d.ts.map

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

@@ -0,0 +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;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

@@ -0,0 +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, 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, 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"}