@mmlogic/components 0.4.2 → 0.5.0

package/dist/collection/collection-manifest.json

@@ -3,7 +3,6 @@
     "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",
@@ -28,7 +27,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.2",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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

@@ -7,23 +7,14 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--mrd-space-2);
-  /* 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;
@@ -38,23 +29,19 @@
   cursor: pointer;
   transition: background var(--mrd-transition-fast), border-color var(--mrd-transition-fast);
 }
-
 .mrd-document-container__action svg {
   width: 1rem;
   height: 1rem;
   color: var(--mrd-color-folder);
 }
-
 .mrd-document-container__action:hover:not(:disabled) {
   background: var(--mrd-color-neutral-50);
   border-color: var(--mrd-color-neutral-300);
 }
-
 .mrd-document-container__action:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
 .mrd-document-container__seg {
   display: inline-flex;
   gap: 2px;
@@ -62,7 +49,6 @@
   background: var(--mrd-color-neutral-100);
   border-radius: var(--mrd-border-radius);
 }
-
 .mrd-document-container__seg-btn {
   width: 1.875rem;
   height: 1.625rem;
@@ -75,17 +61,14 @@
   cursor: pointer;
   transition: color var(--mrd-transition-fast), background var(--mrd-transition-fast);
 }
-
 .mrd-document-container__seg-btn:hover {
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-document-container__seg-btn[aria-pressed=true] {
   background: var(--mrd-color-white);
   color: var(--mrd-color-primary-dark);
   box-shadow: var(--mrd-shadow-sm);
 }
-
 .mrd-document-container__seg-btn svg {
   width: 1rem;
   height: 1rem;

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { ClientLayoutNavigateBehaviour } from "../../../types/client-layout";
 import { t } from "../../../utils/i18n";
+import { attachmentsFromRecord } from "../../../utils/document-attachments";
 /**
  * Owns a document collection view: a single toolbar (view switch + collection
  * actions like "New folder", and — later — upload / drag-drop) plus the two
@@ -98,11 +99,13 @@ export class MrdDocumentContainer {
             }, onMrdRowClick: (e) => {
                 var _a, _b, _c;
                 e.stopPropagation();
-                const row = e.detail;
+                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,
+                    attachments: attachmentsFromRecord(this.archetype, row),
                 });
             }, onMrdAction: (e) => {
                 e.stopPropagation();
@@ -111,7 +114,7 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: 'e8d37d2f818b9b2260fb2ccd3d784393a28385c4' }, this.renderToolbar(), h("div", { key: 'fa80a1343e9b2f1e74f30317bfbfbab78ea63e5d', class: {
+        return (h(Host, { key: '4d21f26c956773c63cbf5118394c6afa29d6014d' }, this.renderToolbar(), h("div", { key: 'bc070236bf9a7d0eba57aa2cd70fa3ae36cbf5f1', 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())));
@@ -341,17 +344,29 @@ export class MrdDocumentContainer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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.\n`attachments` prefetches the clicked row's file slot (see TASK-0169)."
                 },
                 "complexType": {
-                    "original": "{ href?: string; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour }",
-                    "resolved": "{ href?: string | undefined; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; }",
+                    "original": "{ href?: string; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour; listContext?: ListNavigationContext; attachments?: DocumentAttachment[] }",
+                    "resolved": "{ href?: string | undefined; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; listContext?: ListNavigationContext | undefined; attachments?: DocumentAttachment[] | 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"
+                        },
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
                         }
                     }
                 }

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -9,68 +8,54 @@
   min-height: 100%;
   box-sizing: border-box;
 }
-
-/* Whole-area highlight while a file/document is dragged over the root (dossier
-   context) — makes the drop target obvious, Finder-style. */
 .mrd-document-list--drop-active {
   outline: 2px dashed var(--mrd-color-primary);
   outline-offset: -4px;
   background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.06));
 }
-
 .mrd-document-list__row {
   display: flex;
   align-items: center;
   gap: var(--mrd-space-1);
   height: 2.125rem;
-  /* 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);
   color: var(--mrd-color-neutral-800);
 }
-
 .mrd-document-list__row:hover {
   background: var(--mrd-color-neutral-50);
 }
-
 .mrd-document-list__row--selected {
   background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
 }
-
 .mrd-document-list__row--selected:hover {
   background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
 }
-
 .mrd-document-list__row--pending .mrd-document-list__label {
   font-style: italic;
   color: var(--mrd-color-neutral-500);
 }
-
 .mrd-document-list__row--doc {
   cursor: grab;
 }
-
 .mrd-document-list__row--doc:active {
   cursor: grabbing;
 }
-
 .mrd-document-list__row--drop {
   background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
   box-shadow: inset 0 0 0 1px var(--mrd-color-primary);
 }
-
 .mrd-document-list__row--drop:hover {
   background: var(--mrd-color-primary-50, rgba(22, 163, 74, 0.1));
 }
-
 .mrd-document-list__row--edit {
   cursor: default;
 }
-
+.mrd-document-list__row--dossier .mrd-document-list__label {
+  font-weight: var(--mrd-font-weight-semibold);
+}
 .mrd-document-list__name-input {
   flex: 1;
   min-width: 0;
@@ -84,22 +69,15 @@
   outline: none;
   box-shadow: var(--mrd-shadow-focus);
 }
-
 .mrd-document-list__error {
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-danger, #dc2626);
   padding-top: 0.125rem;
   padding-bottom: 0.25rem;
 }
-
-.mrd-document-list__row--dossier .mrd-document-list__label {
-  font-weight: var(--mrd-font-weight-semibold);
-}
-
 .mrd-document-list__indent {
   flex: none;
 }
-
 .mrd-document-list__chev {
   width: 0.875rem;
   height: 1rem;
@@ -109,45 +87,36 @@
   color: var(--mrd-color-neutral-400);
   transition: transform var(--mrd-transition-fast);
 }
-
 .mrd-document-list__chev svg {
   width: 0.6875rem;
   height: 0.6875rem;
 }
-
 .mrd-document-list__chev--open {
   transform: rotate(90deg);
 }
-
 .mrd-document-list__chev--leaf {
   visibility: hidden;
 }
-
 .mrd-document-list__icon {
   width: 1.0625rem;
   height: 1.0625rem;
   flex: none;
 }
-
 .mrd-document-list__icon--dossier {
   color: var(--mrd-color-primary);
 }
-
 .mrd-document-list__icon--folder {
   color: var(--mrd-color-folder);
 }
-
 .mrd-document-list__icon--doc {
   color: var(--mrd-color-neutral-400);
 }
-
 .mrd-document-list__label {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .mrd-document-list__count {
   flex: none;
   font-family: var(--mrd-font-family-mono);
@@ -157,14 +126,12 @@
   border-radius: var(--mrd-border-radius-full);
   padding: 0.0625rem 0.5rem;
 }
-
 .mrd-document-list__date {
   flex: none;
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-400);
   font-variant-numeric: tabular-nums;
 }
-
 .mrd-document-list__loading {
   display: flex;
   align-items: center;
@@ -174,7 +141,6 @@
   font-size: var(--mrd-font-size-xs);
   color: var(--mrd-color-neutral-400);
 }
-
 .mrd-document-list__spinner {
   width: 0.75rem;
   height: 0.75rem;
@@ -183,15 +149,15 @@
   border-radius: 50%;
   animation: mrd-document-list-spin 0.7s linear infinite;
 }
-
-@keyframes mrd-document-list-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
 .mrd-document-list__empty {
   padding: var(--mrd-space-8) var(--mrd-space-4);
   text-align: center;
   color: var(--mrd-color-neutral-400);
   font-size: var(--mrd-font-size-sm);
+}
+
+@keyframes mrd-document-list-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType } from "../../../types/client-layout";
 import { t } from "../../../utils/i18n";
 import { applyViewFilters, buildListPath } from "../../../utils/query-params";
+import { attachmentsFromRecord } from "../../../utils/document-attachments";
 import { makeContainerNode, makeFolderNode, computeTotals, segmentsOf, folderStringOf, stripExtension, applyFolderDistinct, applyDocMove, } from "./folder-tree";
 import { renderLoadingRow, renderNodeChildren, renderContainerNode } from "./tree-view";
 /**
@@ -320,18 +321,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 +607,16 @@ 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;
+        const attachments = attachmentsFromRecord(this.archetype, doc);
+        this.mrdNavigate.emit({ href, label, listContext, attachments });
     }
     // ── Render ───────────────────────────────────────────────────────────────
     treeCtx() {
@@ -618,7 +630,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 +650,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: '308725d741deb384082bd514edd34593f7d662a2', 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 +668,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: '9d5fde912999b57a0f0b737980d59e94f385f11d' }, h("div", { key: '17191411c2e626995f08b66bad755342fe3b13ae', 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 +845,25 @@ 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`.\n`attachments` is a prefetch of the clicked row's own file slot (derived from `archetype`)\nso the host can render a preview immediately, without waiting for the navigated-to\npage's own mrdAttachments \u2014 see TASK-0169 / FINDING-0111."
                 },
                 "complexType": {
-                    "original": "{ href?: string; label: string }",
-                    "resolved": "{ href?: string | undefined; label: string; }",
-                    "references": {}
+                    "original": "{ href?: string; label: string; listContext?: ListNavigationContext; attachments?: DocumentAttachment[] }",
+                    "resolved": "{ href?: string | undefined; label: string; listContext?: ListNavigationContext | undefined; attachments?: DocumentAttachment[] | undefined; }",
+                    "references": {
+                        "ListNavigationContext": {
+                            "location": "import",
+                            "path": "../../../utils/query-params",
+                            "id": "src/utils/query-params.ts::ListNavigationContext",
+                            "referenceLocation": "ListNavigationContext"
+                        },
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
+                        }
+                    }
                 }
             }, {
                 "method": "mrdCanCreate",

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

@@ -39,7 +39,7 @@ 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: `${labelOffset(depth)}px` } }, node.error))));

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

@@ -1,28 +1,15 @@
 :host {
   display: block;
-  container-type: inline-size;
-  container-name: mrd-document-view;
 }
 
 .mrd-document-view {
-  max-width: 1200px;
+  max-width: 640px;
 }
-
 .mrd-document-view__body {
-  display: grid;
-  grid-template-columns: 1fr;
+  display: flex;
+  flex-direction: column;
   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;
@@ -37,17 +24,14 @@
   color: var(--mrd-color-primary-dark);
   cursor: pointer;
 }
-
 .mrd-document-view__crumb:hover {
   border-color: var(--mrd-color-primary);
 }
-
 .mrd-document-view__crumb-icon {
   width: 0.875rem;
   height: 0.875rem;
   flex-shrink: 0;
 }
-
 .mrd-document-view__title {
   font-size: var(--mrd-font-size-2xl);
   font-weight: var(--mrd-font-weight-bold);
@@ -55,21 +39,18 @@
   letter-spacing: -0.02em;
   margin: 0 0 var(--mrd-space-1) 0;
 }
-
 .mrd-document-view__date {
   font-size: var(--mrd-font-size-sm);
   color: var(--mrd-color-neutral-400);
   font-variant-numeric: tabular-nums;
   margin: 0 0 var(--mrd-space-6) 0;
 }
-
 .mrd-document-view__file-meta {
   display: flex;
   align-items: center;
   gap: var(--mrd-space-4);
   margin-bottom: var(--mrd-space-2);
 }
-
 .mrd-document-view__file-name {
   flex: 1;
   min-width: 0;
@@ -78,25 +59,6 @@
   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;
@@ -113,17 +75,14 @@
   color: var(--mrd-color-neutral-700);
   cursor: pointer;
 }
-
 .mrd-document-view__download:hover {
   background: var(--mrd-color-neutral-100);
   color: var(--mrd-color-neutral-900);
 }
-
 .mrd-document-view__download svg {
   width: 0.9375rem;
   height: 0.9375rem;
 }
-
 .mrd-document-view__summary-body {
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-700);