@mmlogic/components 0.3.10 → 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
@@ -25,6 +27,11 @@ export class MrdDocumentList {
         this.item = null;
         /** Parent record id — required for RELATED_VIEW path building. */
         this.parentId = '';
+        /** Canonical parent href (`/{base}/{tenant}/{fromClass}/{parentId}`) supplied by
+         *  the host. When the RELATED_VIEW's `inverseRelation` equals the archetype
+         *  `container` slot, this seeds a single container so an empty dossier still
+         *  accepts file drops and folder creation. */
+        this.containerHref = '';
         this.locale = navigator.language;
         this.containers = [];
         this.rootLoading = true;
@@ -36,6 +43,8 @@ export class MrdDocumentList {
         this.dropTargetId = null;
         /** Node id showing an "uploading…" indicator while a dropped file is processed. */
         this.uploadingNodeId = null;
+        /** Whether a drag is hovering the root drop-zone (single-container area highlight). */
+        this.rootDropActive = false;
         this.nodeIndex = new Map();
         // ── New-folder editing state ───────────────────────────────────────────────
         /** The pending node whose inline name input is open (null = not creating). */
@@ -69,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];
@@ -160,8 +169,18 @@ export class MrdDocumentList {
             e.preventDefault();
             if (e.dataTransfer)
                 e.dataTransfer.dropEffect = file ? 'copy' : 'move';
+            if (!this.rootDropActive)
+                this.rootDropActive = true;
+        };
+        this.onRootDragLeave = (e) => {
+            const related = e.relatedTarget;
+            if (related && this.el.contains(related))
+                return; // moved onto a child, still inside
+            if (this.rootDropActive)
+                this.rootDropActive = false;
         };
         this.onRootDrop = (e) => {
+            this.rootDropActive = false;
             if (!this.singleContainer)
                 return;
             const only = this.containers[0];
@@ -178,7 +197,33 @@ export class MrdDocumentList {
         };
     }
     componentDidLoad() {
-        this.emitContainerDistinct();
+        if (this.isSeededSingleContainer()) {
+            this.seedSingleContainer();
+        }
+        else {
+            this.emitContainerDistinct();
+        }
+    }
+    /** True when the view is a single-container context: a RELATED_VIEW whose
+     *  `inverseRelation` matches the archetype `container` slot, with a known
+     *  parent href. The container is then implied by context (not by distinct),
+     *  so it works even with zero documents. */
+    isSeededSingleContainer() {
+        var _a, _b;
+        return (((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === ClientLayoutItemType.RELATED_VIEW &&
+            !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.inverseRelation) &&
+            this.item.inverseRelation === this.containerField &&
+            !!this.containerHref);
+    }
+    /** Seed the single implied container from context and load its folders. */
+    seedSingleContainer() {
+        const node = makeContainerNode(this.containerHref, this.containerField, 0);
+        this.nodeIndex.set(node.id, node);
+        this.containers = [node];
+        this.rootLoading = false;
+        this.singleContainer = true;
+        node.open = true;
+        this.emitFolderDistinct(node);
     }
     componentDidRender() {
         if (this.pendingNeedsFocus && this.pendingInputEl) {
@@ -214,50 +259,42 @@ export class MrdDocumentList {
         return (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.date;
     }
     // ── Path / query building (mirrors mrd-table conventions) ────────────────
-    /** VIEW: `/{dataClass}`; RELATED_VIEW: `/{fromClass}/{parentId}/{dataClass}`. */
+    /** VIEW: `/{dataClass}`; RELATED_VIEW: `/{fromClass}/{parentId}/{dataClass}`.
+     *  Used for reads (list/distinct): `dataClass`/`relatedClass` may be an abstract
+     *  type (e.g. "contents"), filtered down to the concrete `filterClass` via the
+     *  `type` query param — see baseParams(). */
     buildDataPath() {
+        var _a, _b;
+        const it = this.item;
+        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;
         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: (_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() {
@@ -324,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);
         }
@@ -342,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);
@@ -381,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];
@@ -460,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;
@@ -492,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('/');
@@ -541,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) {
@@ -552,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,
         };
-        this.mrdCreateObject.emit({ path: this.buildDataPath(), values });
+        // 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;
@@ -590,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;
@@ -611,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);
@@ -648,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);
@@ -661,97 +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: 'b8c3297cd7cff5bf79ce694d2ee1a64c570df5ce', 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];
-            body = only.loading && !only.foldersLoaded
-                ? this.renderLoadingRow(0)
-                : this.renderChildren(only, only, 0);
+            if (only.loading && !only.foldersLoaded) {
+                body = renderLoadingRow(ctx, 0);
+            }
+            else {
+                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: 'ff3b024a79ba2270aa28861923bc6406f98061aa' }, h("div", { key: '9db121e5336a4e3c82443257f6424db5ab4f0baf', class: "mrd-document-list", onDragOver: this.onRootDragOver, 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"; }
@@ -776,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"
                         }
@@ -801,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"
                         }
@@ -836,6 +741,26 @@ export class MrdDocumentList {
                 "attribute": "parent-id",
                 "defaultValue": "''"
             },
+            "containerHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canonical parent href (`/{base}/{tenant}/{fromClass}/{parentId}`) supplied by\nthe host. When the RELATED_VIEW's `inverseRelation` equals the archetype\n`container` slot, this seeds a single container so an empty dossier still\naccepts file drops and folder creation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container-href",
+                "defaultValue": "''"
+            },
             "locale": {
                 "type": "string",
                 "mutable": false,
@@ -865,7 +790,8 @@ export class MrdDocumentList {
             "singleContainer": {},
             "selectedId": {},
             "dropTargetId": {},
-            "uploadingNodeId": {}
+            "uploadingNodeId": {},
+            "rootDropActive": {}
         };
     }
     static get events() {
@@ -1011,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>"
@@ -1041,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>"
@@ -1088,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>"