wunderbaum 0.12.1 → 0.13.0

package/dist/wunderbaum.umd.js

@@ -7,7 +7,7 @@
     /*!
      * Wunderbaum - debounce.ts
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     /*
      * debounce & throttle, taken from https://github.com/lodash/lodash v4.17.21
@@ -299,7 +299,7 @@
     /*!
      * Wunderbaum - util
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     /** @module util */
     /** Readable names for `MouseEvent.button` */
@@ -682,18 +682,6 @@
         }
         return obj;
     }
-    // /** Return a EventTarget from selector or cast an existing element. */
-    // export function eventTargetFromSelector(
-    //   obj: string | EventTarget
-    // ): EventTarget | null {
-    //   if (!obj) {
-    //     return null;
-    //   }
-    //   if (typeof obj === "string") {
-    //     return document.querySelector(obj) as EventTarget;
-    //   }
-    //   return obj as EventTarget;
-    // }
     /**
      * Return a canonical descriptive string for a keyboard or mouse event.
      *
@@ -1153,7 +1141,7 @@
     /*!
      * Wunderbaum - types
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     /**
      * Possible values for {@link WunderbaumNode.update} and {@link Wunderbaum.update}.
@@ -1221,7 +1209,7 @@
     /*!
      * Wunderbaum - wb_extension_base
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     class WunderbaumExtension {
         constructor(tree, id, defaults) {
@@ -1280,7 +1268,7 @@
     /*!
      * Wunderbaum - ext-filter
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     const START_MARKER = "\uFFF7";
     const END_MARKER = "\uFFF8";
@@ -1292,7 +1280,7 @@
                 autoApply: true, // Re-apply last filter if lazy data is loaded
                 autoExpand: false, // Expand all branches that contain matches while filtered
                 matchBranch: false, // Whether to implicitly match all children of matched nodes
-                connectInput: null, // Element or selector of an input control for filter query strings
+                connect: null, // Element or selector of an input control for filter query strings
                 fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar'
                 hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
                 highlight: true, // Highlight matches by wrapping inside <mark> tags
@@ -1300,36 +1288,117 @@
                 mode: "dim", // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
                 noData: true, // Display a 'no data' status node if result is empty
             });
+            this.queryInput = null;
+            this.prevButton = null;
+            this.nextButton = null;
+            this.modeButton = null;
+            this.matchInfoElem = null;
             this.lastFilterArgs = null;
         }
         init() {
             super.init();
-            const connectInput = this.getPluginOption("connectInput");
-            if (connectInput) {
-                this.queryInput = elemFromSelector(connectInput);
-                assert(this.queryInput, `Invalid 'filter.connectInput' option: ${connectInput}.`);
-                onEvent(this.queryInput, "input", debounce((e) => {
-                    // this.tree.log("query", e);
-                    this.filterNodes(this.queryInput.value.trim(), {});
-                }, 700));
+            const connect = this.getPluginOption("connect");
+            if (connect) {
+                this._connectControls();
             }
         }
         setPluginOption(name, value) {
-            // alert("filter opt=" + name + ", " + value)
             super.setPluginOption(name, value);
             switch (name) {
                 case "mode":
-                    this.tree.filterMode = value === "hide" ? "hide" : "dim";
+                    this.tree.filterMode =
+                        value === "hide" ? "hide" : value === "mark" ? "mark" : "dim";
                     this.tree.updateFilter();
                     break;
             }
         }
+        _updatedConnectedControls() {
+            var _a;
+            const filterActive = this.tree.filterMode !== null;
+            const activeNode = this.tree.getActiveNode();
+            const matchCount = filterActive ? this.countMatches() : 0;
+            const strings = this.treeOpts.strings;
+            let matchIdx = "?";
+            if (this.matchInfoElem) {
+                if (filterActive) {
+                    let info;
+                    if (matchCount === 0) {
+                        info = strings.noMatch;
+                    }
+                    else if (activeNode && activeNode.match >= 1) {
+                        matchIdx = (_a = activeNode.match) !== null && _a !== void 0 ? _a : "?";
+                        info = strings.matchIndex;
+                    }
+                    else {
+                        info = strings.queryResult;
+                    }
+                    info = info
+                        .replace("${count}", this.tree.count().toLocaleString())
+                        .replace("${match}", "" + matchIdx)
+                        .replace("${matches}", matchCount.toLocaleString());
+                    this.matchInfoElem.textContent = info;
+                }
+                else {
+                    this.matchInfoElem.textContent = "";
+                }
+            }
+            if (this.nextButton instanceof HTMLButtonElement) {
+                this.nextButton.disabled = !matchCount;
+            }
+            if (this.prevButton instanceof HTMLButtonElement) {
+                this.prevButton.disabled = !matchCount;
+            }
+            if (this.modeButton) {
+                this.modeButton.disabled = !filterActive;
+                this.modeButton.classList.toggle("wb-filter-hide", this.tree.filterMode === "hide");
+            }
+        }
+        _connectControls() {
+            const tree = this.tree;
+            const connect = this.getPluginOption("connect");
+            if (!connect) {
+                return;
+            }
+            this.queryInput = elemFromSelector(connect.inputElem);
+            if (!this.queryInput) {
+                throw new Error(`Invalid 'filter.connect' option: ${connect.inputElem}.`);
+            }
+            this.prevButton = elemFromSelector(connect.prevButton);
+            this.nextButton = elemFromSelector(connect.nextButton);
+            this.modeButton = elemFromSelector(connect.modeButton);
+            this.matchInfoElem = elemFromSelector(connect.matchInfoElem);
+            if (this.prevButton) {
+                onEvent(this.prevButton, "click", () => {
+                    tree.findRelatedNode(tree.getActiveNode() || tree.getFirstChild(), "prevMatch");
+                    this._updatedConnectedControls();
+                });
+            }
+            if (this.nextButton) {
+                onEvent(this.nextButton, "click", () => {
+                    tree.findRelatedNode(tree.getActiveNode() || tree.getFirstChild(), "nextMatch");
+                    this._updatedConnectedControls();
+                });
+            }
+            if (this.modeButton) {
+                onEvent(this.modeButton, "click", (e) => {
+                    if (!this.tree.filterMode) {
+                        return;
+                    }
+                    this.setPluginOption("mode", tree.filterMode === "dim" ? "hide" : "dim");
+                });
+            }
+            onEvent(this.queryInput, "input", debounce((e) => {
+                this.filterNodes(this.queryInput.value.trim(), {});
+            }, 700));
+            this._updatedConnectedControls();
+        }
         _applyFilterNoUpdate(filter, _opts) {
             return this.tree.runWithDeferredUpdate(() => {
                 return this._applyFilterImpl(filter, _opts);
             });
         }
         _applyFilterImpl(filter, _opts) {
+            var _a;
             let //temp,
             count = 0;
             const start = Date.now();
@@ -1411,11 +1480,11 @@
                     return !!res;
                 };
             }
-            tree.filterMode = opts.mode;
+            tree.filterMode = (_a = opts.mode) !== null && _a !== void 0 ? _a : "dim";
             // eslint-disable-next-line prefer-rest-params
             this.lastFilterArgs = arguments;
             tree.element.classList.toggle("wb-ext-filter-hide", !!hideMode);
-            tree.element.classList.toggle("wb-ext-filter-dim", !hideMode);
+            tree.element.classList.toggle("wb-ext-filter-dim", opts.mode === "dim");
             tree.element.classList.toggle("wb-ext-filter-hide-expanders", !!opts.hideExpanders);
             // Reset current filter
             tree.root.subMatchCount = 0;
@@ -1424,10 +1493,6 @@
                 delete node.titleWithHighlight;
                 node.subMatchCount = 0;
             });
-            // statusNode = tree.root.findDirectChild(KEY_NODATA);
-            // if (statusNode) {
-            //   statusNode.remove();
-            // }
             tree.setStatus(NodeStatusType.ok);
             // Adjust node.hide, .match, and .subMatchCount properties
             treeOpts.autoCollapse = false; // #528
@@ -1438,7 +1503,7 @@
                 let res = filter(node);
                 if (res === "skip") {
                     node.visit(function (c) {
-                        c.match = false;
+                        c.match = undefined;
                     }, true);
                     return "skip";
                 }
@@ -1449,7 +1514,7 @@
                 }
                 if (res) {
                     count++;
-                    node.match = true;
+                    node.match = count;
                     node.visitParents((p) => {
                         if (p !== node) {
                             p.subMatchCount += 1;
@@ -1476,6 +1541,7 @@
             }
             // Redraw whole tree
             tree.logDebug(`Filter '${filter}' found ${count} nodes in ${Date.now() - start} ms.`);
+            this._updatedConnectedControls();
             return count;
         }
         /**
@@ -1520,34 +1586,22 @@
             else {
                 tree.logWarn("updateFilter(): no filter active.");
             }
+            this._updatedConnectedControls();
         }
         /**
          * [ext-filter] Reset the filter.
          */
         clearFilter() {
             const tree = this.tree;
-            // statusNode = tree.root.findDirectChild(KEY_NODATA),
-            // escapeTitles = tree.options.escapeTitles;
             tree.enableUpdate(false);
-            // if (statusNode) {
-            //   statusNode.remove();
-            // }
             tree.setStatus(NodeStatusType.ok);
             // we also counted root node's subMatchCount
             delete tree.root.match;
             delete tree.root.subMatchCount;
             tree.visit((node) => {
-                // if (node.match && node._rowElem) {
-                //   let titleElem = node._rowElem.querySelector("span.wb-title")!;
-                //   node._callEvent("enhanceTitle", { titleElem: titleElem });
-                // }
                 delete node.match;
                 delete node.subMatchCount;
                 delete node.titleWithHighlight;
-                // if (node.subMatchBadge) {
-                //   node.subMatchBadge.remove();
-                //   delete node.subMatchBadge;
-                // }
                 if (node._filterAutoExpanded && node.expanded) {
                     node.setExpanded(false, {
                         noAnimation: true,
@@ -1561,7 +1615,7 @@
             tree.element.classList.remove(
             // "wb-ext-filter",
             "wb-ext-filter-dim", "wb-ext-filter-hide");
-            // tree._callHook("treeStructureChanged", this, "clearFilter");
+            this._updatedConnectedControls();
             tree.enableUpdate(true);
         }
     }
@@ -1605,7 +1659,7 @@
     /*!
      * Wunderbaum - ext-keynav
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     const QUICKSEARCH_DELAY = 500;
     class KeynavExtension extends WunderbaumExtension {
@@ -1969,7 +2023,7 @@
     /*!
      * Wunderbaum - ext-logger
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     class LoggerExtension extends WunderbaumExtension {
         constructor(tree) {
@@ -2011,7 +2065,7 @@
     /*!
      * Wunderbaum - ext-dnd
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     const nodeMimeType = "application/x-wunderbaum-node";
     class DndExtension extends WunderbaumExtension {
@@ -2461,7 +2515,7 @@
     /*!
      * Wunderbaum - drag_observer
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     /**
      * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2610,7 +2664,7 @@
     /*!
      * Wunderbaum - common
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     const DEFAULT_DEBUGLEVEL = 3; // Replaced by rollup script
     /**
@@ -2723,29 +2777,20 @@
     //   "Escape",
     // ]);
     /** Map `KeyEvent.key` to navigation action. */
-    const KEY_TO_ACTION_DICT = {
-        " ": "toggleSelect",
-        "+": "expand",
-        Add: "expand",
+    const KEY_TO_NAVIGATION_MAP = {
         ArrowDown: "down",
         ArrowLeft: "left",
         ArrowRight: "right",
         ArrowUp: "up",
         Backspace: "parent",
-        "/": "collapseAll",
-        Divide: "collapseAll",
         End: "lastCol",
         Home: "firstCol",
         "Control+End": "last",
         "Control+Home": "first",
         "Meta+ArrowDown": "last", // macOs
         "Meta+ArrowUp": "first", // macOs
-        "*": "expandAll",
-        Multiply: "expandAll",
         PageDown: "pageDown",
         PageUp: "pageUp",
-        "-": "collapse",
-        Subtract: "collapse",
     };
     /** Return a callback that returns true if the node title matches the string
      * or regular expression.
@@ -2969,7 +3014,7 @@
     /*!
      * Wunderbaum - ext-grid
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     class GridExtension extends WunderbaumExtension {
         constructor(tree) {
@@ -3060,7 +3105,7 @@
     /*!
      * Wunderbaum - deferred
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     /**
      * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -3113,7 +3158,7 @@
     /*!
      * Wunderbaum - wunderbaum_node
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     /** WunderbaumNode properties that can be passed with source data.
      * (Any other source properties will be stored as `node.data.PROP`.)
@@ -3895,7 +3940,7 @@
         isParentOf(other) {
             return other && other.parent === this;
         }
-        /** (experimental) Return true if this node is partially loaded. */
+        /** Return true if this node is partially loaded. @experimental  */
         isPartload() {
             return !!this._partload;
         }
@@ -4353,10 +4398,11 @@
          * @param options
          */
         async navigate(where, options) {
+            var _a;
             // Allow to pass 'ArrowLeft' instead of 'left'
-            where = KEY_TO_ACTION_DICT[where] || where;
+            const navType = ((_a = KEY_TO_NAVIGATION_MAP[where]) !== null && _a !== void 0 ? _a : where);
             // Otherwise activate or focus the related node
-            const node = this.findRelatedNode(where);
+            const node = this.findRelatedNode(navType);
             if (!node) {
                 this.logWarn(`Could not find related node '${where}'.`);
                 return Promise.resolve(this);
@@ -4453,86 +4499,17 @@
                 renderColInfosById: renderColInfosById,
             };
         }
-        _createIcon(iconMap, parentElem, replaceChild, showLoading) {
-            let iconSpan;
-            let icon = this.getOption("icon");
-            if (this._errorInfo) {
-                icon = iconMap.error;
-            }
-            else if (this._isLoading && showLoading) {
-                // Status nodes, or nodes without expander (< minExpandLevel) should
-                // display the 'loading' status with the i.wb-icon span
-                icon = iconMap.loading;
-            }
-            if (icon === false) {
-                return null; // explicitly disabled: don't try default icons
-            }
-            if (typeof icon === "string") ;
-            else if (this.statusNodeType) {
-                icon = iconMap[this.statusNodeType];
-            }
-            else if (this.expanded) {
-                icon = iconMap.folderOpen;
-            }
-            else if (this.children) {
-                icon = iconMap.folder;
-            }
-            else if (this.lazy) {
-                icon = iconMap.folderLazy;
-            }
-            else {
-                icon = iconMap.doc;
-            }
-            // this.log("_createIcon: " + icon);
-            if (!icon) {
-                iconSpan = document.createElement("i");
-                iconSpan.className = "wb-icon";
-            }
-            else if (icon.indexOf("<") >= 0) {
-                // HTML
-                iconSpan = elemFromHtml(icon);
-            }
-            else if (TEST_IMG.test(icon)) {
-                // Image URL
-                iconSpan = elemFromHtml(`<i class="wb-icon" style="background-image: url('${icon}');">`);
-            }
-            else {
-                // Class name
-                iconSpan = document.createElement("i");
-                iconSpan.className = "wb-icon " + icon;
-            }
-            if (replaceChild) {
-                parentElem.replaceChild(iconSpan, replaceChild);
-            }
-            else {
-                parentElem.appendChild(iconSpan);
-            }
-            // Event handler `tree.iconBadge` can return a badge text or HTMLSpanElement
-            const cbRes = this._callEvent("iconBadge", { iconSpan: iconSpan });
-            let badge = null;
-            if (cbRes != null && cbRes !== false) {
-                let classes = "";
-                let tooltip = "";
-                if (isPlainObject(cbRes)) {
-                    badge = "" + cbRes.badge;
-                    classes = cbRes.badgeClass ? " " + cbRes.badgeClass : "";
-                    tooltip = cbRes.badgeTooltip ? ` title="${cbRes.badgeTooltip}"` : "";
-                }
-                else if (typeof cbRes === "number") {
-                    badge = "" + cbRes;
+        _createIcon(parentElem, replaceChild, showLoading) {
+            const iconElem = this.tree._createNodeIcon(this, showLoading, true);
+            if (iconElem) {
+                if (replaceChild) {
+                    parentElem.replaceChild(iconElem, replaceChild);
                 }
                 else {
-                    badge = cbRes; // string or HTMLSpanElement
-                }
-                if (typeof badge === "string") {
-                    badge = elemFromHtml(`<span class="wb-badge${classes}"${tooltip}>${escapeHtml(badge)}</span>`);
-                }
-                if (badge) {
-                    iconSpan.append(badge);
+                    parentElem.appendChild(iconElem);
                 }
             }
-            // this.log("_createIcon: ", iconSpan);
-            return iconSpan;
+            return iconElem;
         }
         /**
          * Create a whole new `<div class="wb-row">` element.
@@ -4587,7 +4564,7 @@
             }
             // Render the icon (show a 'loading' icon if we do not have an expander that
             // we would prefer).
-            const iconSpan = this._createIcon(tree.iconMap, nodeElem, null, !expanderSpan);
+            const iconSpan = this._createIcon(nodeElem, null, !expanderSpan);
             if (iconSpan) {
                 ofsTitlePx += ICON_WIDTH;
             }
@@ -4819,7 +4796,7 @@
                 // Update icon (if not opts.isNew, which would rebuild markup anyway)
                 const iconSpan = nodeElem.querySelector("i.wb-icon");
                 if (iconSpan) {
-                    this._createIcon(tree.iconMap, nodeElem, iconSpan, !expanderSpan);
+                    this._createIcon(nodeElem, iconSpan, !expanderSpan);
                 }
             }
             // Adjust column width
@@ -5368,7 +5345,7 @@
                 assert(data.statusNodeType, "Not a status node");
                 assert(!firstChild || !firstChild.isStatusNode(), "Child must not be a status node");
                 statusNode = this.addNode(data, "prependChild");
-                statusNode.match = true;
+                statusNode.match = -1; // Mark as 'match' to avoid hiding
                 tree.update(ChangeType.structure);
                 return statusNode;
             };
@@ -5660,7 +5637,7 @@
     /*!
      * Wunderbaum - ext-edit
      * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
-     * v0.12.1, Sat, 22 Feb 2025 22:59:20 GMT (https://github.com/mar10/wunderbaum)
+     * v0.13.0, Sat, 08 Mar 2025 14:16:31 GMT (https://github.com/mar10/wunderbaum)
      */
     // const START_MARKER = "\uFFF7";
     class EditExtension extends WunderbaumExtension {
@@ -5979,7 +5956,7 @@
             newNode.setClass("wb-edit-new");
             this.relatedNode = node;
             // Don't filter new nodes:
-            newNode.match = true;
+            newNode.match = -1;
             newNode.makeVisible({ noAnimation: true }).then(() => {
                 this.startEditTitle(newNode);
             });
@@ -5995,8 +5972,8 @@
      * https://github.com/mar10/wunderbaum
      *
      * Released under the MIT license.
-     * @version v0.12.1
-     * @date Sat, 22 Feb 2025 22:59:20 GMT
+     * @version v0.13.0
+     * @date Sat, 08 Mar 2025 14:16:31 GMT
      */
     // import "./wunderbaum.scss";
     class WbSystemRoot extends WunderbaumNode {
@@ -6057,6 +6034,9 @@
             // --- SELECT ---
             // /** @internal */
             // public selectRangeAnchor: WunderbaumNode | null = null;
+            // --- BREADCRUMB ---
+            /** Filter options (used as defaults for calls to {@link Wunderbaum.filterNodes} ) */
+            this.breadcrumb = null;
             // --- FILTER ---
             /** Filter options (used as defaults for calls to {@link Wunderbaum.filterNodes} ) */
             this.filterMode = null;
@@ -6091,10 +6071,10 @@
                 emptyChildListExpandable: false,
                 // updateThrottleWait: 200,
                 skeleton: false,
-                connectTopBreadcrumb: null, // HTMLElement that receives the top nodes breadcrumb
+                connectTopBreadcrumb: null,
                 selectMode: "multi", // SelectModeType
                 // --- KeyNav ---
-                navigationModeOption: null, // NavModeEnum.startRow,
+                navigationModeOption: null, // NavModeEnum,
                 quicksearch: true,
                 // --- Events ---
                 iconBadge: null,
@@ -6106,8 +6086,11 @@
                 strings: {
                     loadError: "Error",
                     loading: "Loading...",
-                    // loading: "Loading&hellip;",
                     noData: "No data",
+                    breadcrumbDelimiter: " » ",
+                    queryResult: "Found ${matches} of ${count}",
+                    noMatch: "No results",
+                    matchIndex: "${match} of ${matches}",
                 },
             }, options));
             const readyDeferred = new Deferred();
@@ -6213,6 +6196,19 @@
             this.headerElement =
                 this.element.querySelector("div.wb-header");
             this.element.classList.toggle("wb-grid", this.columns.length > 1);
+            if (this.options.connectTopBreadcrumb) {
+                this.breadcrumb = elemFromSelector(this.options.connectTopBreadcrumb);
+                assert(!this.breadcrumb || this.breadcrumb.innerHTML != null, `Invalid 'connectTopBreadcrumb' option: ${this.breadcrumb}.`);
+                this.breadcrumb.addEventListener("click", (e) => {
+                    // const node = Wunderbaum.getNode(e)!;
+                    const elem = e.target;
+                    if (elem && elem.matches("a.wb-breadcrumb")) {
+                        const node = this.keyMap.get(elem.dataset.key);
+                        node === null || node === void 0 ? void 0 : node.setActive();
+                        e.preventDefault();
+                    }
+                });
+            }
             this._initExtensions();
             // --- apply initial options
             ["enabled", "fixedCol"].forEach((optName) => {
@@ -6576,7 +6572,10 @@
             });
             return node;
         }
-        /** Return the topmost visible node in the viewport. */
+        /** Return the topmost visible node in the viewport.
+         * @param complete If `false`, the node is considered visible if at least one
+         * pixel is visible.
+         */
         getTopmostVpNode(complete = true) {
             const rowHeight = this.options.rowHeightPx;
             const gracePx = 1; // ignore subpixel scrolling
@@ -6609,24 +6608,19 @@
             bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
             return this._getNodeByRowIdx(bottomIdx);
         }
-        /** Return preceeding visible node in the viewport. */
-        _getPrevNodeInView(node, ofs = 1) {
+        /** Return following visible node in the viewport. */
+        _getNextNodeInView(node, options) {
+            let ofs = (options === null || options === void 0 ? void 0 : options.ofs) || 1;
+            const reverse = !!(options === null || options === void 0 ? void 0 : options.reverse);
             this.visitRows((n) => {
                 node = n;
-                if (ofs-- <= 0) {
+                if ((options === null || options === void 0 ? void 0 : options.cb) && options.cb(n)) {
                     return false;
                 }
-            }, { reverse: true, start: node || this.getActiveNode() });
-            return node;
-        }
-        /** Return following visible node in the viewport. */
-        _getNextNodeInView(node, ofs = 1) {
-            this.visitRows((n) => {
-                node = n;
                 if (ofs-- <= 0) {
                     return false;
                 }
-            }, { reverse: false, start: node || this.getActiveNode() });
+            }, { reverse: reverse, start: node || this.getActiveNode() });
             return node;
         }
         /**
@@ -6746,9 +6740,11 @@
                 case "first":
                 case "last":
                 case "left":
+                case "nextMatch":
                 case "pageDown":
                 case "pageUp":
                 case "parent":
+                case "prevMatch":
                 case "right":
                 case "up":
                     return node.navigate(cmd);
@@ -6940,6 +6936,11 @@
         count(visible = false) {
             return visible ? this.treeRowCount : this.keyMap.size;
         }
+        /** Return the number of *unique* nodes in the data model, i.e. unique `node.refKey`.
+         */
+        countUnique() {
+            return this.refKeyMap.size;
+        }
         /** @internal sanity check. */
         _check() {
             let i = 0;
@@ -6998,12 +6999,14 @@
          * and wrap-around at the end.
          * Used by quicksearch and keyboard navigation.
          */
-        findNextNode(match, startNode) {
+        findNextNode(match, startNode, reverse = false) {
             //, visibleOnly) {
             let res = null;
             const firstNode = this.getFirstChild();
+            // Last visible node (calculation is expensive, so do only if we need it):
+            const lastNode = reverse ? this.findRelatedNode(firstNode, "last") : null;
             const matcher = typeof match === "string" ? makeNodeTitleStartMatcher(match) : match;
-            startNode = startNode || firstNode;
+            startNode = startNode || (reverse ? lastNode : firstNode);
             function _checkNode(n) {
                 // console.log("_check " + n)
                 if (matcher(n)) {
@@ -7016,12 +7019,14 @@
             this.visitRows(_checkNode, {
                 start: startNode,
                 includeSelf: false,
+                reverse: reverse,
             });
             // Wrap around search
             if (!res && startNode !== firstNode) {
                 this.visitRows(_checkNode, {
-                    start: firstNode,
+                    start: reverse ? lastNode : firstNode,
                     includeSelf: true,
+                    reverse: reverse,
                 });
             }
             return res;
@@ -7088,7 +7093,7 @@
                     // }
                     break;
                 case "up":
-                    res = this._getPrevNodeInView(node);
+                    res = this._getNextNodeInView(node, { reverse: true });
                     break;
                 case "down":
                     res = this._getNextNodeInView(node);
@@ -7101,7 +7106,10 @@
                             res = bottomNode;
                         }
                         else {
-                            res = this._getNextNodeInView(node, pageSize);
+                            res = this._getNextNodeInView(node, {
+                                reverse: false,
+                                ofs: pageSize,
+                            });
                         }
                     }
                     break;
@@ -7116,10 +7124,23 @@
                             res = topNode;
                         }
                         else {
-                            res = this._getPrevNodeInView(node, pageSize);
+                            res = this._getNextNodeInView(node, {
+                                reverse: true,
+                                ofs: pageSize,
+                            });
                         }
                     }
                     break;
+                case "prevMatch":
+                // fallthrough
+                case "nextMatch":
+                    if (!this.isFilterActive) {
+                        this.logWarn(`${where}: Filter is not active.`);
+                        break;
+                    }
+                    res = this.findNextNode((n) => n.isMatched(), node, where === "prevMatch");
+                    res === null || res === void 0 ? void 0 : res.setActive();
+                    break;
                 default:
                     this.logWarn("Unknown relation '" + where + "'.");
             }
@@ -7181,6 +7202,12 @@
         getFirstChild() {
             return this.root.getFirstChild();
         }
+        /**
+         * Return the last top level node if any (not the invisible root node).
+         */
+        getLastChild() {
+            return this.root.getLastChild();
+        }
         /**
          * Return the node that currently has keyboard focus or null.
          * Alias for {@link Wunderbaum.focusNode}.
@@ -7508,6 +7535,51 @@
         _setFocusNode(node) {
             this._focusNode = node;
         }
+        /** Return the current selection/expansion/activation status. @experimental */
+        getState(options) {
+            var _a, _b;
+            let expandedKeys = undefined;
+            if (options.expandedKeys !== false) {
+                expandedKeys = [];
+                for (const node of this) {
+                    if (node.expanded) {
+                        expandedKeys.push(node.key);
+                    }
+                }
+            }
+            const state = {
+                activeKey: (_b = (_a = this.activeNode) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null,
+                activeColIdx: this.activeColIdx,
+                selectedKeys: options.selectedKeys === false
+                    ? undefined
+                    : this.getSelectedNodes().flatMap((n) => n.key),
+                expandedKeys: expandedKeys,
+            };
+            return state;
+        }
+        /** Apply selection/expansion/activation status. @experimental */
+        setState(state, options) {
+            this.runWithDeferredUpdate(() => {
+                var _a, _b;
+                if (state.selectedKeys) {
+                    this.selectAll(false);
+                    for (const key of state.selectedKeys) {
+                        (_a = this.findKey(key)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
+                    }
+                }
+                if (state.expandedKeys) {
+                    for (const key of state.expandedKeys) {
+                        (_b = this.findKey(key)) === null || _b === void 0 ? void 0 : _b.setExpanded(true);
+                    }
+                }
+                if (state.activeKey) {
+                    this.setActiveNode(state.activeKey);
+                }
+                if (state.activeColIdx != null) {
+                    this.setColumn(state.activeColIdx);
+                }
+            });
+        }
         update(change, node, options) {
             // this.log(`update(${change}) node=${node}`);
             if (!(node instanceof WunderbaumNode)) {
@@ -7789,11 +7861,11 @@
             // }
             return modified;
         }
-        _insertIcon(icon, elem) {
-            const iconElem = document.createElement("i");
-            iconElem.className = icon;
-            elem.appendChild(iconElem);
-        }
+        // protected _insertIcon(icon: string, elem: HTMLElement) {
+        //   const iconElem = document.createElement("i");
+        //   iconElem.className = icon;
+        //   elem.appendChild(iconElem);
+        // }
         /** Create/update header markup from `this.columns` definition.
          * @internal
          */
@@ -7891,6 +7963,104 @@
                 this._updateViewportImmediately();
             }
         }
+        /** @internal */
+        _createNodeIcon(node, showLoading, showBadge) {
+            const iconMap = this.iconMap;
+            let iconElem;
+            let icon = node.getOption("icon");
+            if (node._errorInfo) {
+                icon = iconMap.error;
+            }
+            else if (node._isLoading && showLoading) {
+                // Status nodes, or nodes without expander (< minExpandLevel) should
+                // display the 'loading' status with the i.wb-icon span
+                icon = iconMap.loading;
+            }
+            if (icon === false) {
+                return null; // explicitly disabled: don't try default icons
+            }
+            if (typeof icon === "string") ;
+            else if (node.statusNodeType) {
+                icon = iconMap[node.statusNodeType];
+            }
+            else if (node.expanded) {
+                icon = iconMap.folderOpen;
+            }
+            else if (node.children) {
+                icon = iconMap.folder;
+            }
+            else if (node.lazy) {
+                icon = iconMap.folderLazy;
+            }
+            else {
+                icon = iconMap.doc;
+            }
+            if (!icon) {
+                iconElem = document.createElement("i");
+                iconElem.className = "wb-icon";
+            }
+            else if (icon.indexOf("<") >= 0) {
+                // HTML
+                iconElem = elemFromHtml(icon);
+            }
+            else if (TEST_IMG.test(icon)) {
+                // Image URL
+                iconElem = elemFromHtml(`<i class="wb-icon" style="background-image: url('${icon}');">`);
+            }
+            else {
+                // Class name
+                iconElem = document.createElement("i");
+                iconElem.className = "wb-icon " + icon;
+            }
+            // Event handler `tree.iconBadge` can return a badge text or HTMLSpanElement
+            const cbRes = showBadge && node._callEvent("iconBadge", { iconSpan: iconElem });
+            let badge = null;
+            if (cbRes != null && cbRes !== false) {
+                let classes = "";
+                let tooltip = "";
+                if (isPlainObject(cbRes)) {
+                    badge = "" + cbRes.badge;
+                    classes = cbRes.badgeClass ? " " + cbRes.badgeClass : "";
+                    tooltip = cbRes.badgeTooltip ? ` title="${cbRes.badgeTooltip}"` : "";
+                }
+                else if (typeof cbRes === "number") {
+                    badge = "" + cbRes;
+                }
+                else {
+                    badge = cbRes; // string or HTMLSpanElement
+                }
+                if (typeof badge === "string") {
+                    badge = elemFromHtml(`<span class="wb-badge${classes}"${tooltip}>${escapeHtml(badge)}</span>`);
+                }
+                if (badge) {
+                    iconElem.append(badge);
+                }
+            }
+            return iconElem;
+        }
+        _updateTopBreadcrumb() {
+            const breadcrumb = this.breadcrumb;
+            const topmost = this.getTopmostVpNode(true);
+            const parentList = topmost === null || topmost === void 0 ? void 0 : topmost.getParentList(false, false);
+            if (parentList === null || parentList === void 0 ? void 0 : parentList.length) {
+                breadcrumb.innerHTML = "";
+                for (const n of topmost.getParentList(false, false)) {
+                    const icon = this._createNodeIcon(n, false, false);
+                    if (icon) {
+                        breadcrumb.append(icon, " ");
+                    }
+                    const part = document.createElement("a");
+                    part.textContent = n.title;
+                    part.href = "#";
+                    part.classList.add("wb-breadcrumb");
+                    part.dataset.key = n.key;
+                    breadcrumb.append(part, this.options.strings.breadcrumbDelimiter);
+                }
+            }
+            else {
+                breadcrumb.innerHTML = "&nbsp;";
+            }
+        }
         /**
          * This is the actual update method, which is wrapped inside a throttle method.
          * It calls `updateColumns()` and `_updateRows()`.
@@ -7901,7 +8071,6 @@
          * @internal
          */
         _updateViewportImmediately() {
-            var _a;
             if (this._disableUpdateCount) {
                 this.log(`_updateViewportImmediately() IGNORED (disable level: ${this._disableUpdateCount}).`);
                 this._disableUpdateIgnoreCount++;
@@ -7948,11 +8117,8 @@
                 this._updateRows();
                 // console.profileEnd(`_updateViewportImmediately()`)
             }
-            if (this.options.connectTopBreadcrumb) {
-                assert(this.options.connectTopBreadcrumb.textContent != null, `Invalid 'connectTopBreadcrumb' option (input element expected).`);
-                let path = (_a = this.getTopmostVpNode(true)) === null || _a === void 0 ? void 0 : _a.getPath(false, "title", " > ");
-                path = path ? path + " >" : "";
-                this.options.connectTopBreadcrumb.textContent = path;
+            if (this.breadcrumb) {
+                this._updateTopBreadcrumb();
             }
             this._callEvent("update");
         }
@@ -8321,7 +8487,7 @@
     }
     Wunderbaum.sequence = 0;
     /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-    Wunderbaum.version = "v0.12.1"; // Set to semver by 'grunt release'
+    Wunderbaum.version = "v0.13.0"; // Set to semver by 'grunt release'
     /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
     Wunderbaum.util = util;