@mmlogic/components 0.3.11 → 0.4.0

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

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType } from "../../types/client-layout";
-import { t } from "../../utils/i18n";
-import { formatDate } from "../../utils/format";
+import { ClientLayoutItemType } from "../../../types/client-layout";
+import { t } from "../../../utils/i18n";
+import { applyViewFilters, buildListPath } from "../../../utils/query-params";
+import { makeContainerNode, makeFolderNode, computeTotals, segmentsOf, folderStringOf, stripExtension, applyFolderDistinct, applyDocMove, } from "./folder-tree";
+import { renderLoadingRow, renderNodeChildren, renderContainerNode } from "./tree-view";
 /**
  * Archetype-driven document collection view. Renders documents as a lazy,
  * file-explorer-style folder tree, grouped by the `commons.document` archetype's
@@ -76,7 +78,7 @@ export class MrdDocumentList {
                 return;
             const { target, container } = resolved;
             const tempId = `${container.id}/__new__${this.newFolderSeq++}`;
-            const node = this.makeFolderNode(tempId, '', container.id);
+            const node = makeFolderNode(tempId, '', container.id);
             node.pending = true;
             node.editing = true;
             target.children = [...target.children, node];
@@ -215,7 +217,7 @@ export class MrdDocumentList {
     }
     /** Seed the single implied container from context and load its folders. */
     seedSingleContainer() {
-        const node = this.makeContainerNode(this.containerHref, this.containerField, 0);
+        const node = makeContainerNode(this.containerHref, this.containerField, 0);
         this.nodeIndex.set(node.id, node);
         this.containers = [node];
         this.rootLoading = false;
@@ -262,61 +264,37 @@ export class MrdDocumentList {
      *  type (e.g. "contents"), filtered down to the concrete `filterClass` via the
      *  `type` query param — see baseParams(). */
     buildDataPath() {
-        var _a, _b, _c;
+        var _a, _b;
         const it = this.item;
-        const dataClass = (_b = (_a = it === null || it === void 0 ? void 0 : it.dataClass) !== null && _a !== void 0 ? _a : it === null || it === void 0 ? void 0 : it.relatedClass) !== null && _b !== void 0 ? _b : '';
-        if ((it === null || it === void 0 ? void 0 : it.type) === ClientLayoutItemType.RELATED_VIEW) {
-            return `/${(_c = it.fromClass) !== null && _c !== void 0 ? _c : ''}/${this.parentId}/${dataClass}`;
-        }
-        return `/${dataClass}`;
+        return buildListPath({
+            isRelatedView: (it === null || it === void 0 ? void 0 : it.type) === ClientLayoutItemType.RELATED_VIEW,
+            fromClass: it === null || it === void 0 ? void 0 : it.fromClass,
+            parentId: this.parentId,
+            dataClass: (_b = (_a = it === null || it === void 0 ? void 0 : it.dataClass) !== null && _a !== void 0 ? _a : it === null || it === void 0 ? void 0 : it.relatedClass) !== null && _b !== void 0 ? _b : '',
+        });
     }
     /** Path for creating a new document (file-drop). Unlike buildDataPath(), this
      *  must target the concrete type: `dataClass`/`relatedClass` can be an abstract
      *  base type (e.g. "contents") that cannot be POSTed to directly, so prefer
      *  `filterClass` (e.g. "documents") when present. */
     buildCreatePath() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const it = this.item;
-        const dataClass = (_c = (_b = (_a = it === null || it === void 0 ? void 0 : it.filterClass) !== null && _a !== void 0 ? _a : it === null || it === void 0 ? void 0 : it.dataClass) !== null && _b !== void 0 ? _b : it === null || it === void 0 ? void 0 : it.relatedClass) !== null && _c !== void 0 ? _c : '';
-        if ((it === null || it === void 0 ? void 0 : it.type) === ClientLayoutItemType.RELATED_VIEW) {
-            return `/${(_d = it.fromClass) !== null && _d !== void 0 ? _d : ''}/${this.parentId}/${dataClass}`;
-        }
-        return `/${dataClass}`;
+        return buildListPath({
+            isRelatedView: (it === null || it === void 0 ? void 0 : it.type) === ClientLayoutItemType.RELATED_VIEW,
+            fromClass: it === null || it === void 0 ? void 0 : it.fromClass,
+            parentId: this.parentId,
+            dataClass: (_c = (_b = (_a = it === null || it === void 0 ? void 0 : it.filterClass) !== null && _a !== void 0 ? _a : it === null || it === void 0 ? void 0 : it.dataClass) !== null && _b !== void 0 ? _b : it === null || it === void 0 ? void 0 : it.relatedClass) !== null && _c !== void 0 ? _c : '',
+        });
     }
     /** View-level static filters + filterClass, shared by every request. */
     baseParams() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         const p = new URLSearchParams();
         const filterClass = (_a = this.item) === null || _a === void 0 ? void 0 : _a.filterClass;
         if (filterClass)
             p.set('type', filterClass);
-        for (const f of ((_d = (_c = (_b = this.item) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.filter) !== null && _d !== void 0 ? _d : [])) {
-            if (!f.name)
-                continue;
-            if (f.operator === 'EMPTY') {
-                p.set(f.name, '');
-                continue;
-            }
-            if (f.operator === 'NOT_EMPTY') {
-                p.set(f.name + '_notempty', 'true');
-                continue;
-            }
-            if (f.operator === 'STARTS_WITH') {
-                p.set(f.name + '_startswith', String((_e = f.value) !== null && _e !== void 0 ? _e : ''));
-                continue;
-            }
-            if (f.operator === 'FROM') {
-                p.set(f.name + '_from', String((_f = f.value) !== null && _f !== void 0 ? _f : ''));
-                continue;
-            }
-            if (f.operator === 'TO') {
-                p.set(f.name + '_to', String((_g = f.value) !== null && _g !== void 0 ? _g : ''));
-                continue;
-            }
-            if (f.value != null) {
-                p.set(f.name, String(f.value));
-            }
-        }
+        applyViewFilters(p, (_c = (_b = this.item) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.filter);
         return p;
     }
     emitContainerDistinct() {
@@ -383,7 +361,7 @@ export class MrdDocumentList {
             if (!v.value || typeof v.value !== 'object')
                 continue;
             const href = v.value.href;
-            const node = this.makeContainerNode(href, v.value.name, v.count);
+            const node = makeContainerNode(href, v.value.name, v.count);
             nodes.push(node);
             this.nodeIndex.set(node.id, node);
         }
@@ -401,38 +379,7 @@ export class MrdDocumentList {
         const container = this.nodeIndex.get(containerId);
         if (!container)
             return;
-        container.children = [];
-        container.hasDocs = false;
-        container.docCount = 0;
-        for (const v of values) {
-            const raw = typeof v.value === 'string' ? v.value : v.value == null ? '' : String(v.value);
-            const segs = this.splitFolder(raw);
-            if (segs.length === 0) {
-                // Root documents — the container's own direct documents.
-                container.hasDocs = true;
-                container.docCount = v.count;
-                container.fullPath = raw;
-                continue;
-            }
-            let node = container;
-            const acc = [];
-            for (const seg of segs) {
-                acc.push(seg);
-                let child = node.children.find(c => c.label === seg);
-                if (!child) {
-                    child = this.makeFolderNode(container.id + '/' + acc.join('/'), seg, container.id);
-                    node.children.push(child);
-                    this.nodeIndex.set(child.id, child);
-                }
-                node = child;
-            }
-            node.hasDocs = true;
-            node.docCount = v.count;
-            node.fullPath = raw;
-        }
-        this.computeTotals(container);
-        container.foldersLoaded = true;
-        container.loading = false;
+        applyFolderDistinct(container, values, this.nodeIndex);
         // If the container has root documents, load them now (they show inline on expand).
         if (container.hasDocs && !container.docsLoaded) {
             this.emitDocuments(container, container);
@@ -440,36 +387,6 @@ export class MrdDocumentList {
         this.bump();
     }
     // ── Tree helpers ─────────────────────────────────────────────────────────
-    /** Normalise a folder path: null/""/"/" → root ([]); else split on "/" dropping empties. */
-    splitFolder(path) {
-        if (path == null)
-            return [];
-        const s = String(path).trim();
-        if (s === '' || s === '/')
-            return [];
-        return s.split('/').map(x => x.trim()).filter(Boolean);
-    }
-    makeContainerNode(href, label, count) {
-        return {
-            id: 'c:' + href, kind: 'container', label, href,
-            hasDocs: false, docCount: 0, totalCount: count, children: [],
-            open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
-        };
-    }
-    makeFolderNode(id, label, containerId) {
-        return {
-            id, kind: 'folder', label, containerId,
-            hasDocs: false, docCount: 0, totalCount: 0, children: [],
-            open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
-        };
-    }
-    computeTotals(node) {
-        let total = node.docCount;
-        for (const c of node.children)
-            total += this.computeTotals(c);
-        node.totalCount = total;
-        return total;
-    }
     /** Force a re-render after mutating nodes in place. */
     bump() {
         this.containers = [...this.containers];
@@ -519,14 +436,6 @@ export class MrdDocumentList {
     async createFolder() {
         this.startCreateFolder();
     }
-    /** Folder path segments of a node relative to its container (derived from its id). */
-    segmentsOf(node, container) {
-        if (node.kind === 'container')
-            return [];
-        const prefix = container.id + '/';
-        const rest = node.id.startsWith(prefix) ? node.id.slice(prefix.length) : '';
-        return rest ? rest.split('/') : [];
-    }
     commitFolder() {
         const node = this.pendingNode;
         const parent = this.pendingParent;
@@ -551,7 +460,7 @@ export class MrdDocumentList {
         }
         // Finalise: swap the temp id for the real path-derived id so a later distinct
         // value with the same folder string merges onto this node.
-        const segs = [...this.segmentsOf(parent, container), name];
+        const segs = [...segmentsOf(parent, container), name];
         this.nodeIndex.delete(node.id);
         node.id = container.id + '/' + segs.join('/');
         node.fullPath = '/' + segs.join('/');
@@ -600,10 +509,6 @@ export class MrdDocumentList {
         this.bump();
         this.mrdUpload.emit({ file });
     }
-    /** Strip a single trailing extension for the document title. */
-    stripExtension(name) {
-        return name.replace(/\.[^./\\]+$/, '');
-    }
     /** Host callback with the uploaded file reference. Builds the create payload
      *  from the archetype slots and requests the new document. */
     async setFileReference(uri) {
@@ -611,16 +516,20 @@ export class MrdDocumentList {
         if (!up)
             return;
         const { file, node, container } = up;
-        const folder = this.folderStringOf(node, container);
+        const folder = folderStringOf(node, container);
         const values = {
             [this.fileField]: uri,
-            [this.titleField]: this.stripExtension(file.name),
+            [this.titleField]: stripExtension(file.name),
             [this.folderField]: folder,
-            [this.containerField]: container.href,
         };
+        // The create path already embeds the container (/{fromClass}/{parentId}/...)
+        // when this is the seeded single-container context; omit the redundant field.
+        if (!this.isSeededSingleContainer()) {
+            values[this.containerField] = container.href;
+        }
         this.mrdCreateObject.emit({ path: this.buildCreatePath(), values });
         // Optimistically show the new document (no href until a reload).
-        const optimistic = { [this.titleField]: this.stripExtension(file.name), _optimistic: true };
+        const optimistic = { [this.titleField]: stripExtension(file.name), _optimistic: true };
         const wasUnloadedEmpty = !node.docsLoaded && node.docCount === 0;
         node.hasDocs = true;
         node.pending = false;
@@ -649,16 +558,6 @@ export class MrdDocumentList {
         this.lastOptimisticDoc = null;
         this.bump();
     }
-    /** Folder string a node represents: the raw distinct value when it holds
-     *  documents, else derived from its path segments; null for a container root. */
-    folderStringOf(node, container) {
-        if (node.kind === 'container')
-            return null;
-        if (node.fullPath != null && node.fullPath !== '')
-            return node.fullPath;
-        const segs = this.segmentsOf(node, container);
-        return segs.length ? '/' + segs.join('/') : null;
-    }
     moveDocument(toNode, toContainer) {
         var _a, _b;
         const doc = this.dragDoc;
@@ -670,26 +569,14 @@ export class MrdDocumentList {
             : (fromNode.containerId ? this.nodeIndex.get(fromNode.containerId) : undefined);
         if (!fromContainer)
             return;
-        const targetFolder = this.folderStringOf(toNode, toContainer);
-        const sourceFolder = this.folderStringOf(fromNode, fromContainer);
+        const targetFolder = folderStringOf(toNode, toContainer);
+        const sourceFolder = folderStringOf(fromNode, fromContainer);
         const sameContainer = toContainer === fromContainer;
         // No-op: dropped back onto its own folder.
         if (toNode === fromNode || (sameContainer && targetFolder === sourceFolder))
             return;
-        // ── Optimistic tree update (fire-and-forget; no refetch) ──
-        fromNode.docs = fromNode.docs.filter(d => d !== doc);
-        fromNode.docCount = Math.max(0, fromNode.docCount - 1);
-        // A now-empty folder should stop showing an expand chevron (it disappears on
-        // the next reload anyway, since it is derived from document folder strings).
-        if (fromNode.docsLoaded)
-            fromNode.hasDocs = fromNode.docs.length > 0;
-        toNode.hasDocs = true;
-        toNode.pending = false; // a pending folder is now materialised
-        toNode.docCount += 1;
-        if (toNode.kind === 'folder')
-            toNode.fullPath = targetFolder !== null && targetFolder !== void 0 ? targetFolder : '';
-        if (toNode.docsLoaded)
-            toNode.docs = [...toNode.docs, doc];
+        // Optimistic tree update (fire-and-forget; no refetch).
+        applyDocMove(doc, fromNode, toNode, targetFolder);
         this.recomputeContainerTotals(fromContainer, -1);
         if (!sameContainer)
             this.recomputeContainerTotals(toContainer, +1);
@@ -707,7 +594,7 @@ export class MrdDocumentList {
      *  loaded; otherwise just nudge the aggregate badge by the delta. */
     recomputeContainerTotals(container, delta) {
         if (container.foldersLoaded) {
-            this.computeTotals(container);
+            computeTotals(container);
         }
         else {
             container.totalCount = Math.max(0, container.totalCount + delta);
@@ -720,103 +607,56 @@ export class MrdDocumentList {
         this.mrdNavigate.emit({ href, label });
     }
     // ── Render ───────────────────────────────────────────────────────────────
-    renderChevron(open, leaf) {
-        return (h("span", { class: `mrd-document-list__chev${leaf ? ' mrd-document-list__chev--leaf' : ''}${open ? ' mrd-document-list__chev--open' : ''}` }, 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: "M9 6l6 6-6 6" }))));
-    }
-    renderDossierIcon() {
-        return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--dossier", 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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })));
-    }
-    renderFolderIcon() {
-        return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--folder", 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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })));
-    }
-    renderDocIcon() {
-        return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--doc", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("path", { d: "M14 2v6h6" })));
-    }
-    indent(depth) {
-        return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
-    }
-    renderDocRow(doc, node, container, depth) {
-        var _a, _b, _c, _d, _e;
-        const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[this.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
-        const dateRaw = this.dateField ? doc === null || doc === void 0 ? void 0 : doc[this.dateField] : undefined;
-        const date = dateRaw ? formatDate(dateRaw, this.locale) : '';
-        return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => this.openDoc(doc), onDragStart: (e) => this.onDocDragStart(e, doc, node), onDragEnd: this.onDocDragEnd, onDragOver: (e) => this.onNodeDragOver(e, node), onDragLeave: () => this.onNodeDragLeave(node), onDrop: (e) => this.onNodeDrop(e, node, container) }, this.indent(depth), this.renderChevron(false, true), this.renderDocIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
-    }
-    renderLoadingRow(depth) {
-        return (h("div", { class: "mrd-document-list__loading", key: "loading" }, this.indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('loading', this.locale)));
-    }
-    renderChildren(container, node, depth) {
-        const out = [];
-        // Direct documents of this node (root docs live on the container node).
-        if (node.hasDocs) {
-            if (node.docsLoaded) {
-                for (const doc of node.docs)
-                    out.push(this.renderDocRow(doc, node, container, depth));
-            }
-            else if (node.loading) {
-                out.push(this.renderLoadingRow(depth));
-            }
-        }
-        // Child folders.
-        for (const child of node.children) {
-            out.push(this.renderFolderNode(container, child, depth));
-        }
-        // An uploading file dropped onto this node.
-        if (node.id === this.uploadingNodeId)
-            out.push(this.renderUploadingRow(depth));
-        return out;
-    }
-    renderUploadingRow(depth) {
-        return (h("div", { class: "mrd-document-list__loading", key: "uploading" }, this.indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('upload_file', this.locale)));
-    }
-    renderFolderEditRow(node, depth) {
-        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, this.indent(depth), this.renderChevron(false, true), this.renderFolderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', this.locale), ref: el => (this.pendingInputEl = el), onInput: this.onPendingInput, onKeyDown: this.onPendingKeyDown, onBlur: () => this.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${depth * 18 + 52}px` } }, node.error))));
-    }
-    renderFolderNode(container, node, depth) {
-        if (node.editing)
-            return this.renderFolderEditRow(node, depth);
-        const leaf = node.children.length === 0 && !node.hasDocs;
-        const selected = node.id === this.selectedId;
-        const cls = 'mrd-document-list__row'
-            + (selected ? ' mrd-document-list__row--selected' : '')
-            + (node.pending ? ' mrd-document-list__row--pending' : '')
-            + (node.id === this.dropTargetId ? ' mrd-document-list__row--drop' : '');
-        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: cls, onClick: () => this.toggleFolder(container, node), onDragOver: (e) => this.onNodeDragOver(e, node), onDragLeave: () => this.onNodeDragLeave(node), onDrop: (e) => this.onNodeDrop(e, node, container) }, this.indent(depth), this.renderChevron(node.open, leaf), this.renderFolderIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && h("div", { class: "mrd-document-list__kids" }, this.renderChildren(container, node, depth + 1))));
-    }
-    renderContainerNode(node, depth) {
-        const selected = node.id === this.selectedId;
-        const cls = 'mrd-document-list__row mrd-document-list__row--dossier'
-            + (selected ? ' mrd-document-list__row--selected' : '')
-            + (node.id === this.dropTargetId ? ' mrd-document-list__row--drop' : '');
-        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: cls, onClick: () => this.toggleContainer(node), onDragOver: (e) => this.onNodeDragOver(e, node), onDragLeave: () => this.onNodeDragLeave(node), onDrop: (e) => this.onNodeDrop(e, node, node) }, this.indent(depth), this.renderChevron(node.open, false), this.renderDossierIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && (h("div", { class: "mrd-document-list__kids" }, node.loading && !node.foldersLoaded
-            ? this.renderLoadingRow(depth + 1)
-            : this.renderChildren(node, node, depth + 1)))));
+    treeCtx() {
+        return {
+            locale: this.locale,
+            titleField: this.titleField,
+            dateField: this.dateField,
+            selectedId: this.selectedId,
+            dropTargetId: this.dropTargetId,
+            uploadingNodeId: this.uploadingNodeId,
+            on: {
+                toggleContainer: node => this.toggleContainer(node),
+                toggleFolder: (container, node) => this.toggleFolder(container, node),
+                openDoc: doc => this.openDoc(doc),
+                docDragStart: this.onDocDragStart,
+                docDragEnd: this.onDocDragEnd,
+                nodeDragOver: this.onNodeDragOver,
+                nodeDragLeave: this.onNodeDragLeave,
+                nodeDrop: this.onNodeDrop,
+                pendingInput: this.onPendingInput,
+                pendingKeyDown: this.onPendingKeyDown,
+                cancelFolder: () => this.cancelFolder(),
+                setPendingInputEl: el => (this.pendingInputEl = el),
+            },
+        };
     }
     render() {
+        const ctx = this.treeCtx();
         let body;
         if (this.rootLoading) {
-            body = this.renderLoadingRow(0);
+            body = renderLoadingRow(ctx, 0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '9c38a2e26320a8173ba82cac412c1b32a8a1882e', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: 'ce40dab51ab61447838e5059159ae4778209a6f3', class: "mrd-document-list__empty" }, t('no_results', this.locale));
         }
         else if (this.singleContainer) {
             // Dossier context: render the single container's folder tree at the root.
             const only = this.containers[0];
             if (only.loading && !only.foldersLoaded) {
-                body = this.renderLoadingRow(0);
+                body = renderLoadingRow(ctx, 0);
             }
             else {
-                const kids = this.renderChildren(only, only, 0);
+                const kids = renderNodeChildren(ctx, only, only, 0);
                 body = kids.length
                     ? kids
                     : h("div", { class: "mrd-document-list__empty" }, t('doc_empty_drop', this.locale));
             }
         }
         else {
-            body = this.containers.map(c => this.renderContainerNode(c, 0));
+            body = this.containers.map(c => renderContainerNode(ctx, c, 0));
         }
-        return (h(Host, { key: 'dd83a6a609e01d21a2b5da5b3ab929f6f9315402' }, h("div", { key: 'd539d938e1efd759730cccc90c4d6c2e535db936', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
+        return (h(Host, { key: '9e1f7805ae18bce506c530a481db902900ad95f3' }, h("div", { key: 'a51334634e94310a71650ad49f17f0a20e2aed4d', class: 'mrd-document-list' + (this.rootDropActive ? ' mrd-document-list--drop-active' : ''), onDragOver: this.onRootDragOver, onDragLeave: this.onRootDragLeave, onDrop: this.onRootDrop }, body)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -841,7 +681,7 @@ export class MrdDocumentList {
                     "references": {
                         "ClientLayoutItem": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientLayoutItem",
                             "referenceLocation": "ClientLayoutItem"
                         }
@@ -866,7 +706,7 @@ export class MrdDocumentList {
                     "references": {
                         "ClientArchetype": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientArchetype",
                             "referenceLocation": "ClientArchetype"
                         }
@@ -1097,9 +937,10 @@ export class MrdDocumentList {
                             "id": "global::Promise"
                         },
                         "DistinctValue": {
-                            "location": "local",
-                            "path": "/Users/michiel/Mosterd/mosterd-components/src/components/mrd-document-list/mrd-document-list.tsx",
-                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DistinctValue"
+                            "location": "import",
+                            "path": "./folder-tree",
+                            "id": "src/components/documents/mrd-document-list/folder-tree.ts::DistinctValue",
+                            "referenceLocation": "DistinctValue"
                         }
                     },
                     "return": "Promise<void>"
@@ -1127,9 +968,10 @@ export class MrdDocumentList {
                             "id": "global::Promise"
                         },
                         "DocRow": {
-                            "location": "local",
-                            "path": "/Users/michiel/Mosterd/mosterd-components/src/components/mrd-document-list/mrd-document-list.tsx",
-                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DocRow"
+                            "location": "import",
+                            "path": "./folder-tree",
+                            "id": "src/components/documents/mrd-document-list/folder-tree.ts::DocRow",
+                            "referenceLocation": "DocRow"
                         }
                     },
                     "return": "Promise<void>"
@@ -1174,9 +1016,10 @@ export class MrdDocumentList {
                             "id": "global::Record"
                         },
                         "DocRow": {
-                            "location": "local",
-                            "path": "/Users/michiel/Mosterd/mosterd-components/src/components/mrd-document-list/mrd-document-list.tsx",
-                            "id": "src/components/mrd-document-list/mrd-document-list.tsx::DocRow"
+                            "location": "import",
+                            "path": "./folder-tree",
+                            "id": "src/components/documents/mrd-document-list/folder-tree.ts::DocRow",
+                            "referenceLocation": "DocRow"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -0,0 +1,75 @@
+import { h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
+function chevron(open, leaf) {
+    return (h("span", { class: `mrd-document-list__chev${leaf ? ' mrd-document-list__chev--leaf' : ''}${open ? ' mrd-document-list__chev--open' : ''}` }, 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: "M9 6l6 6-6 6" }))));
+}
+function dossierIcon() {
+    return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--dossier", 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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })));
+}
+function folderIcon() {
+    return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--folder", 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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" })));
+}
+function docIcon() {
+    return (h("svg", { class: "mrd-document-list__icon mrd-document-list__icon--doc", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("path", { d: "M14 2v6h6" })));
+}
+function indent(depth) {
+    return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
+}
+export function renderLoadingRow(ctx, depth) {
+    return (h("div", { class: "mrd-document-list__loading", key: "loading" }, indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('loading', ctx.locale)));
+}
+function renderUploadingRow(ctx, depth) {
+    return (h("div", { class: "mrd-document-list__loading", key: "uploading" }, indent(depth), h("span", { class: "mrd-document-list__spinner" }), t('upload_file', ctx.locale)));
+}
+function renderDocRow(ctx, doc, node, container, depth) {
+    var _a, _b, _c, _d, _e;
+    const label = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc[ctx.titleField]) !== null && _a !== void 0 ? _a : doc === null || doc === void 0 ? void 0 : doc.name) !== null && _b !== void 0 ? _b : '';
+    const dateRaw = ctx.dateField ? doc === null || doc === void 0 ? void 0 : doc[ctx.dateField] : undefined;
+    const date = dateRaw ? formatDate(dateRaw, ctx.locale) : '';
+    return (h("div", { class: "mrd-document-list__row mrd-document-list__row--doc", key: (_e = (_d = (_c = doc === null || doc === void 0 ? void 0 : doc._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : label, draggable: true, onClick: () => ctx.on.openDoc(doc), onDragStart: (e) => ctx.on.docDragStart(e, doc, node), onDragEnd: ctx.on.docDragEnd, onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(false, true), docIcon(), h("span", { class: "mrd-document-list__label" }, label), date && h("span", { class: "mrd-document-list__date" }, date)));
+}
+function renderFolderEditRow(ctx, node, depth) {
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--edit" }, indent(depth), chevron(false, true), folderIcon(), h("input", { class: "mrd-document-list__name-input", type: "text", placeholder: t('folder_name_placeholder', ctx.locale), ref: el => ctx.on.setPendingInputEl(el), onInput: ctx.on.pendingInput, onKeyDown: ctx.on.pendingKeyDown, onBlur: () => ctx.on.cancelFolder() })), node.error && (h("div", { class: "mrd-document-list__error", style: { paddingLeft: `${depth * 18 + 52}px` } }, node.error))));
+}
+export function renderNodeChildren(ctx, container, node, depth) {
+    const out = [];
+    // Direct documents of this node (root docs live on the container node).
+    if (node.hasDocs) {
+        if (node.docsLoaded) {
+            for (const doc of node.docs)
+                out.push(renderDocRow(ctx, doc, node, container, depth));
+        }
+        else if (node.loading) {
+            out.push(renderLoadingRow(ctx, depth));
+        }
+    }
+    // Child folders.
+    for (const child of node.children) {
+        out.push(renderFolderNode(ctx, container, child, depth));
+    }
+    // An uploading file dropped onto this node.
+    if (node.id === ctx.uploadingNodeId)
+        out.push(renderUploadingRow(ctx, depth));
+    return out;
+}
+export function renderFolderNode(ctx, container, node, depth) {
+    if (node.editing)
+        return renderFolderEditRow(ctx, node, depth);
+    const leaf = node.children.length === 0 && !node.hasDocs;
+    const selected = node.id === ctx.selectedId;
+    const cls = 'mrd-document-list__row'
+        + (selected ? ' mrd-document-list__row--selected' : '')
+        + (node.pending ? ' mrd-document-list__row--pending' : '')
+        + (node.id === ctx.dropTargetId ? ' mrd-document-list__row--drop' : '');
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: cls, onClick: () => ctx.on.toggleFolder(container, node), onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, container) }, indent(depth), chevron(node.open, leaf), folderIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && h("div", { class: "mrd-document-list__kids" }, renderNodeChildren(ctx, container, node, depth + 1))));
+}
+export function renderContainerNode(ctx, node, depth) {
+    const selected = node.id === ctx.selectedId;
+    const cls = 'mrd-document-list__row mrd-document-list__row--dossier'
+        + (selected ? ' mrd-document-list__row--selected' : '')
+        + (node.id === ctx.dropTargetId ? ' mrd-document-list__row--drop' : '');
+    return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: cls, onClick: () => ctx.on.toggleContainer(node), onDragOver: (e) => ctx.on.nodeDragOver(e, node), onDragLeave: () => ctx.on.nodeDragLeave(node), onDrop: (e) => ctx.on.nodeDrop(e, node, node) }, indent(depth), chevron(node.open, false), dossierIcon(), h("span", { class: "mrd-document-list__label" }, node.label), h("span", { class: "mrd-document-list__count" }, node.totalCount)), node.open && (h("div", { class: "mrd-document-list__kids" }, node.loading && !node.foldersLoaded
+        ? renderLoadingRow(ctx, depth + 1)
+        : renderNodeChildren(ctx, node, node, depth + 1)))));
+}

package/dist/collection/components/{mrd-document-view/mrd-document-view.scss → documents/mrd-document-view/mrd-document-view.css}

@@ -118,4 +118,4 @@
   font-size: var(--mrd-font-size-base);
   color: var(--mrd-color-neutral-700);
   line-height: var(--mrd-line-height-relaxed);
-}
+}

package/dist/collection/components/{mrd-document-view → documents/mrd-document-view}/mrd-document-view.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../utils/i18n";
-import { formatDate } from "../../utils/format";
+import { t } from "../../../utils/i18n";
+import { formatDate } from "../../../utils/format";
 /**
  * Archetype-driven single-document view. Given a `commons.document` binding and a
  * data record, renders the document recognisably — title, file preview/download,
@@ -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: '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 }))))));
+        return (h(Host, { key: '0c64c72eaf5e1eefc2ca9aebb2543081eb1eae32' }, h("div", { key: '70cce81b089fee81a4c163a6ba5fbcc8cb46131c', class: "mrd-document-view" }, this.renderContainer(), title && h("h1", { key: '50f85b32a6740d6cf57fdf1bb0bcc597b5e97b31', class: "mrd-document-view__title" }, title), date && h("p", { key: 'b3c8fb3b4382104858d49ef9a1597034665122bb', class: "mrd-document-view__date" }, date), this.renderFile(), summary && (h("div", { key: '2046c1eca7601549115de0c95ff778abaf5faf46', class: "mrd-document-view__summary" }, h("div", { key: '875863d3e438eee3d4df10473a93f09370fde08c', class: "mrd-document-view__summary-body", innerHTML: summary }))))));
     }
     static get is() { return "mrd-document-view"; }
     static get encapsulation() { return "scoped"; }
@@ -81,7 +81,7 @@ export class MrdDocumentView {
                     "references": {
                         "ClientArchetype": {
                             "location": "import",
-                            "path": "../../types/client-layout",
+                            "path": "../../../types/client-layout",
                             "id": "src/types/client-layout.ts::ClientArchetype",
                             "referenceLocation": "ClientArchetype"
                         }