wunderbaum 0.0.1 → 0.0.4

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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 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`
@@ -298,16 +299,15 @@ function setValueToElem(elem, value) {
                 break;
             case "text":
             default:
-                input.innerText = value;
+                input.value = value || "";
         }
     }
     else if (tag === "SELECT") {
         const select = elem;
         select.value = 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 +324,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 +372,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 +393,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 +423,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
             }
@@ -455,7 +478,7 @@ function setTimeoutPromise(callback, ms) {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
             try {
-                resolve(callback.apply(self));
+                resolve(callback.apply(this));
             }
             catch (err) {
                 reject(err);
@@ -478,6 +501,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,12 +565,79 @@ 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)
         .replace(/^\[object (.+)\]$/, "$1")
         .toLowerCase();
 }
+/**
+ * Return a function that can be called instead of `callback`, but guarantees
+ * a limited execution rate.
+ * The execution rate is calculated based on the runtime duration of the
+ * previous call.
+ * Example:
+ * ```js
+ * throttledFoo = util.addaptiveThrottle(foo.bind(this), {});
+ * throttledFoo();
+ * throttledFoo();
+ * ```
+ */
+function addaptiveThrottle(callback, options) {
+    let waiting = 0; // Initially, we're not waiting
+    let pendingArgs = null;
+    const opts = Object.assign({
+        minDelay: 16,
+        defaultDelay: 200,
+        maxDelay: 5000,
+        delayFactor: 2.0,
+    }, options);
+    const minDelay = Math.max(16, +opts.minDelay);
+    const maxDelay = +opts.maxDelay;
+    const throttledFn = (...args) => {
+        if (waiting) {
+            pendingArgs = args;
+            // console.log(`addaptiveThrottle() queing request #${waiting}...`, args);
+            waiting += 1;
+        }
+        else {
+            // Prevent invocations while running or blocking
+            waiting = 1;
+            const useArgs = args; // pendingArgs || args;
+            pendingArgs = null;
+            // console.log(`addaptiveThrottle() execute...`, useArgs);
+            const start = Date.now();
+            try {
+                callback.apply(this, useArgs);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            const elap = Date.now() - start;
+            const curDelay = Math.min(Math.max(minDelay, elap * opts.delayFactor), maxDelay);
+            const useDelay = Math.max(minDelay, curDelay - elap);
+            // console.log(
+            //   `addaptiveThrottle() calling worker took ${elap}ms. delay = ${curDelay}ms, using ${useDelay}ms`,
+            //   pendingArgs
+            // );
+            setTimeout(() => {
+                // Unblock, and trigger pending requests if any
+                // const skipped = waiting - 1;
+                waiting = 0; // And allow future invocations
+                if (pendingArgs != null) {
+                    // There was another request while running or waiting
+                    // console.log(
+                    //   `addaptiveThrottle() re-trigger (missed ${skipped})...`,
+                    //   pendingArgs
+                    // );
+                    throttledFn.apply(this, pendingArgs);
+                }
+            }, useDelay);
+        }
+    };
+    return throttledFn;
+}
 
 var util = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -561,6 +658,7 @@ var util = /*#__PURE__*/Object.freeze({
   setValueToElem: setValueToElem,
   elemFromHtml: elemFromHtml,
   elemFromSelector: elemFromSelector,
+  eventTargetFromSelector: eventTargetFromSelector,
   eventToString: eventToString,
   extend: extend,
   isArray: isArray,
@@ -575,13 +673,14 @@ var util = /*#__PURE__*/Object.freeze({
   toggleCheckbox: toggleCheckbox,
   getOption: getOption,
   toSet: toSet,
-  type: type
+  type: type,
+  addaptiveThrottle: addaptiveThrottle
 });
 
 /*!
  * Wunderbaum - common
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
 const ROW_HEIGHT = 22;
@@ -591,10 +690,20 @@ const RENDER_MAX_PREFETCH = 5;
 const TEST_IMG = new RegExp(/\.|\//); // strings are considered image urls if they contain '.' or '/'
 var ChangeType;
 (function (ChangeType) {
+    /** Re-render the whole viewport, headers, and all rows. */
     ChangeType["any"] = "any";
+    /** Update current row title, icon, columns, and status. */
+    ChangeType["data"] = "data";
+    /** Redraw the header and update the width of all row columns. */
+    ChangeType["header"] = "header";
+    /** Re-render the whole current row. */
     ChangeType["row"] = "row";
+    /** Alias for 'any'. */
     ChangeType["structure"] = "structure";
+    /** Update current row's classes, to reflect active, selected, ... */
     ChangeType["status"] = "status";
+    /** Update the 'top' property of all rows. */
+    ChangeType["vscroll"] = "vscroll";
 })(ChangeType || (ChangeType = {}));
 var NodeStatusType;
 (function (NodeStatusType) {
@@ -667,6 +776,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 +804,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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 class WunderbaumExtension {
     constructor(tree, id, defaults) {
@@ -716,14 +827,14 @@ class WunderbaumExtension {
     init() {
         this.tree.element.classList.add("wb-ext-" + this.id);
     }
-    // protected callEvent(name: string, extra?: any): any {
-    //   let func = this.extensionOpts[name];
+    // protected callEvent(type: string, extra?: any): any {
+    //   let func = this.extensionOpts[type];
     //   if (func) {
     //     return func.call(
     //       this.tree,
     //       util.extend(
     //         {
-    //           event: this.id + "." + name,
+    //           event: this.id + "." + type,
     //         },
     //         extra
     //       )
@@ -980,75 +1091,11 @@ function debounce(func, wait = 0, options = {}) {
     debounced.pending = pending;
     return debounced;
 }
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds (or once per browser frame). The throttled function
- * comes with a `cancel` method to cancel delayed `func` invocations and a
- * `flush` method to immediately invoke them. Provide `options` to indicate
- * whether `func` should be invoked on the leading and/or trailing edge of the
- * `wait` timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
- * invocation will be deferred until the next frame is drawn (typically about
- * 16ms).
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `throttle` and `debounce`.
- *
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0]
- *  The number of milliseconds to throttle invocations to; if omitted,
- *  `requestAnimationFrame` is used (if available).
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', throttle(updatePosition, 100))
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * const throttled = throttle(renewToken, 300000, { 'trailing': false })
- * jQuery(element).on('click', throttled)
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel)
- */
-function throttle(func, wait = 0, options = {}) {
-    let leading = true;
-    let trailing = true;
-    if (typeof func !== "function") {
-        throw new TypeError("Expected a function");
-    }
-    if (isObject(options)) {
-        leading = "leading" in options ? !!options.leading : leading;
-        trailing = "trailing" in options ? !!options.trailing : trailing;
-    }
-    return debounce(func, wait, {
-        leading,
-        trailing,
-        maxWait: wait,
-    });
-}
 
 /*!
  * Wunderbaum - ext-filter
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.1-0, Thu, 31 Mar 2022 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 const START_MARKER = "\uFFF7";
 const END_MARKER = "\uFFF8";
@@ -1087,7 +1134,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 +1169,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;
@@ -1252,9 +1300,9 @@ class FilterExtension extends WunderbaumExtension {
      * [ext-filter] Reset the filter.
      */
     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) {
@@ -1268,12 +1316,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;
@@ -1309,7 +1356,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++) {
@@ -1324,7 +1371,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;
         });
@@ -1342,7 +1389,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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 class KeynavExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1409,7 +1456,7 @@ class KeynavExtension extends WunderbaumExtension {
                         eventName = "Add"; // expand
                     }
                     else if (navModeOption === NavigationModeOption.startRow) {
-                        tree.setCellMode(NavigationMode.cellNav);
+                        tree.setNavigationMode(NavigationMode.cellNav);
                         return;
                     }
                     break;
@@ -1448,6 +1495,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 });
@@ -1479,11 +1528,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;
@@ -1493,7 +1542,7 @@ class KeynavExtension extends WunderbaumExtension {
                         handled = true;
                     }
                     else if (navModeOption !== NavigationModeOption.cell) {
-                        tree.setCellMode(NavigationMode.row);
+                        tree.setNavigationMode(NavigationMode.row);
                         handled = true;
                     }
                     break;
@@ -1510,6 +1559,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 });
@@ -1528,7 +1579,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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 class LoggerExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1568,19 +1619,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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 const nodeMimeType = "application/x-wunderbaum-node";
-// type AllowedDropRegionType =
-//   | "after"
-//   | "afterBefore"
-//   // | "afterBeforeOver" // == all == true
-//   | "afterOver"
-//   | "all" // == true
-//   | "before"
-//   | "beforeOver"
-//   | "none" // == false == "" == null
-//   | "over"; // == "child"
 class DndExtension extends WunderbaumExtension {
     constructor(tree) {
         super(tree, "dnd", {
@@ -1843,15 +1884,196 @@ class DndExtension extends WunderbaumExtension {
     }
 }
 
+/*!
+ * Wunderbaum - drag_observer
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * v0.0.4, Tue, 03 May 2022 06:21:31 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.4, Tue, 03 May 2022 06:21:31 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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
- * Deferred is a ES6 Promise, that exposes the resolve() and reject()` method.
+ * Implement a ES6 Promise, that exposes a resolve() and reject() method.
  *
- * Loosely mimics [`jQuery.Deferred`](https://api.jquery.com/category/deferred-object/).
+ * Loosely mimics {@link https://api.jquery.com/category/deferred-object/ | jQuery.Deferred}.
+ * Example:
+ * ```js
+ * function foo() {
+ *   let dfd = new Deferred(),
+ *   ...
+ *   dfd.resolve('foo')
+ *   ...
+ *   return dfd.promise();
+ * }
+ * ```
  */
 class Deferred {
     constructor() {
@@ -1889,7 +2111,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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 /** Top-level properties that can be passed with `data`. */
 const NODE_PROPS = new Set([
@@ -1926,15 +2148,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 = {};
@@ -2007,8 +2245,8 @@ class WunderbaumNode {
      * node._callEvent("edit.beforeEdit", {foo: 42})
      * ```
      */
-    _callEvent(name, extra) {
-        return this.tree._callEvent(name, extend({
+    _callEvent(type, extra) {
+        return this.tree._callEvent(type, extend({
             node: this,
             typeInfo: this.type ? this.tree.types[this.type] : {},
         }, extra));
@@ -2061,7 +2299,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 {
@@ -2100,7 +2338,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);
@@ -2193,8 +2432,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);
@@ -2495,7 +2733,7 @@ class WunderbaumNode {
                     assert(!this.parent);
                     tree.columns = data.columns;
                     delete data.columns;
-                    tree.renderHeader();
+                    tree.updateColumns({ calculateCols: false });
                 }
                 this._loadSourceObject(data);
             }
@@ -2531,19 +2769,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;
     }
@@ -2691,7 +2930,7 @@ class WunderbaumNode {
                 n.tree = targetNode.tree;
             }, true);
         }
-        tree.updateViewport();
+        tree.setModified(ChangeType.structure);
         // TODO: fix selection state
         // TODO: fix active state
     }
@@ -2711,31 +2950,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() {
@@ -2767,7 +3008,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() {
@@ -2842,13 +3083,15 @@ class WunderbaumNode {
         // this.log("_createIcon: ", iconSpan);
         return iconSpan;
     }
-    /** Create HTML markup for this node, i.e. the whole row. */
-    render(opts) {
+    /**
+     * Create a whole new `<div class="wb-row">` element.
+     * @see {@link Wunderbaumode.render}
+     */
+    _render_markup(opts) {
         const tree = this.tree;
         const treeOptions = tree.options;
         const checkbox = this.getOption("checkbox") !== false;
         const columns = tree.columns;
-        const typeInfo = this.type ? tree.types[this.type] : null;
         const level = this.getLevel();
         let elem;
         let nodeElem;
@@ -2858,10 +3101,171 @@ class WunderbaumNode {
         let iconSpan;
         let expanderSpan = null;
         const activeColIdx = tree.navMode === NavigationMode.row ? null : tree.activeColIdx;
-        // let colElems: HTMLElement[];
         const isNew = !rowDiv;
+        assert(isNew);
+        assert(!isNew || (opts && opts.after), "opts.after expected, unless updating");
         assert(!this.isRootNode());
-        //
+        rowDiv = document.createElement("div");
+        rowDiv.classList.add("wb-row");
+        rowDiv.style.top = this._rowIdx * ROW_HEIGHT + "px";
+        this._rowElem = rowDiv;
+        // Attach a node reference to the DOM Element:
+        rowDiv._wb_node = this;
+        nodeElem = document.createElement("span");
+        nodeElem.classList.add("wb-node", "wb-col");
+        rowDiv.appendChild(nodeElem);
+        let ofsTitlePx = 0;
+        if (checkbox) {
+            checkboxSpan = document.createElement("i");
+            checkboxSpan.classList.add("wb-checkbox");
+            nodeElem.appendChild(checkboxSpan);
+            ofsTitlePx += ICON_WIDTH;
+        }
+        for (let i = level - 1; i > 0; i--) {
+            elem = document.createElement("i");
+            elem.classList.add("wb-indent");
+            nodeElem.appendChild(elem);
+            ofsTitlePx += ICON_WIDTH;
+        }
+        if (!treeOptions.minExpandLevel || level > treeOptions.minExpandLevel) {
+            expanderSpan = document.createElement("i");
+            expanderSpan.classList.add("wb-expander");
+            nodeElem.appendChild(expanderSpan);
+            ofsTitlePx += ICON_WIDTH;
+        }
+        iconSpan = this._createIcon(nodeElem);
+        if (iconSpan) {
+            ofsTitlePx += ICON_WIDTH;
+        }
+        titleSpan = document.createElement("span");
+        titleSpan.classList.add("wb-title");
+        nodeElem.appendChild(titleSpan);
+        this._callEvent("enhanceTitle", { titleSpan: titleSpan });
+        // Store the width of leading icons with the node, so we can calculate
+        // the width of the embedded title span later
+        nodeElem._ofsTitlePx = ofsTitlePx;
+        // Support HTML5 drag-n-drop
+        if (tree.options.dnd.dragStart) {
+            nodeElem.draggable = true;
+        }
+        // Render columns
+        if (!this.colspan && columns.length > 1) {
+            let colIdx = 0;
+            for (let col of columns) {
+                colIdx++;
+                let colElem;
+                if (col.id === "*") {
+                    colElem = nodeElem;
+                }
+                else {
+                    colElem = document.createElement("span");
+                    colElem.classList.add("wb-col");
+                    rowDiv.appendChild(colElem);
+                }
+                if (colIdx === activeColIdx) {
+                    colElem.classList.add("wb-active");
+                }
+                // Add classes from `columns` definition to `<div.wb-col>` cells
+                col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
+                colElem.style.left = col._ofsPx + "px";
+                colElem.style.width = col._widthPx + "px";
+                if (isNew && col.html) {
+                    if (typeof col.html === "string") {
+                        colElem.innerHTML = col.html;
+                    }
+                }
+            }
+        }
+        // Now go on and fill in data and update classes
+        opts.isNew = true;
+        this._render_data(opts);
+        // Attach to DOM as late as possible
+        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);
+        }
+    }
+    /**
+     * Render `node.title`, `.icon` into an existing row.
+     *
+     * @see {@link Wunderbaumode.render}
+     */
+    _render_data(opts) {
+        assert(this._rowElem);
+        const tree = this.tree;
+        const treeOptions = tree.options;
+        const rowDiv = this._rowElem;
+        const isNew = !!opts.isNew; // Called by _render_markup()?
+        const columns = tree.columns;
+        const typeInfo = this.type ? tree.types[this.type] : null;
+        // Row markup already exists
+        const nodeElem = rowDiv.querySelector("span.wb-node");
+        const titleSpan = nodeElem.querySelector("span.wb-title");
+        if (this.titleWithHighlight) {
+            titleSpan.innerHTML = this.titleWithHighlight;
+        }
+        else {
+            titleSpan.textContent = this.title;
+        }
+        // Set the width of the title span, so overflow ellipsis work
+        if (!treeOptions.skeleton) {
+            if (this.colspan) {
+                let vpWidth = tree.element.clientWidth;
+                titleSpan.style.width =
+                    vpWidth - nodeElem._ofsTitlePx - ROW_EXTRA_PAD + "px";
+            }
+            else {
+                titleSpan.style.width =
+                    columns[0]._widthPx -
+                        nodeElem._ofsTitlePx -
+                        ROW_EXTRA_PAD +
+                        "px";
+            }
+        }
+        // Update row classes
+        opts.isDataChange = true;
+        this._render_status(opts);
+        // Let user modify the result
+        if (this.statusNodeType) {
+            this._callEvent("renderStatusNode", {
+                isNew: isNew,
+                nodeElem: nodeElem,
+            });
+        }
+        else if (this.parent) {
+            // Skip root node
+            this._callEvent("render", {
+                isNew: isNew,
+                isDataChange: true,
+                nodeElem: nodeElem,
+                typeInfo: typeInfo,
+                colInfosById: this._getRenderInfo(),
+            });
+        }
+    }
+    /**
+     * Update row classes to reflect active, focuses, etc.
+     * @see {@link Wunderbaumode.render}
+     */
+    _render_status(opts) {
+        // this.log("_render_status", opts);
+        const tree = this.tree;
+        const treeOptions = tree.options;
+        const typeInfo = this.type ? tree.types[this.type] : null;
+        const rowDiv = this._rowElem;
+        // Row markup already exists
+        const nodeElem = rowDiv.querySelector("span.wb-node");
+        const expanderSpan = nodeElem.querySelector("i.wb-expander");
+        const checkboxSpan = nodeElem.querySelector("i.wb-checkbox");
+        // TODO: update icon (if not opts.isNew)
+        // const iconSpan = nodeElem.querySelector("i.wb-icon") as HTMLElement;
         let rowClasses = ["wb-row"];
         this.expanded ? rowClasses.push("wb-expanded") : 0;
         this.lazy ? rowClasses.push("wb-lazy") : 0;
@@ -2876,102 +3280,14 @@ class WunderbaumNode {
         this.match ? rowClasses.push("wb-match") : 0;
         this.subMatchCount ? rowClasses.push("wb-submatch") : 0;
         treeOptions.skeleton ? rowClasses.push("wb-skeleton") : 0;
-        // TODO: no need to hide!
-        // !(this.match || this.subMatchCount) ? rowClasses.push("wb-hide") : 0;
-        if (rowDiv) {
-            // Row markup already exists
-            nodeElem = rowDiv.querySelector("span.wb-node");
-            titleSpan = nodeElem.querySelector("span.wb-title");
-            expanderSpan = nodeElem.querySelector("i.wb-expander");
-            checkboxSpan = nodeElem.querySelector("i.wb-checkbox");
-            iconSpan = nodeElem.querySelector("i.wb-icon");
-            // TODO: we need this, when icons should be replacable
-            // iconSpan = this._createIcon(nodeElem, iconSpan);
-            // colElems = (<unknown>(
-            //   rowDiv.querySelectorAll("span.wb-col")
-            // )) as HTMLElement[];
-        }
-        else {
-            rowDiv = document.createElement("div");
-            // rowDiv.classList.add("wb-row");
-            // Attach a node reference to the DOM Element:
-            rowDiv._wb_node = this;
-            nodeElem = document.createElement("span");
-            nodeElem.classList.add("wb-node", "wb-col");
-            rowDiv.appendChild(nodeElem);
-            let ofsTitlePx = 0;
-            if (checkbox) {
-                checkboxSpan = document.createElement("i");
-                nodeElem.appendChild(checkboxSpan);
-                ofsTitlePx += ICON_WIDTH;
-            }
-            for (let i = level - 1; i > 0; i--) {
-                elem = document.createElement("i");
-                elem.classList.add("wb-indent");
-                nodeElem.appendChild(elem);
-                ofsTitlePx += ICON_WIDTH;
-            }
-            if (level > treeOptions.minExpandLevel) {
-                expanderSpan = document.createElement("i");
-                nodeElem.appendChild(expanderSpan);
-                ofsTitlePx += ICON_WIDTH;
-            }
-            iconSpan = this._createIcon(nodeElem);
-            if (iconSpan) {
-                ofsTitlePx += ICON_WIDTH;
-            }
-            titleSpan = document.createElement("span");
-            titleSpan.classList.add("wb-title");
-            nodeElem.appendChild(titleSpan);
-            this._callEvent("enhanceTitle", { titleSpan: titleSpan });
-            // Store the width of leading icons with the node, so we can calculate
-            // the width of the embedded title span later
-            nodeElem._ofsTitlePx = ofsTitlePx;
-            if (tree.options.dnd.dragStart) {
-                nodeElem.draggable = true;
-            }
-            // Render columns
-            // colElems = [];
-            if (!this.colspan && columns.length > 1) {
-                let colIdx = 0;
-                for (let col of columns) {
-                    colIdx++;
-                    let colElem;
-                    if (col.id === "*") {
-                        colElem = nodeElem;
-                    }
-                    else {
-                        colElem = document.createElement("span");
-                        colElem.classList.add("wb-col");
-                        // colElem.textContent = "" + col.id;
-                        rowDiv.appendChild(colElem);
-                    }
-                    if (colIdx === activeColIdx) {
-                        colElem.classList.add("wb-active");
-                    }
-                    // Add classes from `columns` definition to `<div.wb-col>` cells
-                    col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
-                    colElem.style.left = col._ofsPx + "px";
-                    colElem.style.width = col._widthPx + "px";
-                    // colElems.push(colElem);
-                    if (isNew && col.html) {
-                        if (typeof col.html === "string") {
-                            colElem.innerHTML = col.html;
-                        }
-                    }
-                }
-            }
-        }
-        // --- From here common code starts (either new or existing markup):
-        rowDiv.className = rowClasses.join(" "); // Reset prev. classes
+        // Replace previous classes:
+        rowDiv.className = rowClasses.join(" ");
         // Add classes from `node.extraClasses`
         rowDiv.classList.add(...this.extraClasses);
         // Add classes from `tree.types[node.type]`
         if (typeInfo && typeInfo.classes) {
             rowDiv.classList.add(...typeInfo.classes);
         }
-        // rowDiv.style.top = (this._rowIdx! * 1.1) + "em";
-        rowDiv.style.top = this._rowIdx * ROW_HEIGHT + "px";
         if (expanderSpan) {
             if (this.isExpandable(false)) {
                 if (this.expanded) {
@@ -2999,50 +3315,42 @@ class WunderbaumNode {
                 checkboxSpan.className = "wb-checkbox " + iconMap.checkUnchecked;
             }
         }
-        if (this.titleWithHighlight) {
-            titleSpan.innerHTML = this.titleWithHighlight;
-        }
-        else if (tree.options.escapeTitles) {
-            titleSpan.textContent = this.title;
+        // Fix active cell in cell-nav mode
+        if (!opts.isNew) {
+            let i = 0;
+            for (let colSpan of rowDiv.children) {
+                colSpan.classList.toggle("wb-active", i++ === tree.activeColIdx);
+            }
         }
-        else {
-            titleSpan.innerHTML = this.title;
+    }
+    /**
+     * Create or update node's markup.
+     *
+     * `options.change` defaults to ChangeType.data, which updates the title,
+     * icon, and status. It also triggers the `render` event, that lets the user
+     * create or update the content of embeded cell elements.<br>
+     *
+     * If only the status or other class-only modifications have changed,
+     * `options.change` should be set to ChangeType.status instead for best
+     * efficiency.
+     */
+    render(options) {
+        // this.log("render", options);
+        const opts = Object.assign({ change: ChangeType.data }, options);
+        if (!this._rowElem) {
+            opts.change = "row";
+        }
+        switch (opts.change) {
+            case "status":
+                this._render_status(opts);
+                break;
+            case "data":
+                this._render_data(opts);
+                break;
+            default:
+                this._render_markup(opts);
+                break;
         }
-        // Set the width of the title span, so overflow ellipsis work
-        if (!treeOptions.skeleton) {
-            if (this.colspan) {
-                let vpWidth = tree.element.clientWidth;
-                titleSpan.style.width =
-                    vpWidth - nodeElem._ofsTitlePx - ROW_EXTRA_PAD + "px";
-            }
-            else {
-                titleSpan.style.width =
-                    columns[0]._widthPx -
-                        nodeElem._ofsTitlePx -
-                        ROW_EXTRA_PAD +
-                        "px";
-            }
-        }
-        this._rowElem = rowDiv;
-        if (this.statusNodeType) {
-            this._callEvent("renderStatusNode", {
-                isNew: isNew,
-                nodeElem: nodeElem,
-            });
-        }
-        else if (this.parent) {
-            // Skip root node
-            this._callEvent("render", {
-                isNew: isNew,
-                nodeElem: nodeElem,
-                typeInfo: typeInfo,
-                colInfosById: this._getRenderInfo(),
-            });
-        }
-        // Attach to DOM as late as possible
-        // if (!this._rowElem) {
-        tree.nodeListElement.appendChild(rowDiv);
-        // }
     }
     /**
      * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
@@ -3053,7 +3361,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.
      *
@@ -3116,14 +3424,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;
@@ -3158,15 +3467,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) {
@@ -3181,7 +3496,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;
                     }
                 }
@@ -3192,8 +3507,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(ChangeType.status);
+            this.setModified(ChangeType.status);
         }
         if (options &&
             options.colIdx != null &&
@@ -3204,57 +3519,68 @@ 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.
+     *
+     * `change` defaults to 'data', which handles modifcations of title, icon,
+     * and column content. It can be reduced to 'ChangeType.status' if only
+     * active/focus/selected state has changed.
+     */
+    setModified(change = ChangeType.data) {
+        assert(change === ChangeType.status || change === ChangeType.data);
+        this.tree.setModified(change, 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
@@ -3325,12 +3651,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
     }
     /**
@@ -3351,10 +3678,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.
@@ -3398,7 +3731,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.
      *
@@ -3429,7 +3763,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 15:13:20 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.4, Tue, 03 May 2022 06:21:31 GMT (https://github.com/mar10/wunderbaum)
  */
 // const START_MARKER = "\uFFF7";
 class EditExtension extends WunderbaumExtension {
@@ -3547,7 +3881,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;
                     }
@@ -3588,6 +3922,7 @@ class EditExtension extends WunderbaumExtension {
         if (validity) {
             // Permanently apply  input validations (CSS and tooltip)
             inputElem.addEventListener("keydown", (e) => {
+                inputElem.setCustomValidity("");
                 if (!inputElem.reportValidity()) ;
             });
         }
@@ -3628,6 +3963,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,
@@ -3714,12 +4054,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 15:13:20 GMT
+ * @version v0.0.4
+ * @date Tue, 03 May 2022 06:21:31 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.
  *
@@ -3731,36 +4071,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,
@@ -3771,7 +4118,7 @@ class Wunderbaum {
             rowHeightPx: ROW_HEIGHT,
             columns: null,
             types: null,
-            escapeTitles: true,
+            // escapeTitles: true,
             showSpinner: false,
             checkbox: true,
             minExpandLevel: 0,
@@ -3828,6 +4175,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;
@@ -3851,9 +4199,7 @@ class Wunderbaum {
             opts.navigationMode === NavigationModeOption.startCell) {
             this.navMode = NavigationMode.cellNav;
         }
-        this._updateViewportThrottled = throttle(() => {
-            this._updateViewport();
-        }, opts.updateThrottleWait, { leading: true, trailing: true });
+        this._updateViewportThrottled = addaptiveThrottle(this._updateViewport.bind(this), {});
         // --- Create Markup
         this.element = elemFromSelector(opts.element);
         assert(!!this.element, `Invalid 'element' option: ${opts.element}`);
@@ -3921,11 +4267,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
@@ -3935,19 +4279,17 @@ 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();
-            console.log("ResizeObserver: Size changed", entries);
+            this.setModified(ChangeType.vscroll);
+            // this.log("ResizeObserver: Size changed", entries);
         });
         this.resizeObserver.observe(this.element);
         onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
             const info = Wunderbaum.getEventInfo(e);
             const node = info.node;
+            // this.log("click", info, e);
             if (this._callEvent("click", { event: e, node: node, info: info }) === false) {
                 this.lastClickTime = Date.now();
                 return false;
@@ -3975,8 +4317,6 @@ class Wunderbaum {
                     node.setSelected(!node.isSelected());
                 }
             }
-            // if(e.target.classList.)
-            // this.log("click", info);
             this.lastClickTime = Date.now();
         });
         onEvent(this.element, "keydown", (e) => {
@@ -3998,37 +4338,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) {
@@ -4069,9 +4390,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) {
@@ -4093,7 +4413,7 @@ class Wunderbaum {
         }
         return null;
     }
-    /** */
+    /** @internal */
     _registerExtension(extension) {
         this.extensionList.push(extension);
         this.extensions[extension.id] = extension;
@@ -4135,7 +4455,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.*/
@@ -4153,7 +4473,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")
@@ -4170,43 +4492,51 @@ 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})
      * ```
      */
-    _callEvent(name, extra) {
-        const [p, n] = name.split(".");
+    _callEvent(type, extra) {
+        const [p, n] = type.split(".");
         const opts = this.options;
         const func = n ? opts[p][n] : opts[p];
         if (func) {
-            return func.call(this, extend({ name: name, tree: this, util: this._util }, extra));
+            return func.call(this, extend({ type: type, tree: this, util: this._util }, extra));
             // } else {
-            //   this.logError(`Triggering undefined event '${name}'.`)
+            //   this.logError(`Triggering undefined event '${type}'.`)
         }
     }
-    /** 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 */
-    _lastNodeInView(complete = true) {
-        let bottomIdx, node;
+    /** Return the topmost visible node in the viewport. */
+    getTopmostVpNode(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. */
+    getLowestVpNode(complete = true) {
+        let bottomIdx;
         if (complete) {
             bottomIdx =
                 Math.floor((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
@@ -4217,16 +4547,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;
@@ -4236,7 +4560,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;
@@ -4246,10 +4570,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.
@@ -4374,16 +4703,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 ---
@@ -4391,7 +4721,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.
@@ -4411,10 +4741,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;
@@ -4458,18 +4789,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). */
@@ -4487,11 +4814,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) => {
@@ -4502,25 +4830,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) {
@@ -4550,7 +4883,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'.
@@ -4560,7 +4894,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) {
@@ -4616,9 +4950,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.getLowestVpNode();
+                // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
+                if (node._rowIdx < bottomNode._rowIdx) {
                     res = bottomNode;
                 }
                 else {
@@ -4626,12 +4960,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.getTopmostVpNode();
+                    // this.logDebug(`${where}(${node}) -> ${topNode}`);
+                    if (node._rowIdx > topNode._rowIdx) {
                         res = topNode;
                     }
                     else {
@@ -4645,7 +4980,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) {
@@ -4678,7 +5013,8 @@ class Wunderbaum {
      *     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,
@@ -4710,13 +5046,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;
@@ -4740,7 +5078,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;
@@ -4767,7 +5106,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());
@@ -4794,77 +5133,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;
@@ -4885,47 +5160,34 @@ 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();
+            this.setModified(ChangeType.vscroll);
         }
     }
-    /** */
-    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.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) {
+        var _a;
         assert(this.navMode !== NavigationMode.row);
         assert(0 <= colIdx && colIdx < this.columns.length);
         this.activeColIdx = colIdx;
-        // node.setActive(true, { column: tree.activeColIdx + 1 });
-        this.setModified(ChangeType.row, this.activeNode);
         // Update `wb-active` class for all headers
         if (this.headerElement) {
             for (let rowDiv of this.headerElement.children) {
-                // for (let rowDiv of document.querySelector("div.wb-header").children) {
                 let i = 0;
                 for (let colDiv of rowDiv.children) {
                     colDiv.classList.toggle("wb-active", i++ === colIdx);
                 }
             }
         }
-        // Update `wb-active` class for all cell divs
+        (_a = this.activeNode) === null || _a === void 0 ? void 0 : _a.setModified(ChangeType.status);
+        // Update `wb-active` class for all cell spans
         for (let rowDiv of this.nodeListElement.children) {
             let i = 0;
             for (let colDiv of rowDiv.children) {
@@ -4933,7 +5195,7 @@ class Wunderbaum {
             }
         }
     }
-    /** */
+    /** Set or remove keybaord focus to the tree container. */
     setFocus(flag = true) {
         if (flag) {
             this.element.focus();
@@ -4942,129 +5204,321 @@ 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.data:
+            case ChangeType.status:
+                // Single nodes are immedialtely updated if already inside the viewport
+                // (otherwise we can ignore)
+                if (node._rowElem) {
+                    node.render({ change: change });
+                }
+                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) {
+        var _a;
+        // 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);
+        (_a = this.activeNode) === null || _a === void 0 ? void 0 : _a.setModified(ChangeType.status);
     }
+    /** 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:
-        this._updateViewportThrottled();
         if (immediate) {
-            this._updateViewportThrottled.flush();
+            this._updateViewport();
+        }
+        else {
+            this._updateViewportThrottled();
         }
     }
+    /**
+     * 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),
-        });
+        // console.profile(`_updateViewport()`)
+        this.updateColumns({ updateRows: false });
+        this._updateRows({ newNodesOnly: newNodesOnly });
+        // console.profileEnd(`_updateViewport()`)
         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 (prev >= 0 && top !== prev + ROW_HEIGHT) {
+                n.logWarn(`TR order mismatch at index ${i}: top=${top}px != ${prev + ROW_HEIGHT}`);
+                // 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");
+        // this.log("_updateRows", opts)
+        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) {
+            // node.log("visit")
+            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
+                if (rowDiv) {
+                    rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                }
+                node.render({ top: top, after: prevElem });
+                // node.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.
      *
@@ -5144,7 +5598,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) {
@@ -5188,19 +5643,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, e.g.
+     *   await foo();
+     * } finally {
+     *   tree.enableUpdate(true);
+     * }
+     * ```
      */
     enableUpdate(flag) {
         /*
@@ -5208,20 +5680,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
@@ -5254,8 +5728,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.4"; // Set to semver by 'grunt release'
+/** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
 Wunderbaum.util = util;
 
 export { Wunderbaum };