@mmlogic/components 0.4.3 → 0.5.1

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
@@ -104,6 +105,7 @@ export class MrdDocumentContainer {
                     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();
@@ -112,7 +114,7 @@ export class MrdDocumentContainer {
     }
     render() {
         const treeMode = this.mode === 'tree';
-        return (h(Host, { key: '7d0523d66f9a3d189dcc5517cd7281a57456977d' }, this.renderToolbar(), h("div", { key: '19b0f416d2ad1b093afd6f799670debf8c18b225', 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())));
@@ -342,11 +344,11 @@ 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; listContext?: ListNavigationContext }",
-                    "resolved": "{ href?: string | undefined; label: string; navigateBehaviour?: ClientLayoutNavigateBehaviour | undefined; listContext?: ListNavigationContext | 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",
@@ -359,6 +361,12 @@ export class MrdDocumentContainer {
                             "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";
 /**
@@ -614,7 +615,8 @@ export class MrdDocumentList {
         const listContext = index >= 0
             ? { index, sort: '', path: this.buildDataPath(), qs: this.buildDocQs(container, node) }
             : undefined;
-        this.mrdNavigate.emit({ href, label, listContext });
+        const attachments = attachmentsFromRecord(this.archetype, doc);
+        this.mrdNavigate.emit({ href, label, listContext, attachments });
     }
     // ── Render ───────────────────────────────────────────────────────────────
     treeCtx() {
@@ -648,7 +650,7 @@ export class MrdDocumentList {
             body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '49157721108db3b03c8c5e6550692b42dfc2e113', 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.
@@ -666,7 +668,7 @@ export class MrdDocumentList {
         else {
             body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        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)));
+        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"; }
@@ -843,17 +845,23 @@ export class MrdDocumentList {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "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`."
+                    "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; listContext?: ListNavigationContext }",
-                    "resolved": "{ href?: string | undefined; label: string; listContext?: ListNavigationContext | undefined; }",
+                    "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"
                         }
                     }
                 }

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

@@ -1,53 +1,49 @@
 :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;
-  gap: var(--mrd-space-2);
-  margin-bottom: var(--mrd-space-4);
-  padding: var(--mrd-space-1) var(--mrd-space-3);
-  background: var(--mrd-color-primary-light);
-  border: 1px solid transparent;
-  border-radius: var(--mrd-border-radius);
+.mrd-document-view__container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mrd-space-1);
+  margin-bottom: var(--mrd-space-6);
+}
+.mrd-document-view__container-link {
+  background: none;
+  border: none;
+  padding: 0;
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-font-size-sm);
-  color: var(--mrd-color-primary-dark);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
   cursor: pointer;
+  text-align: left;
 }
-
-.mrd-document-view__crumb:hover {
-  border-color: var(--mrd-color-primary);
+.mrd-document-view__container-link:hover {
+  text-decoration: underline;
 }
-
-.mrd-document-view__crumb-icon {
-  width: 0.875rem;
-  height: 0.875rem;
+.mrd-document-view__folder {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-400);
+  word-break: break-word;
+}
+.mrd-document-view__folder-icon {
+  width: 0.75rem;
+  height: 0.75rem;
   flex-shrink: 0;
 }
-
 .mrd-document-view__title {
   font-size: var(--mrd-font-size-2xl);
   font-weight: var(--mrd-font-weight-bold);
@@ -55,48 +51,17 @@
   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;
-  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;
@@ -113,17 +78,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);