wunderbaum 0.0.1-0 → 0.0.3

package/dist/wunderbaum.esm.js

@@ -1,8 +1,9 @@
 /*!
  * Wunderbaum - util
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
+/** @module util */
 /** Readable names for `MouseEvent.button` */
 const MOUSE_BUTTONS = {
     0: "",
@@ -14,7 +15,7 @@ const MOUSE_BUTTONS = {
 };
 const MAX_INT = 9007199254740991;
 const userInfo = _getUserInfo();
-/**True if the user is using a macOS platform. */
+/**True if the client is using a macOS platform. */
 const isMac = userInfo.isMac;
 const REX_HTML = /[&<>"'/]/g; // Escape those characters
 const REX_TOOLTIP = /[<>"'/]/g; // Don't escape `&` in tooltips
@@ -162,7 +163,7 @@ function escapeTooltip(s) {
 /** TODO */
 function extractHtmlText(s) {
     if (s.indexOf(">") >= 0) {
-        error("not implemented");
+        error("Not implemented");
         // return $("<div/>").html(s).text();
     }
     return s;
@@ -284,7 +285,7 @@ function setValueToElem(elem, value) {
                 input.valueAsNumber = value;
                 break;
             case "radio":
-                assert(false, "not implemented");
+                error("Not implemented");
                 // const name = input.name;
                 // const checked = input.parentElement!.querySelector(
                 //   `input[name="${name}"]:checked`
@@ -307,7 +308,7 @@ function setValueToElem(elem, value) {
     }
     // return value;
 }
-/** Return an unconnected `HTMLElement` from a HTML string. */
+/** Create and return an unconnected `HTMLElement` from a HTML string. */
 function elemFromHtml(html) {
     const t = document.createElement("template");
     t.innerHTML = html.trim();
@@ -324,11 +325,23 @@ function elemFromSelector(obj) {
     }
     return obj;
 }
+/** Return a EventTarget from selector or cast an existing element. */
+function eventTargetFromSelector(obj) {
+    if (!obj) {
+        return null;
+    }
+    if (typeof obj === "string") {
+        return document.querySelector(obj);
+    }
+    return obj;
+}
 /**
- * Return a descriptive string for a keyboard or mouse event.
+ * Return a canonical descriptive string for a keyboard or mouse event.
  *
  * The result also contains a prefix for modifiers if any, for example
  * `"x"`, `"F2"`, `"Control+Home"`, or `"Shift+clickright"`.
+ * This is especially useful in `switch` statements, to make sure that modifier
+ * keys are considered and handled correctly.
  */
 function eventToString(event) {
     let key = event.key, et = event.type, s = [];
@@ -360,6 +373,13 @@ function eventToString(event) {
     }
     return s.join("+");
 }
+/**
+ * Copy allproperties from one or more source objects to a target object.
+ *
+ * @returns the modified target object.
+ */
+// TODO: use Object.assign()? --> https://stackoverflow.com/a/42740894
+// TODO: support deep merge --> https://stackoverflow.com/a/42740894
 function extend(...args) {
     for (let i = 1; i < args.length; i++) {
         let arg = args[i];
@@ -374,23 +394,27 @@ function extend(...args) {
     }
     return args[0];
 }
+/** Return true if `obj` is of type `array`. */
 function isArray(obj) {
     return Array.isArray(obj);
 }
+/** Return true if `obj` is of type `Object` and has no propertied. */
 function isEmptyObject(obj) {
     return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
+/** Return true if `obj` is of type `function`. */
 function isFunction(obj) {
     return typeof obj === "function";
 }
+/** Return true if `obj` is of type `Object`. */
 function isPlainObject(obj) {
     return Object.prototype.toString.call(obj) === "[object Object]";
 }
 /** A dummy function that does nothing ('no operation'). */
 function noop(...args) { }
-function onEvent(rootElem, eventNames, selectorOrHandler, handlerOrNone) {
+function onEvent(rootTarget, eventNames, selectorOrHandler, handlerOrNone) {
     let selector, handler;
-    rootElem = elemFromSelector(rootElem);
+    rootTarget = eventTargetFromSelector(rootTarget);
     if (handlerOrNone) {
         selector = selectorOrHandler;
         handler = handlerOrNone;
@@ -400,7 +424,7 @@ function onEvent(rootElem, eventNames, selectorOrHandler, handlerOrNone) {
         handler = selectorOrHandler;
     }
     eventNames.split(" ").forEach((evn) => {
-        rootElem.addEventListener(evn, function (e) {
+        rootTarget.addEventListener(evn, function (e) {
             if (!selector) {
                 return handler(e); // no event delegation
             }
@@ -478,6 +502,13 @@ async function sleep(ms) {
 }
 /**
  * Set or rotate checkbox status with support for tri-state.
+ *
+ * An initial 'indeterminate' state becomes 'checked' on the first call.
+ *
+ * If the input element has the class 'wb-tristate' assigned, the sequence is:<br>
+ * 'indeterminate' -> 'checked' -> 'unchecked' -> 'indeterminate' -> ...<br>
+ * Otherwise we toggle like <br>
+ * 'checked' -> 'unchecked' -> 'checked' -> ...
  */
 function toggleCheckbox(element, value, tristate) {
     const input = elemFromSelector(element);
@@ -535,6 +566,7 @@ function toSet(val) {
     }
     throw new Error("Cannot convert to Set<string>: " + val);
 }
+/**Return a canonical string representation for an object's type (e.g. 'array', 'number', ...) */
 function type(obj) {
     return Object.prototype.toString
         .call(obj)
@@ -561,6 +593,7 @@ var util = /*#__PURE__*/Object.freeze({
   setValueToElem: setValueToElem,
   elemFromHtml: elemFromHtml,
   elemFromSelector: elemFromSelector,
+  eventTargetFromSelector: eventTargetFromSelector,
   eventToString: eventToString,
   extend: extend,
   isArray: isArray,
@@ -581,7 +614,7 @@ var util = /*#__PURE__*/Object.freeze({
 /*!
  * Wunderbaum - common
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
 const ROW_HEIGHT = 22;
@@ -595,6 +628,8 @@ var ChangeType;
     ChangeType["row"] = "row";
     ChangeType["structure"] = "structure";
     ChangeType["status"] = "status";
+    ChangeType["vscroll"] = "vscroll";
+    ChangeType["header"] = "header";
 })(ChangeType || (ChangeType = {}));
 var NodeStatusType;
 (function (NodeStatusType) {
@@ -667,6 +702,8 @@ const KEY_TO_ACTION_DICT = {
     Home: "firstCol",
     "Control+End": "last",
     "Control+Home": "first",
+    "Meta+ArrowDown": "last",
+    "Meta+ArrowUp": "first",
     "*": "expandAll",
     Multiply: "expandAll",
     PageDown: "pageDown",
@@ -693,7 +730,7 @@ function makeNodeTitleStartMatcher(s) {
 /*!
  * Wunderbaum - wb_extension_base
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 class WunderbaumExtension {
     constructor(tree, id, defaults) {
@@ -1048,7 +1085,7 @@ function throttle(func, wait = 0, options = {}) {
 /*!
  * Wunderbaum - ext-filter
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 const START_MARKER = "\uFFF7";
 const END_MARKER = "\uFFF8";
@@ -1087,7 +1124,9 @@ class FilterExtension extends WunderbaumExtension {
         });
     }
     _applyFilterImpl(filter, branchMode, _opts) {
-        let match, temp, start = Date.now(), count = 0, tree = this.tree, treeOpts = tree.options, escapeTitles = treeOpts.escapeTitles, prevAutoCollapse = treeOpts.autoCollapse, opts = extend({}, treeOpts.filter, _opts), hideMode = opts.mode === "hide", leavesOnly = !!opts.leavesOnly && !branchMode;
+        let match, temp, start = Date.now(), count = 0, tree = this.tree, treeOpts = tree.options, 
+        // escapeTitles = treeOpts.escapeTitles,
+        prevAutoCollapse = treeOpts.autoCollapse, opts = extend({}, treeOpts.filter, _opts), hideMode = opts.mode === "hide", leavesOnly = !!opts.leavesOnly && !branchMode;
         // Default to 'match title substring (case insensitive)'
         if (typeof filter === "string") {
             if (filter === "") {
@@ -1120,37 +1159,36 @@ class FilterExtension extends WunderbaumExtension {
                 if (!node.title) {
                     return false;
                 }
-                let text = escapeTitles ? node.title : extractHtmlText(node.title);
+                // let text = escapeTitles ? node.title : extractHtmlText(node.title);
+                let text = node.title;
                 // `.match` instead of `.test` to get the capture groups
                 let res = text.match(re);
                 if (res && opts.highlight) {
-                    if (escapeTitles) {
-                        if (opts.fuzzy) {
-                            temp = _markFuzzyMatchedChars(text, res, escapeTitles);
-                        }
-                        else {
-                            // #740: we must not apply the marks to escaped entity names, e.g. `&quot;`
-                            // Use some exotic characters to mark matches:
-                            temp = text.replace(reHighlight, function (s) {
-                                return START_MARKER + s + END_MARKER;
-                            });
-                        }
-                        // now we can escape the title...
-                        node.titleWithHighlight = escapeHtml(temp)
-                            // ... and finally insert the desired `<mark>` tags
-                            .replace(RE_START_MARKER, "<mark>")
-                            .replace(RE_END_MARTKER, "</mark>");
+                    // if (escapeTitles) {
+                    if (opts.fuzzy) {
+                        temp = _markFuzzyMatchedChars(text, res, true);
                     }
                     else {
-                        if (opts.fuzzy) {
-                            node.titleWithHighlight = _markFuzzyMatchedChars(text, res);
-                        }
-                        else {
-                            node.titleWithHighlight = text.replace(reHighlight, function (s) {
-                                return "<mark>" + s + "</mark>";
-                            });
-                        }
+                        // #740: we must not apply the marks to escaped entity names, e.g. `&quot;`
+                        // Use some exotic characters to mark matches:
+                        temp = text.replace(reHighlight, function (s) {
+                            return START_MARKER + s + END_MARKER;
+                        });
                     }
+                    // now we can escape the title...
+                    node.titleWithHighlight = escapeHtml(temp)
+                        // ... and finally insert the desired `<mark>` tags
+                        .replace(RE_START_MARKER, "<mark>")
+                        .replace(RE_END_MARTKER, "</mark>");
+                    // } else {
+                    //   if (opts.fuzzy) {
+                    //     node.titleWithHighlight = _markFuzzyMatchedChars(text, res);
+                    //   } else {
+                    //     node.titleWithHighlight = text.replace(reHighlight, function (s) {
+                    //       return "<mark>" + s + "</mark>";
+                    //     });
+                    //   }
+                    // }
                     // node.debug("filter", escapeTitles, text, node.titleWithHighlight);
                 }
                 return !!res;
@@ -1236,8 +1274,6 @@ class FilterExtension extends WunderbaumExtension {
     }
     /**
      * [ext-filter] Re-apply current filter.
-     *
-     * @requires jquery.fancytree.filter.js
      */
     updateFilter() {
         let tree = this.tree;
@@ -1252,14 +1288,11 @@ class FilterExtension extends WunderbaumExtension {
     }
     /**
      * [ext-filter] Reset the filter.
-     *
-     * @alias Fancytree#clearFilter
-     * @requires jquery.fancytree.filter.js
      */
     clearFilter() {
-        let tree = this.tree, 
+        let tree = this.tree;
         // statusNode = tree.root.findDirectChild(KEY_NODATA),
-        escapeTitles = tree.options.escapeTitles;
+        // escapeTitles = tree.options.escapeTitles;
         // enhanceTitle = tree.options.enhanceTitle,
         tree.enableUpdate(false);
         // if (statusNode) {
@@ -1273,12 +1306,11 @@ class FilterExtension extends WunderbaumExtension {
             if (node.match && node._rowElem) {
                 // #491, #601
                 let titleElem = node._rowElem.querySelector("span.wb-title");
-                if (escapeTitles) {
-                    titleElem.textContent = node.title;
-                }
-                else {
-                    titleElem.innerHTML = node.title;
-                }
+                // if (escapeTitles) {
+                titleElem.textContent = node.title;
+                // } else {
+                //   titleElem.innerHTML = node.title;
+                // }
                 node._callEvent("enhanceTitle", { titleElem: titleElem });
             }
             delete node.match;
@@ -1314,7 +1346,7 @@ class FilterExtension extends WunderbaumExtension {
  * @param {string} text
  * @param {RegExpMatchArray} matches
  */
-function _markFuzzyMatchedChars(text, matches, escapeTitles = false) {
+function _markFuzzyMatchedChars(text, matches, escapeTitles = true) {
     let matchingIndices = [];
     // get the indices of matched characters (Iterate through `RegExpMatchArray`)
     for (let _matchingArrIdx = 1; _matchingArrIdx < matches.length; _matchingArrIdx++) {
@@ -1329,7 +1361,7 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = false) {
     // Map each `text` char to its position and store in `textPoses`.
     let textPoses = text.split("");
     if (escapeTitles) {
-        // If escaping the title, then wrap the matchng char within exotic chars
+        // If escaping the title, then wrap the matching char within exotic chars
         matchingIndices.forEach(function (v) {
             textPoses[v] = START_MARKER + textPoses[v] + END_MARKER;
         });
@@ -1347,7 +1379,7 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = false) {
 /*!
  * Wunderbaum - ext-keynav
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 class KeynavExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1414,7 +1446,7 @@ class KeynavExtension extends WunderbaumExtension {
                         eventName = "Add"; // expand
                     }
                     else if (navModeOption === NavigationModeOption.startRow) {
-                        tree.setCellMode(NavigationMode.cellNav);
+                        tree.setNavigationMode(NavigationMode.cellNav);
                         return;
                     }
                     break;
@@ -1453,6 +1485,8 @@ class KeynavExtension extends WunderbaumExtension {
                 case "Home":
                 case "Control+End":
                 case "Control+Home":
+                case "Meta+ArrowDown":
+                case "Meta+ArrowUp":
                 case "PageDown":
                 case "PageUp":
                     node.navigate(eventName, { activate: activate, event: event });
@@ -1484,11 +1518,11 @@ class KeynavExtension extends WunderbaumExtension {
                     break;
                 case "Escape":
                     if (tree.navMode === NavigationMode.cellEdit) {
-                        tree.setCellMode(NavigationMode.cellNav);
+                        tree.setNavigationMode(NavigationMode.cellNav);
                         handled = true;
                     }
                     else if (tree.navMode === NavigationMode.cellNav) {
-                        tree.setCellMode(NavigationMode.row);
+                        tree.setNavigationMode(NavigationMode.row);
                         handled = true;
                     }
                     break;
@@ -1498,7 +1532,7 @@ class KeynavExtension extends WunderbaumExtension {
                         handled = true;
                     }
                     else if (navModeOption !== NavigationModeOption.cell) {
-                        tree.setCellMode(NavigationMode.row);
+                        tree.setNavigationMode(NavigationMode.row);
                         handled = true;
                     }
                     break;
@@ -1515,6 +1549,8 @@ class KeynavExtension extends WunderbaumExtension {
                 case "Home":
                 case "Control+End":
                 case "Control+Home":
+                case "Meta+ArrowDown":
+                case "Meta+ArrowUp":
                 case "PageDown":
                 case "PageUp":
                     node.navigate(eventName, { activate: activate, event: event });
@@ -1533,7 +1569,7 @@ class KeynavExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-logger
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 class LoggerExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1573,19 +1609,9 @@ class LoggerExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-dnd
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
-const nodeMimeType = "application/x-fancytree-node";
-// type AllowedDropRegionType =
-//   | "after"
-//   | "afterBefore"
-//   // | "afterBeforeOver" // == all == true
-//   | "afterOver"
-//   | "all" // == true
-//   | "before"
-//   | "beforeOver"
-//   | "none" // == false == "" == null
-//   | "over"; // == "child"
+const nodeMimeType = "application/x-wunderbaum-node";
 class DndExtension extends WunderbaumExtension {
     constructor(tree) {
         super(tree, "dnd", {
@@ -1848,10 +1874,181 @@ class DndExtension extends WunderbaumExtension {
     }
 }
 
+/*!
+ * Wunderbaum - drag_observer
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
+ */
+/**
+ * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
+ */
+class DragObserver {
+    constructor(opts) {
+        this.start = {
+            x: 0,
+            y: 0,
+            altKey: false,
+            ctrlKey: false,
+            metaKey: false,
+            shiftKey: false,
+        };
+        this.dragElem = null;
+        this.dragging = false;
+        // TODO: touch events
+        this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
+        assert(opts.root);
+        this.opts = extend({ thresh: 5 }, opts);
+        this.root = opts.root;
+        this._handler = this.handleEvent.bind(this);
+        this.events.forEach((type) => {
+            this.root.addEventListener(type, this._handler);
+        });
+    }
+    /** Unregister all event listeners. */
+    disconnect() {
+        this.events.forEach((type) => {
+            this.root.removeEventListener(type, this._handler);
+        });
+    }
+    getDragElem() {
+        return this.dragElem;
+    }
+    isDragging() {
+        return this.dragging;
+    }
+    stopDrag(cb_event) {
+        if (this.dragging && this.opts.dragstop && cb_event) {
+            cb_event.type = "dragstop";
+            this.opts.dragstop(cb_event);
+        }
+        this.dragElem = null;
+        this.dragging = false;
+    }
+    handleEvent(e) {
+        const type = e.type;
+        const opts = this.opts;
+        const cb_event = {
+            type: e.type,
+            event: e,
+            dragElem: this.dragElem,
+            dx: e.pageX - this.start.x,
+            dy: e.pageY - this.start.y,
+            apply: undefined,
+        };
+        switch (type) {
+            case "keydown":
+                this.stopDrag(cb_event);
+                break;
+            case "mousedown":
+                if (this.dragElem) {
+                    this.stopDrag(cb_event);
+                    break;
+                }
+                if (opts.selector) {
+                    let elem = e.target;
+                    if (elem.matches(opts.selector)) {
+                        this.dragElem = elem;
+                    }
+                    else {
+                        elem = elem.closest(opts.selector);
+                        if (elem) {
+                            this.dragElem = elem;
+                        }
+                        else {
+                            break; // no event delegation selector matched
+                        }
+                    }
+                }
+                this.start.x = e.pageX;
+                this.start.y = e.pageY;
+                this.start.altKey = e.altKey;
+                this.start.ctrlKey = e.ctrlKey;
+                this.start.metaKey = e.metaKey;
+                this.start.shiftKey = e.shiftKey;
+                break;
+            case "mousemove":
+                // TODO: debounce/throttle?
+                // TODO: horizontal mode: ignore if dx unchanged
+                if (!this.dragElem) {
+                    break;
+                }
+                if (!this.dragging) {
+                    if (opts.thresh) {
+                        const dist2 = cb_event.dx * cb_event.dx + cb_event.dy * cb_event.dy;
+                        if (dist2 < opts.thresh * opts.thresh) {
+                            break;
+                        }
+                    }
+                    cb_event.type = "dragstart";
+                    if (opts.dragstart(cb_event) === false) {
+                        this.stopDrag(cb_event);
+                        break;
+                    }
+                    this.dragging = true;
+                }
+                if (this.dragging && this.opts.drag) {
+                    cb_event.type = "drag";
+                    this.opts.drag(cb_event);
+                }
+                break;
+            case "mouseup":
+                if (!this.dragging) {
+                    this.stopDrag(cb_event);
+                    break;
+                }
+                if (e.button === 0) {
+                    cb_event.apply = true;
+                }
+                else {
+                    cb_event.apply = false;
+                }
+                this.stopDrag(cb_event);
+                break;
+        }
+    }
+}
+
+/*!
+ * Wunderbaum - ext-grid
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
+ */
+class GridExtension extends WunderbaumExtension {
+    constructor(tree) {
+        super(tree, "grid", {
+        // throttle: 200,
+        });
+        this.observer = new DragObserver({
+            root: window.document,
+            selector: "span.wb-col-resizer",
+            thresh: 4,
+            // throttle: 400,
+            dragstart: (e) => {
+                return this.tree.element.contains(e.dragElem);
+            },
+            drag: (e) => {
+                // TODO: throttle
+                return this.handleDrag(e);
+            },
+            dragstop: (e) => {
+                return this.handleDrag(e);
+            },
+        });
+    }
+    init() {
+        super.init();
+    }
+    handleDrag(e) {
+        const info = Wunderbaum.getEventInfo(e.event);
+        // this.tree.options.
+        this.tree.log(`${e.type}(${e.dx})`, e, info);
+    }
+}
+
 /*!
  * Wunderbaum - deferred
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Deferred is a ES6 Promise, that exposes the resolve() and reject()` method.
@@ -1894,7 +2091,7 @@ class Deferred {
 /*!
  * Wunderbaum - wunderbaum_node
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 /** Top-level properties that can be passed with `data`. */
 const NODE_PROPS = new Set([
@@ -1931,15 +2128,31 @@ const NODE_ATTRS = new Set([
     "unselectableIgnore",
     "unselectableStatus",
 ]);
+/**
+ * A single tree node.
+ *
+ * **NOTE:** <br>
+ * Generally you should not modify properties directly, since this may break
+ * the internal bookkeeping.
+ */
 class WunderbaumNode {
     constructor(tree, parent, data) {
         var _a, _b;
+        /** Reference key. Unlike {@link key}, a `refKey` may occur multiple
+         * times within a tree (in this case we have 'clone nodes').
+         * @see Use {@link setKey} to modify.
+         */
         this.refKey = undefined;
         this.children = null;
         this.lazy = false;
+        /** Expansion state.
+         * @see {@link isExpandable}, {@link isExpanded}, {@link setExpanded}. */
         this.expanded = false;
+        /** Selection state.
+         * @see {@link isSelected}, {@link setSelected}. */
         this.selected = false;
-        /** Additional classes added to `div.wb-row`. */
+        /** Additional classes added to `div.wb-row`.
+         * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
         this.extraClasses = new Set();
         /** Custom data that was passed to the constructor */
         this.data = {};
@@ -2066,7 +2279,7 @@ class WunderbaumNode {
             //   this.fixSelection3FromEndNodes();
             // }
             // this.triggerModifyChild("add", nodeList.length === 1 ? nodeList[0] : null);
-            this.tree.setModified(ChangeType.structure, this);
+            this.tree.setModified(ChangeType.structure);
             return nodeList[0];
         }
         finally {
@@ -2105,7 +2318,8 @@ class WunderbaumNode {
     }
     /**
      * Apply a modification (or navigation) operation.
-     * @see Wunderbaum#applyCommand
+     *
+     * @see {@link Wunderbaum.applyCommand}
      */
     applyCommand(cmd, opts) {
         return this.tree.applyCommand(cmd, this, opts);
@@ -2198,8 +2412,7 @@ class WunderbaumNode {
     }
     /** Find a node relative to self.
      *
-     * @param where The keyCode that would normally trigger this move,
-     *		or a keyword ('down', 'first', 'last', 'left', 'parent', 'right', 'up').
+     * @see {@link Wunderbaum.findRelatedNode|tree.findRelatedNode()}
      */
     findRelatedNode(where, includeHidden = false) {
         return this.tree.findRelatedNode(this, where, includeHidden);
@@ -2500,7 +2713,7 @@ class WunderbaumNode {
                     assert(!this.parent);
                     tree.columns = data.columns;
                     delete data.columns;
-                    tree.renderHeader();
+                    tree.updateColumns({ calculateCols: false });
                 }
                 this._loadSourceObject(data);
             }
@@ -2536,19 +2749,20 @@ class WunderbaumNode {
                 this.setStatus(NodeStatusType.ok);
                 return;
             }
-            assert(isArray(source) || (source && source.url), "The lazyLoad event must return a node list, `{url: ...}` or false.");
+            assert(isArray(source) || (source && source.url), "The lazyLoad event must return a node list, `{url: ...}`, or false.");
             await this.load(source); // also calls setStatus('ok')
             if (wasExpanded) {
                 this.expanded = true;
-                this.tree.updateViewport();
+                this.tree.setModified(ChangeType.structure);
             }
             else {
-                this.render(); // Fix expander icon to 'loaded'
+                this.setModified(); // Fix expander icon to 'loaded'
             }
         }
         catch (e) {
+            this.logError("Error during loadLazy()", e);
+            this._callEvent("error", { error: e });
             this.setStatus(NodeStatusType.error, "" + e);
-            // } finally {
         }
         return;
     }
@@ -2696,7 +2910,7 @@ class WunderbaumNode {
                 n.tree = targetNode.tree;
             }, true);
         }
-        tree.updateViewport();
+        tree.setModified(ChangeType.structure);
         // TODO: fix selection state
         // TODO: fix active state
     }
@@ -2716,31 +2930,33 @@ class WunderbaumNode {
         // Allow to pass 'ArrowLeft' instead of 'left'
         where = KEY_TO_ACTION_DICT[where] || where;
         // Otherwise activate or focus the related node
-        let node = this.findRelatedNode(where);
-        if (node) {
-            // setFocus/setActive will scroll later (if autoScroll is specified)
-            try {
-                node.makeVisible({ scrollIntoView: false });
-            }
-            catch (e) { } // #272
-            node.setFocus();
-            if ((options === null || options === void 0 ? void 0 : options.activate) === false) {
-                return Promise.resolve(this);
-            }
-            return node.setActive(true, { event: options === null || options === void 0 ? void 0 : options.event });
+        const node = this.findRelatedNode(where);
+        if (!node) {
+            this.logWarn(`Could not find related node '${where}'.`);
+            return Promise.resolve(this);
+        }
+        // setFocus/setActive will scroll later (if autoScroll is specified)
+        try {
+            node.makeVisible({ scrollIntoView: false });
         }
-        this.logWarn("Could not find related node '" + where + "'.");
-        return Promise.resolve(this);
+        catch (e) { } // #272
+        node.setFocus();
+        if ((options === null || options === void 0 ? void 0 : options.activate) === false) {
+            return Promise.resolve(this);
+        }
+        return node.setActive(true, { event: options === null || options === void 0 ? void 0 : options.event });
     }
     /** Delete this node and all descendants. */
     remove() {
         const tree = this.tree;
         const pos = this.parent.children.indexOf(this);
+        this.triggerModify("remove");
         this.parent.children.splice(pos, 1);
         this.visit((n) => {
             n.removeMarkup();
             tree._unregisterNode(n);
         }, true);
+        tree.setModified(ChangeType.structure);
     }
     /** Remove all descendants of this node. */
     removeChildren() {
@@ -2772,7 +2988,7 @@ class WunderbaumNode {
         if (!this.isRootNode()) {
             this.expanded = false;
         }
-        this.tree.updateViewport();
+        this.tree.setModified(ChangeType.structure);
     }
     /** Remove all HTML markup from the DOM. */
     removeMarkup() {
@@ -2865,6 +3081,7 @@ class WunderbaumNode {
         const activeColIdx = tree.navMode === NavigationMode.row ? null : tree.activeColIdx;
         // let colElems: HTMLElement[];
         const isNew = !rowDiv;
+        assert(!isNew || (opts && opts.after), "opts.after expected, unless updating");
         assert(!this.isRootNode());
         //
         let rowClasses = ["wb-row"];
@@ -2916,7 +3133,7 @@ class WunderbaumNode {
                 nodeElem.appendChild(elem);
                 ofsTitlePx += ICON_WIDTH;
             }
-            if (level > treeOptions.minExpandLevel) {
+            if (!treeOptions.minExpandLevel || level > treeOptions.minExpandLevel) {
                 expanderSpan = document.createElement("i");
                 nodeElem.appendChild(expanderSpan);
                 ofsTitlePx += ICON_WIDTH;
@@ -3007,11 +3224,11 @@ class WunderbaumNode {
         if (this.titleWithHighlight) {
             titleSpan.innerHTML = this.titleWithHighlight;
         }
-        else if (tree.options.escapeTitles) {
-            titleSpan.textContent = this.title;
-        }
         else {
-            titleSpan.innerHTML = this.title;
+            // } else if (tree.options.escapeTitles) {
+            titleSpan.textContent = this.title;
+            // } else {
+            //   titleSpan.innerHTML = this.title;
         }
         // Set the width of the title span, so overflow ellipsis work
         if (!treeOptions.skeleton) {
@@ -3045,9 +3262,19 @@ class WunderbaumNode {
             });
         }
         // Attach to DOM as late as possible
-        // if (!this._rowElem) {
-        tree.nodeListElement.appendChild(rowDiv);
-        // }
+        if (isNew) {
+            const after = opts ? opts.after : "last";
+            switch (after) {
+                case "first":
+                    tree.nodeListElement.prepend(rowDiv);
+                    break;
+                case "last":
+                    tree.nodeListElement.appendChild(rowDiv);
+                    break;
+                default:
+                    opts.after.after(rowDiv);
+            }
+        }
     }
     /**
      * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
@@ -3058,7 +3285,7 @@ class WunderbaumNode {
         this.expanded = false;
         this.lazy = true;
         this.children = null;
-        this.tree.updateViewport();
+        this.tree.setModified(ChangeType.structure);
     }
     /** Convert node (or whole branch) into a plain object.
      *
@@ -3121,14 +3348,15 @@ class WunderbaumNode {
      *
      * Evaluation sequence:
      *
-     * If `tree.options.<name>` is a callback that returns something, use that.
-     * Else if `node.<name>` is defined, use that.
-     * Else if `tree.types[<node.type>]` is a value, use that.
-     * Else if `tree.options.<name>` is a value, use that.
-     * Else use `defaultValue`.
+     * - If `tree.options.<name>` is a callback that returns something, use that.
+     * - Else if `node.<name>` is defined, use that.
+     * - Else if `tree.types[<node.type>]` is a value, use that.
+     * - Else if `tree.options.<name>` is a value, use that.
+     * - Else use `defaultValue`.
      *
      * @param name name of the option property (on node and tree)
      * @param defaultValue return this if nothing else matched
+     * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
      */
     getOption(name, defaultValue) {
         let tree = this.tree;
@@ -3163,15 +3391,21 @@ class WunderbaumNode {
         // Use value from value options dict, fallback do default
         return value !== null && value !== void 0 ? value : defaultValue;
     }
+    /** Make sure that this node is visible in the viewport.
+     * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
+     */
     async scrollIntoView(options) {
         return this.tree.scrollTo(this);
     }
+    /**
+     * Activate this node, deactivate previous, send events, activate column and scroll int viewport.
+     */
     async setActive(flag = true, options) {
         const tree = this.tree;
         const prev = tree.activeNode;
         const retrigger = options === null || options === void 0 ? void 0 : options.retrigger;
-        const noEvent = options === null || options === void 0 ? void 0 : options.noEvent;
-        if (!noEvent) {
+        const noEvents = options === null || options === void 0 ? void 0 : options.noEvents;
+        if (!noEvents) {
             let orgEvent = options === null || options === void 0 ? void 0 : options.event;
             if (flag) {
                 if (prev !== this || retrigger) {
@@ -3186,7 +3420,7 @@ class WunderbaumNode {
                         orgEvent: orgEvent,
                     }) === false) {
                         tree.activeNode = null;
-                        prev === null || prev === void 0 ? void 0 : prev.setDirty(ChangeType.status);
+                        prev === null || prev === void 0 ? void 0 : prev.setModified();
                         return;
                     }
                 }
@@ -3197,8 +3431,8 @@ class WunderbaumNode {
         }
         if (prev !== this) {
             tree.activeNode = this;
-            prev === null || prev === void 0 ? void 0 : prev.setDirty(ChangeType.status);
-            this.setDirty(ChangeType.status);
+            prev === null || prev === void 0 ? void 0 : prev.setModified();
+            this.setModified();
         }
         if (options &&
             options.colIdx != null &&
@@ -3209,57 +3443,62 @@ class WunderbaumNode {
         // requestAnimationFrame(() => {
         //   this.scrollIntoView();
         // })
-        this.scrollIntoView();
-    }
-    setDirty(type) {
-        if (this.tree._disableUpdate) {
-            return;
-        }
-        if (type === ChangeType.structure) {
-            this.tree.updateViewport();
-        }
-        else if (this._rowElem) {
-            // otherwise not in viewport, so no need to render
-            this.render();
-        }
+        return this.scrollIntoView();
     }
+    /**
+     * Expand or collapse this node.
+     */
     async setExpanded(flag = true, options) {
         // alert("" + this.getLevel() + ", "+ this.getOption("minExpandLevel");
         if (!flag &&
             this.isExpanded() &&
             this.getLevel() < this.getOption("minExpandLevel") &&
             !getOption(options, "force")) {
-            this.logDebug("Ignored collapse request.");
+            this.logDebug("Ignored collapse request below expandLevel.");
             return;
         }
         if (flag && this.lazy && this.children == null) {
             await this.loadLazy();
         }
         this.expanded = flag;
-        this.setDirty(ChangeType.structure);
-    }
-    setIcon() {
-        throw new Error("Not yet implemented");
-        // this.setDirty(ChangeType.status);
+        this.tree.setModified(ChangeType.structure);
     }
+    /**
+     * Set keyboard focus here.
+     * @see {@link setActive}
+     */
     setFocus(flag = true, options) {
         const prev = this.tree.focusNode;
         this.tree.focusNode = this;
-        prev === null || prev === void 0 ? void 0 : prev.setDirty(ChangeType.status);
-        this.setDirty(ChangeType.status);
+        prev === null || prev === void 0 ? void 0 : prev.setModified();
+        this.setModified();
     }
+    /** Set a new icon path or class. */
+    setIcon() {
+        throw new Error("Not yet implemented");
+        // this.setModified();
+    }
+    /** Change node's {@link key} and/or {@link refKey}.  */
+    setKey(key, refKey) {
+        throw new Error("Not yet implemented");
+    }
+    /** Schedule a render, typically called to update after a status or data change. */
+    setModified(change = ChangeType.status) {
+        assert(change === ChangeType.status);
+        this.tree.setModified(ChangeType.row, this);
+    }
+    /** Modify the check/uncheck state. */
     setSelected(flag = true, options) {
         const prev = this.selected;
         if (!!flag !== prev) {
             this._callEvent("select", { flag: flag });
         }
         this.selected = !!flag;
-        this.setDirty(ChangeType.status);
+        this.setModified();
     }
-    /** Show node status (ok, loading, error, noData) using styles and a dummy child node.
-     */
+    /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
     setStatus(status, message, details) {
-        let tree = this.tree;
+        const tree = this.tree;
         let statusNode = null;
         const _clearStatusNode = () => {
             // Remove dedicated dummy node, if any
@@ -3330,12 +3569,13 @@ class WunderbaumNode {
             default:
                 error("invalid node status " + status);
         }
-        tree.updateViewport();
+        tree.setModified(ChangeType.structure);
         return statusNode;
     }
+    /** Rename this node. */
     setTitle(title) {
         this.title = title;
-        this.setDirty(ChangeType.status);
+        this.setModified();
         // this.triggerModify("rename"); // TODO
     }
     /**
@@ -3356,10 +3596,16 @@ class WunderbaumNode {
      * @param {object} [extra]
      */
     triggerModify(operation, extra) {
+        if (!this.parent) {
+            return;
+        }
         this.parent.triggerModifyChild(operation, this, extra);
     }
-    /** Call fn(node) for all child nodes in hierarchical order (depth-first).<br>
-     * Stop iteration, if fn() returns false. Skip current branch, if fn() returns "skip".<br>
+    /**
+     * Call fn(node) for all child nodes in hierarchical order (depth-first).
+     *
+     * Stop iteration, if fn() returns false. Skip current branch, if fn()
+     * returns "skip".<br>
      * Return false if iteration was stopped.
      *
      * @param {function} callback the callback function.
@@ -3403,7 +3649,8 @@ class WunderbaumNode {
         }
         return true;
     }
-    /** Call fn(node) for all sibling nodes.<br>
+    /**
+     * Call fn(node) for all sibling nodes.<br>
      * Stop iteration, if fn() returns false.<br>
      * Return false if iteration was stopped.
      *
@@ -3434,7 +3681,7 @@ WunderbaumNode.sequence = 0;
 /*!
  * Wunderbaum - ext-edit
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
  */
 // const START_MARKER = "\uFFF7";
 class EditExtension extends WunderbaumExtension {
@@ -3552,7 +3799,7 @@ class EditExtension extends WunderbaumExtension {
                     break;
                 case "F2":
                     if (trigger.indexOf("F2") >= 0) {
-                        // tree.setCellMode(NavigationMode.cellEdit);
+                        // tree.setNavigationMode(NavigationMode.cellEdit);
                         this.startEditTitle();
                         return false;
                     }
@@ -3593,6 +3840,7 @@ class EditExtension extends WunderbaumExtension {
         if (validity) {
             // Permanently apply  input validations (CSS and tooltip)
             inputElem.addEventListener("keydown", (e) => {
+                inputElem.setCustomValidity("");
                 if (!inputElem.reportValidity()) ;
             });
         }
@@ -3633,6 +3881,11 @@ class EditExtension extends WunderbaumExtension {
         }
         node.logDebug(`stopEditTitle(${apply})`, opts, focusElem, newValue);
         if (apply && newValue !== null && newValue !== node.title) {
+            const errMsg = focusElem.validationMessage;
+            if (errMsg) {
+                // input element's native validation failed
+                throw new Error(`Input validation failed for "${newValue}": ${errMsg}.`);
+            }
             const colElem = node.getColElem(0);
             this._applyChange("edit.apply", node, colElem, {
                 oldValue: node.title,
@@ -3719,12 +3972,12 @@ class EditExtension extends WunderbaumExtension {
  * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
  * Released under the MIT license.
  *
- * @version v0.0.1-0
- * @date Thu, 31 Mar 2022 10:19:39 GMT
+ * @version v0.0.3
+ * @date Mon, 18 Apr 2022 11:52:44 GMT
  */
 // const class_prefix = "wb-";
 // const node_props: string[] = ["title", "key", "refKey"];
-const MAX_CHANGED_NODES = 10;
+// const MAX_CHANGED_NODES = 10;
 /**
  * A persistent plain object or array.
  *
@@ -3736,36 +3989,43 @@ class Wunderbaum {
         this.extensions = {};
         this.keyMap = new Map();
         this.refKeyMap = new Map();
-        this.viewNodes = new Set();
-        // protected rows: WunderbaumNode[] = [];
-        // protected _rowCount = 0;
+        // protected viewNodes = new Set<WunderbaumNode>();
+        this.treeRowCount = 0;
+        this._disableUpdateCount = 0;
         // protected eventHandlers : Array<function> = [];
+        /** Currently active node if any. */
         this.activeNode = null;
+        /** Current node hat has keyboard focus if any. */
         this.focusNode = null;
-        this._disableUpdate = 0;
-        this._disableUpdateCount = 0;
         /** Shared properties, referenced by `node.type`. */
         this.types = {};
         /** List of column definitions. */
         this.columns = [];
         this._columnsById = {};
         // Modification Status
-        this.changedSince = 0;
-        this.changes = new Set();
-        this.changedNodes = new Set();
+        // protected changedSince = 0;
+        // protected changes = new Set<ChangeType>();
+        // protected changedNodes = new Set<WunderbaumNode>();
+        this.changeRedrawRequestPending = false;
+        /** Expose some useful methods of the util.ts module as `tree._util`. */
+        this._util = util;
         // --- FILTER ---
         this.filterMode = null;
         // --- KEYNAV ---
+        /** @internal Use `setColumn()`/`getActiveColElem()`*/
         this.activeColIdx = 0;
+        /** @internal */
         this.navMode = NavigationMode.row;
+        /** @internal */
         this.lastQuicksearchTime = 0;
+        /** @internal */
         this.lastQuicksearchTerm = "";
         // --- EDIT ---
         this.lastClickTime = 0;
-        // TODO: make accessible in compiled JS like this?
-        this._util = util;
-        /** Alias for `logDebug` */
-        this.log = this.logDebug; // Alias
+        /** Alias for {@link Wunderbaum.logDebug}.
+         * @alias Wunderbaum.logDebug
+         */
+        this.log = this.logDebug;
         let opts = (this.options = extend({
             id: null,
             source: null,
@@ -3776,7 +4036,7 @@ class Wunderbaum {
             rowHeightPx: ROW_HEIGHT,
             columns: null,
             types: null,
-            escapeTitles: true,
+            // escapeTitles: true,
             showSpinner: false,
             checkbox: true,
             minExpandLevel: 0,
@@ -3833,6 +4093,7 @@ class Wunderbaum {
         this._registerExtension(new EditExtension(this));
         this._registerExtension(new FilterExtension(this));
         this._registerExtension(new DndExtension(this));
+        this._registerExtension(new GridExtension(this));
         this._registerExtension(new LoggerExtension(this));
         // --- Evaluate options
         this.columns = opts.columns;
@@ -3926,11 +4187,9 @@ class Wunderbaum {
                 var _a;
                 (_a = this.element.querySelector("progress.spinner")) === null || _a === void 0 ? void 0 : _a.remove();
                 this.element.classList.remove("wb-initializing");
-                // this.updateViewport();
             });
         }
         else {
-            // this.updateViewport();
             readyDeferred.resolve();
         }
         // TODO: This is sometimes required, because this.element.clientWidth
@@ -3940,13 +4199,10 @@ class Wunderbaum {
         }, 50);
         // --- Bind listeners
         this.scrollContainer.addEventListener("scroll", (e) => {
-            this.updateViewport();
+            this.setModified(ChangeType.vscroll);
         });
-        // window.addEventListener("resize", (e: Event) => {
-        //   this.updateViewport();
-        // });
         this.resizeObserver = new ResizeObserver((entries) => {
-            this.updateViewport();
+            this.setModified(ChangeType.vscroll);
             console.log("ResizeObserver: Size changed", entries);
         });
         this.resizeObserver.observe(this.element);
@@ -4003,37 +4259,18 @@ class Wunderbaum {
                     forceClose: true,
                 });
             }
-            // if (flag && !this.activeNode ) {
-            //   setTimeout(() => {
-            //     if (!this.activeNode) {
-            //       const firstNode = this.getFirstChild();
-            //       if (firstNode && !firstNode?.isStatusNode()) {
-            //         firstNode.logInfo("Activate on focus", e);
-            //         firstNode.setActive(true, { event: e });
-            //       }
-            //     }
-            //   }, 10);
-            // }
         });
     }
-    /** */
-    // _renderHeader(){
-    //   const coldivs = "<span class='wb-col'></span>".repeat(this.columns.length);
-    //   this.element.innerHTML = `
-    //     <div class='wb-header'>
-    //       <div class='wb-row'>
-    //         ${coldivs}
-    //       </div>
-    //     </div>`;
-    // }
-    /** Return a Wunderbaum instance, from element, index, or event.
+    /**
+     * Return a Wunderbaum instance, from element, id, index, or event.
      *
-     * @example
-     * getTree();  // Get first Wunderbaum instance on page
-     * getTree(1);  // Get second Wunderbaum instance on page
-     * getTree(event);  // Get tree for this mouse- or keyboard event
-     * getTree("foo");  // Get tree for this `tree.options.id`
+     * ```js
+     * getTree();         // Get first Wunderbaum instance on page
+     * getTree(1);        // Get second Wunderbaum instance on page
+     * getTree(event);    // Get tree for this mouse- or keyboard event
+     * getTree("foo");    // Get tree for this `tree.options.id`
      * getTree("#tree");  // Get tree for this matching element
+     * ```
      */
     static getTree(el) {
         if (el instanceof Wunderbaum) {
@@ -4074,9 +4311,8 @@ class Wunderbaum {
         }
         return null;
     }
-    /** Return a WunderbaumNode instance from element, event.
-     *
-     * @param  el
+    /**
+     * Return a WunderbaumNode instance from element or event.
      */
     static getNode(el) {
         if (!el) {
@@ -4098,7 +4334,7 @@ class Wunderbaum {
         }
         return null;
     }
-    /** */
+    /** @internal */
     _registerExtension(extension) {
         this.extensionList.push(extension);
         this.extensions[extension.id] = extension;
@@ -4140,7 +4376,7 @@ class Wunderbaum {
         node.tree = null;
         node.parent = null;
         // node.title = "DISPOSED: " + node.title
-        this.viewNodes.delete(node);
+        // this.viewNodes.delete(node);
         node.removeMarkup();
     }
     /** Call all hook methods of all registered extensions.*/
@@ -4158,7 +4394,9 @@ class Wunderbaum {
         }
         return res;
     }
-    /** Call tree method or extension method if defined.
+    /**
+     * Call tree method or extension method if defined.
+     *
      * Example:
      * ```js
      * tree._callMethod("edit.startEdit", "arg1", "arg2")
@@ -4175,7 +4413,9 @@ class Wunderbaum {
             this.logError(`Calling undefined method '${name}()'.`);
         }
     }
-    /** Call event handler if defined in tree.options.
+    /**
+     * Call event handler if defined in tree or tree.EXTENSION options.
+     *
      * Example:
      * ```js
      * tree._callEvent("edit.beforeEdit", {foo: 42})
@@ -4191,27 +4431,33 @@ class Wunderbaum {
             //   this.logError(`Triggering undefined event '${name}'.`)
         }
     }
-    /** Return the topmost visible node in the viewport */
-    _firstNodeInView(complete = true) {
-        let topIdx, node;
-        if (complete) {
-            topIdx = Math.ceil(this.scrollContainer.scrollTop / ROW_HEIGHT);
-        }
-        else {
-            topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
-        }
+    /** Return the node for  given row index. */
+    _getNodeByRowIdx(idx) {
         // TODO: start searching from active node (reverse)
+        let node = null;
         this.visitRows((n) => {
-            if (n._rowIdx === topIdx) {
+            if (n._rowIdx === idx) {
                 node = n;
                 return false;
             }
         });
         return node;
     }
-    /** Return the lowest visible node in the viewport */
+    /** Return the topmost visible node in the viewport. */
+    _firstNodeInView(complete = true) {
+        let topIdx;
+        const gracePy = 1; // ignore subpixel scrolling
+        if (complete) {
+            topIdx = Math.ceil((this.scrollContainer.scrollTop - gracePy) / ROW_HEIGHT);
+        }
+        else {
+            topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
+        }
+        return this._getNodeByRowIdx(topIdx);
+    }
+    /** Return the lowest visible node in the viewport. */
     _lastNodeInView(complete = true) {
-        let bottomIdx, node;
+        let bottomIdx;
         if (complete) {
             bottomIdx =
                 Math.floor((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
@@ -4222,16 +4468,10 @@ class Wunderbaum {
                 Math.ceil((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
                     ROW_HEIGHT) - 1;
         }
-        // TODO: start searching from active node
-        this.visitRows((n) => {
-            if (n._rowIdx === bottomIdx) {
-                node = n;
-                return false;
-            }
-        });
-        return node;
+        bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
+        return this._getNodeByRowIdx(bottomIdx);
     }
-    /** Return preceeding visible node in the viewport */
+    /** Return preceeding visible node in the viewport. */
     _getPrevNodeInView(node, ofs = 1) {
         this.visitRows((n) => {
             node = n;
@@ -4241,7 +4481,7 @@ class Wunderbaum {
         }, { reverse: true, start: node || this.getActiveNode() });
         return node;
     }
-    /** Return following visible node in the viewport */
+    /** Return following visible node in the viewport. */
     _getNextNodeInView(node, ofs = 1) {
         this.visitRows((n) => {
             node = n;
@@ -4251,10 +4491,15 @@ class Wunderbaum {
         }, { reverse: false, start: node || this.getActiveNode() });
         return node;
     }
+    /**
+     * Append (or insert) a list of toplevel nodes.
+     *
+     * @see {@link WunderbaumNode.addChildren}
+     */
     addChildren(nodeData, options) {
         return this.root.addChildren(nodeData, options);
     }
-    /*
+    /**
      * Apply a modification or navigation operation.
      *
      * Most of these commands simply map to a node or tree method.
@@ -4379,16 +4624,17 @@ class Wunderbaum {
         this.root.children = null;
         this.keyMap.clear();
         this.refKeyMap.clear();
-        this.viewNodes.clear();
+        // this.viewNodes.clear();
+        this.treeRowCount = 0;
         this.activeNode = null;
         this.focusNode = null;
         // this.types = {};
         // this. columns =[];
         // this._columnsById = {};
         // Modification Status
-        this.changedSince = 0;
-        this.changes.clear();
-        this.changedNodes.clear();
+        // this.changedSince = 0;
+        // this.changes.clear();
+        // this.changedNodes.clear();
         // // --- FILTER ---
         // public filterMode: FilterModeType = null;
         // // --- KEYNAV ---
@@ -4396,7 +4642,7 @@ class Wunderbaum {
         // public cellNavMode = false;
         // public lastQuicksearchTime = 0;
         // public lastQuicksearchTerm = "";
-        this.updateViewport();
+        this.setModified(ChangeType.structure);
     }
     /**
      * Clear nodes and markup and detach events and observers.
@@ -4416,10 +4662,11 @@ class Wunderbaum {
     /**
      * Return `tree.option.NAME` (also resolving if this is a callback).
      *
-     * See also [[WunderbaumNode.getOption()]] to consider `node.NAME` setting and
-     * `tree.types[node.type].NAME`.
+     * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
+     * to consider `node.NAME` setting and `tree.types[node.type].NAME`.
      *
-     * @param name option name (use dot notation to access extension option, e.g. `filter.mode`)
+     * @param name option name (use dot notation to access extension option, e.g.
+     * `filter.mode`)
      */
     getOption(name, defaultValue) {
         let ext;
@@ -4463,18 +4710,14 @@ class Wunderbaum {
     }
     /** Run code, but defer `updateViewport()` until done. */
     runWithoutUpdate(func, hint = null) {
-        // const prev = this._disableUpdate;
-        // const start = Date.now();
-        // this._disableUpdate = Date.now();
         try {
             this.enableUpdate(false);
-            return func();
+            const res = func();
+            assert(!(res instanceof Promise));
+            return res;
         }
         finally {
             this.enableUpdate(true);
-            // if (!prev && this._disableUpdate === start) {
-            //   this._disableUpdate = 0;
-            // }
         }
     }
     /** Recursively expand all expandable nodes (triggers lazy load id needed). */
@@ -4492,11 +4735,12 @@ class Wunderbaum {
     /** Return the number of nodes in the data model.*/
     count(visible = false) {
         if (visible) {
-            return this.viewNodes.size;
+            return this.treeRowCount;
+            // return this.viewNodes.size;
         }
         return this.keyMap.size;
     }
-    /* Internal sanity check. */
+    /** @internal sanity check. */
     _check() {
         let i = 0;
         this.visit((n) => {
@@ -4507,25 +4751,30 @@ class Wunderbaum {
         }
         // util.assert(this.keyMap.size === i);
     }
-    /**Find all nodes that matches condition.
+    /**
+     * Find all nodes that matches condition.
      *
      * @param match title string to search for, or a
      *     callback function that returns `true` if a node is matched.
-     * @see [[WunderbaumNode.findAll]]
+     *
+     * @see {@link WunderbaumNode.findAll}
      */
     findAll(match) {
         return this.root.findAll(match);
     }
-    /**Find first node that matches condition.
+    /**
+     * Find first node that matches condition.
      *
      * @param match title string to search for, or a
      *     callback function that returns `true` if a node is matched.
-     * @see [[WunderbaumNode.findFirst]]
+     * @see {@link WunderbaumNode.findFirst}
+     *
      */
     findFirst(match) {
         return this.root.findFirst(match);
     }
-    /** Find the next visible node that starts with `match`, starting at `startNode`
+    /**
+     * Find the next visible node that starts with `match`, starting at `startNode`
      * and wrap-around at the end.
      */
     findNextNode(match, startNode) {
@@ -4555,7 +4804,8 @@ class Wunderbaum {
         }
         return res;
     }
-    /** Find a node relative to another node.
+    /**
+     * Find a node relative to another node.
      *
      * @param node
      * @param where 'down', 'first', 'last', 'left', 'parent', 'right', or 'up'.
@@ -4565,7 +4815,7 @@ class Wunderbaum {
      */
     findRelatedNode(node, where, includeHidden = false) {
         let res = null;
-        let pageSize = Math.floor(this.scrollContainer.clientHeight / ROW_HEIGHT);
+        const pageSize = Math.floor(this.scrollContainer.clientHeight / ROW_HEIGHT);
         switch (where) {
             case "parent":
                 if (node.parent && node.parent.parent) {
@@ -4621,9 +4871,9 @@ class Wunderbaum {
                 res = this._getNextNodeInView(node);
                 break;
             case "pageDown":
-                let bottomNode = this._lastNodeInView();
-                // this.logDebug(where, this.focusNode, bottomNode);
-                if (this.focusNode !== bottomNode) {
+                const bottomNode = this._lastNodeInView();
+                // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
+                if (node._rowIdx < bottomNode._rowIdx) {
                     res = bottomNode;
                 }
                 else {
@@ -4631,12 +4881,13 @@ class Wunderbaum {
                 }
                 break;
             case "pageUp":
-                if (this.focusNode && this.focusNode._rowIdx === 0) {
-                    res = this.focusNode;
+                if (node._rowIdx === 0) {
+                    res = node;
                 }
                 else {
-                    let topNode = this._firstNodeInView();
-                    if (this.focusNode !== topNode) {
+                    const topNode = this._firstNodeInView();
+                    // this.logDebug(`${where}(${node}) -> ${topNode}`);
+                    if (node._rowIdx > topNode._rowIdx) {
                         res = topNode;
                     }
                     else {
@@ -4650,7 +4901,7 @@ class Wunderbaum {
         return res;
     }
     /**
-     * Return the active cell of the currently active node or null.
+     * Return the active cell (`span.wb-col`) of the currently active node or null.
      */
     getActiveColElem() {
         if (this.activeNode && this.activeColIdx >= 0) {
@@ -4664,8 +4915,8 @@ class Wunderbaum {
     getActiveNode() {
         return this.activeNode;
     }
-    /** Return the first top level node if any (not the invisible root node).
-     * @returns {FancytreeNode | null}
+    /**
+     * Return the first top level node if any (not the invisible root node).
      */
     getFirstChild() {
         return this.root.getFirstChild();
@@ -4676,14 +4927,15 @@ class Wunderbaum {
     getFocusNode() {
         return this.focusNode;
     }
-    /** Return a {node: FancytreeNode, region: TYPE} object for a mouse event.
+    /** Return a {node: WunderbaumNode, region: TYPE} object for a mouse event.
      *
      * @param {Event} event Mouse event, e.g. click, ...
-     * @returns {object} Return a {node: FancytreeNode, region: TYPE} object
+     * @returns {object} Return a {node: WunderbaumNode, region: TYPE} object
      *     TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
      */
     static getEventInfo(event) {
-        let target = event.target, cl = target.classList, parentCol = target.closest(".wb-col"), node = Wunderbaum.getNode(target), res = {
+        let target = event.target, cl = target.classList, parentCol = target.closest("span.wb-col"), node = Wunderbaum.getNode(target), tree = node ? node.tree : Wunderbaum.getTree(event), res = {
+            tree: tree,
             node: node,
             region: TargetType.unknown,
             colDef: undefined,
@@ -4715,13 +4967,15 @@ class Wunderbaum {
         }
         else {
             // Somewhere near the title
-            console.warn("getEventInfo(): not found", event, res);
+            if (event.type !== "mousemove" && !(event instanceof KeyboardEvent)) {
+                console.warn("getEventInfo(): not found", event, res);
+            }
             return res;
         }
         if (res.colIdx === -1) {
             res.colIdx = 0;
         }
-        res.colDef = node.tree.columns[res.colIdx];
+        res.colDef = tree === null || tree === void 0 ? void 0 : tree.columns[res.colIdx];
         res.colDef != null ? (res.colId = res.colDef.id) : 0;
         // this.log("Event", event, res);
         return res;
@@ -4745,7 +4999,8 @@ class Wunderbaum {
     isEditing() {
         return this._callMethod("edit.isEditingTitle");
     }
-    /** Return true if any node is currently beeing loaded, i.e. a Ajax request is pending.
+    /**
+     * Return true if any node is currently beeing loaded, i.e. a Ajax request is pending.
      */
     isLoading() {
         var res = false;
@@ -4772,7 +5027,7 @@ class Wunderbaum {
             console.error.apply(console, args);
         }
     }
-    /* Log to console if opts.debugLevel >= 3 */
+    /** Log to console if opts.debugLevel >= 3 */
     logInfo(...args) {
         if (this.options.debugLevel >= 3) {
             Array.prototype.unshift.call(args, this.toString());
@@ -4799,77 +5054,13 @@ class Wunderbaum {
             console.warn.apply(console, args);
         }
     }
-    /** */
-    render(opts) {
-        const label = this.logTime("render");
-        let idx = 0;
-        let top = 0;
-        const height = ROW_HEIGHT;
-        let modified = false;
-        let start = opts === null || opts === void 0 ? void 0 : opts.startIdx;
-        let end = opts === null || opts === void 0 ? void 0 : opts.endIdx;
-        const obsoleteViewNodes = this.viewNodes;
-        this.viewNodes = new Set();
-        let viewNodes = this.viewNodes;
-        // this.debug("render", opts);
-        assert(start != null && end != null);
-        // Make sure start is always even, so the alternating row colors don't
-        // change when scrolling:
-        if (start % 2) {
-            start--;
-        }
-        this.visitRows(function (node) {
-            const prevIdx = node._rowIdx;
-            viewNodes.add(node);
-            obsoleteViewNodes.delete(node);
-            if (prevIdx !== idx) {
-                node._rowIdx = idx;
-                modified = true;
-            }
-            if (idx < start || idx > end) {
-                node._callEvent("discard");
-                node.removeMarkup();
-            }
-            else {
-                // if (!node._rowElem || prevIdx != idx) {
-                node.render({ top: top });
-            }
-            idx++;
-            top += height;
-        });
-        for (const prevNode of obsoleteViewNodes) {
-            prevNode._callEvent("discard");
-            prevNode.removeMarkup();
-        }
-        // Resize tree container
-        this.nodeListElement.style.height = "" + top + "px";
-        // this.log("render()", this.nodeListElement.style.height);
-        this.logTimeEnd(label);
-        return modified;
-    }
-    /**Recalc and apply header columns from `this.columns`. */
-    renderHeader() {
-        if (!this.headerElement) {
-            return;
-        }
-        const headerRow = this.headerElement.querySelector(".wb-row");
-        assert(headerRow);
-        headerRow.innerHTML = "<span class='wb-col'></span>".repeat(this.columns.length);
-        for (let i = 0; i < this.columns.length; i++) {
-            let col = this.columns[i];
-            let colElem = headerRow.children[i];
-            colElem.style.left = col._ofsPx + "px";
-            colElem.style.width = col._widthPx + "px";
-            colElem.textContent = col.title || col.id;
-        }
-    }
     /**
+     * Make sure that this node is scrolled into the viewport.
      *
      * @param {boolean | PlainObject} [effects=false] animation options.
      * @param {object} [options=null] {topNode: null, effects: ..., parent: ...}
      *     this node will remain visible in
      *     any case, even if `this` is outside the scroll pane.
-     * Make sure that a node is scrolled into the viewport.
      */
     scrollTo(opts) {
         const MARGIN = 1;
@@ -4890,30 +5081,18 @@ class Wunderbaum {
             // Node is above viewport
             newTop = nodeOfs + MARGIN;
         }
-        this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
         if (newTop != null) {
+            this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
             this.scrollContainer.scrollTop = newTop;
-            this.updateViewport();
-        }
-    }
-    /** */
-    setCellMode(mode) {
-        // util.assert(this.cellNavMode);
-        // util.assert(0 <= colIdx && colIdx < this.columns.length);
-        if (mode === this.navMode) {
-            return;
-        }
-        const prevMode = this.navMode;
-        const cellMode = mode !== NavigationMode.row;
-        this.navMode = mode;
-        if (cellMode && prevMode === NavigationMode.row) {
-            this.setColumn(0);
+            this.setModified(ChangeType.vscroll);
         }
-        this.element.classList.toggle("wb-cell-mode", cellMode);
-        this.element.classList.toggle("wb-cell-edit-mode", mode === NavigationMode.cellEdit);
-        this.setModified(ChangeType.row, this.activeNode);
     }
-    /** */
+    /**
+     * Set column #colIdx to 'active'.
+     *
+     * This higlights the column header and -cells by adding the `wb-active` class.
+     * Available in cell-nav and cell-edit mode, not in row-mode.
+     */
     setColumn(colIdx) {
         assert(this.navMode !== NavigationMode.row);
         assert(0 <= colIdx && colIdx < this.columns.length);
@@ -4938,7 +5117,7 @@ class Wunderbaum {
             }
         }
     }
-    /** */
+    /** Set or remove keybaord focus to the tree container. */
     setFocus(flag = true) {
         if (flag) {
             this.element.focus();
@@ -4947,88 +5126,145 @@ class Wunderbaum {
             this.element.blur();
         }
     }
-    /** */
     setModified(change, node, options) {
-        if (!this.changedSince) {
-            this.changedSince = Date.now();
+        if (this._disableUpdateCount) {
+            // Assuming that we redraw all when enableUpdate() is re-enabled.
+            // this.log(
+            //   `IGNORED setModified(${change}) node=${node} (disable level ${this._disableUpdateCount})`
+            // );
+            return;
         }
-        this.changes.add(change);
-        if (change === ChangeType.structure) {
-            this.changedNodes.clear();
+        // this.log(`setModified(${change}) node=${node}`);
+        if (!(node instanceof WunderbaumNode)) {
+            options = node;
+        }
+        const immediate = !!getOption(options, "immediate");
+        switch (change) {
+            case ChangeType.any:
+            case ChangeType.structure:
+            case ChangeType.header:
+                this.changeRedrawRequestPending = true;
+                this.updateViewport(immediate);
+                break;
+            case ChangeType.vscroll:
+                this.updateViewport(immediate);
+                break;
+            case ChangeType.row:
+            case ChangeType.status:
+                // Single nodes are immedialtely updated if already inside the viewport
+                // (otherwise we can ignore)
+                if (node._rowElem) {
+                    node.render();
+                }
+                break;
+            default:
+                error(`Invalid change type ${change}`);
         }
-        else if (node && !this.changes.has(ChangeType.structure)) {
-            if (this.changedNodes.size < MAX_CHANGED_NODES) {
-                this.changedNodes.add(node);
-            }
-            else {
-                this.changes.add(ChangeType.structure);
-                this.changedNodes.clear();
-            }
+    }
+    /** Set the tree's navigation mode. */
+    setNavigationMode(mode) {
+        // util.assert(this.cellNavMode);
+        // util.assert(0 <= colIdx && colIdx < this.columns.length);
+        if (mode === this.navMode) {
+            return;
         }
-        // this.log("setModified(" + change + ")", node);
+        const prevMode = this.navMode;
+        const cellMode = mode !== NavigationMode.row;
+        this.navMode = mode;
+        if (cellMode && prevMode === NavigationMode.row) {
+            this.setColumn(0);
+        }
+        this.element.classList.toggle("wb-cell-mode", cellMode);
+        this.element.classList.toggle("wb-cell-edit-mode", mode === NavigationMode.cellEdit);
+        this.setModified(ChangeType.row, this.activeNode);
     }
+    /** Display tree status (ok, loading, error, noData) using styles and a dummy root node. */
     setStatus(status, message, details) {
         return this.root.setStatus(status, message, details);
     }
     /** Update column headers and width. */
     updateColumns(opts) {
-        let modified = false;
-        let minWidth = 4;
-        let vpWidth = this.element.clientWidth;
+        opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
+        const minWidth = 4;
+        const vpWidth = this.element.clientWidth;
         let totalWeight = 0;
         let fixedWidth = 0;
-        // Gather width requests
-        this._columnsById = {};
-        for (let col of this.columns) {
-            this._columnsById[col.id] = col;
-            let cw = col.width;
-            if (!cw || cw === "*") {
-                col._weight = 1.0;
-                totalWeight += 1.0;
-            }
-            else if (typeof cw === "number") {
-                col._weight = cw;
-                totalWeight += cw;
-            }
-            else if (typeof cw === "string" && cw.endsWith("px")) {
-                col._weight = 0;
-                let px = parseFloat(cw.slice(0, -2));
-                if (col._widthPx != px) {
-                    modified = true;
-                    col._widthPx = px;
+        let modified = false;
+        if (opts.calculateCols) {
+            // Gather width requests
+            this._columnsById = {};
+            for (let col of this.columns) {
+                this._columnsById[col.id] = col;
+                let cw = col.width;
+                if (!cw || cw === "*") {
+                    col._weight = 1.0;
+                    totalWeight += 1.0;
+                }
+                else if (typeof cw === "number") {
+                    col._weight = cw;
+                    totalWeight += cw;
+                }
+                else if (typeof cw === "string" && cw.endsWith("px")) {
+                    col._weight = 0;
+                    let px = parseFloat(cw.slice(0, -2));
+                    if (col._widthPx != px) {
+                        modified = true;
+                        col._widthPx = px;
+                    }
+                    fixedWidth += px;
+                }
+                else {
+                    error("Invalid column width: " + cw);
                 }
-                fixedWidth += px;
             }
-            else {
-                error("Invalid column width: " + cw);
-            }
-        }
-        // Share remaining space between non-fixed columns
-        let restPx = Math.max(0, vpWidth - fixedWidth);
-        let ofsPx = 0;
-        for (let col of this.columns) {
-            if (col._weight) {
-                let px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
-                if (col._widthPx != px) {
-                    modified = true;
-                    col._widthPx = px;
+            // Share remaining space between non-fixed columns
+            const restPx = Math.max(0, vpWidth - fixedWidth);
+            let ofsPx = 0;
+            for (let col of this.columns) {
+                if (col._weight) {
+                    const px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
+                    if (col._widthPx != px) {
+                        modified = true;
+                        col._widthPx = px;
+                    }
                 }
+                col._ofsPx = ofsPx;
+                ofsPx += col._widthPx;
             }
-            col._ofsPx = ofsPx;
-            ofsPx += col._widthPx;
         }
         // Every column has now a calculated `_ofsPx` and `_widthPx`
         // this.logInfo("UC", this.columns, vpWidth, this.element.clientWidth, this.element);
         // console.trace();
         // util.error("BREAK");
         if (modified) {
-            this.renderHeader();
-            if (opts.render !== false) {
-                this.render();
+            this._renderHeaderMarkup();
+            if (opts.updateRows) {
+                this._updateRows();
             }
         }
     }
-    /** Render all rows that are visible in the viewport. */
+    /** Create/update header markup from `this.columns` definition.
+     * @internal
+     */
+    _renderHeaderMarkup() {
+        if (!this.headerElement) {
+            return;
+        }
+        const headerRow = this.headerElement.querySelector(".wb-row");
+        assert(headerRow);
+        headerRow.innerHTML = "<span class='wb-col'></span>".repeat(this.columns.length);
+        for (let i = 0; i < this.columns.length; i++) {
+            const col = this.columns[i];
+            const colElem = headerRow.children[i];
+            colElem.style.left = col._ofsPx + "px";
+            colElem.style.width = col._widthPx + "px";
+            // colElem.textContent = col.title || col.id;
+            const title = escapeHtml(col.title || col.id);
+            colElem.innerHTML = `<span class="wb-col-title">${title}</span> <span class="wb-col-resizer"></span>`;
+            // colElem.innerHTML = `${title} <span class="wb-col-resizer"></span>`;
+        }
+    }
+    /** Render header and all rows that are visible in the viewport (async, throttled). */
     updateViewport(immediate = false) {
         // Call the `throttle` wrapper for `this._updateViewport()` which will
         // execute immediately on the leading edge of a sequence:
@@ -5037,39 +5273,163 @@ class Wunderbaum {
             this._updateViewportThrottled.flush();
         }
     }
+    /**
+     * This is the actual update method, which is wrapped inside a throttle method.
+     * This protected method should not be called directly but via
+     * `tree.updateViewport()` or `tree.setModified()`.
+     * It calls `updateColumns()` and `_updateRows()`.
+     * @internal
+     */
     _updateViewport() {
-        if (this._disableUpdate) {
+        if (this._disableUpdateCount) {
+            this.log(`IGNORED _updateViewport() disable level: ${this._disableUpdateCount}`);
             return;
         }
+        const newNodesOnly = !this.changeRedrawRequestPending;
+        this.changeRedrawRequestPending = false;
         let height = this.scrollContainer.clientHeight;
-        // We cannot get the height for abolut positioned parent, so look at first col
+        // We cannot get the height for absolute positioned parent, so look at first col
         // let headerHeight = this.headerElement.clientHeight
         // let headerHeight = this.headerElement.children[0].children[0].clientHeight;
         const headerHeight = this.options.headerHeightPx;
-        let wantHeight = this.element.clientHeight - headerHeight;
-        let ofs = this.scrollContainer.scrollTop;
+        const wantHeight = this.element.clientHeight - headerHeight;
         if (Math.abs(height - wantHeight) > 1.0) {
             // this.log("resize", height, wantHeight);
             this.scrollContainer.style.height = wantHeight + "px";
             height = wantHeight;
         }
-        this.updateColumns({ render: false });
-        this.render({
-            startIdx: Math.max(0, ofs / ROW_HEIGHT - RENDER_MAX_PREFETCH),
-            endIdx: Math.max(0, (ofs + height) / ROW_HEIGHT + RENDER_MAX_PREFETCH),
-        });
+        this.updateColumns({ updateRows: false });
+        this._updateRows({ newNodesOnly: newNodesOnly });
         this._callEvent("update");
     }
-    /** Call callback(node) for all nodes in hierarchical order (depth-first).
+    /**
+     * Assert that TR order matches the natural node order
+     * @internal
+     */
+    _validateRows() {
+        let trs = this.nodeListElement.childNodes;
+        let i = 0;
+        let prev = -1;
+        let ok = true;
+        trs.forEach((element) => {
+            const tr = element;
+            const top = Number.parseInt(tr.style.top);
+            const n = tr._wb_node;
+            // if (i < 4) {
+            //   console.info(
+            //     `TR#${i}, rowIdx=${n._rowIdx} , top=${top}px: '${n.title}'`
+            //   );
+            // }
+            if (top <= prev) {
+                console.warn(`TR order mismatch at index ${i}: top=${top}px, node=${n}`);
+                // throw new Error("fault");
+                ok = false;
+            }
+            prev = top;
+            i++;
+        });
+        return ok;
+    }
+    /*
+     * - Traverse all *visible* of the whole tree, i.e. skip collapsed nodes.
+     * - Store count of rows to `tree.treeRowCount`.
+     * - Renumber `node._rowIdx` for all visible nodes.
+     * - Calculate the index range that must be rendered to fill the viewport
+     *   (including upper and lower prefetch)
+     * -
+     */
+    _updateRows(opts) {
+        const label = this.logTime("_updateRows");
+        opts = Object.assign({ newNodesOnly: false }, opts);
+        const newNodesOnly = !!opts.newNodesOnly;
+        const row_height = ROW_HEIGHT;
+        const vp_height = this.scrollContainer.clientHeight;
+        const prefetch = RENDER_MAX_PREFETCH;
+        const ofs = this.scrollContainer.scrollTop;
+        let startIdx = Math.max(0, ofs / row_height - prefetch);
+        startIdx = Math.floor(startIdx);
+        // Make sure start is always even, so the alternating row colors don't
+        // change when scrolling:
+        if (startIdx % 2) {
+            startIdx--;
+        }
+        let endIdx = Math.max(0, (ofs + vp_height) / row_height + prefetch);
+        endIdx = Math.ceil(endIdx);
+        // const obsoleteViewNodes = this.viewNodes;
+        // this.viewNodes = new Set();
+        // const viewNodes = this.viewNodes;
+        // this.debug("render", opts);
+        const obsoleteNodes = new Set();
+        this.nodeListElement.childNodes.forEach((elem) => {
+            const tr = elem;
+            obsoleteNodes.add(tr._wb_node);
+        });
+        let idx = 0;
+        let top = 0;
+        let modified = false;
+        let prevElem = "first";
+        this.visitRows(function (node) {
+            // console.log("visit", node)
+            const rowDiv = node._rowElem;
+            // Renumber all expanded nodes
+            if (node._rowIdx !== idx) {
+                node._rowIdx = idx;
+                modified = true;
+            }
+            if (idx < startIdx || idx > endIdx) {
+                // row is outside viewport bounds
+                if (rowDiv) {
+                    prevElem = rowDiv;
+                }
+            }
+            else if (rowDiv && newNodesOnly) {
+                obsoleteNodes.delete(node);
+                // no need to update existing node markup
+                rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                prevElem = rowDiv;
+            }
+            else {
+                obsoleteNodes.delete(node);
+                // Create new markup
+                node.render({ top: top, after: prevElem });
+                // console.log("render", top, prevElem, "=>", node._rowElem);
+                prevElem = node._rowElem;
+            }
+            idx++;
+            top += row_height;
+        });
+        this.treeRowCount = idx;
+        for (const n of obsoleteNodes) {
+            n._callEvent("discard");
+            n.removeMarkup();
+        }
+        // Resize tree container
+        this.nodeListElement.style.height = `${top}px`;
+        // this.log(
+        //   `render(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
+        //   this.nodeListElement.style.height
+        // );
+        this.logTimeEnd(label);
+        this._validateRows();
+        return modified;
+    }
+    /**
+     * Call callback(node) for all nodes in hierarchical order (depth-first).
      *
      * @param {function} callback the callback function.
-     *     Return false to stop iteration, return "skip" to skip this node and children only.
+     *     Return false to stop iteration, return "skip" to skip this node and
+     *     children only.
      * @returns {boolean} false, if the iterator was stopped.
      */
     visit(callback) {
         return this.root.visit(callback, false);
     }
-    /** Call fn(node) for all nodes in vertical order, top down (or bottom up).<br>
+    /**
+     * Call fn(node) for all nodes in vertical order, top down (or bottom up).
+     *
+     * Note that this considers expansion state, i.e. children of collapsed nodes
+     * are skipped.
+     *
      * Stop iteration, if fn() returns false.<br>
      * Return false if iteration was stopped.
      *
@@ -5149,7 +5509,8 @@ class Wunderbaum {
         }
         return true;
     }
-    /** Call fn(node) for all nodes in vertical order, bottom up.
+    /**
+     * Call fn(node) for all nodes in vertical order, bottom up.
      * @internal
      */
     _visitRowsUp(callback, opts) {
@@ -5193,19 +5554,36 @@ class Wunderbaum {
         }
         return true;
     }
-    /** . */
+    /**
+     * Reload the tree with a new source.
+     *
+     * Previous data is cleared.
+     * Pass `options.columns` to define a header (may also be part of `source.columns`).
+     */
     load(source, options = {}) {
         this.clear();
         const columns = options.columns || source.columns;
         if (columns) {
             this.columns = options.columns;
-            this.renderHeader();
-            // this.updateColumns({ render: false });
+            // this._renderHeaderMarkup();
+            this.updateColumns({ calculateCols: false });
         }
         return this.root.load(source);
     }
     /**
+     * Disable render requests during operations that would trigger many updates.
      *
+     * ```js
+     * try {
+     *   tree.enableUpdate(false);
+     *   // ... (long running operation that would trigger many updates)
+     *   foo();
+     *   // ... NOTE: make sure that async operations have finished
+     *   await foo();
+     * } finally {
+     *   tree.enableUpdate(true);
+     * }
+     * ```
      */
     enableUpdate(flag) {
         /*
@@ -5213,20 +5591,22 @@ class Wunderbaum {
         1   >-------------------------------------<
         2      >--------------------<
         3         >--------------------------<
-    
-          5
-    
         */
-        // this.logDebug( `enableUpdate(${flag}): count=${this._disableUpdateCount}...` );
         if (flag) {
-            assert(this._disableUpdateCount > 0);
+            assert(this._disableUpdateCount > 0, "enableUpdate(true) was called too often");
             this._disableUpdateCount--;
+            // this.logDebug(
+            //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
+            // );
             if (this._disableUpdateCount === 0) {
                 this.updateViewport();
             }
         }
         else {
             this._disableUpdateCount++;
+            // this.logDebug(
+            //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
+            // );
             // this._disableUpdate = Date.now();
         }
         // return !flag; // return previous value
@@ -5259,8 +5639,10 @@ class Wunderbaum {
         return this.extensions.filter.updateFilter();
     }
 }
-Wunderbaum.version = "v0.0.1-0"; // Set to semver by 'grunt release'
 Wunderbaum.sequence = 0;
+/** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
+Wunderbaum.version = "v0.0.3"; // Set to semver by 'grunt release'
+/** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
 Wunderbaum.util = util;
 
 export { Wunderbaum };