@mmlogic/components 0.4.1 → 0.4.3

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/documents/mrd-document-container/mrd-document-container.js",
     "components/documents/mrd-document-list/mrd-document-list.js",
     "components/documents/mrd-document-view/mrd-document-view.js",
+    "components/documents/mrd-file-preview/mrd-file-preview.js",
     "components/fields/mrd-boolean-field/mrd-boolean-field.js",
     "components/fields/mrd-currency-field/mrd-currency-field.js",
     "components/fields/mrd-date-field/mrd-date-field.js",

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.css

@@ -7,10 +7,23 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--mrd-space-2);
-  padding: var(--mrd-space-2) var(--mrd-space-4);
+  /* Horizontal padding intentionally 0: mrd-table__toolbar is flush with its
+     card body too, so the two sibling views' buttons line up on the same
+     left/right edge as their bodies below. */
+  padding: var(--mrd-space-2) 0;
   border-bottom: 1px solid var(--mrd-color-neutral-100);
 }
 
+/* Card frame matching .mrd-table__scroll, so the tree view reads as an inset
+   panel like the sibling table view instead of bleeding to the tab edges.
+   The list mode doesn't need this: the embedded mrd-table already draws its
+   own .mrd-table__scroll frame. */
+.mrd-document-container__body--tree {
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  overflow: hidden;
+}
+
 .mrd-document-container__action {
   display: inline-flex;
   align-items: center;

package/dist/collection/components/documents/mrd-document-container/mrd-document-container.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { ClientLayoutNavigateBehaviour } from "../../../types/client-layout";
 import { t } from "../../../utils/i18n";
 /**
  * Owns a document collection view: a single toolbar (view switch + collection
@@ -72,7 +73,7 @@ export class MrdDocumentContainer {
                 this.mrdLoadPage.emit(e.detail);
             }, onMrdNavigate: (e) => {
                 e.stopPropagation();
-                this.mrdNavigate.emit(e.detail);
+                this.mrdNavigate.emit(Object.assign(Object.assign({}, e.detail), { navigateBehaviour: ClientLayoutNavigateBehaviour.OVERLAY_PAGE }));
             }, onMrdCanCreate: (e) => {
                 e.stopPropagation();
                 this.canCreate = e.detail;
@@ -97,8 +98,13 @@ export class MrdDocumentContainer {
             }, onMrdRowClick: (e) => {
                 var _a, _b, _c;
                 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 : '' });
+                const { row, listContext } = 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 : '',
+                    navigateBehaviour: ClientLayoutNavigateBehaviour.OVERLAY_PAGE,
+                    listContext,
+                });
             }, onMrdAction: (e) => {
                 e.stopPropagation();
                 this.mrdAction.emit(e.detail);
@@ -106,7 +112,10 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: '018c9eacd169fdf7d352a51472651348af2b45df' }, this.renderToolbar(), h("div", { key: '5ff2ac77d4d12369905696ff075f99785dc1c809', class: "mrd-document-container__body", style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
+        return (h(Host, { key: '7d0523d66f9a3d189dcc5517cd7281a57456977d' }, this.renderToolbar(), h("div", { key: '19b0f416d2ad1b093afd6f799670debf8c18b225', class: {
+                'mrd-document-container__body': true,
+                'mrd-document-container__body--tree': treeMode,
+            }, style: treeMode ? { height: `${this.height}px`, overflowY: 'auto' } : {} }, treeMode ? this.renderTree() : this.renderList())));
     }
     static get is() { return "mrd-document-container"; }
     static get encapsulation() { return "scoped"; }
@@ -333,12 +342,25 @@ export class MrdDocumentContainer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "A row / document was activated. Host routes to the object page."
+                    "text": "A row / document was activated. Host routes to the object page. Documents\nare always the \"quick look\" use case, so navigateBehaviour is hardcoded\nto OVERLAY_PAGE here \u2014 unlike the generic VIEW/RELATED_VIEW table path in\nmrd-layout-section, which takes it from the item's configuration."
                 },
                 "complexType": {
-                    "original": "{ href?: string; label: string }",
-                    "resolved": "{ href?: string | undefined; label: string; }",
-                    "references": {}
+                    "original": "{ href?: string; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour; listContext?: ListNavigationContext }",
+                    "resolved": "{ href?: string | undefined; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; listContext?: ListNavigationContext | undefined; }",
+                    "references": {
+                        "ClientLayoutNavigateBehaviour": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientLayoutNavigateBehaviour",
+                            "referenceLocation": "ClientLayoutNavigateBehaviour"
+                        },
+                        "ListNavigationContext": {
+                            "location": "import",
+                            "path": "../../../utils/query-params",
+                            "id": "src/utils/query-params.ts::ListNavigationContext",
+                            "referenceLocation": "ListNavigationContext"
+                        }
+                    }
                 }
             }, {
                 "method": "mrdAction",

package/dist/collection/components/documents/mrd-document-list/mrd-document-list.css

@@ -21,9 +21,12 @@
 .mrd-document-list__row {
   display: flex;
   align-items: center;
-  gap: var(--mrd-space-2);
+  gap: var(--mrd-space-1);
   height: 2.125rem;
-  padding: 0 var(--mrd-space-4);
+  /* Asymmetric: a narrow left gutter (Finder-style — the disclosure triangle
+     sits in the margin, not indented behind a full column) vs. a roomier
+     right side for the count/date columns. */
+  padding: 0 var(--mrd-space-4) 0 var(--mrd-space-2);
   cursor: pointer;
   user-select: none;
   font-size: var(--mrd-font-size-sm);
@@ -98,7 +101,7 @@
 }
 
 .mrd-document-list__chev {
-  width: 1rem;
+  width: 0.875rem;
   height: 1rem;
   flex: none;
   display: grid;
@@ -165,9 +168,9 @@
 .mrd-document-list__loading {
   display: flex;
   align-items: center;
-  gap: var(--mrd-space-2);
+  gap: var(--mrd-space-1);
   height: 1.875rem;
-  padding: 0 var(--mrd-space-4);
+  padding: 0 var(--mrd-space-4) 0 var(--mrd-space-2);
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-400);
 }

package/dist/collection/components/documents/mrd-document-list/mrd-document-list.js

@@ -320,18 +320,24 @@ export class MrdDocumentList {
             qs: p.toString(),
         });
     }
-    emitDocuments(container, node) {
+    /** Filter qs scoping a folder's documents: view-level filters + container/folder match.
+     *  Shared by emitDocuments() (the fetch) and openDoc() (prev/next list context), so both
+     *  always agree on exactly what query a document belongs to. */
+    buildDocQs(container, node) {
         var _a, _b;
         const p = this.baseParams();
         p.set(this.containerField + '_href', (_a = container.href) !== null && _a !== void 0 ? _a : '');
         p.set(this.folderField, (_b = node.fullPath) !== null && _b !== void 0 ? _b : '');
+        return p.toString();
+    }
+    emitDocuments(container, node) {
         node.loading = true;
         this.mrdLoadPage.emit({
             nodeId: node.id,
             page: 0,
             sort: '',
             path: this.buildDataPath(),
-            qs: p.toString(),
+            qs: this.buildDocQs(container, node),
         });
     }
     // ── Public injection API ─────────────────────────────────────────────────
@@ -600,11 +606,15 @@ export class MrdDocumentList {
             container.totalCount = Math.max(0, container.totalCount + delta);
         }
     }
-    openDoc(doc) {
+    openDoc(doc, node, container) {
         var _a, _b, _c, _d;
         const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
         const label = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc[this.titleField]) !== null && _c !== void 0 ? _c : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _d !== void 0 ? _d : '';
-        this.mrdNavigate.emit({ href, label });
+        const index = node.docs.indexOf(doc);
+        const listContext = index >= 0
+            ? { index, sort: '', path: this.buildDataPath(), qs: this.buildDocQs(container, node) }
+            : undefined;
+        this.mrdNavigate.emit({ href, label, listContext });
     }
     // ── Render ───────────────────────────────────────────────────────────────
     treeCtx() {
@@ -618,7 +628,7 @@ export class MrdDocumentList {
             on: {
                 toggleContainer: node => this.toggleContainer(node),
                 toggleFolder: (container, node) => this.toggleFolder(container, node),
-                openDoc: doc => this.openDoc(doc),
+                openDoc: (doc, node, container) => this.openDoc(doc, node, container),
                 docDragStart: this.onDocDragStart,
                 docDragEnd: this.onDocDragEnd,
                 nodeDragOver: this.onNodeDragOver,
@@ -638,7 +648,7 @@ export class MrdDocumentList {
             body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: 'ce40dab51ab61447838e5059159ae4778209a6f3', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: '49157721108db3b03c8c5e6550692b42dfc2e113', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
@@ -656,7 +666,7 @@ export class MrdDocumentList {
         else {
             body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        return (h(Host, { key: '9e1f7805ae18bce506c530a481db902900ad95f3' }, h("div", { key: 'a51334634e94310a71650ad49f17f0a20e2aed4d', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
+        return (h(Host, { key: 'b6d3dd44036a9215979a0dbec699902f308fbeb5' }, h("div", { key: '8ec0e58cb5e7192f7a9af9062dd5bc7f7bb00713', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -833,12 +843,19 @@ export class MrdDocumentList {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "A document row was clicked. Host routes to the document object page."
+                    "text": "A document row was clicked. Host routes to the document object page. `listContext` can\nbe used to re-fetch this exact record (or its neighbours) via `{path}?{qs}&page={index}&size=1`."
                 },
                 "complexType": {
-                    "original": "{ href?: string; label: string }",
-                    "resolved": "{ href?: string | undefined; label: string; }",
-                    "references": {}
+                    "original": "{ href?: string; label: string; listContext?: ListNavigationContext }",
+                    "resolved": "{ href?: string | undefined; label: string; listContext?: ListNavigationContext | undefined; }",
+                    "references": {
+                        "ListNavigationContext": {
+                            "location": "import",
+                            "path": "../../../utils/query-params",
+                            "id": "src/utils/query-params.ts::ListNavigationContext",
+                            "referenceLocation": "ListNavigationContext"
+                        }
+                    }
                 }
             }, {
                 "method": "mrdCanCreate",

package/dist/collection/components/documents/mrd-document-list/tree-view.js

@@ -13,9 +13,21 @@ function folderIcon() {
 function docIcon() {
     return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--doc", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("path", { d: "M14 2v6h6" })));
 }
+/** Depth 0 renders no indent spacer at all — like Finder, the top-level
+ *  disclosure triangle sits in the row's own left margin instead of adding
+ *  an extra indent column before it. Nested levels still step in 18px each. */
 function indent(depth) {
+    if (depth === 0)
+        return null;
     return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
 }
+/** Pixel offset from the row's left edge to where the label text starts,
+ *  used to align the inline folder-name-error text under the label above it.
+ *  Mirrors the row's padding + (indent) + chevron + icon + gaps in tree-view.scss. */
+function labelOffset(depth) {
+    const chevronAndIcon = 4 /* gap */ + 14 /* chevron */ + 4 /* gap */ + 17 /* icon */ + 4 /* gap */;
+    return depth === 0 ? 8 + chevronAndIcon : 8 + depth * 18 + chevronAndIcon;
+}
 export function renderLoadingRow(ctx, depth) {
     return (h("div", { class: "mrd-document-list__loading", key: "loading" }, indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('loading', ctx.locale)));
 }
@@ -27,10 +39,10 @@ function renderDocRow(ctx, doc, node, container, depth) {
     const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[ctx.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
     const dateRaw = ctx.dateField ? doc === null || doc === void 0 ? void 0 : doc[ctx.dateField] : undefined;
     const date = dateRaw ? formatDate(dateRaw, ctx.locale) : '';
-    return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => ctx.on.openDoc(doc), onDragStart: (e) => ctx.on.docDragStart(e, doc, node), onDragEnd: ctx.on.docDragEnd, onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(false, true), docIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
+    return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => ctx.on.openDoc(doc, node, container), onDragStart: (e) => ctx.on.docDragStart(e, doc, node), onDragEnd: ctx.on.docDragEnd, onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(false, true), docIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
 }
 function renderFolderEditRow(ctx, node, depth) {
-    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, indent(depth), chevron(false, true), folderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', ctx.locale), ref: el => ctx.on.setPendingInputEl(el), onInput: ctx.on.pendingInput, onKeyDown: ctx.on.pendingKeyDown, onBlur: () => ctx.on.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${depth * 18 + 52}px` } }, node.error))));
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, indent(depth), chevron(false, true), folderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', ctx.locale), ref: el => ctx.on.setPendingInputEl(el), onInput: ctx.on.pendingInput, onKeyDown: ctx.on.pendingKeyDown, onBlur: () => ctx.on.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${labelOffset(depth)}px` } }, node.error))));
 }
 export function renderNodeChildren(ctx, container, node, depth) {
     const out = [];

package/dist/collection/components/documents/mrd-document-view/mrd-document-view.css

@@ -1,11 +1,28 @@
 :host {
   display: block;
+  container-type: inline-size;
+  container-name: mrd-document-view;
 }
 
 .mrd-document-view {
-  max-width: 720px;
+  max-width: 1200px;
 }
 
+.mrd-document-view__body {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--mrd-space-6);
+}
+
+@container mrd-document-view (min-width: 640px) {
+  .mrd-document-view__body {
+    grid-template-columns: minmax(220px, 320px) 1fr !important;
+    align-items: stretch !important;
+  }
+  .mrd-document-view__crumb {
+    margin-bottom: var(--mrd-space-2) !important;
+  }
+}
 .mrd-document-view__crumb {
   display: inline-flex;
   align-items: center;
@@ -46,47 +63,40 @@
   margin: 0 0 var(--mrd-space-6) 0;
 }
 
-.mrd-document-view__file {
+.mrd-document-view__file-meta {
   display: flex;
   align-items: center;
   gap: var(--mrd-space-4);
-  padding: var(--mrd-space-4);
-  border: 1px solid var(--mrd-border-color);
-  border-radius: var(--mrd-border-radius-md);
-  background: var(--mrd-color-neutral-50);
-  margin-bottom: var(--mrd-space-6);
-}
-
-.mrd-document-view__file-preview {
-  width: 2.875rem;
-  height: 3.625rem;
-  flex-shrink: 0;
-  display: grid;
-  place-items: center;
-  border-radius: var(--mrd-border-radius-sm);
-  background: var(--mrd-color-white);
-  border: 1px solid var(--mrd-border-color);
-  color: var(--mrd-color-danger);
-  box-shadow: var(--mrd-shadow-sm);
-}
-
-.mrd-document-view__file-preview svg {
-  width: 1.5rem;
-  height: 1.5rem;
+  margin-bottom: var(--mrd-space-2);
 }
 
-.mrd-document-view__file-meta {
+.mrd-document-view__file-name {
   flex: 1;
   min-width: 0;
-}
-
-.mrd-document-view__file-name {
   font-weight: var(--mrd-font-weight-semibold);
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-800);
   word-break: break-word;
 }
 
+.mrd-document-view__preview {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  background: var(--mrd-color-neutral-50);
+}
+
+.mrd-document-view__preview-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-sm);
+}
+
 .mrd-document-view__download {
   display: inline-flex;
   align-items: center;

package/dist/collection/components/documents/mrd-document-view/mrd-document-view.js

@@ -16,6 +16,32 @@ export class MrdDocumentView {
         /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
         this.data = {};
         this.locale = navigator.language;
+        /** Signed URL for the file's inline preview (mrd-file-preview), resolved by
+         *  the host in response to mrdLoadPreview. Empty while unresolved — the
+         *  preview area shows a loading state until the host injects a value. */
+        this.previewUrl = '';
+        /** Minimum height (px) of the inline preview area — it stretches to fill the
+         *  available row height in the wide side-by-side layout (see mrd-document-view.scss),
+         *  and falls back to this height when stacked. Overlay hosts typically pass a
+         *  smaller value than the full-page default to fit available chrome. */
+        this.previewHeight = 640;
+        /** Tracks the href a preview was last requested for, so componentDidLoad and
+         *  the data watcher don't emit duplicate requests for the same file. */
+        this.lastPreviewHref = null;
+    }
+    componentDidLoad() {
+        this.requestPreviewIfNeeded();
+    }
+    dataChanged() {
+        this.requestPreviewIfNeeded();
+    }
+    requestPreviewIfNeeded() {
+        var _a, _b;
+        const href = (_b = (_a = this.slotValue('file')) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : null;
+        if (href && href !== this.lastPreviewHref) {
+            this.lastPreviewHref = href;
+            this.mrdLoadPreview.emit({ href });
+        }
     }
     /** Value of a value-slot: reads data[field] via the slot→field map. */
     slotValue(slot) {
@@ -40,23 +66,37 @@ export class MrdDocumentView {
             return null;
         return (h("button", { class: "mrd-document-view__crumb", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, h("svg", { class: "mrd-document-view__crumb-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M19 12H5M12 19l-7-7 7-7" })), link.name));
     }
-    renderFile() {
-        var _a, _b;
-        const raw = this.slotValue('file');
-        if (!raw)
+    /** Filename + download button — part of the metadata column, not the preview
+     *  panel, so it stays next to the title/summary in the wide side-by-side layout. */
+    renderFileMeta(fileName, href) {
+        return (h("div", { class: "mrd-document-view__file-meta" }, h("span", { class: "mrd-document-view__file-name" }, fileName), href && (h("button", { type: "button", class: "mrd-document-view__download", onClick: () => this.mrdDownload.emit({ href, 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)))));
+    }
+    /** The preview panel itself (iframe/image/loading state) — its own grid
+     *  column in the wide layout, so it can take the full available height. */
+    renderPreviewPanel(fileName, href, mimeType) {
+        if (!href)
             return null;
-        const href = (_a = raw === null || raw === void 0 ? void 0 : raw.href) !== null && _a !== void 0 ? _a : '';
-        const fileName = (_b = raw === null || raw === void 0 ? void 0 : raw.fileName) !== null && _b !== void 0 ? _b : String(raw);
-        return (h("div", { class: "mrd-document-view__file" }, h("div", { class: "mrd-document-view__file-preview", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: "M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6zm7 1.5L18.5 9H13V3.5z" }))), h("div", { class: "mrd-document-view__file-meta" }, h("span", { class: "mrd-document-view__file-name" }, fileName)), href && (h("button", { class: "mrd-document-view__download", onClick: () => this.mrdDownload.emit({ href, 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)))));
+        return (h("div", { class: "mrd-document-view__preview", style: { minHeight: `${this.previewHeight}px` } }, this.previewUrl ? (h("mrd-file-preview", { src: this.previewUrl, mimeType: mimeType, fileName: fileName, href: href, locale: this.locale, onMrdDownload: (e) => {
+                e.stopPropagation();
+                this.mrdDownload.emit(e.detail);
+            }, onMrdPreviewReload: (e) => {
+                e.stopPropagation();
+                this.mrdLoadPreview.emit({ href });
+            } })) : (h("div", { class: "mrd-document-view__preview-loading" }, t('loading', this.locale)))));
     }
     render() {
+        var _a, _b, _c, _d;
         const titleRaw = this.slotValue('title');
         const title = titleRaw != null && titleRaw !== '' ? String(titleRaw) : null;
         const dateRaw = this.slotValue('date');
         const date = dateRaw != null && dateRaw !== '' ? formatDate(dateRaw, this.locale) : null;
         const summaryRaw = this.slotValue('summary');
         const summary = summaryRaw != null && summaryRaw !== '' ? String(summaryRaw) : null;
-        return (h(Host, { key: '0c64c72eaf5e1eefc2ca9aebb2543081eb1eae32' }, h("div", { key: '70cce81b089fee81a4c163a6ba5fbcc8cb46131c', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '50f85b32a6740d6cf57fdf1bb0bcc597b5e97b31', class: "mrd-document-view__title" }, title), date && h("p", { key: 'b3c8fb3b4382104858d49ef9a1597034665122bb', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: '2046c1eca7601549115de0c95ff778abaf5faf46', class: "mrd-document-view__summary" }, h("div", { key: '875863d3e438eee3d4df10473a93f09370fde08c', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
+        const fileRaw = this.slotValue('file');
+        const fileHref = (_a = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.href) !== null && _a !== void 0 ? _a : '';
+        const fileName = (_b = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.fileName) !== null && _b !== void 0 ? _b : (fileRaw ? String(fileRaw) : '');
+        const mimeType = (_d = (_c = fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.mimeType) !== null && _c !== void 0 ? _c : fileRaw === null || fileRaw === void 0 ? void 0 : fileRaw.contentType) !== null && _d !== void 0 ? _d : '';
+        return (h(Host, { key: '6023c8c6ca3d780fd4a9cca41189cb05a151221e' }, h("div", { key: 'd7d39d62964583da0ca6c1494e75321e6bab9ac8', class: "mrd-document-view" }, h("div", { key: '9aa14569c9ffc785ffb4f2b3d5930cf3e822e246', class: "mrd-document-view__body" }, h("div", { key: 'e00f3b55551429d8522fb97e7ccb43d56e98042d', class: "mrd-document-view__meta" }, this.renderContainer(), title && h("h1", { key: '9860273878b245fc757eb690c6cd7006b13045c4', class: "mrd-document-view__title" }, title), date && h("p", { key: '84c60b0b6feb6678d661000c26050e42eaaa8399', class: "mrd-document-view__date" }, date), fileRaw && this.renderFileMeta(fileName, fileHref), summary && (h("div", { key: 'd1cff0cc1b9376409c8e04a785deba93c986ba47', class: "mrd-document-view__summary" }, h("div", { key: 'fc9c4b986afc8c4f50486caf85bf58860d641a2b', class: "mrd-document-view__summary-body", innerHTML: summary })))), fileRaw && this.renderPreviewPanel(fileName, fileHref, mimeType)))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }
@@ -138,6 +178,46 @@ export class MrdDocumentView {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "previewUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Signed URL for the file's inline preview (mrd-file-preview), resolved by\nthe host in response to mrdLoadPreview. Empty while unresolved \u2014 the\npreview area shows a loading state until the host injects a value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-url",
+                "defaultValue": "''"
+            },
+            "previewHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height (px) of the inline preview area \u2014 it stretches to fill the\navailable row height in the wide side-by-side layout (see mrd-document-view.scss),\nand falls back to this height when stacked. Overlay hosts typically pass a\nsmaller value than the full-page default to fit available chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-height",
+                "defaultValue": "640"
             }
         };
     }
@@ -172,6 +252,27 @@ export class MrdDocumentView {
                     "resolved": "{ href: string; fileName: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdLoadPreview",
+                "name": "mrdLoadPreview",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The file slot has an href and needs a signed URL for inline preview.\nFired once on load and again whenever the file href changes (e.g. the\noverlay is reused for a different document via prev/next). Host resolves\nit and calls back with `previewUrl` \u2014 the same pattern as mrdLoadImage /\nsetImagePreview on mrd-layout-section."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "dataChanged"
             }];
     }
 }

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

@@ -0,0 +1,30 @@
+/** Pure classification logic for mrd-file-preview — no Stencil dependency. */
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp']);
+function extensionOf(fileName) {
+    if (!fileName)
+        return null;
+    const match = /\.([a-z0-9]+)$/i.exec(fileName);
+    return match ? match[1].toLowerCase() : null;
+}
+/**
+ * Decide how to render a file given its declared mime type and/or file name.
+ * A declared mime type is authoritative when present (a mismatched file name
+ * extension is ignored); the file name extension is only consulted as a
+ * fallback when no mime type is known.
+ */
+export function detectPreviewKind(mimeType, fileName) {
+    const mime = (mimeType !== null && mimeType !== void 0 ? mimeType : '').toLowerCase().trim();
+    if (mime) {
+        if (mime === 'application/pdf')
+            return 'pdf';
+        if (mime.startsWith('image/'))
+            return 'image';
+        return 'unsupported';
+    }
+    const ext = extensionOf(fileName);
+    if (ext === 'pdf')
+        return 'pdf';
+    if (ext && IMAGE_EXTENSIONS.has(ext))
+        return 'image';
+    return 'unsupported';
+}

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

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.mrd-file-preview__frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.mrd-file-preview__image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0 auto;
+  object-fit: contain;
+}
+.mrd-file-preview__error, .mrd-file-preview__unsupported {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mrd-space-3);
+  width: 100%;
+  height: 100%;
+  min-height: 8rem;
+  padding: var(--mrd-space-6);
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-sm);
+  text-align: center;
+}
+.mrd-file-preview__error-text {
+  color: var(--mrd-color-danger);
+}
+.mrd-file-preview__retry, .mrd-file-preview__download {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  height: 2rem;
+  padding: 0 var(--mrd-space-3);
+  border: var(--mrd-border-width) solid var(--mrd-color-neutral-300);
+  border-radius: var(--mrd-border-radius);
+  background: var(--mrd-color-white);
+  color: var(--mrd-color-neutral-700);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  cursor: pointer;
+}
+.mrd-file-preview__retry:hover, .mrd-file-preview__download:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-file-preview__download svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}