@vertebr/react 0.12.0 → 0.15.0

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

@@ -6,10 +6,13 @@ 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";
@@ -17,9 +20,39 @@ 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 &&
@@ -28,10 +61,13 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
         Boolean(firstImageUrl(watched?.[fieldKey]));
     const canPickFiles = !field.readOnly &&
         Boolean(onListGallery) &&
-        (field.type === "file[]" || isImageField(fieldKey, field));
+        (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)
@@ -53,9 +89,38 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
         }
         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" &&
@@ -64,7 +129,9 @@ 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 && (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) => {
+                    }, 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)
@@ -79,5 +146,28 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
                                 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] }));
+                        } })) : 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,
+                    });
+                }, onClose: () => setDocModalOpen(false) })) : null] }));
 }

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

@@ -1,11 +1,24 @@
-import type { SVGProps } from "react";
+import type { ReactElement, SVGProps } from "react";
+import type { CatalogAddonCategory, NavIconName } from "@vertebr/client";
 type IconProps = SVGProps<SVGSVGElement>;
 export declare function IconHome(props: IconProps): import("react").JSX.Element;
 export declare function IconProducts(props: IconProps): import("react").JSX.Element;
+export declare function IconInventory(props: IconProps): import("react").JSX.Element;
+export declare function IconUsers(props: IconProps): import("react").JSX.Element;
+export declare function IconCard(props: IconProps): import("react").JSX.Element;
+export declare function IconTag(props: IconProps): import("react").JSX.Element;
+export declare function IconBolt(props: IconProps): import("react").JSX.Element;
 export declare function IconGallery(props: IconProps): import("react").JSX.Element;
 export declare function IconFonts(props: IconProps): import("react").JSX.Element;
 export declare function IconMail(props: IconProps): import("react").JSX.Element;
 export declare function IconPages(props: IconProps): import("react").JSX.Element;
+export declare function IconPalette(props: IconProps): import("react").JSX.Element;
+export declare function IconTruck(props: IconProps): import("react").JSX.Element;
+export declare function IconClock(props: IconProps): import("react").JSX.Element;
+export declare function IconStar(props: IconProps): import("react").JSX.Element;
+export declare function IconMegaphone(props: IconProps): import("react").JSX.Element;
+export declare function IconLayout(props: IconProps): import("react").JSX.Element;
+export declare function IconList(props: IconProps): import("react").JSX.Element;
 export declare function IconSettings(props: IconProps): import("react").JSX.Element;
 export declare function IconChart(props: IconProps): import("react").JSX.Element;
 export declare function IconChevronLeft(props: IconProps): import("react").JSX.Element;
@@ -13,6 +26,21 @@ export declare function IconSearch(props: IconProps): import("react").JSX.Elemen
 export declare function IconSync(props: IconProps): import("react").JSX.Element;
 export declare function IconMenu(props: IconProps): import("react").JSX.Element;
 export declare function IconAddon(props: IconProps): import("react").JSX.Element;
-export declare function iconForNavKey(key: string): typeof IconHome;
+export type NavIconComponent = (props: IconProps) => ReactElement;
+export declare const NAV_ICON_COMPONENTS: Record<NavIconName, NavIconComponent>;
+export type ResolveNavIconInput = {
+    key: string;
+    id?: string;
+    label?: string;
+    group?: string;
+    category?: CatalogAddonCategory;
+    section?: "config" | "page" | "addon";
+    icon?: NavIconName | null;
+};
+/** Resolve a stable icon name for a sidebar entry. */
+export declare function resolveNavIconName(input: ResolveNavIconInput): NavIconName;
+export declare function resolveNavIcon(input: ResolveNavIconInput): NavIconComponent;
+/** @deprecated Prefer `resolveNavIcon`. */
+export declare function iconForNavKey(key: string): NavIconComponent;
 export {};
 //# sourceMappingURL=icons.d.ts.map

package/dist/components/ui/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BASxC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAQxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,mBAYxC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,+BAS7C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAQxC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,+BAOvC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAS3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,+BAQ7C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BASxC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAQxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BASzC;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,YAAY,CAAC;AAElE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAuBrE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B,CAAC;AA8FF,sDAAsD;AACtD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,mBAAmB,GAAG,WAAW,CAY1E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAE3E;AAED,2CAA2C;AAC3C,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAE3D"}

package/dist/components/ui/icons.js

@@ -19,6 +19,21 @@ export function IconHome(props) {
 export function IconProducts(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3 6.5 10 2.5l7 4v9H3v-9z" }), _jsx("path", { d: "M7 11.5h6M7 14h4" })] }));
 }
+export function IconInventory(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3.5 7h13v9.5H3.5z" }), _jsx("path", { d: "M3.5 10.5h13" }), _jsx("path", { d: "M7 7V5.5h6V7" }), _jsx("path", { d: "M7 13h2M11 13h2" })] }));
+}
+export function IconUsers(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "7.5", cy: "7", r: "2.25" }), _jsx("path", { d: "M3.5 15.5c.4-2.4 2-3.75 4-3.75s3.6 1.35 4 3.75" }), _jsx("circle", { cx: "13.5", cy: "7.25", r: "1.75" }), _jsx("path", { d: "M12.2 11.9c1.35.2 2.55 1.1 2.9 3.1" })] }));
+}
+export function IconCard(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "5", width: "15", height: "10.5", rx: "1.5" }), _jsx("path", { d: "M2.5 8.5h15" }), _jsx("path", { d: "M5.5 12.5h4" })] }));
+}
+export function IconTag(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3.5 10.5V4.5H9.5l7 7-5 5-8-6z" }), _jsx("circle", { cx: "7", cy: "7", r: "1", fill: "currentColor", stroke: "none" })] }));
+}
+export function IconBolt(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M11 2.5 5.5 11h4L9 17.5 14.5 9h-4L11 2.5z" }) }));
+}
 export function IconGallery(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 13 3.5-3.5 2.5 2.5L12.5 9l4 4.5" }), _jsx("circle", { cx: "7", cy: "7.5", r: "1", fill: "currentColor", stroke: "none" })] }));
 }
@@ -26,11 +41,32 @@ export function IconFonts(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M5 16.5V5.5h10M7.5 16.5V9h5v7.5" }), _jsx("path", { d: "M7 5.5h6" })] }));
 }
 export function IconMail(props) {
-    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 6.5 6.5 4.5 3.5 2.5 6.5-2.5 6.5 4.5" })] }));
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 6.5 6.5 4.5 6.5-4.5" })] }));
 }
 export function IconPages(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M6 3.5h5.5L16 8v8.5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1z" }), _jsx("path", { d: "M11.5 3.5V8H16" })] }));
 }
+export function IconPalette(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M10 3a7 7 0 1 0 0 14h1.2a1.8 1.8 0 0 0 0-3.6H10a2 2 0 0 1 0-4h3.5" }), _jsx("circle", { cx: "7.2", cy: "8", r: "0.9", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "8.4", cy: "11.2", r: "0.9", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "12.2", cy: "7.2", r: "0.9", fill: "currentColor", stroke: "none" })] }));
+}
+export function IconTruck(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M2.5 13.5V6.5h9v7" }), _jsx("path", { d: "M11.5 9.5h4l2 2.5v1.5h-6" }), _jsx("circle", { cx: "6", cy: "14.5", r: "1.5" }), _jsx("circle", { cx: "14.5", cy: "14.5", r: "1.5" })] }));
+}
+export function IconClock(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "10", cy: "10", r: "6.5" }), _jsx("path", { d: "M10 6.5V10l3 2" })] }));
+}
+export function IconStar(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "m10 3.5 1.8 3.7 4.1.6-3 2.9.7 4.1L10 13.2 6.4 14.8l.7-4.1-3-2.9 4.1-.6L10 3.5z" }) }));
+}
+export function IconMegaphone(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M4.5 11.5v-3l10-3.5v10L4.5 11.5z" }), _jsx("path", { d: "M4.5 8.5v5.5a2 2 0 0 0 2 0V11" }), _jsx("path", { d: "M15.5 7.5v5" })] }));
+}
+export function IconLayout(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }), _jsx("path", { d: "M3 8h14M9 8v8.5" })] }));
+}
+export function IconList(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M7 5.5h9.5M7 10h9.5M7 14.5h9.5" }), _jsx("path", { d: "M4 5.5h.01M4 10h.01M4 14.5h.01" })] }));
+}
 export function IconSettings(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "10", cy: "10", r: "2.25" }), _jsx("path", { d: "M10 2.5v2M10 15.5v2M3.5 10h2M14.5 10h2M5.4 5.4l1.4 1.4M13.2 13.2l1.4 1.4M5.4 14.6l1.4-1.4M13.2 6.8l1.4-1.4" })] }));
 }
@@ -52,26 +88,174 @@ export function IconMenu(props) {
 export function IconAddon(props) {
     return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M8 3.5h4v4H8z" }), _jsx("path", { d: "M3.5 8h4v4h-4z" }), _jsx("path", { d: "M12.5 8h4v4h-4z" }), _jsx("path", { d: "M8 12.5h4v4H8z" })] }));
 }
-export function iconForNavKey(key) {
+export const NAV_ICON_COMPONENTS = {
+    home: IconHome,
+    products: IconProducts,
+    inventory: IconInventory,
+    users: IconUsers,
+    card: IconCard,
+    tag: IconTag,
+    bolt: IconBolt,
+    gallery: IconGallery,
+    fonts: IconFonts,
+    mail: IconMail,
+    pages: IconPages,
+    palette: IconPalette,
+    truck: IconTruck,
+    clock: IconClock,
+    star: IconStar,
+    megaphone: IconMegaphone,
+    layout: IconLayout,
+    list: IconList,
+    chart: IconChart,
+    sync: IconSync,
+    addon: IconAddon,
+    settings: IconSettings,
+};
+function normalize(value) {
+    return (value ?? "").trim().toLowerCase().replace(/[_-]+/g, " ");
+}
+function haystack(input) {
+    return `${normalize(input.id)} ${normalize(input.label)}`.trim();
+}
+function matchHeuristic(text) {
+    if (!text)
+        return null;
+    if (/\binventory\b|\bstock\b|\bsku\b/.test(text))
+        return "inventory";
+    if (/\bwaitlist\b|\bsignups?\b|\bcustomers?\b|\bsubscribers?\b/.test(text))
+        return "users";
+    if (/\bwebhooks?\b|\bhooks?\b/.test(text))
+        return "bolt";
+    if (/\bdiscounts?\b|\bcoupons?\b|\bpromos?\b|\boffers?\b/.test(text))
+        return "tag";
+    if (/\bsessions?\b|\bpayments?\b|\bcheckout\b/.test(text))
+        return "card";
+    if (/\bstripe\b/.test(text))
+        return "card";
+    if (/\btheme\b|\bbrand(?:ing)?\b|\bappearance\b|\bcolors?\b/.test(text))
+        return "palette";
+    if (/\bshipping\b|\bfulfill\b|\bdelivery\b|\btruck\b/.test(text))
+        return "truck";
+    if (/\brefunds?\b|\breturns?\b/.test(text))
+        return "sync";
+    if (/\bterms\b|\bpolic(?:y|ies)\b|\blegal\b|\bprivacy\b/.test(text))
+        return "pages";
+    if (/\bproduct page\b|\blayout\b|\bblocks?\b/.test(text))
+        return "layout";
+    if (/\bpre[- ]?order\b|\bcountdown\b|\bschedule\b|\brelease\b/.test(text))
+        return "clock";
+    if (/\breviews?\b|\bratings?\b|\btestimonials?\b/.test(text))
+        return "star";
+    if (/\bannouncements?\b|\bbanners?\b|\bmegaphone\b|\balerts?\b/.test(text))
+        return "megaphone";
+    if (/\blookbook\b|\bpress\b|\blogos?\b|\bsize guide\b|\bguide\b/.test(text))
+        return "list";
+    if (/\bback in stock\b|\bfree shipping\b|\bthreshold\b/.test(text))
+        return "tag";
+    if (/\bemails?\b|\bmail\b|\bcampaigns?\b/.test(text))
+        return "mail";
+    if (/\bfonts?\b|\btypography\b/.test(text))
+        return "fonts";
+    if (/\bgallery\b|\bfiles?\b|\bmedia\b|\bimages?\b/.test(text))
+        return "gallery";
+    if (/\baudit\b|\bmetrics?\b|\banalytics\b/.test(text))
+        return "chart";
+    if (/\bsync\b|\benvironments?\b/.test(text))
+        return "sync";
+    if (/\bgeneral\b|\bsettings?\b/.test(text))
+        return "settings";
+    if (/\bproducts?\b|\bcatalog\b/.test(text))
+        return "products";
+    if (/\bhome\b|\boverview\b/.test(text))
+        return "home";
+    if (/\bnav(?:igation)?\b|\bmenu\b/.test(text))
+        return "list";
+    if (/\babout\b|\bcoming soon\b|\bpages?\b/.test(text))
+        return "pages";
+    return null;
+}
+function matchGroup(group) {
+    const g = normalize(group);
+    if (!g)
+        return null;
+    if (g.includes("payment"))
+        return "card";
+    if (g.includes("marketing") || g.includes("growth") || g.includes("customer"))
+        return "users";
+    if (g.includes("product") || g.includes("catalog"))
+        return "products";
+    if (g.includes("online store") ||
+        g.includes("pages") ||
+        g.includes("storefront"))
+        return "pages";
+    if (g.includes("setting") || g.includes("general"))
+        return "settings";
+    if (g.includes("content") || g.includes("media"))
+        return "gallery";
+    if (g.includes("analytic") || g.includes("home"))
+        return "chart";
+    if (g.includes("add-on") || g.includes("addon"))
+        return "addon";
+    return null;
+}
+function matchCategory(category) {
+    if (category === "product")
+        return "products";
+    if (category === "engagement")
+        return "megaphone";
+    if (category === "sales")
+        return "tag";
+    return null;
+}
+function kindDefault(key, section) {
     if (key === "overview")
-        return IconHome;
+        return "home";
     if (key === "audit")
-        return IconChart;
-    if (key.startsWith("resource:"))
-        return IconProducts;
+        return "chart";
     if (key === "gallery")
-        return IconGallery;
+        return "gallery";
     if (key === "fonts")
-        return IconFonts;
+        return "fonts";
     if (key === "emails")
-        return IconMail;
+        return "mail";
     if (key === "sync")
-        return IconSync;
+        return "sync";
     if (key === "addons:overview")
-        return IconAddon;
+        return "addon";
     if (key.startsWith("addon:"))
-        return IconAddon;
-    if (key.startsWith("config:"))
-        return IconPages;
-    return IconSettings;
+        return "addon";
+    if (key.startsWith("resource:"))
+        return "products";
+    if (key.startsWith("config:")) {
+        if (section === "page")
+            return "pages";
+        return "settings";
+    }
+    return "settings";
+}
+/** Resolve a stable icon name for a sidebar entry. */
+export function resolveNavIconName(input) {
+    if (input.icon && input.icon in NAV_ICON_COMPONENTS)
+        return input.icon;
+    const text = haystack(input);
+    const fromText = matchHeuristic(text);
+    if (fromText)
+        return fromText;
+    if (input.key.startsWith("addon:") || input.section === "addon") {
+        const fromCategory = matchCategory(input.category);
+        if (fromCategory)
+            return fromCategory;
+    }
+    const fromGroup = matchGroup(input.group);
+    if (fromGroup)
+        return fromGroup;
+    return kindDefault(input.key, input.section);
+}
+export function resolveNavIcon(input) {
+    return NAV_ICON_COMPONENTS[resolveNavIconName(input)];
+}
+/** @deprecated Prefer `resolveNavIcon`. */
+export function iconForNavKey(key) {
+    return resolveNavIcon({ key });
 }

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);