wunderbaum 0.12.1 → 0.13.0

package/dist/wunderbaum.esm.js

@@ -1,7 +1,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
@@ -293,7 +293,7 @@ function throttle(func, wait = 0, options = {}) {
 /*!
  * 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` */
@@ -676,18 +676,6 @@ function elemFromSelector(obj) {
     }
     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.
  *
@@ -1147,7 +1135,7 @@ var util = /*#__PURE__*/Object.freeze({
 /*!
  * 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}.
@@ -1215,7 +1203,7 @@ var NavModeEnum;
 /*!
  * 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) {
@@ -1274,7 +1262,7 @@ class WunderbaumExtension {
 /*!
  * 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";
@@ -1286,7 +1274,7 @@ class FilterExtension extends WunderbaumExtension {
             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
@@ -1294,36 +1282,117 @@ class FilterExtension extends WunderbaumExtension {
             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();
@@ -1405,11 +1474,11 @@ class FilterExtension extends WunderbaumExtension {
                 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;
@@ -1418,10 +1487,6 @@ class FilterExtension extends WunderbaumExtension {
             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
@@ -1432,7 +1497,7 @@ class FilterExtension extends WunderbaumExtension {
             let res = filter(node);
             if (res === "skip") {
                 node.visit(function (c) {
-                    c.match = false;
+                    c.match = undefined;
                 }, true);
                 return "skip";
             }
@@ -1443,7 +1508,7 @@ class FilterExtension extends WunderbaumExtension {
             }
             if (res) {
                 count++;
-                node.match = true;
+                node.match = count;
                 node.visitParents((p) => {
                     if (p !== node) {
                         p.subMatchCount += 1;
@@ -1470,6 +1535,7 @@ class FilterExtension extends WunderbaumExtension {
         }
         // Redraw whole tree
         tree.logDebug(`Filter '${filter}' found ${count} nodes in ${Date.now() - start} ms.`);
+        this._updatedConnectedControls();
         return count;
     }
     /**
@@ -1514,34 +1580,22 @@ class FilterExtension extends WunderbaumExtension {
         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,
@@ -1555,7 +1609,7 @@ class FilterExtension extends WunderbaumExtension {
         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);
     }
 }
@@ -1599,7 +1653,7 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = true) {
 /*!
  * 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 {
@@ -1963,7 +2017,7 @@ class KeynavExtension extends WunderbaumExtension {
 /*!
  * 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) {
@@ -2005,7 +2059,7 @@ class LoggerExtension extends WunderbaumExtension {
 /*!
  * 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 {
@@ -2455,7 +2509,7 @@ class DndExtension extends WunderbaumExtension {
 /*!
  * 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'.
@@ -2604,7 +2658,7 @@ class DragObserver {
 /*!
  * 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
 /**
@@ -2717,29 +2771,20 @@ const RESERVED_TREE_SOURCE_KEYS = new Set([
 //   "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.
@@ -2963,7 +3008,7 @@ function decompressSourceData(source) {
 /*!
  * 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) {
@@ -3054,7 +3099,7 @@ class GridExtension extends WunderbaumExtension {
 /*!
  * 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.
@@ -3107,7 +3152,7 @@ class Deferred {
 /*!
  * 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`.)
@@ -3889,7 +3934,7 @@ class WunderbaumNode {
     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;
     }
@@ -4347,10 +4392,11 @@ class WunderbaumNode {
      * @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);
@@ -4447,86 +4493,17 @@ class WunderbaumNode {
             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.
@@ -4581,7 +4558,7 @@ class WunderbaumNode {
         }
         // 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;
         }
@@ -4813,7 +4790,7 @@ class WunderbaumNode {
             // 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
@@ -5362,7 +5339,7 @@ class WunderbaumNode {
             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;
         };
@@ -5654,7 +5631,7 @@ WunderbaumNode.sequence = 0;
 /*!
  * 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 {
@@ -5973,7 +5950,7 @@ class EditExtension extends WunderbaumExtension {
         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);
         });
@@ -5989,8 +5966,8 @@ class EditExtension extends WunderbaumExtension {
  * 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 {
@@ -6051,6 +6028,9 @@ class Wunderbaum {
         // --- 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;
@@ -6085,10 +6065,10 @@ class Wunderbaum {
             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,
@@ -6100,8 +6080,11 @@ class Wunderbaum {
             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();
@@ -6207,6 +6190,19 @@ class Wunderbaum {
         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) => {
@@ -6570,7 +6566,10 @@ class Wunderbaum {
         });
         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
@@ -6603,24 +6602,19 @@ class Wunderbaum {
         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;
     }
     /**
@@ -6740,9 +6734,11 @@ class Wunderbaum {
             case "first":
             case "last":
             case "left":
+            case "nextMatch":
             case "pageDown":
             case "pageUp":
             case "parent":
+            case "prevMatch":
             case "right":
             case "up":
                 return node.navigate(cmd);
@@ -6934,6 +6930,11 @@ class Wunderbaum {
     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;
@@ -6992,12 +6993,14 @@ class Wunderbaum {
      * 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)) {
@@ -7010,12 +7013,14 @@ class Wunderbaum {
         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;
@@ -7082,7 +7087,7 @@ class Wunderbaum {
                 // }
                 break;
             case "up":
-                res = this._getPrevNodeInView(node);
+                res = this._getNextNodeInView(node, { reverse: true });
                 break;
             case "down":
                 res = this._getNextNodeInView(node);
@@ -7095,7 +7100,10 @@ class Wunderbaum {
                         res = bottomNode;
                     }
                     else {
-                        res = this._getNextNodeInView(node, pageSize);
+                        res = this._getNextNodeInView(node, {
+                            reverse: false,
+                            ofs: pageSize,
+                        });
                     }
                 }
                 break;
@@ -7110,10 +7118,23 @@ class Wunderbaum {
                         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 + "'.");
         }
@@ -7175,6 +7196,12 @@ class Wunderbaum {
     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}.
@@ -7502,6 +7529,51 @@ class Wunderbaum {
     _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)) {
@@ -7783,11 +7855,11 @@ class Wunderbaum {
         // }
         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
      */
@@ -7885,6 +7957,104 @@ class Wunderbaum {
             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()`.
@@ -7895,7 +8065,6 @@ class Wunderbaum {
      * @internal
      */
     _updateViewportImmediately() {
-        var _a;
         if (this._disableUpdateCount) {
             this.log(`_updateViewportImmediately() IGNORED (disable level: ${this._disableUpdateCount}).`);
             this._disableUpdateIgnoreCount++;
@@ -7942,11 +8111,8 @@ class Wunderbaum {
             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");
     }
@@ -8315,7 +8481,7 @@ class Wunderbaum {
 }
 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;