@mmlogic/components 0.3.9 → 0.3.10

package/dist/collection/components/mrd-document-list/mrd-document-list.scss

@@ -22,6 +22,61 @@
   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__name-input {
+  flex: 1;
+  min-width: 0;
+  height: 1.625rem;
+  padding: 0 var(--mrd-space-2);
+  font-size: var(--mrd-font-size-sm);
+  font-family: inherit;
+  color: var(--mrd-color-neutral-800);
+  border: 1px solid var(--mrd-color-primary);
+  border-radius: var(--mrd-border-radius);
+  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);
 }

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

@@ -56,7 +56,7 @@ export class MrdDocumentView {
         const date = dateRaw != null && dateRaw !== '' ? formatDate(dateRaw, this.locale) : null;
         const summaryRaw = this.slotValue('summary');
         const summary = summaryRaw != null && summaryRaw !== '' ? String(summaryRaw) : null;
-        return (h(Host, { key: 'b6c2dbc45d5cfe551ac16b43b1a152a0d793b794' }, h("div", { key: 'df70848b4aa54ea414ea5d577a600779ee002b13', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '46ff550fccd6de02972c6ee77b3cd5e7e394481a', class: "mrd-document-view__title" }, title), date && h("p", { key: '501c75cfc78722bd486d4a1db366675a1c519264', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: 'ee4475d06e5ca81a760e0c9e1e4b5f32ed894d89', class: "mrd-document-view__summary" }, h("div", { key: '9d196abdcc56b84b2b07203d7e5167be196a342a', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
+        return (h(Host, { key: '0a2071925ecdb21738376d66fa4babf4590e694c' }, h("div", { key: 'a2d29c0b6e211cab142adc780466bc885a602e96', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '7f5ac202c21bc8a70f0dd15e2e1fa06e651b5bce', class: "mrd-document-view__title" }, title), date && h("p", { key: 'b1dce94d5fd8bfd5e078644f631a38f91b87e7ff', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: '588b9ca40a49ae9ea303852620bde75333b440ab', class: "mrd-document-view__summary" }, h("div", { key: 'd3b8adb85ac346b72451e789c10aedd539c966de', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }

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

@@ -31,7 +31,7 @@ export class MrdEmailField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: 'bf888feadb6585a845f6d610165e192e342be5d2' }, h("div", { key: 'ab43101242a92df1643d218c0d35bb7b80452fef', class: "mrd-email-field" }, this.label && (h("label", { key: '854c9bd733f5803616ab8b70f0316a7a8a82ffd4', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '39ed16119a2329fdc67db578dcc7bafc35f4acf0', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'c5881e21a2314e5d339464b16982add69be9f68a', class: "mrd-email-field__error" }, this.error))));
+        return (h(Host, { key: '0d442ab2a711c26c83fcdbf0fd8cd006d8dd8649' }, h("div", { key: 'ceb2a80679514c4c5b888fe096c90ed6cc973f64', class: "mrd-email-field" }, this.label && (h("label", { key: '663f95eff1002ee56cfc3104514bf31b47e26750', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '42dbdec25a47b37cfd68d00d0b8a481f96fe8241', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: '626ee856ceaa7051fb9dd1de8b7cbd708e83f617', class: "mrd-email-field__error" }, this.error))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -85,7 +85,7 @@ export class MrdFileField {
             hasError ? 'mrd-file-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-file-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '424a55ff5c141a51ed2e253a126e0046808cf1b1' }, h("div", { key: '49407e31c019a27bbaa3ccbc81cd4597d992d03a', class: "mrd-file-field" }, this.label && (h("label", { key: '0477b203f2b8df03cf9d11153bc547e9490800f7', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: 'aff3e5f258cfa8320150048af0b0087081cbbc13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'ee4366f0c4b8871524288ca47c98b4749def0b81', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'b67b7770e194843a1b75caaff807ea14d62eba6a', class: "mrd-file-field__error" }, this.error))));
+        return (h(Host, { key: '095bb39f3cb1680cf5e7e51bdfd06d8eb087f237' }, h("div", { key: '7e5b5fe6e63b6530221083c8bcb82bcac59a5fe7', class: "mrd-file-field" }, this.label && (h("label", { key: 'c34723f4199371d6fe8ea87463d878b89c038590', class: `mrd-file-field__label${this.required ? ' mrd-file-field__label--required' : ''}` }, this.label)), h("div", { key: '4727667345d3cd4a5c65a431744a09f366943c13', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '45ed41c0f094dbe269561c8586e473f908cdf4a4', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !hasFile, onChange: this.handleInputChange }), hasFile ? (h("div", { class: "mrd-file-field__selected" }, this.uploading ? (h("span", { class: "mrd-file-field__spinner", "aria-label": t('loading', this.locale) })) : (h("svg", { class: "mrd-file-field__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" }))), h("span", { class: "mrd-file-field__filename" }, this.fileName), !this.uploading && (h("button", { class: "mrd-file-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, "\u2715")))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: '00ce94ead3c32ed63e903cfd9d8480084a308d84', class: "mrd-file-field__error" }, this.error))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -99,7 +99,7 @@ export class MrdImageField {
             hasError ? 'mrd-image-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '105ebf20023291a1e5c8524eedba4f04573943cd' }, h("div", { key: '59e6fe3b81c2ec1c07db7aaba819d79d2525b21f', class: "mrd-image-field" }, this.label && (h("label", { key: '2f3815ad6fe3f35932a8cc4d625751935272b629', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '8b45fbf8d0a229110a53068620a316ab6d48dbb8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'b6039e85f3f456e7c8d8e7d4db29e111a7f6d8d9', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'f53ade0f627f3c840bc133690d40034c12665b5c', class: "mrd-image-field__error" }, this.error))));
+        return (h(Host, { key: '97db2df72839f36b7a46e153a5dd1c208c52b522' }, h("div", { key: 'c8f2d3d858f90d322d26082aaf5adb57acfc78f4', class: "mrd-image-field" }, this.label && (h("label", { key: '6625e5031ff0b7c06f76c1ea0387f1bd5c1858a4', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: '364216e6a96e845e21c42e821fdff02bd2612ff8', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '0487706ddd9f48cda1cb0c2a178809d90674486b', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'bd505ef4f4b67c4e9138d8825c6e600f583f4cab', class: "mrd-image-field__error" }, this.error))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -22,8 +22,6 @@ export class MrdLayoutSection {
         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) => {
@@ -140,6 +138,20 @@ export class MrdLayoutSection {
         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 });
@@ -288,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, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const key = this.viewKeyFor(item);
         if (!key)
             return null;
@@ -301,25 +313,40 @@ export class MrdLayoutSection {
         // 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)
+        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)));
     }
-    /** 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) => {
+    /** 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) {
@@ -390,7 +417,7 @@ export class MrdLayoutSection {
     }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
-        return (h(Host, { key: '4fbba410f9b8cab2bf21497467f99ff25f109bcc' }, h("div", { key: '679d2c34f1eaff694873ba18d679cbccecdae1a6', class: "mrd-layout-section" }, docArchetype
+        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()));
     }
@@ -561,8 +588,7 @@ export class MrdLayoutSection {
             "searchResultsMap": {},
             "imagePreviewUrl": {},
             "imagePreviews": {},
-            "openHistoryField": {},
-            "docViewMode": {}
+            "openHistoryField": {}
         };
     }
     static get events() {
@@ -693,6 +719,66 @@ export class MrdLayoutSection {
                     "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() {
@@ -829,6 +915,56 @@ export class MrdLayoutSection {
                     "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

@@ -269,50 +269,6 @@
   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: '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))));
+        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: '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))));
+        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: '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
+        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: 'dbd6667d7f2c6ed26220ac83a46235cf3ad777d7', 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: '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))));
+        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: '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))));
+        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: '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))));
+        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

@@ -440,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/utils/i18n.js

@@ -64,6 +64,11 @@ const translations = {
         history_until: 'tot',
         history_badge_tooltip: 'Vorige waarden',
         hyperlink_name: 'Linktekst (optioneel)',
+        // mrd-document-list
+        new_folder: 'Nieuwe folder',
+        folder_name_placeholder: 'Foldernaam',
+        folder_no_slash: "Een foldernaam mag geen '/' bevatten",
+        folder_duplicate: 'Er bestaat al een folder met deze naam',
     },
     en: {
         required: 'This field is required',
@@ -130,6 +135,11 @@ const translations = {
         history_until: 'until',
         history_badge_tooltip: 'Previous values',
         hyperlink_name: 'Link text (optional)',
+        // mrd-document-list
+        new_folder: 'New folder',
+        folder_name_placeholder: 'Folder name',
+        folder_no_slash: "A folder name cannot contain '/'",
+        folder_duplicate: 'A folder with this name already exists',
     },
     ar: {
         required: 'هذا الحقل مطلوب',