@vertebr/react 0.12.0 → 0.13.0

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

@@ -13,6 +13,8 @@ export type DescriptionInputProps = {
     onBlur?: () => void;
     onChange: (next: string) => void;
     inputRef?: React.Ref<HTMLElement>;
+    /** Opens a document-style modal for focused policy editing. */
+    onOpenDocumentView?: () => void;
 };
-export declare function DescriptionInput({ id, name, value, readOnly, placeholder, recordImages, galleryUpload, onListGallery, onUploadGallery, onBlur, onChange, inputRef, }: DescriptionInputProps): import("react").JSX.Element;
+export declare function DescriptionInput({ id, name, value, readOnly, placeholder, recordImages, galleryUpload, onListGallery, onUploadGallery, onBlur, onChange, inputRef, onOpenDocumentView, }: DescriptionInputProps): import("react").JSX.Element;
 //# sourceMappingURL=DescriptionInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DescriptionInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/DescriptionInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CACnC,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,WAAoC,EACpC,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,+BA6RvB"}
+{"version":3,"file":"DescriptionInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/DescriptionInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAClC,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,WAAoC,EACpC,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,kBAAkB,GACnB,EAAE,qBAAqB,+BAqTvB"}

package/dist/components/config/DescriptionInput.js

@@ -19,7 +19,7 @@ function assignRef(ref, node) {
 function ToolbarButton({ active, disabled, title, onClick, children, }) {
     return (_jsx("button", { type: "button", className: "vertebr-md-btn", "data-active": active || undefined, disabled: disabled, title: title, onMouseDown: (event) => event.preventDefault(), onClick: onClick, children: children }));
 }
-export function DescriptionInput({ id, name, value, readOnly, placeholder = "Write a description…", recordImages, galleryUpload, onListGallery, onUploadGallery, onBlur, onChange, inputRef, }) {
+export function DescriptionInput({ id, name, value, readOnly, placeholder = "Write a description…", recordImages, galleryUpload, onListGallery, onUploadGallery, onBlur, onChange, inputRef, onOpenDocumentView, }) {
     const text = typeof value === "string" ? value : "";
     const onChangeRef = useRef(onChange);
     const onBlurRef = useRef(onBlur);
@@ -148,5 +148,5 @@ export function DescriptionInput({ id, name, value, readOnly, placeholder = "Wri
                             rows: 3,
                             cols: 3,
                             withHeaderRow: true,
-                        }).run(), children: "Table" }), marks?.table ? (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { disabled: locked, title: "Add column", onClick: () => editor?.chain().focus().addColumnAfter().run(), children: "+Col" }), _jsx(ToolbarButton, { disabled: locked, title: "Add row", onClick: () => editor?.chain().focus().addRowAfter().run(), children: "+Row" }), _jsx(ToolbarButton, { disabled: locked, title: "Delete table", onClick: () => editor?.chain().focus().deleteTable().run(), children: "Del" })] })) : null, _jsx(ToolbarButton, { active: marks?.link, disabled: locked, title: "Link", onClick: setLink, children: "Link" }), _jsx(ToolbarButton, { disabled: locked, title: "Insert images", onClick: () => setPickerOpen(true), children: "Image" })] }), _jsx(EditorContent, { editor: editor }), _jsxs("p", { className: "vertebr-field-prose-meta", children: ["Markdown", _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), stats.words, " ", stats.words === 1 ? "word" : "words", _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), stats.characters, " ", stats.characters === 1 ? "character" : "characters"] }), pickerOpen ? (_jsx(ImagePickerModal, { recordImages: recordImages, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setPickerOpen(false), onInsert: insertImages })) : null] }));
+                        }).run(), children: "Table" }), marks?.table ? (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { disabled: locked, title: "Add column", onClick: () => editor?.chain().focus().addColumnAfter().run(), children: "+Col" }), _jsx(ToolbarButton, { disabled: locked, title: "Add row", onClick: () => editor?.chain().focus().addRowAfter().run(), children: "+Row" }), _jsx(ToolbarButton, { disabled: locked, title: "Delete table", onClick: () => editor?.chain().focus().deleteTable().run(), children: "Del" })] })) : null, _jsx(ToolbarButton, { active: marks?.link, disabled: locked, title: "Link", onClick: setLink, children: "Link" }), _jsx(ToolbarButton, { disabled: locked, title: "Insert images", onClick: () => setPickerOpen(true), children: "Image" }), onOpenDocumentView ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "vertebr-md-sep", "aria-hidden": "true" }), _jsx(ToolbarButton, { disabled: false, title: "Open document view", onClick: onOpenDocumentView, children: "Doc" })] })) : null] }), _jsx(EditorContent, { editor: editor }), _jsxs("p", { className: "vertebr-field-prose-meta", children: ["Markdown", _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), stats.words, " ", stats.words === 1 ? "word" : "words", _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), stats.characters, " ", stats.characters === 1 ? "character" : "characters", onOpenDocumentView ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: " \u00B7 " }), _jsx("button", { type: "button", className: "vertebr-md-doc-link", onClick: onOpenDocumentView, children: "Open in document view" })] })) : null] }), pickerOpen ? (_jsx(ImagePickerModal, { recordImages: recordImages, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onClose: () => setPickerOpen(false), onInsert: insertImages })) : null] }));
 }

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

@@ -0,0 +1,17 @@
+export type DocumentAttachmentFieldProps = {
+    id: string;
+    label: string;
+    value: string;
+    readOnly?: boolean;
+    description?: string;
+    /** Sibling markdown body available for document-view editing. */
+    markdownBody?: string;
+    canPickFiles?: boolean;
+    canUpload?: boolean;
+    onChangeUrl: (next: string) => void;
+    onOpenPicker?: () => void;
+    onUploadFiles?: (files: File[]) => Promise<void>;
+    onEditMarkdown?: () => void;
+};
+export declare function DocumentAttachmentField({ id, label, value, readOnly, description, markdownBody, canPickFiles, canUpload, onChangeUrl, onOpenPicker, onUploadFiles, onEditMarkdown, }: DocumentAttachmentFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=DocumentAttachmentField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentAttachmentField.d.ts","sourceRoot":"","sources":["../../../src/components/config/DocumentAttachmentField.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,4BAA4B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,cAAc,GACf,EAAE,4BAA4B,+BAqI9B"}

package/dist/components/config/DocumentAttachmentField.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { pdfFileName } from "../../lib/documents";
+export function DocumentAttachmentField({ id, label, value, readOnly, description, markdownBody, canPickFiles, canUpload, onChangeUrl, onOpenPicker, onUploadFiles, onEditMarkdown, }) {
+    const inputRef = useRef(null);
+    const [busy, setBusy] = useState(false);
+    const [showUrl, setShowUrl] = useState(() => Boolean(value.trim()));
+    const url = value.trim();
+    const hasPdf = Boolean(url);
+    const canEditMd = Boolean(onEditMarkdown && markdownBody !== undefined);
+    const handleFiles = async (files) => {
+        if (!files?.length || !onUploadFiles || readOnly)
+            return;
+        setBusy(true);
+        try {
+            await onUploadFiles([...files]);
+            setShowUrl(true);
+        }
+        finally {
+            setBusy(false);
+            if (inputRef.current)
+                inputRef.current.value = "";
+        }
+    };
+    return (_jsxs("div", { className: "vertebr-doc-attach", children: [_jsxs("div", { className: "vertebr-doc-attach-card", "data-has-file": hasPdf || undefined, children: [_jsxs("div", { className: "vertebr-doc-attach-main", children: [_jsx("div", { className: "vertebr-doc-attach-icon", "aria-hidden": "true", children: "PDF" }), _jsxs("div", { className: "vertebr-doc-attach-copy", children: [_jsx("p", { className: "vertebr-doc-attach-title", children: hasPdf ? pdfFileName(url) : "No PDF attached" }), _jsx("p", { className: "vertebr-doc-attach-hint", children: hasPdf
+                                            ? "Optional download for shoppers. Markdown remains the live policy."
+                                            : description?.trim() ||
+                                                "Optional PDF download. Markdown remains the live policy." })] })] }), _jsxs("div", { className: "vertebr-doc-attach-actions", children: [canEditMd ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: onEditMarkdown, children: "Edit document" })) : null, canPickFiles && !readOnly ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onOpenPicker, disabled: busy, children: "Choose PDF" })) : null, canUpload && !readOnly ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "vertebr-btn", disabled: busy, onClick: () => inputRef.current?.click(), children: busy ? "Uploading…" : "Upload" }), _jsx("input", { ref: inputRef, type: "file", accept: "application/pdf,.pdf", hidden: true, onChange: (event) => void handleFiles(event.target.files) })] })) : null, hasPdf ? (_jsx("a", { className: "vertebr-btn", href: url, target: "_blank", rel: "noreferrer", children: "Open" })) : null, hasPdf && !readOnly ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => {
+                                    onChangeUrl("");
+                                    setShowUrl(false);
+                                }, children: "Remove" })) : null] })] }), !readOnly ? (showUrl ? (_jsxs("label", { className: "vertebr-doc-attach-url", htmlFor: id, children: [_jsxs("span", { children: [label, " URL"] }), _jsx("input", { id: id, type: "url", placeholder: "https://\u2026/policy.pdf", value: value, onChange: (event) => onChangeUrl(event.target.value) })] })) : (_jsx("button", { type: "button", className: "vertebr-doc-attach-url-toggle", onClick: () => setShowUrl(true), children: "Paste PDF URL" }))) : hasPdf ? (_jsxs("label", { className: "vertebr-doc-attach-url", htmlFor: id, children: [_jsxs("span", { children: [label, " URL"] }), _jsx("input", { id: id, type: "url", readOnly: true, value: value })] })) : null] }));
+}

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

@@ -7,6 +7,7 @@ export type PickerImage = {
     source: "record" | "gallery" | "url";
 };
 type Tab = "record" | "gallery";
+type AssetKind = "image" | "document" | "any";
 export type ImagePickerModalProps = {
     recordImages?: RecordImage[];
     galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
@@ -20,7 +21,9 @@ export type ImagePickerModalProps = {
     confirmLabel?: string;
     /** Prefer Files tab when both product photos and gallery exist. */
     defaultTab?: Tab;
+    /** Limit Files library to images or PDFs. @default "image" */
+    assetKind?: AssetKind;
 };
-export declare function ImagePickerModal({ recordImages, galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, title, confirmLabel, defaultTab, }: ImagePickerModalProps): import("react").ReactPortal;
+export declare function ImagePickerModal({ recordImages, galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, title, confirmLabel, defaultTab, assetKind, }: ImagePickerModalProps): import("react").ReactPortal;
 export {};
 //# sourceMappingURL=ImagePickerModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImagePickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/config/ImagePickerModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;CACtC,CAAC;AAEF,KAAK,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhC,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAC1C,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,YAAiB,EACjB,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,EACP,QAAQ,EACR,KAAuB,EACvB,YAAoB,EACpB,UAAU,GACX,EAAE,qBAAqB,+BAiQvB"}
+{"version":3,"file":"ImagePickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/config/ImagePickerModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;CACtC,CAAC;AAEF,KAAK,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;AAChC,KAAK,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAC1C,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,YAAiB,EACjB,aAAa,EACb,aAAa,EACb,eAAe,EACf,OAAO,EACP,QAAQ,EACR,KAAuB,EACvB,YAAoB,EACpB,UAAU,EACV,SAAmB,GACpB,EAAE,qBAAqB,+BAqSvB"}

package/dist/components/config/ImagePickerModal.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
+import { filterGalleryByKind, isPdfAsset } from "../../lib/documents";
 import { ImageUploadControl } from "../resources/ImageUploadControl";
-export function ImagePickerModal({ recordImages = [], galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, title = "Choose images", confirmLabel = "Use", defaultTab, }) {
+export function ImagePickerModal({ recordImages = [], galleryUpload, onListGallery, onUploadGallery, onClose, onInsert, title = "Choose images", confirmLabel = "Use", defaultTab, assetKind = "image", }) {
     const hasGallery = Boolean(onListGallery);
+    const docsOnly = assetKind === "document";
     const [tab, setTab] = useState(() => {
         if (defaultTab)
             return defaultTab;
-        if (recordImages.length)
+        if (!docsOnly && recordImages.length)
             return "record";
         return "gallery";
     });
@@ -38,7 +40,7 @@ export function ImagePickerModal({ recordImages = [], galleryUpload, onListGalle
         void onListGallery()
             .then((items) => {
             if (!cancelled)
-                setGallery(items);
+                setGallery(filterGalleryByKind(items, assetKind));
         })
             .catch((err) => {
             if (!cancelled) {
@@ -52,13 +54,15 @@ export function ImagePickerModal({ recordImages = [], galleryUpload, onListGalle
         return () => {
             cancelled = true;
         };
-    }, [hasGallery, onListGallery]);
-    const recordTiles = useMemo(() => recordImages.map((image) => ({
-        id: `record:${image.id}`,
-        url: image.url,
-        name: image.name,
-        source: "record",
-    })), [recordImages]);
+    }, [hasGallery, onListGallery, assetKind]);
+    const recordTiles = useMemo(() => docsOnly
+        ? []
+        : recordImages.map((image) => ({
+            id: `record:${image.id}`,
+            url: image.url,
+            name: image.name,
+            source: "record",
+        })), [recordImages, docsOnly]);
     const galleryTiles = useMemo(() => gallery.map((item) => ({
         id: `gallery:${item.id}`,
         url: item.url,
@@ -68,6 +72,8 @@ export function ImagePickerModal({ recordImages = [], galleryUpload, onListGalle
     const tiles = tab === "record" ? recordTiles : galleryTiles;
     const picked = Object.values(selected);
     const canGalleryUpload = Boolean(galleryUpload && onUploadGallery);
+    const unit = docsOnly ? "document" : "image";
+    const units = docsOnly ? "documents" : "images";
     const toggle = (image) => {
         setSelected((current) => {
             const next = { ...current };
@@ -85,22 +91,33 @@ export function ImagePickerModal({ recordImages = [], galleryUpload, onListGalle
         const image = {
             id: `url:${href}`,
             url: href,
-            name: "Image",
+            name: docsOnly ? "Document" : "Image",
             source: "url",
         };
         setSelected((current) => ({ ...current, [image.id]: image }));
         setUrl("");
     };
-    return createPortal(_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Media" }), _jsx("h2", { children: title })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, children: "Close" })] }), _jsxs("div", { className: "vertebr-modal-body vertebr-picker-body", children: [recordImages.length > 0 && hasGallery ? (_jsxs("div", { className: "vertebr-picker-tabs", role: "tablist", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "record", "data-active": tab === "record" || undefined, onClick: () => setTab("record"), children: ["Product photos", _jsx("span", { children: recordTiles.length })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "gallery", "data-active": tab === "gallery" || undefined, onClick: () => setTab("gallery"), children: ["Files", _jsx("span", { children: loading ? "…" : galleryTiles.length })] })] })) : null, tab === "gallery" && canGalleryUpload ? (_jsx(ImageUploadControl, { meta: {
+    const galleryAccept = docsOnly && galleryUpload
+        ? {
+            ...galleryUpload,
+            accept: galleryUpload.accept.some((entry) => /pdf/i.test(entry))
+                ? galleryUpload.accept
+                : [...galleryUpload.accept, "application/pdf"],
+        }
+        : galleryUpload;
+    return createPortal(_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: docsOnly ? "Documents" : "Media" }), _jsx("h2", { children: title })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, children: "Close" })] }), _jsxs("div", { className: "vertebr-modal-body vertebr-picker-body", children: [!docsOnly && recordImages.length > 0 && hasGallery ? (_jsxs("div", { className: "vertebr-picker-tabs", role: "tablist", children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "record", "data-active": tab === "record" || undefined, onClick: () => setTab("record"), children: ["Product photos", _jsx("span", { children: recordTiles.length })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": tab === "gallery", "data-active": tab === "gallery" || undefined, onClick: () => setTab("gallery"), children: ["Files", _jsx("span", { children: loading ? "…" : galleryTiles.length })] })] })) : null, tab === "gallery" && canGalleryUpload && galleryAccept ? (_jsx(ImageUploadControl, { meta: {
                                 field: "gallery",
-                                accept: galleryUpload.accept,
-                                maxBytes: galleryUpload.maxBytes,
-                            }, multiple: true, label: "Drop images to add them to Files", onUpload: async (files) => {
+                                accept: galleryAccept.accept,
+                                maxBytes: galleryAccept.maxBytes,
+                            }, multiple: true, showOptimizeHint: !docsOnly, label: docsOnly
+                                ? "Drop PDFs to add them to Files"
+                                : "Drop images to add them to Files", onUpload: async (files) => {
                                 const items = await onUploadGallery(files);
-                                setGallery((current) => [...items, ...current]);
+                                const kept = filterGalleryByKind(items, assetKind);
+                                setGallery((current) => [...kept, ...current]);
                                 setSelected((current) => {
                                     const next = { ...current };
-                                    for (const item of items) {
+                                    for (const item of kept) {
                                         const image = {
                                             id: `gallery:${item.id}`,
                                             url: item.url,
@@ -111,17 +128,22 @@ export function ImagePickerModal({ recordImages = [], galleryUpload, onListGalle
                                     }
                                     return next;
                                 });
-                            } })) : null, _jsxs("label", { className: "vertebr-field", children: [_jsx("span", { children: "Or paste an image URL" }), _jsxs("div", { className: "vertebr-picker-url", children: [_jsx("input", { type: "url", value: url, placeholder: "https://", onChange: (event) => setUrl(event.target.value), onKeyDown: (event) => {
+                            } })) : null, _jsxs("label", { className: "vertebr-field", children: [_jsxs("span", { children: ["Or paste a ", docsOnly ? "PDF" : "image", " URL"] }), _jsxs("div", { className: "vertebr-picker-url", children: [_jsx("input", { type: "url", value: url, placeholder: "https://", onChange: (event) => setUrl(event.target.value), onKeyDown: (event) => {
                                                 if (event.key === "Enter") {
                                                     event.preventDefault();
                                                     addUrl();
                                                 }
-                                            } }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: !url.trim(), onClick: addUrl, children: "Add" })] })] }), error ? (_jsx("p", { className: "vertebr-status", "data-tone": "danger", children: error })) : null, loading && tab === "gallery" ? (_jsx("div", { className: "vertebr-empty", children: "Loading gallery\u2026" })) : tiles.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: tab === "record"
+                                            } }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: !url.trim(), onClick: addUrl, children: "Add" })] })] }), error ? (_jsx("p", { className: "vertebr-status", "data-tone": "danger", children: error })) : null, loading && tab === "gallery" ? (_jsx("div", { className: "vertebr-empty", children: "Loading Files\u2026" })) : tiles.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: tab === "record"
                                 ? "No product photos on this record yet."
                                 : hasGallery
-                                    ? "No images in Files yet."
-                                    : "No Files library is configured. Paste a URL or add product photos." })) : (_jsx("div", { className: "vertebr-picker-grid", children: tiles.map((image) => {
+                                    ? docsOnly
+                                        ? "No PDFs in Files yet."
+                                        : "No images in Files yet."
+                                    : "No Files library is configured. Paste a URL instead." })) : (_jsx("div", { className: "vertebr-picker-grid", children: tiles.map((image) => {
                                 const active = Boolean(selected[image.id]);
-                                return (_jsxs("button", { type: "button", className: "vertebr-picker-tile", "data-selected": active || undefined, onClick: () => toggle(image), children: [_jsx("span", { className: "vertebr-picker-thumb", children: _jsx("img", { src: image.url, alt: "" }) }), _jsx("span", { className: "vertebr-picker-name", children: image.name })] }, image.id));
-                            }) }))] }), _jsxs("footer", { className: "vertebr-picker-foot", children: [_jsxs("span", { className: "vertebr-picker-count", children: [picked.length, " selected"] }), _jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: picked.length === 0, onClick: () => onInsert(picked), children: [confirmLabel, " ", picked.length || "", picked.length === 1 ? " image" : " images"] })] })] }) }), document.body);
+                                const pdf = docsOnly || isPdfAsset(image);
+                                return (_jsxs("button", { type: "button", className: "vertebr-picker-tile", "data-selected": active || undefined, onClick: () => toggle(image), children: [_jsx("span", { className: pdf
+                                                ? "vertebr-picker-thumb vertebr-gallery-thumb-file"
+                                                : "vertebr-picker-thumb", children: pdf ? (_jsx("span", { className: "vertebr-gallery-file-badge", children: "PDF" })) : (_jsx("img", { src: image.url, alt: "" })) }), _jsx("span", { className: "vertebr-picker-name", children: image.name })] }, image.id));
+                            }) }))] }), _jsxs("footer", { className: "vertebr-picker-foot", children: [_jsxs("span", { className: "vertebr-picker-count", children: [picked.length, " selected"] }), _jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: picked.length === 0, onClick: () => onInsert(picked), children: [confirmLabel, " ", picked.length || "", picked.length === 1 ? ` ${unit}` : ` ${units}`] })] })] }) }), document.body);
 }

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

@@ -0,0 +1,19 @@
+import type { GalleryItem, ResourceUploadMeta } from "@vertebr/client";
+import type { RecordImage } from "../../lib/images";
+export type MarkdownDocumentModalProps = {
+    title?: string;
+    value: string;
+    readOnly?: boolean;
+    recordImages?: RecordImage[];
+    galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
+    onListGallery?: () => Promise<GalleryItem[]>;
+    onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+    onChange: (next: string) => void;
+    onClose: () => void;
+};
+/**
+ * Full-page document chrome for editing policy markdown
+ * (PDF-like page, not a binary PDF editor).
+ */
+export declare function MarkdownDocumentModal({ title, value, readOnly, recordImages, galleryUpload, onListGallery, onUploadGallery, onChange, onClose, }: MarkdownDocumentModalProps): import("react").ReactPortal;
+//# sourceMappingURL=MarkdownDocumentModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownDocumentModal.d.ts","sourceRoot":"","sources":["../../../src/components/config/MarkdownDocumentModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAChE,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5D,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAyB,EACzB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,GACR,EAAE,0BAA0B,+BAkF5B"}

package/dist/components/config/MarkdownDocumentModal.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { descriptionStats } from "../../lib/description";
+import { DescriptionInput } from "./DescriptionInput";
+/**
+ * Full-page document chrome for editing policy markdown
+ * (PDF-like page, not a binary PDF editor).
+ */
+export function MarkdownDocumentModal({ title = "Policy document", value, readOnly, recordImages, galleryUpload, onListGallery, onUploadGallery, onChange, onClose, }) {
+    const [draft, setDraft] = useState(value);
+    const stats = descriptionStats(draft);
+    useEffect(() => {
+        setDraft(value);
+    }, [value]);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    const saveAndClose = () => {
+        onChange(draft);
+        onClose();
+    };
+    return createPortal(_jsx("div", { className: "vertebr-modal-backdrop vertebr-doc-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-doc-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Document" }), _jsx("h2", { children: title })] }), _jsxs("div", { className: "vertebr-doc-modal-actions", children: [_jsxs("span", { className: "vertebr-doc-modal-stats", children: [stats.words, " words \u00B7 ", stats.characters, " characters"] }), !readOnly ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: saveAndClose, children: "Done" })) : null, _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, children: "Close" })] })] }), _jsx("div", { className: "vertebr-modal-body vertebr-doc-modal-body", children: _jsx("div", { className: "vertebr-doc-page", children: _jsx(DescriptionInput, { id: "vertebr-doc-modal-editor", value: draft, readOnly: readOnly, placeholder: "Write the policy\u2026", recordImages: recordImages, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onChange: setDraft }) }) })] }) }), document.body);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAwBtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC5C,mBAAmB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,+BAyXlB"}
+{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA2BtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmBvF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC5C,mBAAmB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,+BA4elB"}

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

package/dist/styles/gallery.css

@@ -58,6 +58,243 @@
   object-fit: cover;
 }
 
+.vertebr-gallery-thumb-file {
+  display: grid;
+  place-items: center;
+  background:
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--vb-accent) 12%, var(--vb-bg-muted)),
+      var(--vb-bg-muted)
+    );
+}
+
+.vertebr-gallery-file-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3.25rem;
+  padding: 0.35rem 0.55rem;
+  border-radius: 6px;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.vertebr-field-document {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.55rem;
+  margin-bottom: 0.55rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 8px;
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-field-document-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem 0.45rem;
+  border-radius: 4px;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.vertebr-field-document a {
+  color: var(--vb-accent);
+  font-size: 0.85rem;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.vertebr-field-document a:hover {
+  text-decoration: underline;
+}
+
+.vertebr-doc-attach {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  min-width: 0;
+}
+
+.vertebr-doc-attach-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  min-width: 0;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 12px;
+  background: var(--vb-bg-elevated);
+}
+
+.vertebr-doc-attach-card[data-has-file="true"] {
+  border-color: color-mix(in srgb, var(--vb-accent) 30%, var(--vb-border));
+}
+
+.vertebr-doc-attach-main {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.vertebr-doc-attach-icon {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 3rem;
+  border-radius: 7px;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  color: var(--vb-text);
+  font-size: 0.65rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  box-shadow: inset 0 -0.4rem 0 color-mix(in srgb, var(--vb-danger, #b42318) 55%, transparent);
+}
+
+.vertebr-doc-attach-copy {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.vertebr-doc-attach-title {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 650;
+  color: var(--vb-text);
+  overflow-wrap: anywhere;
+}
+
+.vertebr-doc-attach-hint {
+  margin: 0.3rem 0 0;
+  font-size: 0.78rem;
+  line-height: 1.4;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-doc-attach-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem;
+  width: 100%;
+}
+
+.vertebr-doc-attach-actions .vertebr-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  text-align: center;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.vertebr-doc-attach-actions .vertebr-btn-primary {
+  grid-column: 1 / -1;
+}
+
+.vertebr-doc-attach-url {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-doc-attach-url input {
+  width: 100%;
+  min-width: 0;
+}
+
+.vertebr-doc-attach-url-toggle {
+  appearance: none;
+  align-self: flex-start;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--vb-text-subtle);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.vertebr-doc-attach-url-toggle:hover {
+  color: var(--vb-accent);
+  text-decoration: underline;
+}
+
+.vertebr-doc-modal-backdrop {
+  align-items: stretch;
+  justify-items: center;
+  padding: 1.5rem;
+}
+
+.vertebr-doc-modal {
+  width: min(100%, 920px);
+  max-height: min(94vh, 980px);
+}
+
+.vertebr-doc-modal-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.vertebr-doc-modal-stats {
+  margin-right: 0.35rem;
+  font-size: 0.75rem;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-doc-modal-body {
+  padding: 1.25rem 1.35rem 1.5rem;
+  overflow: auto;
+  background:
+    radial-gradient(
+      circle at top,
+      color-mix(in srgb, var(--vb-bg-muted) 80%, transparent),
+      transparent 55%
+    ),
+    var(--vb-bg);
+}
+
+.vertebr-doc-page {
+  margin: 0 auto;
+  max-width: 46rem;
+  padding: 1.35rem 1.35rem 1.6rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 4px;
+  background: var(--vb-bg-elevated);
+  box-shadow:
+    0 1px 0 color-mix(in srgb, #000 6%, transparent),
+    0 18px 40px color-mix(in srgb, #000 12%, transparent);
+}
+
+.vertebr-doc-page .vertebr-field-prose {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .vertebr-gallery-meta {
   min-width: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",