@vertebr/react 0.11.0 → 0.13.0

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

@@ -1,37 +1,126 @@
 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";
 import { VisibilityEyeButton } from "../VisibilityEye";
 import { isDescriptionField } from "../../../lib/description";
 import { collectRecordImages, isImageField, urlsFromValue, } from "../../../lib/images";
+import { isDocumentField } from "../../../lib/documents";
 import { isCentsField, isPriceField } from "../../../lib/price";
 import { FontPickerField } from "../../fonts/FontPickerField";
 import { ImageUploadControl } from "../../resources/ImageUploadControl";
 import { DescriptionInput } from "../DescriptionInput";
+import { DocumentAttachmentField } from "../DocumentAttachmentField";
+import { MarkdownDocumentModal } from "../MarkdownDocumentModal";
 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";
+function findMarkdownBodyKey(schema, currentKey) {
+    const preferred = ["body", "content", "policyBody", "text"];
+    for (const key of preferred) {
+        const field = schema[key];
+        if (!field || key === currentKey)
+            continue;
+        if (field.type === "richtext" || isDescriptionField(key, field))
+            return key;
+    }
+    for (const [key, field] of Object.entries(schema)) {
+        if (key === currentKey)
+            continue;
+        if (field.type === "richtext" || isDescriptionField(key, field))
+            return key;
+    }
+    return null;
+}
 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 [docModalOpen, setDocModalOpen] = useState(false);
     const label = displayLabel(fieldKey, field, groupLabel);
+    const documentField = isDocumentField(fieldKey, field);
+    const markdownBodyKey = documentField
+        ? findMarkdownBodyKey(schema, fieldKey)
+        : null;
+    const markdownBodyField = markdownBodyKey
+        ? schema[markdownBodyKey]
+        : undefined;
+    const markdownBodyValue = markdownBodyKey && typeof watched?.[markdownBodyKey] === "string"
+        ? watched[markdownBodyKey]
+        : markdownBodyKey
+            ? ""
+            : undefined;
     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]));
+    const canPickFiles = !field.readOnly &&
+        Boolean(onListGallery) &&
+        (field.type === "file[]" ||
+            isImageField(fieldKey, field) ||
+            documentField);
+    const canLocalUpload = !hideUpload &&
+        Boolean(uploads?.[fieldKey] && onUpload) &&
+        !field.readOnly;
+    const canGalleryUpload = Boolean(onUploadGallery);
+    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" }) })] })) }));
         }
         return (_jsxs("div", { className: "vertebr-switch-row", children: [_jsxs("div", { className: "vertebr-switch-row-copy", children: [_jsx(Label.Root, { htmlFor: fieldKey, children: label }), field.description ? (_jsx("p", { className: "vertebr-switch-row-desc", children: field.description })) : null] }), _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"
+    return (_jsxs("div", { className: "vertebr-field", "data-span": spanFor(fieldKey, field, variant), "data-kind": isImageField(fieldKey, field)
+            ? "image"
+            : documentField
+                ? "document"
+                : 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) })] })) : documentField ? (_jsx(DocumentAttachmentField, { id: fieldKey, label: label, value: typeof watched?.[fieldKey] === "string" ? watched[fieldKey] : "", readOnly: field.readOnly, description: field.description, markdownBody: markdownBodyValue, canPickFiles: canPickFiles, canUpload: canLocalUpload || canGalleryUpload, onChangeUrl: (next) => form.setValue(fieldKey, next, {
+                    shouldDirty: true,
+                    shouldTouch: true,
+                }), onOpenPicker: () => setPickerOpen(true), onUploadFiles: async (files) => {
+                    if (canLocalUpload) {
+                        const uploaded = await onUpload(fieldKey, files);
+                        const url = uploaded[0]?.url;
+                        if (url) {
+                            form.setValue(fieldKey, url, {
+                                shouldDirty: true,
+                                shouldTouch: true,
+                            });
+                        }
+                        return;
+                    }
+                    if (!onUploadGallery)
+                        return;
+                    const items = await onUploadGallery(files);
+                    const url = items[0]?.url;
+                    if (url) {
+                        form.setValue(fieldKey, url, {
+                            shouldDirty: true,
+                            shouldTouch: true,
+                        });
+                    }
+                }, onEditMarkdown: markdownBodyKey ? () => setDocModalOpen(true) : undefined })) : 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 }) => {
+                        : "", readOnly: field.readOnly, recordImages: collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onBlur: controllerField.onBlur, onChange: controllerField.onChange, onOpenDocumentView: () => setDocModalOpen(true) })) })) : 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" &&
@@ -40,20 +129,45 @@ 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 === "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 && 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], {
+                    }, 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 &&
+                !documentField &&
+                (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[]", showOptimizeHint: true, 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: documentField
+                    ? "Choose PDF"
+                    : field.type === "file[]"
+                        ? "Add product photos"
+                        : "Choose image", confirmLabel: "Use", defaultTab: "gallery", assetKind: documentField ? "document" : "image", recordImages: documentField ? [] : collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setPickerOpen(false), onInsert: applyPickedImages })) : null, docModalOpen &&
+                (markdownBodyKey ||
+                    field.type === "richtext" ||
+                    isDescriptionField(fieldKey, field)) ? (_jsx(MarkdownDocumentModal, { title: markdownBodyKey && markdownBodyField
+                    ? displayLabel(markdownBodyKey, markdownBodyField, groupLabel)
+                    : label, value: markdownBodyKey
+                    ? typeof form.getValues(markdownBodyKey) === "string"
+                        ? form.getValues(markdownBodyKey)
+                        : ""
+                    : typeof form.getValues(fieldKey) === "string"
+                        ? form.getValues(fieldKey)
+                        : "", readOnly: markdownBodyKey
+                    ? Boolean(markdownBodyField?.readOnly)
+                    : field.readOnly, recordImages: collectRecordImages(schema, watched), galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onChange: (next) => {
+                    const key = markdownBodyKey ?? fieldKey;
+                    form.setValue(key, next, {
                         shouldDirty: true,
                         shouldTouch: true,
                     });
-                } })) : null] }));
+                }, onClose: () => setDocModalOpen(false) })) : null] }));
 }

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/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/gallery/GalleryBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryBoard.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/GalleryBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,+BAiFnB"}
+{"version":3,"file":"GalleryBoard.d.ts","sourceRoot":"","sources":["../../../src/components/gallery/GalleryBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,iBAAiB,CAAC;AAIvE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAuBF,wBAAgB,YAAY,CAAC,EAC3B,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,+BAgHnB"}

package/dist/components/gallery/GalleryBoard.js

@@ -1,14 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPdfAsset, pdfFileName } from "../../lib/documents";
 import { ImageUploadControl } from "../resources/ImageUploadControl";
+function acceptsDocuments(accept) {
+    return accept.some((entry) => /pdf/i.test(entry) ||
+        entry === "application/*" ||
+        entry === "*/*");
+}
+function acceptsImages(accept) {
+    return (accept.length === 0 ||
+        accept.some((entry) => entry.startsWith("image/") ||
+            entry === "image/*" ||
+            entry === "*/*"));
+}
 export function GalleryBoard({ label = "Gallery", items, accept, maxBytes, canDelete, loading, onRefresh, onUpload, onDelete, }) {
     const meta = {
         field: "gallery",
         accept,
         maxBytes,
     };
-    return (_jsxs("div", { className: "vertebr-gallery", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), _jsxs("div", { className: "vertebr-gallery-head-actions", children: [_jsx("span", { className: "vertebr-count", children: items.length }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })] }), _jsxs("div", { className: "vertebr-gallery-body", children: [_jsx(ImageUploadControl, { meta: meta, multiple: true, label: "Drop images here or browse to add to the gallery", onUpload: onUpload }), items.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No images in the gallery yet." })) : (_jsx("div", { className: "vertebr-gallery-grid", children: items.map((item) => (_jsxs("article", { className: "vertebr-gallery-card", children: [_jsx("a", { className: "vertebr-gallery-thumb", href: item.url, target: "_blank", rel: "noreferrer", title: item.name ?? item.url, children: _jsx("img", { src: item.url, alt: item.name ?? "", loading: "lazy" }) }), _jsxs("div", { className: "vertebr-gallery-meta", children: [_jsx("strong", { title: item.name ?? item.id, children: item.name ?? item.id }), _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url.replace(/^https?:\/\//i, "") })] }), canDelete && onDelete ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-danger-quiet", onClick: () => {
-                                        if (window.confirm("Delete this image from the gallery?")) {
-                                            void onDelete(item.id);
-                                        }
-                                    }, children: "Delete" })) : null] }, item.id))) }))] })] }));
+    const docs = acceptsDocuments(accept);
+    const images = acceptsImages(accept);
+    const dropLabel = docs && images
+        ? "Drop images or PDFs here or browse to add to Files"
+        : docs
+            ? "Drop PDFs here or browse to add to Files"
+            : "Drop images here or browse to add to the gallery";
+    const emptyLabel = docs && images
+        ? "No files yet."
+        : docs
+            ? "No documents yet."
+            : "No images in the gallery yet.";
+    return (_jsxs("div", { className: "vertebr-gallery", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), _jsxs("div", { className: "vertebr-gallery-head-actions", children: [_jsx("span", { className: "vertebr-count", children: items.length }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })] }), _jsxs("div", { className: "vertebr-gallery-body", children: [_jsx(ImageUploadControl, { meta: meta, multiple: true, showOptimizeHint: images, label: dropLabel, onUpload: onUpload }), items.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: emptyLabel })) : (_jsx("div", { className: "vertebr-gallery-grid", children: items.map((item) => {
+                            const pdf = isPdfAsset(item);
+                            return (_jsxs("article", { className: "vertebr-gallery-card", children: [_jsx("a", { className: pdf
+                                            ? "vertebr-gallery-thumb vertebr-gallery-thumb-file"
+                                            : "vertebr-gallery-thumb", href: item.url, target: "_blank", rel: "noreferrer", title: item.name ?? item.url, children: pdf ? (_jsx("span", { className: "vertebr-gallery-file-badge", children: "PDF" })) : (_jsx("img", { src: item.url, alt: item.name ?? "", loading: "lazy" })) }), _jsxs("div", { className: "vertebr-gallery-meta", children: [_jsx("strong", { title: item.name ?? item.id, children: item.name ??
+                                                    (pdf ? pdfFileName(item.url) : item.id) }), _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url.replace(/^https?:\/\//i, "") })] }), canDelete && onDelete ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-danger-quiet", onClick: () => {
+                                            if (window.confirm(pdf
+                                                ? "Delete this document from Files?"
+                                                : "Delete this image from the gallery?")) {
+                                                void onDelete(item.id);
+                                            }
+                                        }, children: "Delete" })) : null] }, item.id));
+                        }) }))] })] }));
 }

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

@@ -0,0 +1,14 @@
+import type { FieldSchema, GalleryItem } from "@vertebr/client";
+import { looksLikeUrl } from "./images";
+/** True when a gallery/file item is a PDF (by type, name, or URL). */
+export declare function isPdfAsset(item: {
+    url?: string;
+    name?: string | null;
+    contentType?: string | null;
+}): boolean;
+/** Config string fields meant for a policy/document PDF URL. */
+export declare function isDocumentField(key: string, field?: Pick<FieldSchema, "label" | "type">): boolean;
+export declare function pdfFileName(url: string, fallback?: string): string;
+export declare function filterGalleryByKind(items: GalleryItem[], kind: "image" | "document" | "any"): GalleryItem[];
+export { looksLikeUrl };
+//# sourceMappingURL=documents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"documents.d.ts","sourceRoot":"","sources":["../../src/lib/documents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,sEAAsE;AACtE,wBAAgB,UAAU,CAAC,IAAI,EAAE;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,GAAG,OAAO,CAMV;AAED,gEAAgE;AAChE,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,GAC1C,OAAO,CAUT;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAiB,GAAG,MAAM,CAQ1E;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAAE,EACpB,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,KAAK,GACjC,WAAW,EAAE,CAIf;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/documents.js

@@ -0,0 +1,42 @@
+import { looksLikeUrl } from "./images";
+/** True when a gallery/file item is a PDF (by type, name, or URL). */
+export function isPdfAsset(item) {
+    if (item.contentType && /pdf/i.test(item.contentType))
+        return true;
+    const name = item.name ?? "";
+    if (/\.pdf$/i.test(name))
+        return true;
+    const url = item.url ?? "";
+    return /\.pdf(?:$|\?)/i.test(url);
+}
+/** Config string fields meant for a policy/document PDF URL. */
+export function isDocumentField(key, field) {
+    if (field?.type === "file[]")
+        return false;
+    if (field?.type && field.type !== "string")
+        return false;
+    const hay = `${key} ${field?.label ?? ""}`;
+    if (/\bpdf\b|pdfUrl|pdf_url|documentUrl|document_url/i.test(hay))
+        return true;
+    // Policy-ish labels only when they also look like a file/URL attachment.
+    return (/(policy|legal|terms|privacy|refund|shipping)/i.test(hay) &&
+        /(pdf|url|file|attach|document)/i.test(hay));
+}
+export function pdfFileName(url, fallback = "document.pdf") {
+    try {
+        const path = new URL(url).pathname;
+        const base = path.split("/").pop() || fallback;
+        return decodeURIComponent(base);
+    }
+    catch {
+        return fallback;
+    }
+}
+export function filterGalleryByKind(items, kind) {
+    if (kind === "any")
+        return items;
+    if (kind === "document")
+        return items.filter(isPdfAsset);
+    return items.filter((item) => !isPdfAsset(item));
+}
+export { looksLikeUrl };

package/dist/styles/form.css

@@ -1047,6 +1047,21 @@
   background: var(--vb-surface-tint);
 }
 
+.vertebr-md-doc-link {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--vb-accent);
+  font: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+.vertebr-md-doc-link:hover {
+  text-decoration: underline;
+}
+
 .vertebr-field input:hover,
 .vertebr-field textarea:hover {
   border-color: var(--vb-border-strong);
@@ -1111,6 +1126,12 @@
   color: var(--vb-text-subtle);
 }
 
+.vertebr-field-media-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
 .vertebr-field[data-kind="image"] {
   grid-column: 1 / -1;
 }
@@ -1294,6 +1315,13 @@
   line-height: 1.35;
 }
 
+.vertebr-upload-hint {
+  margin: 0;
+  font-size: 0.72rem;
+  color: var(--vb-text-faint, var(--vb-text-muted));
+  line-height: 1.35;
+}
+
 .vertebr-upload-error {
   margin: 0;
   font-size: 0.78rem;