@mmlogic/components 0.3.9 → 0.3.11

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

@@ -25,15 +25,215 @@ 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;
         /** True when the single-container level is collapsed away (dossier context). */
         this.singleContainer = false;
+        /** Currently selected node id — the target for "New folder" and (later) drops. */
+        this.selectedId = null;
+        /** Node id currently highlighted as a drag-drop target (null = none). */
+        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). */
+        this.pendingNode = null;
+        /** The node the pending folder is being created under. */
+        this.pendingParent = null;
+        /** The container the pending folder belongs to. */
+        this.pendingContainer = null;
+        /** Current text in the inline name input. */
+        this.pendingName = '';
+        /** Ref to the inline input, so we can focus it after it mounts. */
+        this.pendingInputEl = null;
+        /** Set when a fresh input needs focus on the next render. */
+        this.pendingNeedsFocus = false;
+        /** Monotonic counter for unique temporary pending-node ids. */
+        this.newFolderSeq = 0;
+        /** Last emitted canCreateFolder value, to only emit mrdCanCreate on change. */
+        this.lastCanCreate = false;
+        // ── Drag & drop (move a document into another folder) ──────────────────────
+        /** The document row currently being dragged. */
+        this.dragDoc = null;
+        /** Id of the node the dragged document currently lives in. */
+        this.dragFromId = null;
+        /** External file dropped onto a node, awaiting its upload to complete. */
+        this.pendingUpload = null;
+        /** The optimistic document row awaiting its self href from the create POST. */
+        this.lastOptimisticDoc = null;
+        this.startCreateFolder = () => {
+            const resolved = this.resolveTarget();
+            if (!resolved || this.pendingNode)
+                return;
+            const { target, container } = resolved;
+            const tempId = `${container.id}/__new__${this.newFolderSeq++}`;
+            const node = this.makeFolderNode(tempId, '', container.id);
+            node.pending = true;
+            node.editing = true;
+            target.children = [...target.children, node];
+            target.open = true;
+            this.nodeIndex.set(node.id, node);
+            this.pendingNode = node;
+            this.pendingParent = target;
+            this.pendingContainer = container;
+            this.pendingName = '';
+            this.pendingNeedsFocus = true;
+            this.bump();
+        };
+        this.onPendingInput = (e) => {
+            var _a;
+            this.pendingName = e.target.value;
+            if ((_a = this.pendingNode) === null || _a === void 0 ? void 0 : _a.error) {
+                this.pendingNode.error = undefined;
+                this.bump();
+            }
+        };
+        this.onPendingKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.commitFolder();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cancelFolder();
+            }
+        };
+        // ── Drag & drop: move a document into another folder / container ────────────
+        this.onDocDragStart = (e, doc, node) => {
+            var _a, _b, _c;
+            this.dragDoc = doc;
+            this.dragFromId = node.id;
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'move';
+                // A payload is required for a drag to start in some browsers.
+                e.dataTransfer.setData('text/plain', (_c = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : '');
+            }
+        };
+        this.onDocDragEnd = () => {
+            this.dragDoc = null;
+            this.dragFromId = null;
+            if (this.dropTargetId !== null)
+                this.dropTargetId = null;
+        };
+        /** A folder/container node (or a document inside it) accepts an internal move
+         *  or an external file drop. Always claims the event so it never bubbles to the
+         *  root drop-zone; a different node is highlighted (its own folder = no-op). */
+        this.onNodeDragOver = (e, node) => {
+            const file = this.isFileDrag(e);
+            if (!this.dragDoc && !file)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.dataTransfer)
+                e.dataTransfer.dropEffect = file ? 'copy' : 'move';
+            const target = !file && node.id === this.dragFromId ? null : node.id;
+            if (this.dropTargetId !== target)
+                this.dropTargetId = target;
+        };
+        this.onNodeDragLeave = (node) => {
+            if (this.dropTargetId === node.id)
+                this.dropTargetId = null;
+        };
+        this.onNodeDrop = (e, node, container) => {
+            if (this.isFileDrag(e)) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.startFileUpload(e, node, container);
+                return;
+            }
+            if (!this.dragDoc)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.moveDocument(node, container);
+            this.onDocDragEnd();
+        };
+        /** Root-zone drop (dossier context): target the single container's root. */
+        this.onRootDragOver = (e) => {
+            if (!this.singleContainer)
+                return;
+            const file = this.isFileDrag(e);
+            if (!this.dragDoc && !file)
+                return;
+            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];
+            if (this.isFileDrag(e)) {
+                e.preventDefault();
+                this.startFileUpload(e, only, only);
+                return;
+            }
+            if (!this.dragDoc)
+                return;
+            e.preventDefault();
+            this.moveDocument(only, only);
+            this.onDocDragEnd();
+        };
     }
     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 = this.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) {
+            this.pendingInputEl.focus();
+            this.pendingInputEl.select();
+            this.pendingNeedsFocus = false;
+        }
+        const can = this.canCreateFolder;
+        if (can !== this.lastCanCreate) {
+            this.lastCanCreate = can;
+            this.mrdCanCreate.emit(can);
+        }
     }
     // ── Slot field names ─────────────────────────────────────────────────────
     get containerField() {
@@ -48,12 +248,19 @@ export class MrdDocumentList {
         var _a, _b, _c;
         return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'name';
     }
+    get fileField() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b.file) !== null && _c !== void 0 ? _c : 'file';
+    }
     get dateField() {
         var _a, _b;
         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, _c;
         const it = this.item;
@@ -63,6 +270,19 @@ export class MrdDocumentList {
         }
         return `/${dataClass}`;
     }
+    /** 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;
+        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}`;
+    }
     /** View-level static filters + filterClass, shared by every request. */
     baseParams() {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -200,7 +420,7 @@ export class MrdDocumentList {
                 acc.push(seg);
                 let child = node.children.find(c => c.label === seg);
                 if (!child) {
-                    child = this.makeFolderNode(container.id + '/' + acc.join('/'), seg);
+                    child = this.makeFolderNode(container.id + '/' + acc.join('/'), seg, container.id);
                     node.children.push(child);
                     this.nodeIndex.set(child.id, child);
                 }
@@ -236,9 +456,9 @@ export class MrdDocumentList {
             open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
         };
     }
-    makeFolderNode(id, label) {
+    makeFolderNode(id, label, containerId) {
         return {
-            id, kind: 'folder', label,
+            id, kind: 'folder', label, containerId,
             hasDocs: false, docCount: 0, totalCount: 0, children: [],
             open: false, loading: false, foldersLoaded: false, docsLoaded: false, docs: [],
         };
@@ -256,6 +476,7 @@ export class MrdDocumentList {
     }
     // ── Interaction ──────────────────────────────────────────────────────────
     toggleContainer(node) {
+        this.selectedId = node.id;
         node.open = !node.open;
         if (node.open && !node.foldersLoaded && !node.loading) {
             this.emitFolderDistinct(node);
@@ -263,12 +484,235 @@ export class MrdDocumentList {
         this.bump();
     }
     toggleFolder(container, node) {
+        this.selectedId = node.id;
         node.open = !node.open;
         if (node.open && node.hasDocs && !node.docsLoaded && !node.loading) {
             this.emitDocuments(container, node);
         }
         this.bump();
     }
+    // ── New folder (client-side pending, materialises on document drop) ─────────
+    /** Resolve the node a new folder should be created under, and its container.
+     *  Uses the current selection; falls back to the single container (dossier). */
+    resolveTarget() {
+        if (this.selectedId) {
+            const n = this.nodeIndex.get(this.selectedId);
+            if (n && n.kind === 'container')
+                return { target: n, container: n };
+            if (n && n.kind === 'folder') {
+                const container = n.containerId ? this.nodeIndex.get(n.containerId) : undefined;
+                if (container)
+                    return { target: n, container };
+            }
+        }
+        if (this.singleContainer && this.containers[0]) {
+            const only = this.containers[0];
+            return { target: only, container: only };
+        }
+        return null;
+    }
+    get canCreateFolder() {
+        return !this.pendingNode && this.resolveTarget() !== null;
+    }
+    /** Start creating a folder under the current target. Called by the host toolbar
+     *  (mrd-document-container). No-op when there is no valid target. */
+    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;
+        const container = this.pendingContainer;
+        if (!node || !parent || !container)
+            return;
+        const name = this.pendingName.trim();
+        if (!name) {
+            this.cancelFolder();
+            return;
+        }
+        if (name.includes('/')) {
+            node.error = t('folder_no_slash', this.locale);
+            this.bump();
+            return;
+        }
+        const dup = parent.children.some(c => c !== node && c.label.toLowerCase() === name.toLowerCase());
+        if (dup) {
+            node.error = t('folder_duplicate', this.locale);
+            this.bump();
+            return;
+        }
+        // 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];
+        this.nodeIndex.delete(node.id);
+        node.id = container.id + '/' + segs.join('/');
+        node.fullPath = '/' + segs.join('/');
+        node.label = name;
+        node.editing = false;
+        node.error = undefined;
+        node.open = true;
+        this.nodeIndex.set(node.id, node);
+        this.selectedId = node.id;
+        this.clearPending();
+        this.bump();
+    }
+    cancelFolder() {
+        const node = this.pendingNode;
+        const parent = this.pendingParent;
+        if (node && parent) {
+            parent.children = parent.children.filter(c => c !== node);
+            this.nodeIndex.delete(node.id);
+        }
+        this.clearPending();
+        this.bump();
+    }
+    clearPending() {
+        this.pendingNode = null;
+        this.pendingParent = null;
+        this.pendingContainer = null;
+        this.pendingName = '';
+        this.pendingInputEl = null;
+        this.pendingNeedsFocus = false;
+    }
+    /** True when the drag carries external files (an OS file drop, not an internal move). */
+    isFileDrag(e) {
+        return !this.dragDoc && !!e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files');
+    }
+    // ── External file drop → upload → create document ──────────────────────────
+    /** Begin an upload: emit mrdUpload; the host uploads and calls setFileReference. */
+    startFileUpload(e, node, container) {
+        var _a, _b;
+        const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]; // single file per drop
+        this.dropTargetId = null;
+        if (!file)
+            return;
+        this.pendingUpload = { file, node, container };
+        node.open = true;
+        this.uploadingNodeId = node.id;
+        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) {
+        const up = this.pendingUpload;
+        if (!up)
+            return;
+        const { file, node, container } = up;
+        const folder = this.folderStringOf(node, container);
+        const values = {
+            [this.fileField]: uri,
+            [this.titleField]: this.stripExtension(file.name),
+            [this.folderField]: folder,
+            [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 wasUnloadedEmpty = !node.docsLoaded && node.docCount === 0;
+        node.hasDocs = true;
+        node.pending = false;
+        node.docCount += 1;
+        if (wasUnloadedEmpty) {
+            node.docsLoaded = true;
+            node.docs = [optimistic];
+        }
+        else if (node.docsLoaded)
+            node.docs = [...node.docs, optimistic];
+        this.recomputeContainerTotals(container, +1);
+        this.lastOptimisticDoc = optimistic;
+        this.pendingUpload = null;
+        this.uploadingNodeId = null;
+        this.bump();
+    }
+    /** Host callback with the created document's self href, so the optimistic row
+     *  becomes navigable without waiting for a reload. */
+    async setCreatedHref(href) {
+        var _a;
+        const doc = this.lastOptimisticDoc;
+        if (!doc || !href)
+            return;
+        doc._links = Object.assign(Object.assign({}, ((_a = doc._links) !== null && _a !== void 0 ? _a : {})), { self: { href } });
+        doc._optimistic = false;
+        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;
+        const fromNode = this.dragFromId ? this.nodeIndex.get(this.dragFromId) : undefined;
+        if (!doc || !fromNode)
+            return;
+        const fromContainer = fromNode.kind === 'container'
+            ? fromNode
+            : (fromNode.containerId ? this.nodeIndex.get(fromNode.containerId) : undefined);
+        if (!fromContainer)
+            return;
+        const targetFolder = this.folderStringOf(toNode, toContainer);
+        const sourceFolder = this.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];
+        this.recomputeContainerTotals(fromContainer, -1);
+        if (!sameContainer)
+            this.recomputeContainerTotals(toContainer, +1);
+        // ── Emit the generic update; host PATCHes the document ──
+        const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
+        if (href) {
+            const values = { [this.folderField]: targetFolder };
+            if (!sameContainer)
+                values[this.containerField] = toContainer.href;
+            this.mrdUpdateObject.emit({ href, values });
+        }
+        this.bump();
+    }
+    /** Recompute a container's subtree totals from docCounts when its folders are
+     *  loaded; otherwise just nudge the aggregate badge by the delta. */
+    recomputeContainerTotals(container, delta) {
+        if (container.foldersLoaded) {
+            this.computeTotals(container);
+        }
+        else {
+            container.totalCount = Math.max(0, container.totalCount + delta);
+        }
+    }
     openDoc(doc) {
         var _a, _b, _c, _d;
         const href = (_b = (_a = doc === null || doc === void 0 ? void 0 : doc._links) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.href;
@@ -291,12 +735,12 @@ export class MrdDocumentList {
     indent(depth) {
         return h("span", { class: "mrd-document-list__indent", style: { width: `${depth * 18}px` } });
     }
-    renderDocRow(doc, depth) {
+    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, onClick: () => this.openDoc(doc) }, 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)));
+        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)));
@@ -307,7 +751,7 @@ export class MrdDocumentList {
         if (node.hasDocs) {
             if (node.docsLoaded) {
                 for (const doc of node.docs)
-                    out.push(this.renderDocRow(doc, depth));
+                    out.push(this.renderDocRow(doc, node, container, depth));
             }
             else if (node.loading) {
                 out.push(this.renderLoadingRow(depth));
@@ -317,14 +761,34 @@ export class MrdDocumentList {
         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;
-        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row", onClick: () => this.toggleFolder(container, node) }, 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))));
+        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) {
-        return (h("div", { class: "mrd-document-list__node", key: node.id }, h("div", { class: "mrd-document-list__row mrd-document-list__row--dossier", onClick: () => this.toggleContainer(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
+        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)))));
     }
@@ -334,19 +798,25 @@ export class MrdDocumentList {
             body = this.renderLoadingRow(0);
         }
         else if (this.containers.length === 0) {
-            body = h("div", { key: '0c4190bb86543e2d37cc1584b3495eb6eab5664c', class: "mrd-document-list__empty" }, t('no_results', this.locale));
+            body = h("div", { key: '9c38a2e26320a8173ba82cac412c1b32a8a1882e', 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 = this.renderLoadingRow(0);
+            }
+            else {
+                const kids = this.renderChildren(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));
         }
-        return (h(Host, { key: '4e38d9ef5a1df137a41516a47dc5debbea6b2f35' }, h("div", { key: '6d2f162624e5bbc8650a2978a3b045c21fe13ea3', class: "mrd-document-list" }, body)));
+        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)));
     }
     static get is() { return "mrd-document-list"; }
     static get encapsulation() { return "scoped"; }
@@ -431,6 +901,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,
@@ -457,7 +947,11 @@ export class MrdDocumentList {
         return {
             "containers": {},
             "rootLoading": {},
-            "singleContainer": {}
+            "singleContainer": {},
+            "selectedId": {},
+            "dropTargetId": {},
+            "uploadingNodeId": {},
+            "rootDropActive": {}
         };
     }
     static get events() {
@@ -506,6 +1000,81 @@ export class MrdDocumentList {
                     "resolved": "{ href?: string | undefined; label: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdCanCreate",
+                "name": "mrdCanCreate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the \"can create a folder here\" state changes, so a host\ntoolbar (mrd-document-container) can enable/disable its New folder button."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdUpdateObject",
+                "name": "mrdUpdateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Generic \"update an existing object\" request \u2014 fired when a document is\ndragged into another folder/container. Host PATCHes `href` with `values`\n(no move/folder knowledge needed). `values` carries the new folder string\n(or null for the container root) and, on a cross-container move, the new\ncontainer relation href."
+                },
+                "complexType": {
+                    "original": "{ href: string; values: Record<string, unknown> }",
+                    "resolved": "{ href: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An external file was dropped onto a folder/container. Same flow as mrd-form:\nhost uploads the file and calls `setFileReference(uri)` with the result."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdCreateObject",
+                "name": "mrdCreateObject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired once the dropped file is uploaded \u2014 requests creation of a new document.\nHost POSTs `values` to `path` (on a 400 it can open the create form itself)."
+                },
+                "complexType": {
+                    "original": "{ path: string; values: Record<string, unknown> }",
+                    "resolved": "{ path: string; values: Record<string, unknown>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -569,6 +1138,74 @@ export class MrdDocumentList {
                     "text": "Inject the documents loaded for one folder node.",
                     "tags": []
                 }
+            },
+            "createFolder": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Start creating a folder under the current target. Called by the host toolbar\n(mrd-document-container). No-op when there is no valid target.",
+                    "tags": []
+                }
+            },
+            "setFileReference": {
+                "complexType": {
+                    "signature": "(uri: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "uri",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "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"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Host callback with the uploaded file reference. Builds the create payload\nfrom the archetype slots and requests the new document.",
+                    "tags": []
+                }
+            },
+            "setCreatedHref": {
+                "complexType": {
+                    "signature": "(href: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "href",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Host callback with the created document's self href, so the optimistic row\nbecomes navigable without waiting for a reload.",
+                    "tags": []
+                }
             }
         };
     }