@mmlogic/components 0.3.8 → 0.3.10

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,6 +14,9 @@ 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;
@@ -102,11 +105,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 +132,26 @@ 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);
+    }
+    /** Inject the uploaded file reference for a dropped file, so the document view
+     *  can request creation of the new document (see mrdViewUpload). */
+    async setViewFileReference(name, uri) {
+        const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
+        if (list === null || list === void 0 ? void 0 : list.setFileReference)
+            await list.setFileReference(uri);
+    }
+    /** Inject the created document's href after a file-drop create, so the
+     *  optimistic row becomes navigable (see mrdCreateObject). */
+    async setViewCreatedObject(name, href) {
+        const list = this.el.querySelector(`mrd-document-list[data-doclist="${name}"]`);
+        if (list === null || list === void 0 ? void 0 : list.setCreatedHref)
+            await list.setCreatedHref(href);
+    }
     /** 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 });
@@ -270,7 +300,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;
         const key = this.viewKeyFor(item);
         if (!key)
             return null;
@@ -280,7 +310,47 @@ 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);
+        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.renderDocumentContainer(item, key, parentId, docArchetype)
+            : this.renderTable(item, key, parentId)));
+    }
+    /** Document collection view: owns the view-switch + collection actions and
+     *  swaps between the folder tree and the flat table. Events are re-emitted to
+     *  the host with the view key, exactly as the raw list/table events were. */
+    renderDocumentContainer(item, key, parentId, archetype) {
+        return (h("mrd-document-container", { item: item, archetype: archetype, parentId: parentId, viewKey: key, 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));
+            }, 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));
+            }, onMrdNavigate: (e) => {
+                e.stopPropagation();
+                this.mrdNavigate.emit(e.detail);
+            }, onMrdAction: (e) => {
+                var _a;
+                e.stopPropagation();
+                this.mrdViewAction.emit(Object.assign({ name: key, dataClass: (_a = item.dataClass) !== null && _a !== void 0 ? _a : key }, e.detail));
+            }, onMrdUpdateObject: (e) => {
+                e.stopPropagation();
+                this.mrdUpdateObject.emit(e.detail);
+            }, onMrdUpload: (e) => {
+                e.stopPropagation();
+                this.mrdViewUpload.emit(Object.assign({ name: key }, e.detail));
+            }, onMrdCreateObject: (e) => {
+                e.stopPropagation();
+                this.mrdCreateObject.emit(Object.assign({ name: key }, 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 +371,7 @@ export class MrdLayoutSection {
                     parentPath: e.detail.parentPath,
                     basicType: e.detail.basicType,
                 });
-            } })));
+            } }));
     }
     renderItem(item) {
         var _a, _b;
@@ -333,8 +403,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: '39d21b05016b901ff73a90dc0c6ef04cc30b4d42' }, h("div", { key: '546d956676d66438930665e97c2ed618fb8d1d4c', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
+        return (h(Host, { key: '6e737354daec0137b6ebe304efcce9990f02739f' }, h("div", { key: '31a73a8a78999793f5dacee5f2da41df5f23156e', 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 +554,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": "[]"
             }
         };
     }
@@ -542,11 +652,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 +704,81 @@ 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": {}
+                }
+            }, {
+                "method": "mrdUpdateObject",
+                "name": "mrdUpdateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Generic \"update an existing object\" request from an embedded document view\n(a document dragged into another folder). Host PATCHes `href` with `values`."
+                },
+                "complexType": {
+                    "original": "{ href: string; values: Record<string, unknown> }",
+                    "resolved": "{ href: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdViewUpload",
+                "name": "mrdViewUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An external file was dropped on a document view; host uploads and calls\nsetViewFileReference(name, uri)."
+                },
+                "complexType": {
+                    "original": "{ name: string; file: File }",
+                    "resolved": "{ name: string; file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdCreateObject",
+                "name": "mrdCreateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Create a new document from an uploaded file; host POSTs `values` to `path`,\nthen calls setViewCreatedObject(name, href) with the new object's href."
+                },
+                "complexType": {
+                    "original": "{ name: string; path: string; values: Record<string, unknown> }",
+                    "resolved": "{ name: string; path: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -631,7 +816,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 +837,10 @@ export class MrdLayoutSection {
                             "name": "hasNext",
                             "type": "boolean | undefined",
                             "docs": ""
+                        }, {
+                            "name": "nodeId",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -662,7 +851,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 +880,91 @@ 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": []
+                }
+            },
+            "setViewFileReference": {
+                "complexType": {
+                    "signature": "(name: string, uri: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "uri",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject the uploaded file reference for a dropped file, so the document view\ncan request creation of the new document (see mrdViewUpload).",
+                    "tags": []
+                }
+            },
+            "setViewCreatedObject": {
+                "complexType": {
+                    "signature": "(name: string, href: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "href",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject the created document's href after a file-drop create, so the\noptimistic row becomes navigable (see mrdCreateObject).",
+                    "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 {

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: 'f00f81944748f8f09e22d44befe5e288456b7cc8' }, h("div", { key: '7b0ae9cf5b6b684cddb648fe4db6005494322535', class: "mrd-longtext-field" }, this.label && (h("label", { key: '3fc6a8710d0e98fe685c45d214a88ae1b0947973', 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: 'e96f1dbc6c00a1602f4ce3c97d514a229aeb7cb7', 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: 'b034a3cc8d841641c0ec167e138904586b044121' }, h("div", { key: '7379bfadb8bd0c4e0a945a37013053a4e22477ab', class: "mrd-number-field" }, this.label && (h("label", { key: '5518d40b7158e17704633c2b95ac7e3efc0c5568', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: '38ad9f3c945d66c23bd77c743306e916eaefed7f', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'ac8b4bc1ea4431cc9306664522ebfda21760ae83', 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: '09f5a58b769c81acdf4bdd48f9325934c4bb875d', 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: 'c850ec5bc5967ca0aefca7d7cb65ecae121a9dc1' }, h("div", { key: '3249ffbc441422af054a20806dd8dfce954a8ffc', class: "mrd-secret-field" }, this.label && (h("label", { key: '0b4a86da9cafad32f153af1bc5487a4e9b941e2f', 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: 'b0d0105f3d43d2e214f070b24e745dbce0e33977', 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: 'e9252b251faf98ab190e643b97c13fa32d12ef22' }, h("div", { key: '37f4259a111c293f2fe12f321f08c00c25e77feb', class: "mrd-text-field" }, this.label && (h("label", { key: 'c59e0346fb71a765ea38629b03c06341567ed210', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), h("input", { key: 'dc09953a672472348719f29904d900966d945843', 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: '037653857a372854a16b28ebf8994b23e3e0d696', 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: 'fe7824c81e082c3f2c1cf18c11dde20cb1f40f2c' }, h("div", { key: 'adf394a7e146d16bc79006873a209b11d88b2e17', class: "mrd-textarea-field" }, this.label && (h("label", { key: '1b0dd2b4cf26c55a0af05c67a3178edc0c9d56c4', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), h("div", { key: '7c8fe88b222af0beed08db492aa9f6d890e0dc5b', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, h("div", { key: '295968283e94812cb04660117c5bdeaf3647469c', class: "mrd-textarea-field__editor" })), this.error && h("span", { key: '5b5ab61053ab0792d4c249de04bd1d13b51469bf', class: "mrd-textarea-field__error" }, this.error))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

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: '579219a478e31325b5a676465807c1d936724a2b' }, h("div", { key: '51b25f6e083a29989505c0ad79edbcd3b0060736', class: "mrd-time-field" }, this.label && (h("label", { key: '67d98bebb8803deea2d2a4a63f36706789ccd8c7', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: '734741e0db1bdd5886fef37bba3b2f8d7200a0ab', 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: '0dbd168d14966dc56a77c97cd8fd8f9b208a4bf5', 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;
@@ -423,6 +440,53 @@ async function renderSection(index) {
   section.addEventListener('mrdDownload',   (e) => logEvent('mrdDownload',   e.detail));
   section.addEventListener('mrdSearch',     (e) => logEvent('mrdSearch',     e.detail));
 
+  // Generic in-place update (e.g. a document dragged into another folder).
+  // Fire-and-forget PATCH; the component already updated its tree optimistically.
+  section.addEventListener('mrdUpdateObject', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    const { href, values } = e.detail;
+    logEvent('mrdUpdateObject', e.detail);
+    try {
+      const result = await apiRequest('PATCH', href, authGetToken(), values);
+      if (!result.ok) console.error('[mrdUpdateObject] mislukt', result.status, result.body);
+    } catch (err) {
+      console.error('[mrdUpdateObject] mislukt', href, err);
+    }
+  });
+
+  // External file dropped on a folder: upload it, then hand the reference back to
+  // the component (same flow as mrd-form's mrdUpload → setFieldValue).
+  section.addEventListener('mrdViewUpload', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    const { name, file } = e.detail;
+    logEvent('mrdViewUpload', { name, file: file?.name });
+    try {
+      const uri = await apiUploadFile(authGetToken(), _selectedTenant, file);
+      await section.setViewFileReference(name, uri);
+    } catch (err) {
+      console.error('[mrdViewUpload] upload mislukt', name, err);
+    }
+  });
+
+  // Create a new document from the uploaded file. POST; a 400 would be where the
+  // real host opens the create-form fallback (out of scope for the dev page).
+  section.addEventListener('mrdCreateObject', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    const { name, path, values } = e.detail;
+    logEvent('mrdCreateObject', e.detail);
+    try {
+      const result = await apiRequest('POST', `${_baseHref}${path}`, authGetToken(), values);
+      if (result.ok) {
+        const href = result.body?._links?.self?.href;
+        if (href) await section.setViewCreatedObject(name, href);
+      } else {
+        console.error('[mrdCreateObject] mislukt', result.status, result.body);
+      }
+    } catch (err) {
+      console.error('[mrdCreateObject] mislukt', path, err);
+    }
+  });
+
   container.appendChild(section);
 }
 

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);
+}