wunderbaum 0.0.1-0 → 0.0.3

package/dist/wunderbaum.umd.js

@@ -2,13 +2,14 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mar10 = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
   /*!
    * Wunderbaum - util
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
+  /** @module util */
   /** Readable names for `MouseEvent.button` */
   const MOUSE_BUTTONS = {
       0: "",
@@ -20,7 +21,7 @@
   };
   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
@@ -168,7 +169,7 @@
   /** TODO */
   function extractHtmlText(s) {
       if (s.indexOf(">") >= 0) {
-          error("not implemented");
+          error("Not implemented");
           // return $("<div/>").html(s).text();
       }
       return s;
@@ -290,7 +291,7 @@
                   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`
@@ -313,7 +314,7 @@
       }
       // 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();
@@ -330,11 +331,23 @@
       }
       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 = [];
@@ -366,6 +379,13 @@
       }
       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];
@@ -380,23 +400,27 @@
       }
       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;
@@ -406,7 +430,7 @@
           handler = selectorOrHandler;
       }
       eventNames.split(" ").forEach((evn) => {
-          rootElem.addEventListener(evn, function (e) {
+          rootTarget.addEventListener(evn, function (e) {
               if (!selector) {
                   return handler(e); // no event delegation
               }
@@ -484,6 +508,13 @@
   }
   /**
    * 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);
@@ -541,6 +572,7 @@
       }
       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)
@@ -567,6 +599,7 @@
     setValueToElem: setValueToElem,
     elemFromHtml: elemFromHtml,
     elemFromSelector: elemFromSelector,
+    eventTargetFromSelector: eventTargetFromSelector,
     eventToString: eventToString,
     extend: extend,
     isArray: isArray,
@@ -587,7 +620,7 @@
   /*!
    * Wunderbaum - common
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
   const ROW_HEIGHT = 22;
@@ -601,6 +634,8 @@
       ChangeType["row"] = "row";
       ChangeType["structure"] = "structure";
       ChangeType["status"] = "status";
+      ChangeType["vscroll"] = "vscroll";
+      ChangeType["header"] = "header";
   })(ChangeType || (ChangeType = {}));
   var NodeStatusType;
   (function (NodeStatusType) {
@@ -673,6 +708,8 @@
       Home: "firstCol",
       "Control+End": "last",
       "Control+Home": "first",
+      "Meta+ArrowDown": "last",
+      "Meta+ArrowUp": "first",
       "*": "expandAll",
       Multiply: "expandAll",
       PageDown: "pageDown",
@@ -699,7 +736,7 @@
   /*!
    * Wunderbaum - wb_extension_base
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class WunderbaumExtension {
       constructor(tree, id, defaults) {
@@ -1054,7 +1091,7 @@
   /*!
    * Wunderbaum - ext-filter
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   const START_MARKER = "\uFFF7";
   const END_MARKER = "\uFFF8";
@@ -1093,7 +1130,9 @@
           });
       }
       _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 === "") {
@@ -1126,37 +1165,36 @@
                   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;
@@ -1242,8 +1280,6 @@
       }
       /**
        * [ext-filter] Re-apply current filter.
-       *
-       * @requires jquery.fancytree.filter.js
        */
       updateFilter() {
           let tree = this.tree;
@@ -1258,14 +1294,11 @@
       }
       /**
        * [ext-filter] Reset the filter.
-       *
-       * @alias Fancytree#clearFilter
-       * @requires jquery.fancytree.filter.js
        */
       clearFilter() {
-          let tree = this.tree, 
+          let tree = this.tree;
           // statusNode = tree.root.findDirectChild(KEY_NODATA),
-          escapeTitles = tree.options.escapeTitles;
+          // escapeTitles = tree.options.escapeTitles;
           // enhanceTitle = tree.options.enhanceTitle,
           tree.enableUpdate(false);
           // if (statusNode) {
@@ -1279,12 +1312,11 @@
               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;
@@ -1320,7 +1352,7 @@
    * @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++) {
@@ -1335,7 +1367,7 @@
       // 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;
           });
@@ -1353,7 +1385,7 @@
   /*!
    * Wunderbaum - ext-keynav
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class KeynavExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1420,7 +1452,7 @@
                           eventName = "Add"; // expand
                       }
                       else if (navModeOption === NavigationModeOption.startRow) {
-                          tree.setCellMode(NavigationMode.cellNav);
+                          tree.setNavigationMode(NavigationMode.cellNav);
                           return;
                       }
                       break;
@@ -1459,6 +1491,8 @@
                   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 });
@@ -1490,11 +1524,11 @@
                       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;
@@ -1504,7 +1538,7 @@
                           handled = true;
                       }
                       else if (navModeOption !== NavigationModeOption.cell) {
-                          tree.setCellMode(NavigationMode.row);
+                          tree.setNavigationMode(NavigationMode.row);
                           handled = true;
                       }
                       break;
@@ -1521,6 +1555,8 @@
                   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 });
@@ -1539,7 +1575,7 @@
   /*!
    * Wunderbaum - ext-logger
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   class LoggerExtension extends WunderbaumExtension {
       constructor(tree) {
@@ -1579,19 +1615,9 @@
   /*!
    * Wunderbaum - ext-dnd
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
-  const nodeMimeType = "application/x-fancytree-node";
-  // type AllowedDropRegionType =
-  //   | "after"
-  //   | "afterBefore"
-  //   // | "afterBeforeOver" // == all == true
-  //   | "afterOver"
-  //   | "all" // == true
-  //   | "before"
-  //   | "beforeOver"
-  //   | "none" // == false == "" == null
-  //   | "over"; // == "child"
+  const nodeMimeType = "application/x-wunderbaum-node";
   class DndExtension extends WunderbaumExtension {
       constructor(tree) {
           super(tree, "dnd", {
@@ -1854,10 +1880,181 @@
       }
   }
 
+  /*!
+   * Wunderbaum - drag_observer
+   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
+   */
+  /**
+   * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
+   */
+  class DragObserver {
+      constructor(opts) {
+          this.start = {
+              x: 0,
+              y: 0,
+              altKey: false,
+              ctrlKey: false,
+              metaKey: false,
+              shiftKey: false,
+          };
+          this.dragElem = null;
+          this.dragging = false;
+          // TODO: touch events
+          this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
+          assert(opts.root);
+          this.opts = extend({ thresh: 5 }, opts);
+          this.root = opts.root;
+          this._handler = this.handleEvent.bind(this);
+          this.events.forEach((type) => {
+              this.root.addEventListener(type, this._handler);
+          });
+      }
+      /** Unregister all event listeners. */
+      disconnect() {
+          this.events.forEach((type) => {
+              this.root.removeEventListener(type, this._handler);
+          });
+      }
+      getDragElem() {
+          return this.dragElem;
+      }
+      isDragging() {
+          return this.dragging;
+      }
+      stopDrag(cb_event) {
+          if (this.dragging && this.opts.dragstop && cb_event) {
+              cb_event.type = "dragstop";
+              this.opts.dragstop(cb_event);
+          }
+          this.dragElem = null;
+          this.dragging = false;
+      }
+      handleEvent(e) {
+          const type = e.type;
+          const opts = this.opts;
+          const cb_event = {
+              type: e.type,
+              event: e,
+              dragElem: this.dragElem,
+              dx: e.pageX - this.start.x,
+              dy: e.pageY - this.start.y,
+              apply: undefined,
+          };
+          switch (type) {
+              case "keydown":
+                  this.stopDrag(cb_event);
+                  break;
+              case "mousedown":
+                  if (this.dragElem) {
+                      this.stopDrag(cb_event);
+                      break;
+                  }
+                  if (opts.selector) {
+                      let elem = e.target;
+                      if (elem.matches(opts.selector)) {
+                          this.dragElem = elem;
+                      }
+                      else {
+                          elem = elem.closest(opts.selector);
+                          if (elem) {
+                              this.dragElem = elem;
+                          }
+                          else {
+                              break; // no event delegation selector matched
+                          }
+                      }
+                  }
+                  this.start.x = e.pageX;
+                  this.start.y = e.pageY;
+                  this.start.altKey = e.altKey;
+                  this.start.ctrlKey = e.ctrlKey;
+                  this.start.metaKey = e.metaKey;
+                  this.start.shiftKey = e.shiftKey;
+                  break;
+              case "mousemove":
+                  // TODO: debounce/throttle?
+                  // TODO: horizontal mode: ignore if dx unchanged
+                  if (!this.dragElem) {
+                      break;
+                  }
+                  if (!this.dragging) {
+                      if (opts.thresh) {
+                          const dist2 = cb_event.dx * cb_event.dx + cb_event.dy * cb_event.dy;
+                          if (dist2 < opts.thresh * opts.thresh) {
+                              break;
+                          }
+                      }
+                      cb_event.type = "dragstart";
+                      if (opts.dragstart(cb_event) === false) {
+                          this.stopDrag(cb_event);
+                          break;
+                      }
+                      this.dragging = true;
+                  }
+                  if (this.dragging && this.opts.drag) {
+                      cb_event.type = "drag";
+                      this.opts.drag(cb_event);
+                  }
+                  break;
+              case "mouseup":
+                  if (!this.dragging) {
+                      this.stopDrag(cb_event);
+                      break;
+                  }
+                  if (e.button === 0) {
+                      cb_event.apply = true;
+                  }
+                  else {
+                      cb_event.apply = false;
+                  }
+                  this.stopDrag(cb_event);
+                  break;
+          }
+      }
+  }
+
+  /*!
+   * Wunderbaum - ext-grid
+   * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
+   */
+  class GridExtension extends WunderbaumExtension {
+      constructor(tree) {
+          super(tree, "grid", {
+          // throttle: 200,
+          });
+          this.observer = new DragObserver({
+              root: window.document,
+              selector: "span.wb-col-resizer",
+              thresh: 4,
+              // throttle: 400,
+              dragstart: (e) => {
+                  return this.tree.element.contains(e.dragElem);
+              },
+              drag: (e) => {
+                  // TODO: throttle
+                  return this.handleDrag(e);
+              },
+              dragstop: (e) => {
+                  return this.handleDrag(e);
+              },
+          });
+      }
+      init() {
+          super.init();
+      }
+      handleDrag(e) {
+          const info = Wunderbaum.getEventInfo(e.event);
+          // this.tree.options.
+          this.tree.log(`${e.type}(${e.dx})`, e, info);
+      }
+  }
+
   /*!
    * Wunderbaum - deferred
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   /**
    * Deferred is a ES6 Promise, that exposes the resolve() and reject()` method.
@@ -1900,7 +2097,7 @@
   /*!
    * Wunderbaum - wunderbaum_node
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   /** Top-level properties that can be passed with `data`. */
   const NODE_PROPS = new Set([
@@ -1937,15 +2134,31 @@
       "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 = {};
@@ -2072,7 +2285,7 @@
               //   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 {
@@ -2111,7 +2324,8 @@
       }
       /**
        * Apply a modification (or navigation) operation.
-       * @see Wunderbaum#applyCommand
+       *
+       * @see {@link Wunderbaum.applyCommand}
        */
       applyCommand(cmd, opts) {
           return this.tree.applyCommand(cmd, this, opts);
@@ -2204,8 +2418,7 @@
       }
       /** 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);
@@ -2506,7 +2719,7 @@
                       assert(!this.parent);
                       tree.columns = data.columns;
                       delete data.columns;
-                      tree.renderHeader();
+                      tree.updateColumns({ calculateCols: false });
                   }
                   this._loadSourceObject(data);
               }
@@ -2542,19 +2755,20 @@
                   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;
       }
@@ -2702,7 +2916,7 @@
                   n.tree = targetNode.tree;
               }, true);
           }
-          tree.updateViewport();
+          tree.setModified(ChangeType.structure);
           // TODO: fix selection state
           // TODO: fix active state
       }
@@ -2722,31 +2936,33 @@
           // 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() {
@@ -2778,7 +2994,7 @@
           if (!this.isRootNode()) {
               this.expanded = false;
           }
-          this.tree.updateViewport();
+          this.tree.setModified(ChangeType.structure);
       }
       /** Remove all HTML markup from the DOM. */
       removeMarkup() {
@@ -2871,6 +3087,7 @@
           const activeColIdx = tree.navMode === NavigationMode.row ? null : tree.activeColIdx;
           // let colElems: HTMLElement[];
           const isNew = !rowDiv;
+          assert(!isNew || (opts && opts.after), "opts.after expected, unless updating");
           assert(!this.isRootNode());
           //
           let rowClasses = ["wb-row"];
@@ -2922,7 +3139,7 @@
                   nodeElem.appendChild(elem);
                   ofsTitlePx += ICON_WIDTH;
               }
-              if (level > treeOptions.minExpandLevel) {
+              if (!treeOptions.minExpandLevel || level > treeOptions.minExpandLevel) {
                   expanderSpan = document.createElement("i");
                   nodeElem.appendChild(expanderSpan);
                   ofsTitlePx += ICON_WIDTH;
@@ -3013,11 +3230,11 @@
           if (this.titleWithHighlight) {
               titleSpan.innerHTML = this.titleWithHighlight;
           }
-          else if (tree.options.escapeTitles) {
-              titleSpan.textContent = this.title;
-          }
           else {
-              titleSpan.innerHTML = this.title;
+              // } else if (tree.options.escapeTitles) {
+              titleSpan.textContent = this.title;
+              // } else {
+              //   titleSpan.innerHTML = this.title;
           }
           // Set the width of the title span, so overflow ellipsis work
           if (!treeOptions.skeleton) {
@@ -3051,9 +3268,19 @@
               });
           }
           // Attach to DOM as late as possible
-          // if (!this._rowElem) {
-          tree.nodeListElement.appendChild(rowDiv);
-          // }
+          if (isNew) {
+              const after = opts ? opts.after : "last";
+              switch (after) {
+                  case "first":
+                      tree.nodeListElement.prepend(rowDiv);
+                      break;
+                  case "last":
+                      tree.nodeListElement.appendChild(rowDiv);
+                      break;
+                  default:
+                      opts.after.after(rowDiv);
+              }
+          }
       }
       /**
        * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
@@ -3064,7 +3291,7 @@
           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.
        *
@@ -3127,14 +3354,15 @@
        *
        * 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;
@@ -3169,15 +3397,21 @@
           // 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) {
@@ -3192,7 +3426,7 @@
                           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;
                       }
                   }
@@ -3203,8 +3437,8 @@
           }
           if (prev !== this) {
               tree.activeNode = this;
-              prev === null || prev === void 0 ? void 0 : prev.setDirty(ChangeType.status);
-              this.setDirty(ChangeType.status);
+              prev === null || prev === void 0 ? void 0 : prev.setModified();
+              this.setModified();
           }
           if (options &&
               options.colIdx != null &&
@@ -3215,57 +3449,62 @@
           // requestAnimationFrame(() => {
           //   this.scrollIntoView();
           // })
-          this.scrollIntoView();
-      }
-      setDirty(type) {
-          if (this.tree._disableUpdate) {
-              return;
-          }
-          if (type === ChangeType.structure) {
-              this.tree.updateViewport();
-          }
-          else if (this._rowElem) {
-              // otherwise not in viewport, so no need to render
-              this.render();
-          }
+          return this.scrollIntoView();
       }
+      /**
+       * Expand or collapse this node.
+       */
       async setExpanded(flag = true, options) {
           // alert("" + this.getLevel() + ", "+ this.getOption("minExpandLevel");
           if (!flag &&
               this.isExpanded() &&
               this.getLevel() < this.getOption("minExpandLevel") &&
               !getOption(options, "force")) {
-              this.logDebug("Ignored collapse request.");
+              this.logDebug("Ignored collapse request below expandLevel.");
               return;
           }
           if (flag && this.lazy && this.children == null) {
               await this.loadLazy();
           }
           this.expanded = flag;
-          this.setDirty(ChangeType.structure);
-      }
-      setIcon() {
-          throw new Error("Not yet implemented");
-          // this.setDirty(ChangeType.status);
+          this.tree.setModified(ChangeType.structure);
       }
+      /**
+       * Set keyboard focus here.
+       * @see {@link setActive}
+       */
       setFocus(flag = true, options) {
           const prev = this.tree.focusNode;
           this.tree.focusNode = this;
-          prev === null || prev === void 0 ? void 0 : prev.setDirty(ChangeType.status);
-          this.setDirty(ChangeType.status);
+          prev === null || prev === void 0 ? void 0 : prev.setModified();
+          this.setModified();
       }
+      /** Set a new icon path or class. */
+      setIcon() {
+          throw new Error("Not yet implemented");
+          // this.setModified();
+      }
+      /** Change node's {@link key} and/or {@link refKey}.  */
+      setKey(key, refKey) {
+          throw new Error("Not yet implemented");
+      }
+      /** Schedule a render, typically called to update after a status or data change. */
+      setModified(change = ChangeType.status) {
+          assert(change === ChangeType.status);
+          this.tree.setModified(ChangeType.row, this);
+      }
+      /** Modify the check/uncheck state. */
       setSelected(flag = true, options) {
           const prev = this.selected;
           if (!!flag !== prev) {
               this._callEvent("select", { flag: flag });
           }
           this.selected = !!flag;
-          this.setDirty(ChangeType.status);
+          this.setModified();
       }
-      /** Show node status (ok, loading, error, noData) using styles and a dummy child node.
-       */
+      /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
       setStatus(status, message, details) {
-          let tree = this.tree;
+          const tree = this.tree;
           let statusNode = null;
           const _clearStatusNode = () => {
               // Remove dedicated dummy node, if any
@@ -3336,12 +3575,13 @@
               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
       }
       /**
@@ -3362,10 +3602,16 @@
        * @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.
@@ -3409,7 +3655,8 @@
           }
           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.
        *
@@ -3440,7 +3687,7 @@
   /*!
    * Wunderbaum - ext-edit
    * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
-   * v0.0.1-0, Thu, 31 Mar 2022 10:19:39 GMT (https://github.com/mar10/wunderbaum)
+   * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
    */
   // const START_MARKER = "\uFFF7";
   class EditExtension extends WunderbaumExtension {
@@ -3558,7 +3805,7 @@
                       break;
                   case "F2":
                       if (trigger.indexOf("F2") >= 0) {
-                          // tree.setCellMode(NavigationMode.cellEdit);
+                          // tree.setNavigationMode(NavigationMode.cellEdit);
                           this.startEditTitle();
                           return false;
                       }
@@ -3599,6 +3846,7 @@
           if (validity) {
               // Permanently apply  input validations (CSS and tooltip)
               inputElem.addEventListener("keydown", (e) => {
+                  inputElem.setCustomValidity("");
                   if (!inputElem.reportValidity()) ;
               });
           }
@@ -3639,6 +3887,11 @@
           }
           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,
@@ -3725,12 +3978,12 @@
    * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
    * Released under the MIT license.
    *
-   * @version v0.0.1-0
-   * @date Thu, 31 Mar 2022 10:19:39 GMT
+   * @version v0.0.3
+   * @date Mon, 18 Apr 2022 11:52:44 GMT
    */
   // const class_prefix = "wb-";
   // const node_props: string[] = ["title", "key", "refKey"];
-  const MAX_CHANGED_NODES = 10;
+  // const MAX_CHANGED_NODES = 10;
   /**
    * A persistent plain object or array.
    *
@@ -3742,36 +3995,43 @@
           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,
@@ -3782,7 +4042,7 @@
               rowHeightPx: ROW_HEIGHT,
               columns: null,
               types: null,
-              escapeTitles: true,
+              // escapeTitles: true,
               showSpinner: false,
               checkbox: true,
               minExpandLevel: 0,
@@ -3839,6 +4099,7 @@
           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;
@@ -3932,11 +4193,9 @@
                   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
@@ -3946,13 +4205,10 @@
           }, 50);
           // --- Bind listeners
           this.scrollContainer.addEventListener("scroll", (e) => {
-              this.updateViewport();
+              this.setModified(ChangeType.vscroll);
           });
-          // window.addEventListener("resize", (e: Event) => {
-          //   this.updateViewport();
-          // });
           this.resizeObserver = new ResizeObserver((entries) => {
-              this.updateViewport();
+              this.setModified(ChangeType.vscroll);
               console.log("ResizeObserver: Size changed", entries);
           });
           this.resizeObserver.observe(this.element);
@@ -4009,37 +4265,18 @@
                       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) {
@@ -4080,9 +4317,8 @@
           }
           return null;
       }
-      /** Return a WunderbaumNode instance from element, event.
-       *
-       * @param  el
+      /**
+       * Return a WunderbaumNode instance from element or event.
        */
       static getNode(el) {
           if (!el) {
@@ -4104,7 +4340,7 @@
           }
           return null;
       }
-      /** */
+      /** @internal */
       _registerExtension(extension) {
           this.extensionList.push(extension);
           this.extensions[extension.id] = extension;
@@ -4146,7 +4382,7 @@
           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.*/
@@ -4164,7 +4400,9 @@
           }
           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")
@@ -4181,7 +4419,9 @@
               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})
@@ -4197,27 +4437,33 @@
               //   this.logError(`Triggering undefined event '${name}'.`)
           }
       }
-      /** Return the topmost visible node in the viewport */
-      _firstNodeInView(complete = true) {
-          let topIdx, node;
-          if (complete) {
-              topIdx = Math.ceil(this.scrollContainer.scrollTop / ROW_HEIGHT);
-          }
-          else {
-              topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
-          }
+      /** Return the node for  given row index. */
+      _getNodeByRowIdx(idx) {
           // TODO: start searching from active node (reverse)
+          let node = null;
           this.visitRows((n) => {
-              if (n._rowIdx === topIdx) {
+              if (n._rowIdx === idx) {
                   node = n;
                   return false;
               }
           });
           return node;
       }
-      /** Return the lowest visible node in the viewport */
+      /** Return the topmost visible node in the viewport. */
+      _firstNodeInView(complete = true) {
+          let topIdx;
+          const gracePy = 1; // ignore subpixel scrolling
+          if (complete) {
+              topIdx = Math.ceil((this.scrollContainer.scrollTop - gracePy) / ROW_HEIGHT);
+          }
+          else {
+              topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
+          }
+          return this._getNodeByRowIdx(topIdx);
+      }
+      /** Return the lowest visible node in the viewport. */
       _lastNodeInView(complete = true) {
-          let bottomIdx, node;
+          let bottomIdx;
           if (complete) {
               bottomIdx =
                   Math.floor((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
@@ -4228,16 +4474,10 @@
                   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;
@@ -4247,7 +4487,7 @@
           }, { 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;
@@ -4257,10 +4497,15 @@
           }, { 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.
@@ -4385,16 +4630,17 @@
           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 ---
@@ -4402,7 +4648,7 @@
           // public cellNavMode = false;
           // public lastQuicksearchTime = 0;
           // public lastQuicksearchTerm = "";
-          this.updateViewport();
+          this.setModified(ChangeType.structure);
       }
       /**
        * Clear nodes and markup and detach events and observers.
@@ -4422,10 +4668,11 @@
       /**
        * 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;
@@ -4469,18 +4716,14 @@
       }
       /** 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). */
@@ -4498,11 +4741,12 @@
       /** 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) => {
@@ -4513,25 +4757,30 @@
           }
           // 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) {
@@ -4561,7 +4810,8 @@
           }
           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'.
@@ -4571,7 +4821,7 @@
        */
       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) {
@@ -4627,9 +4877,9 @@
                   res = this._getNextNodeInView(node);
                   break;
               case "pageDown":
-                  let bottomNode = this._lastNodeInView();
-                  // this.logDebug(where, this.focusNode, bottomNode);
-                  if (this.focusNode !== bottomNode) {
+                  const bottomNode = this._lastNodeInView();
+                  // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
+                  if (node._rowIdx < bottomNode._rowIdx) {
                       res = bottomNode;
                   }
                   else {
@@ -4637,12 +4887,13 @@
                   }
                   break;
               case "pageUp":
-                  if (this.focusNode && this.focusNode._rowIdx === 0) {
-                      res = this.focusNode;
+                  if (node._rowIdx === 0) {
+                      res = node;
                   }
                   else {
-                      let topNode = this._firstNodeInView();
-                      if (this.focusNode !== topNode) {
+                      const topNode = this._firstNodeInView();
+                      // this.logDebug(`${where}(${node}) -> ${topNode}`);
+                      if (node._rowIdx > topNode._rowIdx) {
                           res = topNode;
                       }
                       else {
@@ -4656,7 +4907,7 @@
           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) {
@@ -4670,8 +4921,8 @@
       getActiveNode() {
           return this.activeNode;
       }
-      /** Return the first top level node if any (not the invisible root node).
-       * @returns {FancytreeNode | null}
+      /**
+       * Return the first top level node if any (not the invisible root node).
        */
       getFirstChild() {
           return this.root.getFirstChild();
@@ -4682,14 +4933,15 @@
       getFocusNode() {
           return this.focusNode;
       }
-      /** Return a {node: FancytreeNode, region: TYPE} object for a mouse event.
+      /** Return a {node: WunderbaumNode, region: TYPE} object for a mouse event.
        *
        * @param {Event} event Mouse event, e.g. click, ...
-       * @returns {object} Return a {node: FancytreeNode, region: TYPE} object
+       * @returns {object} Return a {node: WunderbaumNode, region: TYPE} object
        *     TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
        */
       static getEventInfo(event) {
-          let target = event.target, cl = target.classList, parentCol = target.closest(".wb-col"), node = Wunderbaum.getNode(target), res = {
+          let target = event.target, cl = target.classList, parentCol = target.closest("span.wb-col"), node = Wunderbaum.getNode(target), tree = node ? node.tree : Wunderbaum.getTree(event), res = {
+              tree: tree,
               node: node,
               region: TargetType.unknown,
               colDef: undefined,
@@ -4721,13 +4973,15 @@
           }
           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;
@@ -4751,7 +5005,8 @@
       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;
@@ -4778,7 +5033,7 @@
               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());
@@ -4805,77 +5060,13 @@
               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;
@@ -4896,30 +5087,18 @@
               // Node is above viewport
               newTop = nodeOfs + MARGIN;
           }
-          this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
           if (newTop != null) {
+              this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
               this.scrollContainer.scrollTop = newTop;
-              this.updateViewport();
-          }
-      }
-      /** */
-      setCellMode(mode) {
-          // util.assert(this.cellNavMode);
-          // util.assert(0 <= colIdx && colIdx < this.columns.length);
-          if (mode === this.navMode) {
-              return;
-          }
-          const prevMode = this.navMode;
-          const cellMode = mode !== NavigationMode.row;
-          this.navMode = mode;
-          if (cellMode && prevMode === NavigationMode.row) {
-              this.setColumn(0);
+              this.setModified(ChangeType.vscroll);
           }
-          this.element.classList.toggle("wb-cell-mode", cellMode);
-          this.element.classList.toggle("wb-cell-edit-mode", mode === NavigationMode.cellEdit);
-          this.setModified(ChangeType.row, this.activeNode);
       }
-      /** */
+      /**
+       * Set column #colIdx to 'active'.
+       *
+       * This higlights the column header and -cells by adding the `wb-active` class.
+       * Available in cell-nav and cell-edit mode, not in row-mode.
+       */
       setColumn(colIdx) {
           assert(this.navMode !== NavigationMode.row);
           assert(0 <= colIdx && colIdx < this.columns.length);
@@ -4944,7 +5123,7 @@
               }
           }
       }
-      /** */
+      /** Set or remove keybaord focus to the tree container. */
       setFocus(flag = true) {
           if (flag) {
               this.element.focus();
@@ -4953,88 +5132,145 @@
               this.element.blur();
           }
       }
-      /** */
       setModified(change, node, options) {
-          if (!this.changedSince) {
-              this.changedSince = Date.now();
+          if (this._disableUpdateCount) {
+              // Assuming that we redraw all when enableUpdate() is re-enabled.
+              // this.log(
+              //   `IGNORED setModified(${change}) node=${node} (disable level ${this._disableUpdateCount})`
+              // );
+              return;
           }
-          this.changes.add(change);
-          if (change === ChangeType.structure) {
-              this.changedNodes.clear();
+          // this.log(`setModified(${change}) node=${node}`);
+          if (!(node instanceof WunderbaumNode)) {
+              options = node;
+          }
+          const immediate = !!getOption(options, "immediate");
+          switch (change) {
+              case ChangeType.any:
+              case ChangeType.structure:
+              case ChangeType.header:
+                  this.changeRedrawRequestPending = true;
+                  this.updateViewport(immediate);
+                  break;
+              case ChangeType.vscroll:
+                  this.updateViewport(immediate);
+                  break;
+              case ChangeType.row:
+              case ChangeType.status:
+                  // Single nodes are immedialtely updated if already inside the viewport
+                  // (otherwise we can ignore)
+                  if (node._rowElem) {
+                      node.render();
+                  }
+                  break;
+              default:
+                  error(`Invalid change type ${change}`);
           }
-          else if (node && !this.changes.has(ChangeType.structure)) {
-              if (this.changedNodes.size < MAX_CHANGED_NODES) {
-                  this.changedNodes.add(node);
-              }
-              else {
-                  this.changes.add(ChangeType.structure);
-                  this.changedNodes.clear();
-              }
+      }
+      /** Set the tree's navigation mode. */
+      setNavigationMode(mode) {
+          // util.assert(this.cellNavMode);
+          // util.assert(0 <= colIdx && colIdx < this.columns.length);
+          if (mode === this.navMode) {
+              return;
           }
-          // this.log("setModified(" + change + ")", node);
+          const prevMode = this.navMode;
+          const cellMode = mode !== NavigationMode.row;
+          this.navMode = mode;
+          if (cellMode && prevMode === NavigationMode.row) {
+              this.setColumn(0);
+          }
+          this.element.classList.toggle("wb-cell-mode", cellMode);
+          this.element.classList.toggle("wb-cell-edit-mode", mode === NavigationMode.cellEdit);
+          this.setModified(ChangeType.row, this.activeNode);
       }
+      /** Display tree status (ok, loading, error, noData) using styles and a dummy root node. */
       setStatus(status, message, details) {
           return this.root.setStatus(status, message, details);
       }
       /** Update column headers and width. */
       updateColumns(opts) {
-          let modified = false;
-          let minWidth = 4;
-          let vpWidth = this.element.clientWidth;
+          opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
+          const minWidth = 4;
+          const vpWidth = this.element.clientWidth;
           let totalWeight = 0;
           let fixedWidth = 0;
-          // Gather width requests
-          this._columnsById = {};
-          for (let col of this.columns) {
-              this._columnsById[col.id] = col;
-              let cw = col.width;
-              if (!cw || cw === "*") {
-                  col._weight = 1.0;
-                  totalWeight += 1.0;
-              }
-              else if (typeof cw === "number") {
-                  col._weight = cw;
-                  totalWeight += cw;
-              }
-              else if (typeof cw === "string" && cw.endsWith("px")) {
-                  col._weight = 0;
-                  let px = parseFloat(cw.slice(0, -2));
-                  if (col._widthPx != px) {
-                      modified = true;
-                      col._widthPx = px;
+          let modified = false;
+          if (opts.calculateCols) {
+              // Gather width requests
+              this._columnsById = {};
+              for (let col of this.columns) {
+                  this._columnsById[col.id] = col;
+                  let cw = col.width;
+                  if (!cw || cw === "*") {
+                      col._weight = 1.0;
+                      totalWeight += 1.0;
+                  }
+                  else if (typeof cw === "number") {
+                      col._weight = cw;
+                      totalWeight += cw;
+                  }
+                  else if (typeof cw === "string" && cw.endsWith("px")) {
+                      col._weight = 0;
+                      let px = parseFloat(cw.slice(0, -2));
+                      if (col._widthPx != px) {
+                          modified = true;
+                          col._widthPx = px;
+                      }
+                      fixedWidth += px;
+                  }
+                  else {
+                      error("Invalid column width: " + cw);
                   }
-                  fixedWidth += px;
               }
-              else {
-                  error("Invalid column width: " + cw);
-              }
-          }
-          // Share remaining space between non-fixed columns
-          let restPx = Math.max(0, vpWidth - fixedWidth);
-          let ofsPx = 0;
-          for (let col of this.columns) {
-              if (col._weight) {
-                  let px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
-                  if (col._widthPx != px) {
-                      modified = true;
-                      col._widthPx = px;
+              // Share remaining space between non-fixed columns
+              const restPx = Math.max(0, vpWidth - fixedWidth);
+              let ofsPx = 0;
+              for (let col of this.columns) {
+                  if (col._weight) {
+                      const px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
+                      if (col._widthPx != px) {
+                          modified = true;
+                          col._widthPx = px;
+                      }
                   }
+                  col._ofsPx = ofsPx;
+                  ofsPx += col._widthPx;
               }
-              col._ofsPx = ofsPx;
-              ofsPx += col._widthPx;
           }
           // Every column has now a calculated `_ofsPx` and `_widthPx`
           // this.logInfo("UC", this.columns, vpWidth, this.element.clientWidth, this.element);
           // console.trace();
           // util.error("BREAK");
           if (modified) {
-              this.renderHeader();
-              if (opts.render !== false) {
-                  this.render();
+              this._renderHeaderMarkup();
+              if (opts.updateRows) {
+                  this._updateRows();
               }
           }
       }
-      /** Render all rows that are visible in the viewport. */
+      /** Create/update header markup from `this.columns` definition.
+       * @internal
+       */
+      _renderHeaderMarkup() {
+          if (!this.headerElement) {
+              return;
+          }
+          const headerRow = this.headerElement.querySelector(".wb-row");
+          assert(headerRow);
+          headerRow.innerHTML = "<span class='wb-col'></span>".repeat(this.columns.length);
+          for (let i = 0; i < this.columns.length; i++) {
+              const col = this.columns[i];
+              const colElem = headerRow.children[i];
+              colElem.style.left = col._ofsPx + "px";
+              colElem.style.width = col._widthPx + "px";
+              // colElem.textContent = col.title || col.id;
+              const title = escapeHtml(col.title || col.id);
+              colElem.innerHTML = `<span class="wb-col-title">${title}</span> <span class="wb-col-resizer"></span>`;
+              // colElem.innerHTML = `${title} <span class="wb-col-resizer"></span>`;
+          }
+      }
+      /** Render header and all rows that are visible in the viewport (async, throttled). */
       updateViewport(immediate = false) {
           // Call the `throttle` wrapper for `this._updateViewport()` which will
           // execute immediately on the leading edge of a sequence:
@@ -5043,39 +5279,163 @@
               this._updateViewportThrottled.flush();
           }
       }
+      /**
+       * This is the actual update method, which is wrapped inside a throttle method.
+       * This protected method should not be called directly but via
+       * `tree.updateViewport()` or `tree.setModified()`.
+       * It calls `updateColumns()` and `_updateRows()`.
+       * @internal
+       */
       _updateViewport() {
-          if (this._disableUpdate) {
+          if (this._disableUpdateCount) {
+              this.log(`IGNORED _updateViewport() disable level: ${this._disableUpdateCount}`);
               return;
           }
+          const newNodesOnly = !this.changeRedrawRequestPending;
+          this.changeRedrawRequestPending = false;
           let height = this.scrollContainer.clientHeight;
-          // We cannot get the height for abolut positioned parent, so look at first col
+          // We cannot get the height for absolute positioned parent, so look at first col
           // let headerHeight = this.headerElement.clientHeight
           // let headerHeight = this.headerElement.children[0].children[0].clientHeight;
           const headerHeight = this.options.headerHeightPx;
-          let wantHeight = this.element.clientHeight - headerHeight;
-          let ofs = this.scrollContainer.scrollTop;
+          const wantHeight = this.element.clientHeight - headerHeight;
           if (Math.abs(height - wantHeight) > 1.0) {
               // this.log("resize", height, wantHeight);
               this.scrollContainer.style.height = wantHeight + "px";
               height = wantHeight;
           }
-          this.updateColumns({ render: false });
-          this.render({
-              startIdx: Math.max(0, ofs / ROW_HEIGHT - RENDER_MAX_PREFETCH),
-              endIdx: Math.max(0, (ofs + height) / ROW_HEIGHT + RENDER_MAX_PREFETCH),
-          });
+          this.updateColumns({ updateRows: false });
+          this._updateRows({ newNodesOnly: newNodesOnly });
           this._callEvent("update");
       }
-      /** Call callback(node) for all nodes in hierarchical order (depth-first).
+      /**
+       * Assert that TR order matches the natural node order
+       * @internal
+       */
+      _validateRows() {
+          let trs = this.nodeListElement.childNodes;
+          let i = 0;
+          let prev = -1;
+          let ok = true;
+          trs.forEach((element) => {
+              const tr = element;
+              const top = Number.parseInt(tr.style.top);
+              const n = tr._wb_node;
+              // if (i < 4) {
+              //   console.info(
+              //     `TR#${i}, rowIdx=${n._rowIdx} , top=${top}px: '${n.title}'`
+              //   );
+              // }
+              if (top <= prev) {
+                  console.warn(`TR order mismatch at index ${i}: top=${top}px, node=${n}`);
+                  // throw new Error("fault");
+                  ok = false;
+              }
+              prev = top;
+              i++;
+          });
+          return ok;
+      }
+      /*
+       * - Traverse all *visible* of the whole tree, i.e. skip collapsed nodes.
+       * - Store count of rows to `tree.treeRowCount`.
+       * - Renumber `node._rowIdx` for all visible nodes.
+       * - Calculate the index range that must be rendered to fill the viewport
+       *   (including upper and lower prefetch)
+       * -
+       */
+      _updateRows(opts) {
+          const label = this.logTime("_updateRows");
+          opts = Object.assign({ newNodesOnly: false }, opts);
+          const newNodesOnly = !!opts.newNodesOnly;
+          const row_height = ROW_HEIGHT;
+          const vp_height = this.scrollContainer.clientHeight;
+          const prefetch = RENDER_MAX_PREFETCH;
+          const ofs = this.scrollContainer.scrollTop;
+          let startIdx = Math.max(0, ofs / row_height - prefetch);
+          startIdx = Math.floor(startIdx);
+          // Make sure start is always even, so the alternating row colors don't
+          // change when scrolling:
+          if (startIdx % 2) {
+              startIdx--;
+          }
+          let endIdx = Math.max(0, (ofs + vp_height) / row_height + prefetch);
+          endIdx = Math.ceil(endIdx);
+          // const obsoleteViewNodes = this.viewNodes;
+          // this.viewNodes = new Set();
+          // const viewNodes = this.viewNodes;
+          // this.debug("render", opts);
+          const obsoleteNodes = new Set();
+          this.nodeListElement.childNodes.forEach((elem) => {
+              const tr = elem;
+              obsoleteNodes.add(tr._wb_node);
+          });
+          let idx = 0;
+          let top = 0;
+          let modified = false;
+          let prevElem = "first";
+          this.visitRows(function (node) {
+              // console.log("visit", node)
+              const rowDiv = node._rowElem;
+              // Renumber all expanded nodes
+              if (node._rowIdx !== idx) {
+                  node._rowIdx = idx;
+                  modified = true;
+              }
+              if (idx < startIdx || idx > endIdx) {
+                  // row is outside viewport bounds
+                  if (rowDiv) {
+                      prevElem = rowDiv;
+                  }
+              }
+              else if (rowDiv && newNodesOnly) {
+                  obsoleteNodes.delete(node);
+                  // no need to update existing node markup
+                  rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                  prevElem = rowDiv;
+              }
+              else {
+                  obsoleteNodes.delete(node);
+                  // Create new markup
+                  node.render({ top: top, after: prevElem });
+                  // console.log("render", top, prevElem, "=>", node._rowElem);
+                  prevElem = node._rowElem;
+              }
+              idx++;
+              top += row_height;
+          });
+          this.treeRowCount = idx;
+          for (const n of obsoleteNodes) {
+              n._callEvent("discard");
+              n.removeMarkup();
+          }
+          // Resize tree container
+          this.nodeListElement.style.height = `${top}px`;
+          // this.log(
+          //   `render(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
+          //   this.nodeListElement.style.height
+          // );
+          this.logTimeEnd(label);
+          this._validateRows();
+          return modified;
+      }
+      /**
+       * Call callback(node) for all nodes in hierarchical order (depth-first).
        *
        * @param {function} callback the callback function.
-       *     Return false to stop iteration, return "skip" to skip this node and children only.
+       *     Return false to stop iteration, return "skip" to skip this node and
+       *     children only.
        * @returns {boolean} false, if the iterator was stopped.
        */
       visit(callback) {
           return this.root.visit(callback, false);
       }
-      /** Call fn(node) for all nodes in vertical order, top down (or bottom up).<br>
+      /**
+       * Call fn(node) for all nodes in vertical order, top down (or bottom up).
+       *
+       * Note that this considers expansion state, i.e. children of collapsed nodes
+       * are skipped.
+       *
        * Stop iteration, if fn() returns false.<br>
        * Return false if iteration was stopped.
        *
@@ -5155,7 +5515,8 @@
           }
           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) {
@@ -5199,19 +5560,36 @@
           }
           return true;
       }
-      /** . */
+      /**
+       * Reload the tree with a new source.
+       *
+       * Previous data is cleared.
+       * Pass `options.columns` to define a header (may also be part of `source.columns`).
+       */
       load(source, options = {}) {
           this.clear();
           const columns = options.columns || source.columns;
           if (columns) {
               this.columns = options.columns;
-              this.renderHeader();
-              // this.updateColumns({ render: false });
+              // this._renderHeaderMarkup();
+              this.updateColumns({ calculateCols: false });
           }
           return this.root.load(source);
       }
       /**
+       * Disable render requests during operations that would trigger many updates.
        *
+       * ```js
+       * try {
+       *   tree.enableUpdate(false);
+       *   // ... (long running operation that would trigger many updates)
+       *   foo();
+       *   // ... NOTE: make sure that async operations have finished
+       *   await foo();
+       * } finally {
+       *   tree.enableUpdate(true);
+       * }
+       * ```
        */
       enableUpdate(flag) {
           /*
@@ -5219,20 +5597,22 @@
           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
@@ -5265,12 +5645,14 @@
           return this.extensions.filter.updateFilter();
       }
   }
-  Wunderbaum.version = "v0.0.1-0"; // Set to semver by 'grunt release'
   Wunderbaum.sequence = 0;
+  /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
+  Wunderbaum.version = "v0.0.3"; // Set to semver by 'grunt release'
+  /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
   Wunderbaum.util = util;
 
   exports.Wunderbaum = Wunderbaum;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));