@mmlogic/components 0.3.5 → 0.3.9

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, } from "../../types/client-layout";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../types/client-layout";
 import { CellRenderer } from "../../utils/cell-renderer";
 import { t } from "../../utils/i18n";
 import { formatDate } from "../../utils/format";
@@ -14,11 +14,16 @@ export class MrdLayoutSection {
         /** Legacy: top-level _links from ClientDashboardMetadata. Not needed in new flat format. */
         this.links = {};
         this.locale = navigator.language;
+        /** 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 = [];
         this.searchQueryMap = {};
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
         this.openHistoryField = null;
+        /** Per-view display mode for document collection views. Default 'tree'. */
+        this.docViewMode = {};
         this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
@@ -102,11 +107,18 @@ export class MrdLayoutSection {
         }
     }
     /**
-     * Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.
-     * Pass totalElements to update the pagination total (safe to pass on every page).
-     * Pass hasNext (from _links.next presence) so the table can decide whether to emit aggregations.
+     * Inject rows for a VIEW / RELATED_VIEW item.
+     * - Table view: injects the page into the embedded mrd-table (pass totalElements/hasNext).
+     * - Document view: pass `nodeId` to route the rows to that folder node in the embedded
+     *   mrd-document-list. Folder loading is just a filtered list load, so it reuses this method.
      */
-    async setViewPage(name, page, rows, totalElements, hasNext) {
+    async setViewPage(name, page, rows, totalElements, hasNext, nodeId) {
+        if (nodeId) {
+            const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
+            if (list === null || list === void 0 ? void 0 : list.setDocuments)
+                await list.setDocuments(nodeId, rows);
+            return;
+        }
         const table = this.el.querySelector(`mrd-table[data-view="${name}"]`);
         if (!table)
             return;
@@ -122,6 +134,12 @@ export class MrdLayoutSection {
             return;
         await table.setAggregations(data);
     }
+    /** Inject distinct values into an embedded mrd-document-list for a document view. */
+    async setViewDistinct(name, nodeId, values) {
+        const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
+        if (list === null || list === void 0 ? void 0 : list.setDistinct)
+            await list.setDistinct(nodeId, values);
+    }
     /** Provide a resolved URL for an IMAGE field. Shows as thumbnail; clicking opens the lightbox. */
     async setImagePreview(fieldName, url) {
         this.imagePreviews = Object.assign(Object.assign({}, this.imagePreviews), { [fieldName]: url });
@@ -148,7 +166,7 @@ export class MrdLayoutSection {
                 return (h("a", { class: "mrd-layout-section__link", href: href, target: "_blank", rel: "noopener noreferrer" }, label));
             }
             case ClientLayoutItemFieldDataType.TEXTBLOCK:
-                return h("span", { innerHTML: String(value) });
+                return h("div", { class: "mrd-layout-section__prose", innerHTML: String(value) });
             case ClientLayoutItemFieldDataType.LONGTEXT:
                 return h("pre", { class: "mrd-layout-section__pre" }, String(value));
             case ClientLayoutItemFieldDataType.JSON:
@@ -270,7 +288,7 @@ export class MrdLayoutSection {
         return (h("div", { class: "mrd-layout-section__search", key: `search-${dataClass}` }, h("div", { class: "mrd-layout-section__search-wrap" }, h("svg", { class: "mrd-layout-section__search-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", "clip-rule": "evenodd" })), h("input", { class: "mrd-layout-section__search-input", type: "text", value: query, placeholder: (_c = item.label) !== null && _c !== void 0 ? _c : '', onInput: e => this.handleSearchInput(dataClass, e.target.value) })), results.length > 0 && (h("ul", { class: "mrd-layout-section__search-results" }, results.map(r => (h("li", { key: r.id, class: "mrd-layout-section__search-result" }, h("button", { class: "mrd-layout-section__search-result-btn", onClick: () => this.mrdNavigate.emit({ href: r.id, label: r.label }) }, h("span", { class: "mrd-layout-section__search-result-label" }, r.label), r.description && h("span", { class: "mrd-layout-section__search-result-desc" }, r.description)))))))));
     }
     renderRelatedView(item) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const key = this.viewKeyFor(item);
         if (!key)
             return null;
@@ -280,7 +298,32 @@ export class MrdLayoutSection {
         // Extract parentId from data._links.self.href for RELATED_VIEW path construction
         const selfHref = (_e = (_d = (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : '';
         const parentId = (_f = selfHref.split('/').filter(Boolean).pop()) !== null && _f !== void 0 ? _f : '';
-        return (h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
+        // The API publishes `archetypes` on the VIEW/RELATED_VIEW item itself
+        // (sibling of `view`), not inside `view`.
+        const docArchetype = resolveArchetype((_g = item.archetypes) !== null && _g !== void 0 ? _g : (_h = item.view) === null || _h === void 0 ? void 0 : _h.archetypes, ARCHETYPE_DOCUMENT);
+        const mode = (_j = this.docViewMode[key]) !== null && _j !== void 0 ? _j : 'tree';
+        return (h("div", { class: "mrd-layout-section__related-view", key: `view-${key}` }, showTitle && item.label && h("h3", { class: "mrd-layout-section__related-view-title" }, item.label), docArchetype && this.renderDocToolbar(key, mode), docArchetype && mode === 'tree'
+            ? this.renderDocumentList(item, key, parentId, docArchetype)
+            : this.renderTable(item, key, parentId)));
+    }
+    /** Tree / list segmented toggle for document collection views (+ upload placeholder). */
+    renderDocToolbar(key, mode) {
+        return (h("div", { class: "mrd-layout-section__doc-toolbar" }, h("div", { class: "mrd-layout-section__seg", role: "group", "aria-label": t('doc_view_switch', this.locale) }, h("button", { class: "mrd-layout-section__seg-btn", "aria-pressed": String(mode === 'tree'), title: t('doc_view_tree', this.locale), "aria-label": t('doc_view_tree', this.locale), onClick: () => { this.docViewMode = Object.assign(Object.assign({}, this.docViewMode), { [key]: 'tree' }); } }, 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: "M3 5h6M3 12h9M3 19h6" }), h("circle", { cx: "18", cy: "5", r: "1.6" }), h("circle", { cx: "18", cy: "19", r: "1.6" }), h("path", { d: "M16 12h4" }))), h("button", { class: "mrd-layout-section__seg-btn", "aria-pressed": String(mode === 'list'), title: t('doc_view_list', this.locale), "aria-label": t('doc_view_list', this.locale), onClick: () => { this.docViewMode = Object.assign(Object.assign({}, this.docViewMode), { [key]: 'list' }); } }, 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: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }))))));
+    }
+    renderDocumentList(item, key, parentId, archetype) {
+        return (h("mrd-document-list", { "data-doclist": key, item: item, archetype: archetype, parentId: parentId, locale: this.locale, onMrdLoadDistinct: (e) => {
+                e.stopPropagation();
+                this.mrdLoadViewDistinct.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdLoadPage: (e) => {
+                e.stopPropagation();
+                this.mrdLoadViewPage.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdNavigate: (e) => {
+                e.stopPropagation();
+                this.mrdNavigate.emit(e.detail);
+            } }));
+    }
+    renderTable(item, key, parentId) {
+        return (h("mrd-table", { "data-view": key, item: item, parentId: parentId, locale: this.locale, onMrdLoadPage: (e) => this.handleViewLoadPage(e, key), onMrdLoadAggregations: (e) => {
                 var _a;
                 e.stopPropagation();
                 this.mrdLoadViewAggregations.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
@@ -301,7 +344,7 @@ export class MrdLayoutSection {
                     parentPath: e.detail.parentPath,
                     basicType: e.detail.basicType,
                 });
-            } })));
+            } }));
     }
     renderItem(item) {
         var _a, _b;
@@ -333,8 +376,23 @@ export class MrdLayoutSection {
             return null;
         return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
     }
+    /** Single-document view: the record's own type carries commons.document. Renders
+     *  a recognisable document instead of generic fields, keeping any related views/
+     *  searches below it. */
+    renderDocumentObject(archetype) {
+        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); } }),
+            ...related.map(it => this.renderItem(it)),
+        ];
+    }
     render() {
-        return (h(Host, { key: '8966198eebd98570d2db2f4d2fe9ef3f8b466ec6' }, h("div", { key: '645ddbfdd829a0f9c1a4eab18105662af6c078b2', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
+        return (h(Host, { key: '4fbba410f9b8cab2bf21497467f99ff25f109bcc' }, h("div", { key: '679d2c34f1eaff694873ba18d679cbccecdae1a6', class: "mrd-layout-section" }, docArchetype
+            ? this.renderDocumentObject(docArchetype)
+            : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }
@@ -469,6 +527,31 @@ export class MrdLayoutSection {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "archetypes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype[]",
+                    "resolved": "ClientArchetype[]",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Top-level archetypes on the object dashboard. When it contains commons.document,\nthe record is rendered as a single-document view instead of generic fields."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -478,7 +561,8 @@ export class MrdLayoutSection {
             "searchResultsMap": {},
             "imagePreviewUrl": {},
             "imagePreviews": {},
-            "openHistoryField": {}
+            "openHistoryField": {},
+            "docViewMode": {}
         };
     }
     static get events() {
@@ -542,11 +626,11 @@ export class MrdLayoutSection {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Re-emitted from an embedded mrd-table's mrdLoadPage; host fetches the next page and calls setViewPage()."
+                    "text": "Re-emitted from an embedded mrd-table's or mrd-document-list's mrdLoadPage; host fetches the\nrows and calls setViewPage(). `nodeId` is present for a document-list folder load."
                 },
                 "complexType": {
-                    "original": "{ name: string; page: number; sort: string; path: string; qs: string }",
-                    "resolved": "{ name: string; page: number; sort: string; path: string; qs: string; }",
+                    "original": "{ name: string; page: number; sort: string; path: string; qs: string; nodeId?: string }",
+                    "resolved": "{ name: string; page: number; sort: string; path: string; qs: string; nodeId?: string | undefined; }",
                     "references": {}
                 }
             }, {
@@ -594,6 +678,21 @@ export class MrdLayoutSection {
                     "resolved": "{ name: string; dataClass: string; path: string; qs: string; aggQs: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdLoadViewDistinct",
+                "name": "mrdLoadViewDistinct",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from an embedded mrd-document-list's mrdLoadDistinct; host fetches distinct values and calls setViewDistinct()."
+                },
+                "complexType": {
+                    "original": "{ name: string; nodeId: string; distinct: string; path: string; qs: string }",
+                    "resolved": "{ name: string; nodeId: string; distinct: string; path: string; qs: string; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -631,7 +730,7 @@ export class MrdLayoutSection {
             },
             "setViewPage": {
                 "complexType": {
-                    "signature": "(name: string, page: number, rows: any[], totalElements?: number, hasNext?: boolean) => Promise<void>",
+                    "signature": "(name: string, page: number, rows: any[], totalElements?: number, hasNext?: boolean, nodeId?: string) => Promise<void>",
                     "parameters": [{
                             "name": "name",
                             "type": "string",
@@ -652,6 +751,10 @@ export class MrdLayoutSection {
                             "name": "hasNext",
                             "type": "boolean | undefined",
                             "docs": ""
+                        }, {
+                            "name": "nodeId",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -662,7 +765,7 @@ export class MrdLayoutSection {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Inject data into an embedded mrd-table for a RELATED_VIEW or VIEW item.\nPass totalElements to update the pagination total (safe to pass on every page).\nPass hasNext (from _links.next presence) so the table can decide whether to emit aggregations.",
+                    "text": "Inject rows for a VIEW / RELATED_VIEW item.\n- Table view: injects the page into the embedded mrd-table (pass totalElements/hasNext).\n- Document view: pass `nodeId` to route the rows to that folder node in the embedded\n  mrd-document-list. Folder loading is just a filtered list load, so it reuses this method.",
                     "tags": []
                 }
             },
@@ -691,6 +794,41 @@ export class MrdLayoutSection {
                     "tags": []
                 }
             },
+            "setViewDistinct": {
+                "complexType": {
+                    "signature": "(name: string, nodeId: string, values: DistinctValue[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "nodeId",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "values",
+                            "type": "DistinctValue[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DistinctValue": {
+                            "location": "import",
+                            "path": "../mrd-document-list/mrd-document-list",
+                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DistinctValue",
+                            "referenceLocation": "DistinctValue"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject distinct values into an embedded mrd-document-list for a document view.",
+                    "tags": []
+                }
+            },
             "setImagePreview": {
                 "complexType": {
                     "signature": "(fieldName: string, url: string) => Promise<void>",

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

@@ -250,13 +250,12 @@
 }
 
 .mrd-layout-section__group-title {
-  font-size: var(--mrd-font-size-sm);
+  font-size: var(--mrd-font-size-xs);
   font-weight: var(--mrd-font-weight-semibold);
   color: var(--mrd-color-neutral-500);
   margin: 0 0 var(--mrd-space-2) 0;
   padding-bottom: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.01em;
 }
 
 .mrd-layout-section__related-view {
@@ -270,6 +269,50 @@
   margin: 0 0 var(--mrd-space-3) 0;
 }
 
+.mrd-layout-section__doc-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-2) 0;
+}
+
+.mrd-layout-section__seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mrd-color-neutral-100);
+  border-radius: var(--mrd-border-radius);
+}
+
+.mrd-layout-section__seg-btn {
+  width: 1.875rem;
+  height: 1.625rem;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--mrd-transition-fast), background var(--mrd-transition-fast);
+}
+
+.mrd-layout-section__seg-btn:hover {
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-layout-section__seg-btn[aria-pressed='true'] {
+  background: var(--mrd-color-white);
+  color: var(--mrd-color-primary-dark);
+  box-shadow: var(--mrd-shadow-sm);
+}
+
+.mrd-layout-section__seg-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .mrd-layout-section__search {
   position: relative;
   margin: var(--mrd-space-2) 0;

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

@@ -28,7 +28,7 @@ export class MrdLongtextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '10d998b80f54cf7b10be26bf451d808c78579e69' }, h("div", { key: 'af45fe94a41f668bf6ddca670b42e065ee83ef23', class: "mrd-longtext-field" }, this.label && (h("label", { key: '31a08490d695ac9f4bbe5dff6a1ae3bb2a94337d', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && h("span", { key: '7f133e72a882a8aaf33245445829754da1e6377b', class: "mrd-longtext-field__error" }, this.error))));
+        return (h(Host, { key: '624be9369a37f0901ada13bd0e8a3bb8b40f54c8' }, h("div", { key: '6544e7b10af59a5628a119d5ea907fb968f21d42', class: "mrd-longtext-field" }, this.label && (h("label", { key: 'd56386e3fc2984b522bcbf5ec6908e044ed6f3d3', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && h("span", { key: '9423d70dec9c6439cc629746f1038a61a14da5e4', class: "mrd-longtext-field__error" }, this.error))));
     }
     static get is() { return "mrd-longtext-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -69,7 +69,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: '195beed4d6453597320b79654feaabe8f742eff2' }, h("div", { key: 'c641d7a4d27ba28dd34acda98d38f245945d20bb', class: "mrd-number-field" }, this.label && (h("label", { key: '2a5f6eb48889a3ab0aa76d6b2ca5d59b20625bb2', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'a844b89e6a278629a8aefa4ac72e5e18e5904cab', class: "mrd-number-field__input-wrapper" }, h("input", { key: '1ce9c3d67b458601a0de95b3b8478ef05df73069', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, 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 })), hasError && h("span", { key: '4226614a65a8d27543d1287e2c1f61f67c427e63', class: "mrd-number-field__error" }, this.error))));
+        return (h(Host, { key: '2c844e94a7cbb3fcf33f9552329443260e9490ab' }, h("div", { key: 'b87bdc2a17552e74b27d6da16e4db9bfd2f7e4ac', class: "mrd-number-field" }, this.label && (h("label", { key: '4aca381054b0ce27c94a9a7c779642d44dbbebcc', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'b7e8d122bfbd92152ce44a7ba56222425eed73f9', class: "mrd-number-field__input-wrapper" }, h("input", { key: '906330075f0b8a50ff45344e865217fd1938f199', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, 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 })), hasError && h("span", { key: '5f56d6f2e0a878703f35d50b1932a39a82dace3b', class: "mrd-number-field__error" }, this.error))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,9 +28,9 @@ export class MrdSecretField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '08f1aa9d8ab9f4e41abb6d3286e5e383427a5409' }, h("div", { key: 'fabe38aa130e211cea81f2c2f227bc15ad3ebf7d', class: "mrd-secret-field" }, this.label && (h("label", { key: '69af8844eff8ce84daa622635c79130fb491eb0b', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
+        return (h(Host, { key: 'e0d516f7e76c1fab5441567cc371569a8eab07f8' }, h("div", { key: 'fac6fb517a0f37560429c828251f7db3841d3301', class: "mrd-secret-field" }, this.label && (h("label", { key: 'b2dd3189f2fcf3fd3feea741a39dbd5c3f4d437f', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
             ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
-            : (h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && h("span", { key: 'e602004f0bb10916d1015e3c2b003523a292997c', class: "mrd-secret-field__error" }, this.error))));
+            : (h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && h("span", { key: 'dbd6667d7f2c6ed26220ac83a46235cf3ad777d7', class: "mrd-secret-field__error" }, this.error))));
     }
     static get is() { return "mrd-secret-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class MrdTextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'fd4e1f389cb452ab80a1e1c7295d884ca935999e' }, h("div", { key: '7b7bde7a18fcd9b8d5779daab88ddabb45dd8692', class: "mrd-text-field" }, this.label && (h("label", { key: '8e2ad4053473cfad4eae4c4634b863ac5ef32fea', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: 'd32712a6dc2aee4691bc4a580d5ca2ad81e0ff9f', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '31585dbf82020c81834e1eeada5cd9907a5ead56', class: "mrd-text-field__error" }, this.error))));
+        return (h(Host, { key: '124c46a83d30993aed5045eda42134d5c28ec989' }, h("div", { key: '5497fab2938f875fe9b4cd539a9feaaf907007e1', class: "mrd-text-field" }, this.label && (h("label", { key: '4d43255f45de8e7c4596a211797403479d2240b6', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: 'df3d61fc60e41731e9783dc4484f3c3ca3ea8b13', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '9bf08d3a77d7616674caf3325b6598490f2d50fc', class: "mrd-text-field__error" }, this.error))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -66,7 +66,7 @@ export class MrdTextareaField {
         }
     }
     render() {
-        return (h(Host, { key: 'e1fd819c598f01e3986946357ec18d608f2c7adc' }, h("div", { key: '20c28e54e61429655b2d4f297bd84e183ad7e971', class: "mrd-textarea-field" }, this.label && (h("label", { key: 'fa46a20badc35c931563600f24a32e0a8c8c07ad', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: 'ee928eca0a1b85401b346b7fae8adbe9214a7664', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '89b00f3c526623c47f0aff7ad862f70dfdc2fe15', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '458cf8fddee36ddbc384ce4d25765e5aacd3c9d5', class: "mrd-textarea-field__error" }, this.error))));
+        return (h(Host, { key: '2413906076dee3f48118d44574dadd36bcedadfe' }, h("div", { key: '59e369a54e906b09a1062c7c5f701b8bbd631479', class: "mrd-textarea-field" }, this.label && (h("label", { key: 'd400c499eb6e35581fc2af9d372917287fcc60eb', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '62765821b5280e71918db0d070a136ef07e1eecd', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: 'f41b73291542d4582c492bce0a89240a171aba32', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: 'eaba5b735be7aa8deebfbc46eac03be970bb1d13', class: "mrd-textarea-field__error" }, this.error))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/mrd-textarea-field/mrd-textarea-field.scss

@@ -72,62 +72,6 @@
   font-style: normal;
 }
 
-/* Prose styling for read-only Quill output (Snow theme does not penetrate scoped CSS) */
-.mrd-textarea-field__editor .ql-editor p {
-  margin-bottom: 0.75em;
-}
-
-.mrd-textarea-field__editor .ql-editor p:last-child {
-  margin-bottom: 0;
-}
-
-.mrd-textarea-field__editor .ql-editor ul {
-  list-style: disc;
-  padding-left: 1.5em;
-  margin-bottom: 0.75em;
-}
-
-.mrd-textarea-field__editor .ql-editor ol {
-  list-style: decimal;
-  padding-left: 1.5em;
-  margin-bottom: 0.75em;
-}
-
-.mrd-textarea-field__editor .ql-editor li {
-  margin-bottom: 0.25em;
-}
-
-.mrd-textarea-field__editor .ql-editor h1 {
-  font-size: 1.75em;
-  font-weight: 700;
-  margin-bottom: 0.5em;
-}
-
-.mrd-textarea-field__editor .ql-editor h2 {
-  font-size: 1.375em;
-  font-weight: 700;
-  margin-bottom: 0.5em;
-}
-
-.mrd-textarea-field__editor .ql-editor h3 {
-  font-size: 1.125em;
-  font-weight: 600;
-  margin-bottom: 0.5em;
-}
-
-.mrd-textarea-field__editor .ql-editor a {
-  color: var(--mrd-color-primary);
-  text-decoration: underline;
-}
-
-.mrd-textarea-field__editor .ql-editor strong {
-  font-weight: 700;
-}
-
-.mrd-textarea-field__editor .ql-editor em {
-  font-style: italic;
-}
-
 .mrd-textarea-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);

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

@@ -27,7 +27,7 @@ export class MrdTimeField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'c507996709437d8982f9175b286e25598997002d' }, h("div", { key: 'd5f1b7f14d26cae8298cd40491898b39044158f8', class: "mrd-time-field" }, this.label && (h("label", { key: '10976e18df09240e00b045314c4ddd3845d4bfdc', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: 'bc557333f107a371a7005f9b56dd0395190e63d7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'b5a09c2aa063fa9e2fc3aba411e86b57d879c408', class: "mrd-time-field__error" }, this.error))));
+        return (h(Host, { key: 'e93a6492a7bdc17f04f5aac0b8ecd63435a6280f' }, h("div", { key: 'b9692c11f21ccd354ba5475e1a60e6afc8ead22e', class: "mrd-time-field" }, this.label && (h("label", { key: '668492f16b6b96065fe65204a4f053c2ef2796e5', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: 'bd2df39240c42b4a337554b0747c7b89eb5d8760', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: '19a81211f3b630436a379f785768d28ffa01c12c', class: "mrd-time-field__error" }, this.error))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/dev/app.js

@@ -379,17 +379,21 @@ async function renderSection(index) {
   section.items  = layout.items;
   section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
   section.locale = _locale;
+  // Dashboard-level archetypes describe the object itself → single-document view.
+  // Only apply to the main object layout, not tab-page (related) layouts.
+  section.archetypes = (!layout.tabPage && _dashboardData.archetypes) ? _dashboardData.archetypes : [];
 
   section.addEventListener('mrdLoadViewPage', async (e) => {
     if (generation !== _sectionGeneration) return;
-    const { name, page, path, qs } = e.detail;
+    const { name, page, path, qs, nodeId } = e.detail;
     logEvent('mrdLoadViewPage', e.detail);
     try {
       const url = `${_baseHref}${path}${qs ? '?' + qs : ''}`;
       const result = await apiFetchPage(authGetToken(), url, page);
       const rows  = Object.values(result._embedded ?? {})[0] ?? [];
       const total = result.page?.totalElements;
-      await section.setViewPage(name, page, rows, total);
+      // nodeId present → document-list folder load; routed to the tree node.
+      await section.setViewPage(name, page, rows, total, undefined, nodeId);
     } catch (err) {
       console.error('[mrdLoadViewPage] mislukt', name, err);
     }
@@ -408,6 +412,19 @@ async function renderSection(index) {
     }
   });
 
+  section.addEventListener('mrdLoadViewDistinct', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    const { name, nodeId, path, qs } = e.detail;
+    logEvent('mrdLoadViewDistinct', e.detail);
+    try {
+      const url = `${_baseHref}${path}${qs ? '?' + qs : ''}`;
+      const result = await apiRequest('GET', url, authGetToken());
+      if (result.ok) await section.setViewDistinct(name, nodeId, result.body?.values ?? []);
+    } catch (err) {
+      console.error('[mrdLoadViewDistinct] mislukt', name, err);
+    }
+  });
+
   section.addEventListener('mrdViewAction', async (e) => {
     logEvent('mrdViewAction', e.detail);
     const { action, dataClass } = e.detail;

package/dist/collection/types/client-layout.js

@@ -62,3 +62,13 @@ export var ClientLayoutItemRelationEditBehavior;
     ClientLayoutItemRelationEditBehavior["DROPDOWN"] = "DROPDOWN";
     ClientLayoutItemRelationEditBehavior["CHECKBOX"] = "CHECKBOX";
 })(ClientLayoutItemRelationEditBehavior || (ClientLayoutItemRelationEditBehavior = {}));
+/** Well-known archetype ids the client renders specially. */
+export const ARCHETYPE_DOCUMENT = 'commons.document';
+/**
+ * Find a binding for `archetypeId` in a published `archetypes` list.
+ * Returns `undefined` when the archetype is absent — callers fall back to the
+ * generic table/field rendering.
+ */
+export function resolveArchetype(archetypes, archetypeId) {
+    return (archetypes !== null && archetypes !== void 0 ? archetypes : []).find(a => a.archetype === archetypeId);
+}

package/dist/collection/utils/i18n.js

@@ -32,6 +32,9 @@ const translations = {
         table_filter_clear_all: 'Alle filters wissen',
         table_new_record: 'Nieuw record',
         table_export_excel: 'Exporteer naar Excel',
+        doc_view_switch: 'Weergave wisselen',
+        doc_view_tree: 'Boomweergave',
+        doc_view_list: 'Lijstweergave',
         // mrd-table filter popup
         filter_sorting: 'Sortering',
         filter_ascending: 'Oplopend',
@@ -95,6 +98,9 @@ const translations = {
         table_filter_clear_all: 'Clear all filters',
         table_new_record: 'New record',
         table_export_excel: 'Export to Excel',
+        doc_view_switch: 'Switch view',
+        doc_view_tree: 'Tree view',
+        doc_view_list: 'List view',
         // mrd-table filter popup
         filter_sorting: 'Sorting',
         filter_ascending: 'Ascending',
@@ -158,6 +164,9 @@ const translations = {
         table_filter_clear_all: 'مسح جميع الفلاتر',
         table_new_record: 'سجل جديد',
         table_export_excel: 'تصدير إلى Excel',
+        doc_view_switch: 'تبديل العرض',
+        doc_view_tree: 'عرض شجري',
+        doc_view_list: 'عرض القائمة',
         // mrd-table filter popup
         filter_sorting: 'الترتيب',
         filter_ascending: 'تصاعدي',
@@ -221,6 +230,9 @@ const translations = {
         table_filter_clear_all: 'Effacer tous les filtres',
         table_new_record: 'Nouvel enregistrement',
         table_export_excel: 'Exporter vers Excel',
+        doc_view_switch: 'Changer de vue',
+        doc_view_tree: 'Vue arborescente',
+        doc_view_list: 'Vue liste',
         // mrd-table filter popup
         filter_sorting: 'Tri',
         filter_ascending: 'Croissant',
@@ -284,6 +296,9 @@ const translations = {
         table_filter_clear_all: 'Alle Filter löschen',
         table_new_record: 'Neuer Eintrag',
         table_export_excel: 'Als Excel exportieren',
+        doc_view_switch: 'Ansicht wechseln',
+        doc_view_tree: 'Baumansicht',
+        doc_view_list: 'Listenansicht',
         // mrd-table filter popup
         filter_sorting: 'Sortierung',
         filter_ascending: 'Aufsteigend',
@@ -347,6 +362,9 @@ const translations = {
         table_filter_clear_all: 'Borrar todos los filtros',
         table_new_record: 'Nuevo registro',
         table_export_excel: 'Exportar a Excel',
+        doc_view_switch: 'Cambiar vista',
+        doc_view_tree: 'Vista de árbol',
+        doc_view_list: 'Vista de lista',
         // mrd-table filter popup
         filter_sorting: 'Ordenación',
         filter_ascending: 'Ascendente',
@@ -410,6 +428,9 @@ const translations = {
         table_filter_clear_all: 'Cancella tutti i filtri',
         table_new_record: 'Nuovo record',
         table_export_excel: 'Esporta in Excel',
+        doc_view_switch: 'Cambia vista',
+        doc_view_tree: 'Vista ad albero',
+        doc_view_list: 'Vista elenco',
         // mrd-table filter popup
         filter_sorting: 'Ordinamento',
         filter_ascending: 'Crescente',
@@ -473,6 +494,9 @@ const translations = {
         table_filter_clear_all: 'Очистити всі фільтри',
         table_new_record: 'Новий запис',
         table_export_excel: 'Експортувати до Excel',
+        doc_view_switch: 'Змінити вигляд',
+        doc_view_tree: 'Деревоподібний вигляд',
+        doc_view_list: 'Список',
         // mrd-table filter popup
         filter_sorting: 'Сортування',
         filter_ascending: 'За зростанням',