@vertebr/react 0.10.0 → 0.12.0

package/dist/components/config/RevisionHistory.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { useToast } from "../../hooks/useToast";
 function formatWhen(at) {
@@ -12,16 +12,32 @@ function formatWhen(at) {
         minute: "2-digit",
     });
 }
+function formatActor(value) {
+    if (!value)
+        return null;
+    if (value.includes("@"))
+        return value;
+    if (value.length <= 12)
+        return value;
+    return `${value.slice(0, 6)}…${value.slice(-4)}`;
+}
+/**
+ * Compact History control — opens revision list in a modal so the
+ * editor form stays the primary surface.
+ */
 export function RevisionHistory({ client, configId, onPublished, }) {
     const { push } = useToast();
+    const [open, setOpen] = useState(false);
     const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(true);
+    const [count, setCount] = useState(null);
+    const [loading, setLoading] = useState(false);
     const [busyId, setBusyId] = useState(null);
     const refresh = useCallback(async () => {
         setLoading(true);
         try {
             const data = await client.listRevisions(configId, { fresh: true });
             setItems(data.items);
+            setCount(data.items.length);
         }
         finally {
             setLoading(false);
@@ -31,10 +47,30 @@ export function RevisionHistory({ client, configId, onPublished, }) {
         let cancelled = false;
         void (async () => {
             try {
-                setLoading(true);
                 const data = await client.listRevisions(configId, { fresh: true });
                 if (!cancelled)
+                    setCount(data.items.length);
+            }
+            catch {
+                /* badge is optional */
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, configId]);
+    useEffect(() => {
+        if (!open)
+            return;
+        let cancelled = false;
+        void (async () => {
+            try {
+                setLoading(true);
+                const data = await client.listRevisions(configId, { fresh: true });
+                if (!cancelled) {
                     setItems(data.items);
+                    setCount(data.items.length);
+                }
             }
             catch (err) {
                 if (!cancelled) {
@@ -49,7 +85,22 @@ export function RevisionHistory({ client, configId, onPublished, }) {
         return () => {
             cancelled = true;
         };
-    }, [client, configId, push]);
+    }, [open, client, configId, push]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        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;
+        };
+    }, [open]);
     const publish = async (revId) => {
         setBusyId(revId);
         try {
@@ -65,20 +116,24 @@ export function RevisionHistory({ client, configId, onPublished, }) {
             setBusyId(null);
         }
     };
-    const restore = async (revId) => {
+    const useRevision = async (revId) => {
         setBusyId(revId);
         try {
             await client.restoreRevision(configId, revId);
-            push("Draft restored from revision", "ok");
+            push("Now editing this revision", "ok");
             await refresh();
             await onPublished?.();
         }
         catch (err) {
-            push(err instanceof Error ? err.message : "Restore failed", "danger");
+            push(err instanceof Error ? err.message : "Could not switch revision", "danger");
         }
         finally {
             setBusyId(null);
         }
     };
-    return (_jsxs("div", { className: "vertebr-revisions", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h3", { children: "Revisions" }), _jsx("span", { className: "vertebr-count", children: loading ? "…" : `${items.length}` })] }), items.length === 0 && !loading ? (_jsx("p", { className: "vertebr-revisions-empty", children: "No revisions yet." })) : (_jsx("ul", { className: "vertebr-revisions-list", children: items.map((rev) => (_jsxs("li", { className: "vertebr-revisions-item", children: [_jsxs("div", { className: "vertebr-revisions-meta", children: [_jsx("strong", { children: rev.label?.trim() || rev.id }), _jsx("span", { "data-status": rev.status, children: rev.status }), _jsxs("span", { className: "vertebr-revisions-when", children: [formatWhen(rev.createdAt), rev.createdBy ? ` · ${rev.createdBy}` : ""] })] }), _jsxs("div", { className: "vertebr-revisions-actions", children: [rev.status !== "published" ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void publish(rev.id), children: busyId === rev.id ? "…" : "Publish" })) : null, _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void restore(rev.id), children: "Restore" })] })] }, rev.id))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "vertebr-revisions-trigger", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: ["History", count != null ? (_jsx("span", { className: "vertebr-revisions-trigger-count", children: count })) : null] }), open ? (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: () => setOpen(false), children: _jsxs("div", { className: "vertebr-modal vertebr-modal-sm vertebr-revisions-modal", role: "dialog", "aria-modal": "true", "aria-label": "Revision history", 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: "Change safety" }), _jsx("h2", { children: "Revisions" })] }), _jsxs("div", { className: "vertebr-modal-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: loading || busyId != null, onClick: () => void refresh(), children: loading ? "…" : "Refresh" }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => setOpen(false), children: "Close" })] })] }), _jsx("div", { className: "vertebr-modal-body", children: items.length === 0 && !loading ? (_jsx("p", { className: "vertebr-revisions-empty", children: "No revisions yet. Save to create a draft." })) : (_jsx("ul", { className: "vertebr-revisions-list", children: items.map((rev) => {
+                                    const actor = formatActor(rev.createdBy);
+                                    const isCurrent = Boolean(rev.active);
+                                    return (_jsxs("li", { className: "vertebr-revisions-item", "data-active": isCurrent ? "true" : undefined, children: [_jsxs("div", { className: "vertebr-revisions-meta", children: [_jsx("strong", { children: rev.label?.trim() || rev.id }), _jsx("span", { "data-status": rev.status, children: rev.status }), isCurrent ? (_jsx("span", { "data-status": "current", children: "Current" })) : null, _jsxs("span", { className: "vertebr-revisions-when", children: [formatWhen(rev.createdAt), actor ? ` · ${actor}` : ""] })] }), _jsxs("div", { className: "vertebr-revisions-actions", children: [rev.status !== "published" ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void publish(rev.id), children: busyId === rev.id ? "…" : "Publish" })) : null, isCurrent ? null : (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void useRevision(rev.id), children: "Use" }))] })] }, rev.id));
+                                }) })) })] }) })) : null] }));
 }

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;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAsBtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC5C,mBAAmB,GAAG;IACtB,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;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,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,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,+BAkTlB"}
+{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAwBtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC5C,mBAAmB,GAAG;IACtB,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;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,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,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,+BAyXlB"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Controller } from "react-hook-form";
 import * as Label from "@radix-ui/react-label";
 import * as Switch from "@radix-ui/react-switch";
@@ -9,12 +10,15 @@ import { isCentsField, isPriceField } from "../../../lib/price";
 import { FontPickerField } from "../../fonts/FontPickerField";
 import { ImageUploadControl } from "../../resources/ImageUploadControl";
 import { DescriptionInput } from "../DescriptionInput";
+import { DatetimeInput } from "../DatetimeInput";
 import { EnumInput } from "../EnumInput";
 import { EnumListInput } from "../EnumListInput";
+import { ImagePickerModal } from "../ImagePickerModal";
 import { PriceInput } from "../PriceInput";
 import { ReferenceInput } from "../ReferenceInput";
 import { displayLabel, firstImageUrl, isMultilineField, fieldVisibilityKey, spanFor, } from "./helpers";
 export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watched, form, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, hideImagePreview, hideUpload, visibilityGroup, settingsRow, client, }) {
+    const [pickerOpen, setPickerOpen] = useState(false);
     const label = displayLabel(fieldKey, field, groupLabel);
     const visibilityKey = fieldVisibilityKey(fieldKey, schema, visibilityGroup ?? groupLabel);
     const visibilityOn = !visibilityKey || watched?.[visibilityKey] !== false;
@@ -22,6 +26,27 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
         field.type !== "file[]" &&
         isImageField(fieldKey, field) &&
         Boolean(firstImageUrl(watched?.[fieldKey]));
+    const canPickFiles = !field.readOnly &&
+        Boolean(onListGallery) &&
+        (field.type === "file[]" || isImageField(fieldKey, field));
+    const canLocalUpload = !hideUpload &&
+        Boolean(uploads?.[fieldKey] && onUpload) &&
+        !field.readOnly;
+    const applyPickedImages = (images) => {
+        const urls = images.map((image) => image.url).filter(Boolean);
+        if (!urls.length)
+            return;
+        if (field.type === "file[]") {
+            form.setValue(fieldKey, [...urlsFromValue(form.getValues(fieldKey)), ...urls], { shouldDirty: true, shouldTouch: true });
+        }
+        else {
+            form.setValue(fieldKey, urls[0], {
+                shouldDirty: true,
+                shouldTouch: true,
+            });
+        }
+        setPickerOpen(false);
+    };
     if (field.type === "boolean") {
         if (settingsRow) {
             return (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsxs("li", { className: "vertebr-settings-list-row", "data-on": Boolean(controllerField.value) ? "true" : "false", children: [_jsxs("div", { className: "vertebr-settings-list-copy", children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), field.description ? (_jsx("p", { className: "vertebr-settings-list-desc", children: field.description })) : null] }), _jsx(Switch.Root, { className: "vertebr-switch", id: fieldKey, checked: Boolean(controllerField.value), onCheckedChange: controllerField.onChange, children: _jsx(Switch.Thumb, { className: "vertebr-switch-thumb" }) })] })) }));
@@ -39,20 +64,20 @@ 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 })) })) : 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 })) })) : field.type === "font" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(FontPickerField, { id: fieldKey, value: controllerField.value, label: field.label, description: field.description, readOnly: field.readOnly, fonts: fonts ?? [], loading: fontsLoading, onChange: controllerField.onChange, onRefreshFonts: onRefreshFonts })) })) : field.type === "reference" && client ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(ReferenceInput, { id: fieldKey, value: controllerField.value, field: field, client: client, 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] }));
+                    }, name: controllerField.name, ref: controllerField.ref })) })) : field.type === "datetime" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(DatetimeInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: controllerField.value, readOnly: field.readOnly, onBlur: controllerField.onBlur, onChange: controllerField.onChange })) })) : 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 })) })) : field.type === "font" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(FontPickerField, { id: fieldKey, value: controllerField.value, label: field.label, description: field.description, readOnly: field.readOnly, fonts: fonts ?? [], loading: fontsLoading, onChange: controllerField.onChange, onRefreshFonts: onRefreshFonts })) })) : field.type === "reference" && client ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(ReferenceInput, { id: fieldKey, value: controllerField.value, field: field, client: client, 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 && (canLocalUpload || canPickFiles) ? (_jsxs("div", { className: "vertebr-field-media-actions", children: [canPickFiles ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setPickerOpen(true), children: "Choose from Files" })) : null, canLocalUpload ? (_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] })) : null, pickerOpen && canPickFiles ? (_jsx(ImagePickerModal, { title: field.type === "file[]" ? "Add product photos" : "Choose image", confirmLabel: "Use", defaultTab: "gallery", recordImages: collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setPickerOpen(false), onInsert: applyPickedImages })) : null] }));
 }

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, submitLabel, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite, }: ConfigFormProps): import("react").JSX.Element;
+export declare function ConfigForm({ schema, value, onSave, submitLabel, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite, revisionsEnabled, onPublish, canPublish, }: 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":"AAaA,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,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAe,GAChB,EAAE,eAAe,+BA2IjB"}
+{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigForm.tsx"],"names":[],"mappings":"AAaA,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,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAe,EACf,gBAAwB,EACxB,SAAS,EACT,UAAkB,GACnB,EAAE,eAAe,+BA2LjB"}

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

@@ -7,7 +7,7 @@ import { useToast } from "../../../hooks/useToast";
 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, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite = true, }) {
+export function ConfigForm({ schema, value, onSave, submitLabel, variant = "config", uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite = true, revisionsEnabled = false, onPublish, canPublish = false, }) {
     const { register, clear } = useSaveBar();
     const { push: pushToast } = useToast();
     const editorSchema = useMemo(() => (variant === "record" ? withSpecVisibility(schema) : schema), [schema, variant]);
@@ -18,14 +18,21 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
     const groups = useMemo(() => groupFields(editorSchema, variant), [editorSchema, variant]);
     const [status, setStatus] = useState(null);
     const [tone, setTone] = useState();
+    const [publishing, setPublishing] = useState(false);
     const form = useForm({
         resolver: zodResolver(zodSchema),
         defaultValues: editorValue,
     });
     const watched = useWatch({ control: form.control });
     useEffect(() => {
-        onChange?.((watched ?? {}));
-    }, [watched, onChange]);
+        if (!onChange)
+            return;
+        const subscription = form.watch((values) => {
+            onChange((values ?? {}));
+        });
+        onChange((form.getValues() ?? {}));
+        return () => subscription.unsubscribe();
+    }, [form, onChange]);
     useEffect(() => {
         form.reset(editorValue);
     }, [editorValue, form]);
@@ -34,18 +41,24 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
         setStatus(null);
         setTone(undefined);
     };
+    const saveLabel = submitLabel ?? (revisionsEnabled ? "Save draft" : "Save");
     const onSubmit = form.handleSubmit(async (data) => {
         if (!canWrite)
             return;
-        setStatus("Saving…");
+        setStatus(revisionsEnabled ? "Saving draft…" : "Saving…");
         setTone(undefined);
         register({ saving: true, isDirty: true, visible: true });
         try {
             await onSave(data);
-            setStatus("Saved");
+            const nextStatus = revisionsEnabled
+                ? "Draft saved — not live until you publish"
+                : "Saved";
+            setStatus(nextStatus);
             setTone("ok");
             form.reset(data);
-            pushToast("Changes saved", "ok");
+            pushToast(revisionsEnabled
+                ? "Draft saved. Publish to update the live storefront."
+                : "Changes saved", "ok");
         }
         catch (error) {
             const message = error instanceof Error ? error.message : "Save failed";
@@ -57,22 +70,51 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
             register({ saving: false });
         }
     });
+    const handlePublish = async () => {
+        if (!onPublish || !canPublish)
+            return;
+        setPublishing(true);
+        setStatus("Publishing…");
+        setTone(undefined);
+        register({ publishing: true, visible: true });
+        try {
+            await onPublish();
+            setStatus("Published");
+            setTone("ok");
+            pushToast("Published to live storefront", "ok");
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "Publish failed";
+            setStatus(message);
+            setTone("danger");
+            pushToast(message, "danger");
+        }
+        finally {
+            setPublishing(false);
+            register({ publishing: false });
+        }
+    };
     const isDirty = form.formState.isDirty;
+    const showPublish = Boolean(revisionsEnabled && canPublish && onPublish);
     useEffect(() => {
         if (hideActions) {
             clear();
             return;
         }
         register({
-            visible: isDirty,
+            visible: isDirty || Boolean(status) || showPublish,
             isDirty,
-            saving: status === "Saving…",
+            saving: status === "Saving…" || status === "Saving draft…",
+            publishing,
             message: !canWrite && isDirty
                 ? "Missing config.write capability"
                 : (status ?? undefined),
             tone: !canWrite && isDirty ? "danger" : tone,
+            saveLabel,
             onSave: canWrite ? () => void onSubmit() : undefined,
             onDiscard,
+            publishLabel: "Publish",
+            onPublish: showPublish ? () => void handlePublish() : undefined,
         });
         return () => clear();
     }, [
@@ -85,6 +127,9 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
         register,
         clear,
         canWrite,
+        saveLabel,
+        showPublish,
+        publishing,
     ]);
     useEffect(() => {
         const onKeyDown = (event) => {
@@ -117,7 +162,7 @@ export function ConfigForm({ schema, value, onSave, submitLabel, variant = "conf
         status,
         tone,
         onDiscard,
-        submitLabel,
+        submitLabel: saveLabel,
         hideActions: true,
     };
     if (variant === "record") {

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,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAYtF,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,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,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;IACrB,WAAW,CAAC,EAAE,OAAO,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,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,GACZ,EAAE,qBAAqB,+BAuJvB"}
+{"version":3,"file":"RecordConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/RecordConfigForm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAatF,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,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,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;IACrB,WAAW,CAAC,EAAE,OAAO,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,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,GACZ,EAAE,qBAAqB,+BA4LvB"}

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

@@ -1,15 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { looksLikeUrl } from "../../../lib/images";
+import { useState } from "react";
+import { collectRecordImages, looksLikeUrl } from "../../../lib/images";
 import { ImageUploadControl } from "../../resources/ImageUploadControl";
+import { ImagePickerModal } from "../ImagePickerModal";
 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, client, onSubmit, isDirty, status, tone, onDiscard, submitLabel, hideActions, }) {
+    const [pickerOpen, setPickerOpen] = useState(false);
     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 canPickPrimary = Boolean(imageKey && onListGallery);
+    const canUploadPrimary = Boolean(imageKey && uploads?.[imageKey] && onUpload);
+    const applyPrimaryImage = (images) => {
+        if (!imageKey)
+            return;
+        const url = images[0]?.url;
+        if (!url)
+            return;
+        form.setValue(imageKey, url, { shouldDirty: true, shouldTouch: true });
+        setPickerOpen(false);
+    };
     const fieldProps = {
         variant: "record",
         schema,
@@ -22,15 +36,15 @@ export function RecordConfigForm({ schema, groups, watched, form, uploads, onUpl
         onUploadGallery,
         client,
     };
-    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])
+    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" })) }), canPickPrimary || canUploadPrimary ? (_jsxs("div", { className: "vertebr-field-media-actions", children: [canPickPrimary ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setPickerOpen(true), children: "Choose from Files" })) : null, canUploadPrimary ? (_jsx(ImageUploadControl, { meta: uploads[imageKey], label: "Or upload a new image", onUpload: async (files) => {
+                                                const [first] = await onUpload(imageKey, files);
+                                                if (first?.url) {
+                                                    form.setValue(imageKey, first.url, {
+                                                        shouldDirty: true,
+                                                        shouldTouch: true,
+                                                    });
+                                                }
+                                            } })) : null] })) : null, pickerOpen && canPickPrimary ? (_jsx(ImagePickerModal, { title: "Choose product image", confirmLabel: "Use", defaultTab: "gallery", recordImages: collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setPickerOpen(false), onInsert: applyPrimaryImage })) : 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);

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

@@ -30,6 +30,15 @@ export type ConfigFormProps = {
     client?: VertebrClient;
     /** When false, save actions are disabled (missing write capability). */
     canWrite?: boolean;
+    /**
+     * When true, Save creates a draft (not live). Save bar labels and
+     * optional Publish action reflect that.
+     */
+    revisionsEnabled?: boolean;
+    /** Publish the current draft revision to live. */
+    onPublish?: () => Promise<void>;
+    /** Show Publish when a draft revision is available. */
+    canPublish?: boolean;
 };
 export type FieldEntry = [string, FieldSchema];
 export type FieldGroup = {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,aAAa,EACd,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,eAAe,GAAG,eAAe,GAAG,iBAAiB,CACtD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,gBAAgB,CAC5D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,aAAa,EACd,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,eAAe,GAAG,eAAe,GAAG,iBAAiB,CACtD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,gBAAgB,CAC5D,CAAC"}

package/dist/components/fonts/FontLibraryBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontLibraryBoard.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontLibraryBoard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,mBAAmB,EACnB,uBAAuB,EAExB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CACR,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KACxC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAUF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAsB,EACtB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,+BAqIvB"}
+{"version":3,"file":"FontLibraryBoard.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontLibraryBoard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,mBAAmB,EACnB,uBAAuB,EAExB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CACR,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KACxC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAUF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAsB,EACtB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,cAAc,EACd,QAAQ,GACT,EAAE,qBAAqB,+BAsIvB"}

package/dist/components/fonts/FontLibraryBoard.js

@@ -18,7 +18,7 @@ export function FontLibraryBoard({ label = "Font Library", data, loading, onRefr
         accept: data.accept,
         maxBytes: data.maxBytes,
     };
-    return (_jsxs("div", { className: "vertebr-font-library", children: [_jsx(FontFaceInjector, { items: data.items }), _jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), _jsxs("div", { className: "vertebr-font-library-head-actions", children: [_jsx("span", { className: "vertebr-count", children: data.items.length }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })] }), _jsxs("div", { className: "vertebr-font-library-body", children: [data.canImportGoogle && onImportGoogle ? (_jsx(GoogleFontsBrowser, { disabled: loading, onImport: onImportGoogle, existingFamilies: data.items.map((item) => item.family.toLowerCase()) })) : null, _jsx(ImageUploadControl, { meta: meta, multiple: true, label: "Drop .woff2 / .woff / .ttf files here or browse to upload", onUpload: async (files) => {
+    return (_jsxs("div", { className: "vertebr-font-library", children: [_jsx(FontFaceInjector, { items: data.items }), _jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), _jsxs("div", { className: "vertebr-font-library-head-actions", children: [_jsx("span", { className: "vertebr-count", children: data.items.length }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })] }), _jsxs("div", { className: "vertebr-font-library-body", children: [data.canImportGoogle && onImportGoogle ? (_jsx(GoogleFontsBrowser, { disabled: loading, onImport: onImportGoogle, existingFamilies: data.items.map((item) => item.family.toLowerCase()) })) : null, _jsx(ImageUploadControl, { meta: meta, multiple: true, showOptimizeHint: false, label: "Drop .woff2 / .woff / .ttf files here or browse to upload", onUpload: async (files) => {
                             for (const file of files) {
                                 const base = file.name.replace(/\.[^.]+$/, "");
                                 const weightMatch = /(?:^|[\s_-])(100|200|300|400|500|600|700|800|900)(?:[\s_-]|$)/i.exec(base);

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

@@ -4,7 +4,9 @@ export type ImageUploadControlProps = {
     disabled?: boolean;
     multiple?: boolean;
     label?: string;
+    /** Show storefront optimize hint (image uploads). @default true */
+    showOptimizeHint?: boolean;
     onUpload: (files: File[]) => Promise<void>;
 };
-export declare function ImageUploadControl({ meta, disabled, multiple, label, onUpload, }: ImageUploadControlProps): import("react").JSX.Element;
+export declare function ImageUploadControl({ meta, disabled, multiple, label, showOptimizeHint, onUpload, }: ImageUploadControlProps): import("react").JSX.Element;
 //# sourceMappingURL=ImageUploadControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageUploadControl.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ImageUploadControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5C,CAAC;AAMF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,uBAAuB,+BA8EzB"}
+{"version":3,"file":"ImageUploadControl.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ImageUploadControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5C,CAAC;AAMF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,gBAAuB,EACvB,QAAQ,GACT,EAAE,uBAAuB,+BAqFzB"}

package/dist/components/resources/ImageUploadControl.js

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 function acceptAttr(accept) {
     return accept.join(",");
 }
-export function ImageUploadControl({ meta, disabled, multiple = false, label, onUpload, }) {
+export function ImageUploadControl({ meta, disabled, multiple = false, label, showOptimizeHint = true, onUpload, }) {
     const inputRef = useRef(null);
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState(null);
@@ -42,9 +42,11 @@ export function ImageUploadControl({ meta, disabled, multiple = false, label, on
                     setDragOver(false);
                     void run(event.dataTransfer.files);
                 }, children: [_jsx("p", { className: "vertebr-upload-copy", children: busy
-                            ? "Uploading…"
+                            ? showOptimizeHint
+                                ? "Optimizing…"
+                                : "Uploading…"
                             : label ??
                                 (multiple
                                     ? "Drop images here or browse"
-                                    : "Drop an image here or browse") }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled || busy, onClick: () => inputRef.current?.click(), children: multiple ? "Choose images" : "Choose image" }), _jsx("input", { ref: inputRef, type: "file", accept: acceptAttr(meta.accept), multiple: multiple, hidden: true, onChange: (event) => void run(event.target.files) })] }), error ? (_jsx("p", { className: "vertebr-upload-error", role: "alert", children: error })) : null] }));
+                                    : "Drop an image here or browse") }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: disabled || busy, onClick: () => inputRef.current?.click(), children: multiple ? "Choose images" : "Choose image" }), _jsx("input", { ref: inputRef, type: "file", accept: acceptAttr(meta.accept), multiple: multiple, hidden: true, onChange: (event) => void run(event.target.files) })] }), showOptimizeHint ? (_jsx("p", { className: "vertebr-upload-hint", children: "Images are optimized for the storefront" })) : null, error ? (_jsx("p", { className: "vertebr-upload-error", role: "alert", children: error })) : null] }));
 }

package/dist/hooks/useSaveBar.d.ts

@@ -5,8 +5,14 @@ export type SaveBarState = {
     tone?: "ok" | "danger";
     isDirty: boolean;
     saving: boolean;
+    /** Primary save button label. @default "Save" */
+    saveLabel?: string;
     onSave?: () => void | Promise<void>;
     onDiscard?: () => void;
+    /** Optional publish action when revisions are enabled. */
+    publishLabel?: string;
+    onPublish?: () => void | Promise<void>;
+    publishing?: boolean;
 };
 type SaveBarContextValue = {
     state: SaveBarState;

package/dist/hooks/useSaveBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSaveBar.d.ts","sourceRoot":"","sources":["../../src/hooks/useSaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAuBpE;AAED,wBAAgB,UAAU,wBAMzB"}
+{"version":3,"file":"useSaveBar.d.ts","sourceRoot":"","sources":["../../src/hooks/useSaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAuBpE;AAED,wBAAgB,UAAU,wBAMzB"}