@mmlogic/components 0.4.1 → 0.4.2

package/dist/collection/components/documents/mrd-file-preview/mrd-file-preview.js

@@ -0,0 +1,212 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { detectPreviewKind } from "./file-preview-kind";
+/**
+ * Renders a signed URL inline as a PDF (native browser viewer, via `<iframe>`)
+ * or an image (`<img>`), picked from `mimeType`/`fileName`. Purely
+ * presentational: the signed URL is used directly as element `src` — a
+ * navigation, not a fetch/XHR, so no CORS handling is needed here. Fetching
+ * the signed URL itself is the host's responsibility, same as `mrdLoadImage` /
+ * `setImagePreview` on mrd-layout-section.
+ */
+export class MrdFilePreview {
+    constructor() {
+        /** Signed URL to render. */
+        this.src = '';
+        /** Declared mime type (e.g. 'application/pdf', 'image/png'), when known.
+         *  Authoritative over `fileName` when present. */
+        this.mimeType = '';
+        /** Original file name — used for extension-based detection when `mimeType`
+         *  is absent, and as alt/title text. */
+        this.fileName = '';
+        /** The file's own reference href (not the signed preview URL in `src`).
+         *  When set, an unsupported type falls back to the same download button
+         *  used elsewhere in the library, so hosts need no new wiring. */
+        this.href = '';
+        this.locale = navigator.language;
+        this.imageFailed = false;
+        this.onImageError = () => {
+            this.imageFailed = true;
+        };
+        this.retry = () => {
+            this.imageFailed = false;
+            this.mrdPreviewReload.emit();
+        };
+    }
+    srcChanged() {
+        this.imageFailed = false;
+    }
+    render() {
+        const kind = detectPreviewKind(this.mimeType, this.fileName);
+        if (kind === 'pdf') {
+            return (h(Host, null, h("iframe", { class: "mrd-file-preview__frame", src: this.src, title: this.fileName || 'preview' })));
+        }
+        if (kind === 'image') {
+            if (this.imageFailed) {
+                return (h(Host, null, h("div", { class: "mrd-file-preview__error" }, h("span", { class: "mrd-file-preview__error-text" }, t('preview_error', this.locale)), h("button", { type: "button", class: "mrd-file-preview__retry", onClick: this.retry }, t('retry', this.locale)))));
+            }
+            return (h(Host, null, h("img", { class: "mrd-file-preview__image", src: this.src, alt: this.fileName || '', onError: this.onImageError })));
+        }
+        return (h(Host, null, h("div", { class: "mrd-file-preview__unsupported" }, h("span", null, t('preview_unsupported', this.locale)), this.href && (h("button", { type: "button", class: "mrd-file-preview__download", onClick: () => this.mrdDownload.emit({ href: this.href, fileName: this.fileName }) }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" })), t('download', this.locale))))));
+    }
+    static get is() { return "mrd-file-preview"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-file-preview.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-file-preview.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Signed URL to render."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            },
+            "mimeType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Declared mime type (e.g. 'application/pdf', 'image/png'), when known.\nAuthoritative over `fileName` when present."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mime-type",
+                "defaultValue": "''"
+            },
+            "fileName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Original file name \u2014 used for extension-based detection when `mimeType`\nis absent, and as alt/title text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-name",
+                "defaultValue": "''"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The file's own reference href (not the signed preview URL in `src`).\nWhen set, an unsupported type falls back to the same download button\nused elsewhere in the library, so hosts need no new wiring."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "imageFailed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdPreviewReload",
+                "name": "mrdPreviewReload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The image failed to load \u2014 most likely an expired signed URL. Host\nshould fetch a fresh signed URL and update `src`.\nNote: this is only raised for images. Browsers don't reliably surface\nHTTP-level failures (e.g. a 403 on an expired URL) through an iframe's\nload/error events, so the same detection isn't available for PDFs."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdDownload",
+                "name": "mrdDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Download the file. Same shape as mrd-document-view / mrd-layout-section's\nmrdDownload \u2014 host resolves `href` to a signed URL."
+                },
+                "complexType": {
+                    "original": "{ href: string; fileName: string }",
+                    "resolved": "{ href: string; fileName: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "srcChanged"
+            }];
+    }
+}

package/dist/collection/components/fields/mrd-boolean-field/mrd-boolean-field.js

@@ -20,7 +20,7 @@ export class MrdBooleanField {
         this.checked = !!this.value;
     }
     render() {
-        return (h(Host, { key: 'f7851813646d31c565c262bf3c8d4083177dd993' }, h("div", { key: '4b3c9f46e8b79bdc97ef5815afb85ba5ddde0c9a', class: "mrd-boolean-field" }, h("label", { key: 'f81fa28d5a79de0445c2c192352343f0807609a1', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '510a4f5533cbe2741b8df34cb64fc739475a26cf', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '949e042c8af0f2872cf973a0d5407fce972eb240', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: 'e8c52b5820887b2a8ec9a20eb7e4116a528d27d4', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
+        return (h(Host, { key: 'c0e92a50b1512d7b7f36f151b34bcb5b9497ca59' }, h("div", { key: 'e3f70c88321d8e72784b81092a9ebc0451ba330d', class: "mrd-boolean-field" }, h("label", { key: '3e6d907b72a5e1da7e268685c67811ebf264d5d8', class: "mrd-boolean-field__toggle-label" }, h("input", { key: '2b6df62a72cba19aa26374a2448c26666e28b03d', class: "mrd-boolean-field__checkbox", type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h("span", { key: '77cbe5c1a25153de745f5e91eef589f40cb3237d', class: "mrd-boolean-field__toggle", "aria-hidden": "true" }), this.label && (h("span", { key: '34daaa269ed64ed3be71ecfd15d79eb42d746247', class: `mrd-boolean-field__text${this.required ? ' mrd-boolean-field__text--required' : ''}` }, this.label))))));
     }
     static get is() { return "mrd-boolean-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-currency-field/mrd-currency-field.js

@@ -42,7 +42,7 @@ export class MrdCurrencyField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '24c530db6e0420af39fa0a35b31e966286f2d00c' }, h("div", { key: '795bc336425fbf1b86828f4a8f5df93930169a3c', class: "mrd-currency-field" }, h(FieldLabel, { key: 'b302cd9296c29ed5719b1f768bd5d4eea86f6406', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '7efca51615f405ffd660e120accae32f55a9b5a0', class: "mrd-currency-field__row" }, h("input", { key: '5c6fd3549d5631fba49a8a701e6c3a1d0a672890', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '83ad5e92b623c3c60d161b8828e780adb476682c', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'b059290bb566b119c4f192e750b3e365446243e6', base: "mrd-currency-field", error: this.error }))));
+        return (h(Host, { key: '7265395c3b93c3b4daf4c4221da13e01b2fed2e8' }, h("div", { key: 'e644b67a7aba6e8f5b7175f5f79a4bf5e99cb611', class: "mrd-currency-field" }, h(FieldLabel, { key: 'd47a215c0684aea8a3253ae6edc4628d20733d90', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: 'b8f67f8188ad9cd8ba2b6869fcb2b4cd413dec32', class: "mrd-currency-field__row" }, h("input", { key: '8d643424d8932d11ceea0435353c54bc9399c187', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: "0.00", required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onBlur: this.handleAmountBlur }), h("select", { key: '55b12e960646c2420883df848ae440d45f808300', class: "mrd-currency-field__currency", disabled: this.disabled, onChange: this.handleCurrencyChange }, COMMON_CURRENCIES.map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: 'd0a6adbb83af8fde047eff22c8efd9bbe1ae638f', base: "mrd-currency-field", error: this.error }))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-date-field/mrd-date-field.js

@@ -20,7 +20,7 @@ export class MrdDateField {
         };
     }
     render() {
-        return (h(Host, { key: '71be9e4bcc87b40cf3b777d3fe0bff23c1a0fa94' }, h("div", { key: '40ced03df5d4185264ba9d03c832b3870ce8ae19', class: "mrd-date-field" }, h(FieldLabel, { key: 'd85ec7c4617a22c8c5862253e8090c85484f8c41', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'c9211fdefdd9527c7ff40ed9de33153303fc1742', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '9dd64475bf8a77bea5344faa71f20485b34b86f9', base: "mrd-date-field", error: this.error }))));
+        return (h(Host, { key: 'c0b9d684c5e0b5e3da785c383472ed5d6c13c39f' }, h("div", { key: '304c9b5c9570a369258f5f6fd0877a01a87d98d5', class: "mrd-date-field" }, h(FieldLabel, { key: '72c5ec21699a314920ea1217aee9a353bc8b4b7e', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: 'be18df6c7e5fe89bf00cef38484711a9a685e0dc', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'f16ffb7e14f9ac9af4a34a96361a25dd4d738d68', base: "mrd-date-field", error: this.error }))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-datetime-field/mrd-datetime-field.js

@@ -47,7 +47,7 @@ export class MrdDatetimeField {
         return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
     }
     render() {
-        return (h(Host, { key: 'ac07ec2ba79cde998d1247e9d71de336c0e72a64' }, h("div", { key: '8144cf68c4b6b9cbc8396903b84bb355f380ceda', class: "mrd-datetime-field" }, h(FieldLabel, { key: '972686469f68c932e33b8d2c3806422553a3cce3', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '370b6032c38fbee22e662c1b2871f96b53b58956', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'b7a812f82a6b0d2c938aa1f1c2494df685258555', base: "mrd-datetime-field", error: this.error }))));
+        return (h(Host, { key: '0ee285553f3d5e1a9984619795543d67d581c76f' }, h("div", { key: '2c93dffe3701da9099f4b34a9d7c1d0619fa824e', class: "mrd-datetime-field" }, h(FieldLabel, { key: 'ebda087fdcb2a956933758e6250a8e4dc0484ef9', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '06b012fc78c76e3b08ef24af5e134aa691975285', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '54e7acdd051c00893eb17cbf4911917fceddb54f', base: "mrd-datetime-field", error: this.error }))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-email-field/mrd-email-field.js

@@ -24,7 +24,7 @@ export class MrdEmailField {
         };
     }
     render() {
-        return (h(Host, { key: '93f7c4975c24e6001e772f2858344edec04cda10' }, h("div", { key: '4f49a2a1f68a4161762861c5d54fd3690c88ac5d', class: "mrd-email-field" }, h(FieldLabel, { key: '23b20799f3e7c04889b7bc3a271e61b0bb5d7537', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '0fc452bfb9295a80102eeed4b32bcc9475c9d17b', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '34945fff9c69cf2f0aeb56492c95052250514d5c', base: "mrd-email-field", error: this.error }))));
+        return (h(Host, { key: 'e113fb3958c06ee4d4e870b6005e07b1793835a1' }, h("div", { key: '9393b859167f1474d944575f464e1523f1dcf469', class: "mrd-email-field" }, h(FieldLabel, { key: '57c134921adb7f941c19d2fa36cce213bc12ae1e', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '67496689526d2fa96a087b00a9436e9de4d69415', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '5a151c2995db77771fe8f98a24c627b0060f655a', base: "mrd-email-field", error: this.error }))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-file-field/mrd-file-field.js

@@ -74,7 +74,7 @@ export class MrdFileField {
             error: hasError,
             disabled: this.disabled || this.uploading,
         });
-        return (h(Host, { key: '2c4cee79cd0f95ed3750dfc86007a2b36aa3da15' }, h("div", { key: '5b47d0f83e8e38b22bb04409544ec2af580274f1', class: "mrd-file-field" }, h(FieldLabel, { key: '47a92d5680670bf750854fa6e7883da54a40baec', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '684f6ab39c32635fb5ca966ccab4a061d8682f89', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'a47231d8c68280623daf0c5a2e4341417e7a88d0', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '5f18e91aa94319a5571c368e745c108fb0d371a7', base: "mrd-file-field", error: this.error }))));
+        return (h(Host, { key: '6410e945bb873a05d0a1b3be45bc879b5e153a05' }, h("div", { key: '4d1d69d768b383f0d9190f88a50a87de8679d3d2', class: "mrd-file-field" }, h(FieldLabel, { key: '7e0009908fb4c087de16cf08251ab398199dae60', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '88dfc0d1c34670f7de8f3cf2dea4c95b0ae66f4c', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'b6d678b5582a58721c928cef47dd8d6645b26a86', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '80f1698819c60b15476b953f5f3216f195430b84', base: "mrd-file-field", error: this.error }))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-image-field/mrd-image-field.js

@@ -84,7 +84,7 @@ export class MrdImageField {
             error: hasError,
             disabled: this.disabled || this.uploading,
         });
-        return (h(Host, { key: 'ab78d93ab6c810363a8993bea4545f7406680e58' }, h("div", { key: '727ae5d9c1cce22d90d26229a9ea5d677abb4b07', class: "mrd-image-field" }, h(FieldLabel, { key: 'aab0e9fcc0204e8ea617453b5ca458f683194125', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: '1241faff26c47a303fd0431201f490c6b8725987', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '70e3b8f869927ad525465ace96ed3ea24f5b7555', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '01552a994c1e5a9f25129586a95562c32a377046', base: "mrd-image-field", error: this.error }))));
+        return (h(Host, { key: '700310af716dcc167f98bc7ae7024bb44e1285b6' }, h("div", { key: '95d29a82751249e560404488fb279138eee0c1be', class: "mrd-image-field" }, h(FieldLabel, { key: 'f53f040257a4b65d8435c836846adab137b91a5e', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: 'a9cc7a0861b1457d8e4abb11b380b6eeb519a863', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '7112030bc2b80b4c3b31a4421656da4c926a2fe1', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), h(FieldError, { key: '0cf5346ecb1a5d110822b087081b4b5f05255381', base: "mrd-image-field", error: this.error }))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-longtext-field/mrd-longtext-field.js

@@ -21,7 +21,7 @@ export class MrdLongtextField {
         };
     }
     render() {
-        return (h(Host, { key: '1d23db1324fa0fc97a07fdae65f2d84e43419a72' }, h("div", { key: '0ad2b262088aa3745f088a44af26649593805840', class: "mrd-longtext-field" }, h(FieldLabel, { key: '5a78739d6ced4e2df77589b64c66401819c4b5c7', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '5b870a75b518e2808518b83c9abebf8589a86108', base: "mrd-longtext-field", error: this.error }))));
+        return (h(Host, { key: 'b27d14772f5184d41c178606629a9945120296ef' }, h("div", { key: '206b1b9ee1d37e05680e31bf8b324455867fd93b', class: "mrd-longtext-field" }, h(FieldLabel, { key: '0b6f4959f32a097907965753ed8708d7580aee53', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '0803cf0c1b6409e6c8a65121efef97d28d870119', base: "mrd-longtext-field", error: this.error }))));
     }
     static get is() { return "mrd-longtext-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-number-field/mrd-number-field.js

@@ -70,7 +70,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: 'fd7220e0a7f574ab0c61094a9ba7fd764e1adafd' }, h("div", { key: 'ef6118a339c9766f187cd2b1fa3fcc85ef8cb69f', class: "mrd-number-field" }, h(FieldLabel, { key: '015207ae65df07f7ee7bbc24ccab45524176dbf7', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: '954b99cbcf4002b0336810e354f1a46d39cb8076', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'dddc08e090b200736d186960db1436e44f42703c', class: controlClass('mrd-number-field', hasError), type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), h(FieldError, { key: '87e12bd737aed0a845470cef66d7a6d61d11de0b', base: "mrd-number-field", error: this.error }))));
+        return (h(Host, { key: '90cae99b332f9554bc80d4044fce892ae37a48cf' }, h("div", { key: '26a9cfcc662eaeb571d17785f10f74269cf78537', class: "mrd-number-field" }, h(FieldLabel, { key: '0d9e70c1591f309ad2875d9e9fe6dbb8aa910323', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: '95e9b53fa73c452491f65355915bf04912900ded', class: "mrd-number-field__input-wrapper" }, h("input", { key: '1d341c270a21b1a10c51757e90257e48e741abd7', class: controlClass('mrd-number-field', hasError), type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), h(FieldError, { key: '0dba75e0f7355b71bfa71dab16cd1a6fcc36922f', base: "mrd-number-field", error: this.error }))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-secret-field/mrd-secret-field.js

@@ -21,9 +21,9 @@ export class MrdSecretField {
         };
     }
     render() {
-        return (h(Host, { key: 'acb865b235652feba713aedda7a7fccbdc01ad20' }, h("div", { key: 'e7471ade9c683cac9469ec89778c967badb046f9', class: "mrd-secret-field" }, h(FieldLabel, { key: '2f9b864779ead352fda53af8597ddcd31377249d', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
+        return (h(Host, { key: '9883a87b7fcc840aa4bbe0a3cde163cc58bda65d' }, h("div", { key: '3c7ec45d59a1a17863daa39b7c115db5c58815ee', class: "mrd-secret-field" }, h(FieldLabel, { key: '2dda66c7e6d4946661bff5a5a46589a7e17f569a', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
             ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
-            : (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: '438418e2cf0f53a6c247d5f332aae8e8978b94ea', base: "mrd-secret-field", error: this.error }))));
+            : (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: 'ad8f54a7c76c59591fee77e11a12bbd62c392d91', base: "mrd-secret-field", error: this.error }))));
     }
     static get is() { return "mrd-secret-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-text-field/mrd-text-field.js

@@ -21,7 +21,7 @@ export class MrdTextField {
         };
     }
     render() {
-        return (h(Host, { key: '71de1ae949941820574fc2d45cac6cca8264d8f9' }, h("div", { key: 'a63d3dd0811e012ae3d5a9f02c1a2ad1fcc0af86', class: "mrd-text-field" }, h(FieldLabel, { key: '1a6db878b634364f47522209344540a9cdc20635', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: 'b3cd0338f13c5c2c8b744df62d3d02f3bc380aa1', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '1530066fefbda722df0c37871978995a139fcef0', base: "mrd-text-field", error: this.error }))));
+        return (h(Host, { key: 'd2a6fb5735a3a01887cc467274a0ff9d71312124' }, h("div", { key: '7864bf852d43f93ebd0120a3ec1b72e54837d1ba', class: "mrd-text-field" }, h(FieldLabel, { key: 'bdad112197b44a643a58dd79c4648e284311199d', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: '1d3e1cf3374ea2e5a83794b5110205964fff86e1', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'bb4ec51de7b6d360fdb3d46dd53e85a5d497bcce', base: "mrd-text-field", error: this.error }))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-textarea-field/mrd-textarea-field.js

@@ -60,7 +60,7 @@ export class MrdTextareaField {
         }
     }
     render() {
-        return (h(Host, { key: '464c1edde8447043d9352f1b5f9757bba97e9b17' }, h("div", { key: '8d06728214f54feeb1063700e5aaf7c439eb5473', class: "mrd-textarea-field" }, h(FieldLabel, { key: 'dbf93ecf41bd704706b49f8c455262798fbbe10b', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '9c39ccfa38ee01b880973966e910ee32aa60b144', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '0217cd4350c1933018b2b8f489516b6d43a52538', class: "mrd-textarea-field__editor" })), h(FieldError, { key: '62d2a5db053ea6e4ec6868440f3ab31e1c05e633', base: "mrd-textarea-field", error: this.error }))));
+        return (h(Host, { key: 'de39890fc23146b880e69be7a8f04c91786ae9c9' }, h("div", { key: '0ccc855f3ee44553559a9ea8a70690466789f76d', class: "mrd-textarea-field" }, h(FieldLabel, { key: '2a16dcbeedbba8b5d8d1e8e8c0f021f14813f609', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '979ecb0ed163e3f753d75635452eea49d76edf29', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '8ea96a080086b68df55017a1464f6bce502f9a58', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'd6ac1a12f7be3594ed8cdb6d94b304c46dc8285b', base: "mrd-textarea-field", error: this.error }))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/fields/mrd-time-field/mrd-time-field.js

@@ -20,7 +20,7 @@ export class MrdTimeField {
         };
     }
     render() {
-        return (h(Host, { key: 'fc30bdeb7c8d37bebc67a768f48013602879fb3d' }, h("div", { key: '52f899a889376773c1948f0c116670684db25cf4', class: "mrd-time-field" }, h(FieldLabel, { key: '3aba58f122fa4bb9f0ba4ad0b56fc3b29f03d4a3', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'e39718394a195eafaf47aa2e62d560341bb0daed', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '07ad4ccbc5188e129d8bd3085e856839ec6a81c9', base: "mrd-time-field", error: this.error }))));
+        return (h(Host, { key: '588e298c4f52aa4e65d87bfdc6918282ed97b3ae' }, h("div", { key: 'eed7332ca78747d4ff8b6c8d06ad4674e1c37e69', class: "mrd-time-field" }, h(FieldLabel, { key: '6383beb79fd05dabdc408256e3326f9637e4c993', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'b372d8b5dd523ee6182fe302450ce904ac17cc3c', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '7d8ce1e557bf583c0409e8f02893a15fadeab634', base: "mrd-time-field", error: this.error }))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.css

@@ -1,3 +1,8 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
 .mrd-layout-section {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-base);

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../../types/client-layout";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../../types/client-layout";
 import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
 import { renderField } from "./field-value";
 export class MrdLayoutSection {
@@ -16,11 +16,17 @@ export class MrdLayoutSection {
         /** Top-level archetypes on the object dashboard. When it contains commons.document,
          *  the record is rendered as a single-document view instead of generic fields. */
         this.archetypes = [];
+        /** Minimum height (px) of the commons.document inline file preview — it
+         *  stretches taller in the wide side-by-side layout. Pass a smaller value
+         *  when embedding the record in an overlay with limited height. */
+        this.documentPreviewHeight = 640;
         this.searchQueryMap = {};
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
         this.openHistoryField = null;
+        /** Signed URL for the commons.document archetype's inline file preview. */
+        this.documentPreviewUrl = null;
         this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
@@ -144,6 +150,11 @@ export class MrdLayoutSection {
     async openImagePreview(url) {
         this.imagePreviewUrl = url;
     }
+    /** Provide a resolved signed URL for the commons.document archetype's inline
+     *  file preview, in response to mrdLoadDocumentPreview. */
+    async setDocumentPreviewUrl(url) {
+        this.documentPreviewUrl = url;
+    }
     resolveSearchKey() {
         var _a;
         const items = flattenItems(this.items).filter(i => i.type === ClientLayoutItemType.SEARCH);
@@ -233,6 +244,10 @@ export class MrdLayoutSection {
                 e.stopPropagation();
                 this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
             }, onMrdNavigate: (e) => {
+                // mrd-document-container already hardcodes navigateBehaviour to
+                // OVERLAY_PAGE (documents are always the quick-look use case) —
+                // relay as-is, unlike the generic table path below which takes it
+                // from the item's configuration.
                 e.stopPropagation();
                 this.mrdNavigate.emit(e.detail);
             }, onMrdAction: (e) => {
@@ -256,10 +271,14 @@ export class MrdLayoutSection {
                 e.stopPropagation();
                 this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
             }, onMrdRowClick: (e) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 e.stopPropagation();
                 const row = e.detail;
-                this.mrdNavigate.emit({ href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href, label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '' });
+                this.mrdNavigate.emit({
+                    href: (_b = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href,
+                    label: (_c = row === null || row === void 0 ? void 0 : row.name) !== null && _c !== void 0 ? _c : '',
+                    navigateBehaviour: (_d = item.navigateBehaviour) !== null && _d !== void 0 ? _d : ClientLayoutNavigateBehaviour.PAGE,
+                });
             }, onMrdAction: (e) => {
                 var _a;
                 e.stopPropagation();
@@ -308,17 +327,18 @@ export class MrdLayoutSection {
      *  a recognisable document instead of generic fields, keeping any related views/
      *  searches below it. */
     renderDocumentObject(archetype) {
+        var _a;
         const related = this.items.filter(it => it.type === ClientLayoutItemType.VIEW ||
             it.type === ClientLayoutItemType.RELATED_VIEW ||
             it.type === ClientLayoutItemType.SEARCH);
         return [
-            h("mrd-document-view", { archetype: archetype, data: this.data, locale: this.locale, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); } }),
+            h("mrd-document-view", { archetype: archetype, data: this.data, locale: this.locale, previewUrl: (_a = this.documentPreviewUrl) !== null && _a !== void 0 ? _a : '', previewHeight: this.documentPreviewHeight, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdLoadPreview: (e) => { e.stopPropagation(); this.mrdLoadDocumentPreview.emit(e.detail); } }),
             ...related.map(it => this.renderItem(it)),
         ];
     }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
-        return (h(Host, { key: '5d778188356a25ea13d45745dc5ed573ab2b2ef0' }, h("div", { key: '0b673a4bcf8b36cd21662bb8a3506cc3f30edb04', class: "mrd-layout-section" }, docArchetype
+        return (h(Host, { key: 'd73b44ed5d3529c5b01a87ddfd9a7ebe202ff3b8' }, h("div", { key: '1e80e202ec7c23afbca8f6a02376f0a4a4a6ba31', class: "mrd-layout-section" }, docArchetype
             ? this.renderDocumentObject(docArchetype)
             : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
@@ -480,6 +500,26 @@ export class MrdLayoutSection {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "documentPreviewHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height (px) of the commons.document inline file preview \u2014 it\nstretches taller in the wide side-by-side layout. Pass a smaller value\nwhen embedding the record in an overlay with limited height."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "document-preview-height",
+                "defaultValue": "640"
             }
         };
     }
@@ -489,7 +529,8 @@ export class MrdLayoutSection {
             "searchResultsMap": {},
             "imagePreviewUrl": {},
             "imagePreviews": {},
-            "openHistoryField": {}
+            "openHistoryField": {},
+            "documentPreviewUrl": {}
         };
     }
     static get events() {
@@ -504,14 +545,20 @@ export class MrdLayoutSection {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate }",
-                    "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; }",
+                    "original": "{ href?: string; label: string; navigate?: ClientLayoutItemNavigate; navigateBehaviour?: ClientLayoutNavigateBehaviour }",
+                    "resolved": "{ href?: string | undefined; label: string; navigate?: ClientLayoutItemNavigate | undefined; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; }",
                     "references": {
                         "ClientLayoutItemNavigate": {
                             "location": "import",
                             "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutItemNavigate",
                             "referenceLocation": "ClientLayoutItemNavigate"
+                        },
+                        "ClientLayoutNavigateBehaviour": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutNavigateBehaviour",
+                            "referenceLocation": "ClientLayoutNavigateBehaviour"
                         }
                     }
                 }
@@ -575,6 +622,21 @@ export class MrdLayoutSection {
                     "resolved": "{ fieldName: string; href: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdLoadDocumentPreview",
+                "name": "mrdLoadDocumentPreview",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from an embedded mrd-document-view's mrdLoadPreview (commons.document\nsingle-object view); host resolves the file href to a signed URL and calls\nsetDocumentPreviewUrl()."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
             }, {
                 "method": "mrdViewAction",
                 "name": "mrdViewAction",
@@ -935,6 +997,27 @@ export class MrdLayoutSection {
                     "text": "Open the lightbox directly with a URL (e.g. after mrdDownload on a FILE field).",
                     "tags": []
                 }
+            },
+            "setDocumentPreviewUrl": {
+                "complexType": {
+                    "signature": "(url: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "url",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Provide a resolved signed URL for the commons.document archetype's inline\nfile preview, in response to mrdLoadDocumentPreview.",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/dev/api.js

@@ -22,6 +22,15 @@ async function apiRequest(method, path, token, body) {
   return { status: resp.status, ok: resp.ok, body: json };
 }
 
+/** Resolve a file/image reference href to a signed, directly-usable URL.
+ *  Mirrors content-app's ApiClientService.getDownloadLink(): a plain GET on
+ *  the href, response body is the signed URL string. */
+async function apiGetDownloadLink(token, href) {
+  const { ok, status, body } = await apiRequest('GET', href, token);
+  if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
+  return body;
+}
+
 async function apiFetchTenants(token) {
   const { ok, status, body } = await apiRequest('GET', '/tenants', token);
   if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);