wunderbaum 0.0.3 → 0.0.6

package/dist/wunderbaum.esm.js

@@ -1,7 +1,7 @@
 /*!
  * Wunderbaum - util
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 /** @module util */
 /** Readable names for `MouseEvent.button` */
@@ -173,7 +173,7 @@ function extractHtmlText(s) {
  *
  * If a `<span class="wb-col">` is passed, the first child input is used.
  * Depending on the target element type, `value` is interpreted accordingly.
- * For example for a checkbox, a value of true, false, or null is returned if the
+ * For example for a checkbox, a value of true, false, or null is returned if
  * the element is checked, unchecked, or indeterminate.
  * For datetime input control a numerical value is assumed, etc.
  *
@@ -262,6 +262,7 @@ function setValueToElem(elem, value) {
         if (embeddedInput) {
             return setValueToElem(embeddedInput, value);
         }
+        // No embedded input: simply write as escaped html
         span.innerText = "" + value;
     }
     else if (tag === "INPUT") {
@@ -269,7 +270,9 @@ function setValueToElem(elem, value) {
         const type = input.type;
         switch (type) {
             case "checkbox":
-                input.indeterminate = value == null;
+                // An explicit `null` value is interpreted as 'indeterminate'.
+                // `undefined` is interpreted as 'unchecked'
+                input.indeterminate = value === null;
                 input.checked = !!value;
                 break;
             case "date":
@@ -299,14 +302,30 @@ function setValueToElem(elem, value) {
                 break;
             case "text":
             default:
-                input.innerText = value;
+                input.value = value || "";
         }
     }
     else if (tag === "SELECT") {
         const select = elem;
-        select.value = value;
+        if (value == null) {
+            select.selectedIndex = -1;
+        }
+        else {
+            select.value = value;
+        }
+    }
+}
+/** Show/hide element by setting the `display`style to 'none'. */
+function setElemDisplay(elem, flag) {
+    const style = elemFromSelector(elem).style;
+    if (flag) {
+        if (style.display === "none") {
+            style.display = "";
+        }
+    }
+    else if (style.display === "") {
+        style.display = "none";
     }
-    // return value;
 }
 /** Create and return an unconnected `HTMLElement` from a HTML string. */
 function elemFromHtml(html) {
@@ -479,7 +498,7 @@ function setTimeoutPromise(callback, ms) {
     return new Promise((resolve, reject) => {
         setTimeout(() => {
             try {
-                resolve(callback.apply(self));
+                resolve(callback.apply(this));
             }
             catch (err) {
                 reject(err);
@@ -566,13 +585,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', ...) */
+/** 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.adaptiveThrottle(foo.bind(this), {});
+ * throttledFoo();
+ * throttledFoo();
+ * ```
+ */
+function adaptiveThrottle(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(`adaptiveThrottle() queing request #${waiting}...`, args);
+            waiting += 1;
+        }
+        else {
+            // Prevent invocations while running or blocking
+            waiting = 1;
+            const useArgs = args; // pendingArgs || args;
+            pendingArgs = null;
+            // console.log(`adaptiveThrottle() 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(
+            //   `adaptiveThrottle() 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(
+                    //   `adaptiveThrottle() re-trigger (missed ${skipped})...`,
+                    //   pendingArgs
+                    // );
+                    throttledFn.apply(this, pendingArgs);
+                }
+            }, useDelay);
+        }
+    };
+    return throttledFn;
+}
 
 var util = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -591,6 +676,7 @@ var util = /*#__PURE__*/Object.freeze({
   extractHtmlText: extractHtmlText,
   getValueFromElem: getValueFromElem,
   setValueToElem: setValueToElem,
+  setElemDisplay: setElemDisplay,
   elemFromHtml: elemFromHtml,
   elemFromSelector: elemFromSelector,
   eventTargetFromSelector: eventTargetFromSelector,
@@ -608,29 +694,34 @@ var util = /*#__PURE__*/Object.freeze({
   toggleCheckbox: toggleCheckbox,
   getOption: getOption,
   toSet: toSet,
-  type: type
+  type: type,
+  adaptiveThrottle: adaptiveThrottle
 });
 
 /*!
- * Wunderbaum - common
+ * Wunderbaum - types
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
-const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
-const ROW_HEIGHT = 22;
-const ICON_WIDTH = 20;
-const ROW_EXTRA_PAD = 7; // 2x $col-padding-x + 3px rounding errors
-const RENDER_MAX_PREFETCH = 5;
-const TEST_IMG = new RegExp(/\.|\//); // strings are considered image urls if they contain '.' or '/'
+/** Possible values for `setModified()`. */
 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["header"] = "header";
 })(ChangeType || (ChangeType = {}));
+/** Possible values for `setStatus()`. */
 var NodeStatusType;
 (function (NodeStatusType) {
     NodeStatusType["ok"] = "ok";
@@ -639,7 +730,7 @@ var NodeStatusType;
     NodeStatusType["noData"] = "noData";
     // paging = "paging",
 })(NodeStatusType || (NodeStatusType = {}));
-/**Define the subregion of a node, where an event occurred. */
+/** Define the subregion of a node, where an event occurred. */
 var TargetType;
 (function (TargetType) {
     TargetType["unknown"] = "";
@@ -650,87 +741,19 @@ var TargetType;
     TargetType["prefix"] = "prefix";
     TargetType["title"] = "title";
 })(TargetType || (TargetType = {}));
-let iconMap = {
-    error: "bi bi-exclamation-triangle",
-    // loading: "bi bi-hourglass-split",
-    loading: "bi bi-arrow-repeat wb-spin",
-    // loading: '<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>',
-    // noData: "bi bi-search",
-    noData: "bi bi-question-circle",
-    expanderExpanded: "bi bi-chevron-down",
-    // expanderExpanded: "bi bi-dash-square",
-    expanderCollapsed: "bi bi-chevron-right",
-    // expanderCollapsed: "bi bi-plus-square",
-    expanderLazy: "bi bi-chevron-right wb-helper-lazy-expander",
-    // expanderLazy: "bi bi-chevron-bar-right",
-    checkChecked: "bi bi-check-square",
-    checkUnchecked: "bi bi-square",
-    checkUnknown: "bi dash-square-dotted",
-    radioChecked: "bi bi-circle-fill",
-    radioUnchecked: "bi bi-circle",
-    radioUnknown: "bi bi-circle-dotted",
-    folder: "bi bi-folder2",
-    folderOpen: "bi bi-folder2-open",
-    doc: "bi bi-file-earmark",
-};
-var NavigationModeOption;
-(function (NavigationModeOption) {
-    NavigationModeOption["startRow"] = "startRow";
-    NavigationModeOption["cell"] = "cell";
-    NavigationModeOption["startCell"] = "startCell";
-    NavigationModeOption["row"] = "row";
-})(NavigationModeOption || (NavigationModeOption = {}));
-var NavigationMode;
-(function (NavigationMode) {
-    NavigationMode["row"] = "row";
-    NavigationMode["cellNav"] = "cellNav";
-    NavigationMode["cellEdit"] = "cellEdit";
-})(NavigationMode || (NavigationMode = {}));
-/** Map `KeyEvent.key` to navigation action. */
-const KEY_TO_ACTION_DICT = {
-    " ": "toggleSelect",
-    "+": "expand",
-    Add: "expand",
-    ArrowDown: "down",
-    ArrowLeft: "left",
-    ArrowRight: "right",
-    ArrowUp: "up",
-    Backspace: "parent",
-    "/": "collapseAll",
-    Divide: "collapseAll",
-    End: "lastCol",
-    Home: "firstCol",
-    "Control+End": "last",
-    "Control+Home": "first",
-    "Meta+ArrowDown": "last",
-    "Meta+ArrowUp": "first",
-    "*": "expandAll",
-    Multiply: "expandAll",
-    PageDown: "pageDown",
-    PageUp: "pageUp",
-    "-": "collapse",
-    Subtract: "collapse",
-};
-/** */
-function makeNodeTitleMatcher(s) {
-    s = escapeRegex(s.toLowerCase());
-    return function (node) {
-        return node.title.toLowerCase().indexOf(s) >= 0;
-    };
-}
-/** */
-function makeNodeTitleStartMatcher(s) {
-    s = escapeRegex(s);
-    const reMatch = new RegExp("^" + s, "i");
-    return function (node) {
-        return reMatch.test(node.title);
-    };
-}
+/** Initial navigation mode and possible transition. */
+var NavigationOptions;
+(function (NavigationOptions) {
+    NavigationOptions["startRow"] = "startRow";
+    NavigationOptions["cell"] = "cell";
+    NavigationOptions["startCell"] = "startCell";
+    NavigationOptions["row"] = "row";
+})(NavigationOptions || (NavigationOptions = {}));
 
 /*!
  * Wunderbaum - wb_extension_base
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 class WunderbaumExtension {
     constructor(tree, id, defaults) {
@@ -753,14 +776,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
     //       )
@@ -1017,75 +1040,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.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 const START_MARKER = "\uFFF7";
 const END_MARKER = "\uFFF8";
@@ -1094,6 +1053,7 @@ const RE_END_MARTKER = new RegExp(escapeRegex(END_MARKER), "g");
 class FilterExtension extends WunderbaumExtension {
     constructor(tree) {
         super(tree, "filter", {
+            connectInput: null,
             autoApply: true,
             autoExpand: false,
             counter: true,
@@ -1102,22 +1062,32 @@ class FilterExtension extends WunderbaumExtension {
             hideExpanders: false,
             highlight: true,
             leavesOnly: false,
-            mode: "hide",
+            mode: "dim",
             noData: true, // Display a 'no data' status node if result is empty
         });
         this.lastFilterArgs = null;
     }
     init() {
         super.init();
-        let attachInput = this.getPluginOption("attachInput");
-        if (attachInput) {
-            this.queryInput = elemFromSelector(attachInput);
+        const connectInput = this.getPluginOption("connectInput");
+        if (connectInput) {
+            this.queryInput = elemFromSelector(connectInput);
             onEvent(this.queryInput, "input", debounce((e) => {
                 // this.tree.log("query", e);
                 this.filterNodes(this.queryInput.value.trim(), {});
             }, 700));
         }
     }
+    setPluginOption(name, value) {
+        // alert("filter opt=" + name + ", " + value)
+        super.setPluginOption(name, value);
+        switch (name) {
+            case "mode":
+                this.tree.filterMode = value === "hide" ? "hide" : "dim";
+                this.tree.updateFilter();
+                break;
+        }
+    }
     _applyFilterNoUpdate(filter, branchMode, _opts) {
         return this.tree.runWithoutUpdate(() => {
             return this._applyFilterImpl(filter, branchMode, _opts);
@@ -1376,19 +1346,145 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = true) {
     return textPoses.join("");
 }
 
+/*!
+ * Wunderbaum - common
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
+ */
+const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
+const ROW_HEIGHT = 22;
+// export const HEADER_HEIGHT = ROW_HEIGHT;
+const ICON_WIDTH = 20;
+const ROW_EXTRA_PAD = 7; // 2x $col-padding-x + 3px rounding errors
+const RENDER_MAX_PREFETCH = 5;
+const TEST_IMG = new RegExp(/\.|\//); // strings are considered image urls if they contain '.' or '/'
+// export const RECURSIVE_REQUEST_ERROR = "$recursive_request";
+// export const INVALID_REQUEST_TARGET_ERROR = "$request_target_invalid";
+let iconMap = {
+    error: "bi bi-exclamation-triangle",
+    // loading: "bi bi-hourglass-split wb-busy",
+    loading: "bi bi-chevron-right wb-busy",
+    // loading: "bi bi-arrow-repeat wb-spin",
+    // loading: '<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>',
+    // noData: "bi bi-search",
+    noData: "bi bi-question-circle",
+    expanderExpanded: "bi bi-chevron-down",
+    // expanderExpanded: "bi bi-dash-square",
+    expanderCollapsed: "bi bi-chevron-right",
+    // expanderCollapsed: "bi bi-plus-square",
+    expanderLazy: "bi bi-chevron-right wb-helper-lazy-expander",
+    // expanderLazy: "bi bi-chevron-bar-right",
+    checkChecked: "bi bi-check-square",
+    checkUnchecked: "bi bi-square",
+    checkUnknown: "bi dash-square-dotted",
+    radioChecked: "bi bi-circle-fill",
+    radioUnchecked: "bi bi-circle",
+    radioUnknown: "bi bi-circle-dotted",
+    folder: "bi bi-folder2",
+    folderOpen: "bi bi-folder2-open",
+    doc: "bi bi-file-earmark",
+};
+/** Dict keys that are evaluated by source loader (others are added to `tree.data` instead). */
+const RESERVED_TREE_SOURCE_KEYS = new Set([
+    "children",
+    "columns",
+    "format",
+    "keyMap",
+    "positional",
+    "typeList",
+    "types",
+    "version", // reserved for future use
+]);
+/** Key codes that trigger grid navigation, even when inside an input element. */
+const INPUT_BREAKOUT_KEYS = new Set([
+    // "ArrowDown",
+    // "ArrowUp",
+    "Enter",
+    "Escape",
+]);
+/** Map `KeyEvent.key` to navigation action. */
+const KEY_TO_ACTION_DICT = {
+    " ": "toggleSelect",
+    "+": "expand",
+    Add: "expand",
+    ArrowDown: "down",
+    ArrowLeft: "left",
+    ArrowRight: "right",
+    ArrowUp: "up",
+    Backspace: "parent",
+    "/": "collapseAll",
+    Divide: "collapseAll",
+    End: "lastCol",
+    Home: "firstCol",
+    "Control+End": "last",
+    "Control+Home": "first",
+    "Meta+ArrowDown": "last",
+    "Meta+ArrowUp": "first",
+    "*": "expandAll",
+    Multiply: "expandAll",
+    PageDown: "pageDown",
+    PageUp: "pageUp",
+    "-": "collapse",
+    Subtract: "collapse",
+};
+/** Return a callback that returns true if the node title contains a substring (case-insensitive). */
+function makeNodeTitleMatcher(s) {
+    s = escapeRegex(s.toLowerCase());
+    return function (node) {
+        return node.title.toLowerCase().indexOf(s) >= 0;
+    };
+}
+/** Return a callback that returns true if the node title starts with a string (case-insensitive). */
+function makeNodeTitleStartMatcher(s) {
+    s = escapeRegex(s);
+    const reMatch = new RegExp("^" + s, "i");
+    return function (node) {
+        return reMatch.test(node.title);
+    };
+}
+
 /*!
  * Wunderbaum - ext-keynav
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
+const QUICKSEARCH_DELAY = 500;
 class KeynavExtension extends WunderbaumExtension {
     constructor(tree) {
         super(tree, "keynav", {});
     }
+    _getEmbeddedInputElem(elem) {
+        var _a;
+        let input = null;
+        if (elem && elem.type != null) {
+            input = elem;
+        }
+        else {
+            // ,[contenteditable]
+            const ace = (_a = this.tree.getActiveColElem()) === null || _a === void 0 ? void 0 : _a.querySelector("input,select");
+            if (ace) {
+                input = ace;
+            }
+        }
+        return input;
+    }
+    /* Return true if the current cell's embedded input has keyboard focus. */
+    _isCurInputFocused() {
+        var _a;
+        const ace = (_a = this.tree
+            .getActiveColElem()) === null || _a === void 0 ? void 0 : _a.querySelector("input:focus,select:focus");
+        console.log(`_isCurInputFocused`, ace);
+        return !!ace;
+    }
     onKeyEvent(data) {
-        let event = data.event, eventName = eventToString(event), focusNode, node = data.node, tree = this.tree, opts = data.options, handled = true, activate = !event.ctrlKey || opts.autoActivate;
-        const navModeOption = opts.navigationMode;
-        tree.logDebug(`onKeyEvent: ${eventName}`);
+        const event = data.event, tree = this.tree, opts = data.options, activate = !event.ctrlKey || opts.autoActivate, curInput = this._getEmbeddedInputElem(event.target), navModeOption = opts.navigationModeOption;
+        // isCellEditMode = tree.navMode === NavigationMode.cellEdit;
+        let focusNode, eventName = eventToString(event), node = data.node, handled = true;
+        tree.log(`onKeyEvent: ${eventName}, curInput`, curInput);
+        if (!tree.isEnabled()) {
+            // tree.logDebug(`onKeyEvent ignored for disabled tree: ${eventName}`);
+            return false;
+        }
         // Let callback prevent default processing
         if (tree._callEvent("keydown", data) === false) {
             return false;
@@ -1399,30 +1495,33 @@ class KeynavExtension extends WunderbaumExtension {
         }
         // Set focus to active (or first node) if no other node has the focus yet
         if (!node) {
-            const activeNode = tree.getActiveNode();
+            const currentNode = tree.getFocusNode() || tree.getActiveNode();
             const firstNode = tree.getFirstChild();
-            if (!activeNode && firstNode && eventName === "ArrowDown") {
+            if (!currentNode && firstNode && eventName === "ArrowDown") {
                 firstNode.logInfo("Keydown: activate first node.");
                 firstNode.setActive();
                 return;
             }
-            focusNode = activeNode || firstNode;
+            focusNode = currentNode || firstNode;
             if (focusNode) {
                 focusNode.setFocus();
                 node = tree.getFocusNode();
                 node.logInfo("Keydown: force focus on active node.");
             }
         }
-        if (tree.navMode === NavigationMode.row) {
+        const isColspan = node.isColspan();
+        if (tree.isRowNav()) {
+            // -----------------------------------------------------------------------
+            // --- Row Mode ---
+            // -----------------------------------------------------------------------
             // --- Quick-Search
             if (opts.quicksearch &&
                 eventName.length === 1 &&
-                /^\w$/.test(eventName)
-            // && !$target.is(":input:enabled")
-            ) {
+                /^\w$/.test(eventName) &&
+                !curInput) {
                 // Allow to search for longer streaks if typed in quickly
                 const stamp = Date.now();
-                if (stamp - tree.lastQuicksearchTime > 500) {
+                if (stamp - tree.lastQuicksearchTime > QUICKSEARCH_DELAY) {
                     tree.lastQuicksearchTerm = "";
                 }
                 tree.lastQuicksearchTime = stamp;
@@ -1445,8 +1544,8 @@ class KeynavExtension extends WunderbaumExtension {
                     if (!node.expanded && (node.children || node.lazy)) {
                         eventName = "Add"; // expand
                     }
-                    else if (navModeOption === NavigationModeOption.startRow) {
-                        tree.setNavigationMode(NavigationMode.cellNav);
+                    else if (navModeOption === NavigationOptions.startRow) {
+                        tree.setCellNav();
                         return;
                     }
                     break;
@@ -1496,48 +1595,103 @@ class KeynavExtension extends WunderbaumExtension {
             }
         }
         else {
-            // Standard navigation (cell mode)
+            const curInput = this._getEmbeddedInputElem(null);
+            const curInputType = curInput ? curInput.type || curInput.tagName : "";
+            const inputHasFocus = curInput && this._isCurInputFocused();
+            const inputCanFocus = curInput && curInputType !== "checkbox";
+            if (inputHasFocus) {
+                if (eventName === "Escape") {
+                    // Discard changes
+                    node.render();
+                }
+                else if (!INPUT_BREAKOUT_KEYS.has(eventName)) {
+                    // Let current `<input>` handle it
+                    node.logDebug(`Ignored ${eventName} inside input`);
+                    return;
+                }
+                // const curInputType = curInput.type || curInput.tagName;
+                // const breakoutKeys = INPUT_KEYS[curInputType];
+                // if (!breakoutKeys.includes(eventName)) {
+                //   node.logDebug(`Ignored ${eventName} inside ${curInputType} input`);
+                //   return;
+                // }
+            }
+            else if (curInput) {
+                // On a cell that has an embedded, unfocused <input>
+                if (eventName.length === 1 && inputCanFocus) {
+                    curInput.focus();
+                    curInput.value = "";
+                    node.logDebug(`Focus imput: ${eventName}`);
+                    return false;
+                }
+            }
+            if (eventName === "Tab") {
+                eventName = "ArrowRight";
+                handled = true;
+            }
+            else if (eventName === "Shift+Tab") {
+                eventName = tree.activeColIdx > 0 ? "ArrowLeft" : "";
+                handled = true;
+            }
+            else ;
             switch (eventName) {
                 case " ":
                     if (tree.activeColIdx === 0 && node.getOption("checkbox")) {
                         node.setSelected(!node.isSelected());
                         handled = true;
                     }
-                    else {
-                        // [Space] key should trigger embedded checkbox
-                        const elem = tree.getActiveColElem();
-                        const cb = elem === null || elem === void 0 ? void 0 : elem.querySelector("input[type=checkbox]");
-                        cb === null || cb === void 0 ? void 0 : cb.click();
+                    else if (curInput && curInputType === "checkbox") {
+                        curInput.click();
+                        // toggleCheckbox(curInput)
+                        // new Event("change")
+                        // curInput.change
+                        handled = true;
+                    }
+                    break;
+                case "F2":
+                    if (curInput && !inputHasFocus && inputCanFocus) {
+                        curInput.focus();
+                        handled = true;
                     }
                     break;
                 case "Enter":
+                    tree.setFocus(); // Blur prev. input if any
                     if (tree.activeColIdx === 0 && node.isExpandable()) {
                         node.setExpanded(!node.isExpanded());
                         handled = true;
                     }
-                    break;
-                case "Escape":
-                    if (tree.navMode === NavigationMode.cellEdit) {
-                        tree.setNavigationMode(NavigationMode.cellNav);
+                    else if (curInput && !inputHasFocus && inputCanFocus) {
+                        curInput.focus();
                         handled = true;
                     }
-                    else if (tree.navMode === NavigationMode.cellNav) {
-                        tree.setNavigationMode(NavigationMode.row);
+                    break;
+                case "Escape":
+                    tree.setFocus(); // Blur prev. input if any
+                    if (tree.isCellNav() && navModeOption !== NavigationOptions.cell) {
+                        tree.setCellNav(false); // row-nav mode
                         handled = true;
                     }
                     break;
                 case "ArrowLeft":
-                    if (tree.activeColIdx > 0) {
+                    tree.setFocus(); // Blur prev. input if any
+                    if (isColspan && node.isExpanded()) {
+                        node.setExpanded(false);
+                    }
+                    else if (tree.activeColIdx > 0) {
                         tree.setColumn(tree.activeColIdx - 1);
                         handled = true;
                     }
-                    else if (navModeOption !== NavigationModeOption.cell) {
-                        tree.setNavigationMode(NavigationMode.row);
+                    else if (navModeOption !== NavigationOptions.cell) {
+                        tree.setCellNav(false); // row-nav mode
                         handled = true;
                     }
                     break;
                 case "ArrowRight":
-                    if (tree.activeColIdx < tree.columns.length - 1) {
+                    tree.setFocus(); // Blur prev. input if any
+                    if (isColspan && !node.isExpanded()) {
+                        node.setExpanded();
+                    }
+                    else if (tree.activeColIdx < tree.columns.length - 1) {
                         tree.setColumn(tree.activeColIdx + 1);
                         handled = true;
                     }
@@ -1554,6 +1708,10 @@ class KeynavExtension extends WunderbaumExtension {
                 case "PageDown":
                 case "PageUp":
                     node.navigate(eventName, { activate: activate, event: event });
+                    // if (isCellEditMode) {
+                    //   this._getEmbeddedInputElem(null, true); // set focus to input
+                    // }
+                    handled = true;
                     break;
                 default:
                     handled = false;
@@ -1569,7 +1727,7 @@ class KeynavExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-logger
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 class LoggerExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1609,7 +1767,7 @@ class LoggerExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-dnd
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 const nodeMimeType = "application/x-wunderbaum-node";
 class DndExtension extends WunderbaumExtension {
@@ -1679,7 +1837,7 @@ class DndExtension extends WunderbaumExtension {
         const ltn = this.lastTargetNode;
         this.lastEnterStamp = 0;
         if (ltn) {
-            ltn.removeClass("wb-drop-target wb-drop-over wb-drop-after wb-drop-before");
+            ltn.setClass("wb-drop-target wb-drop-over wb-drop-after wb-drop-before", false);
             this.lastTargetNode = null;
         }
     }
@@ -1723,7 +1881,7 @@ class DndExtension extends WunderbaumExtension {
     }
     /* Implement auto scrolling when drag cursor is in top/bottom area of scroll parent. */
     autoScroll(event) {
-        let tree = this.tree, dndOpts = tree.options.dnd, sp = tree.scrollContainer, sensitivity = dndOpts.scrollSensitivity, speed = dndOpts.scrollSpeed, scrolled = 0;
+        let tree = this.tree, dndOpts = tree.options.dnd, sp = tree.scrollContainerElement, sensitivity = dndOpts.scrollSensitivity, speed = dndOpts.scrollSpeed, scrolled = 0;
         const scrollTop = sp.offsetTop;
         if (scrollTop + sp.offsetHeight - event.pageY < sensitivity) {
             const delta = sp.scrollHeight - sp.clientHeight - scrollTop;
@@ -1773,13 +1931,13 @@ class DndExtension extends WunderbaumExtension {
             setTimeout(() => {
                 // Decouple this call, so the CSS is applied to the node, but not to
                 // the system generated drag image
-                srcNode.addClass("wb-drag-source");
+                srcNode.setClass("wb-drag-source");
             }, 0);
             // --- drag ---
         }
         else if (e.type === "drag") ;
         else if (e.type === "dragend") {
-            srcNode.removeClass("wb-drag-source");
+            srcNode.setClass("wb-drag-source", false);
             this.srcNode = null;
             if (this.lastTargetNode) {
                 this._leaveNode();
@@ -1833,7 +1991,7 @@ class DndExtension extends WunderbaumExtension {
             }
             this.lastAllowedDropRegions = regionSet;
             this.lastDropEffect = dt.dropEffect;
-            targetNode.addClass("wb-drop-target");
+            targetNode.setClass("wb-drop-target");
             e.preventDefault(); // Allow drop (Drop operation is denied by default)
             return false;
             // --- dragover ---
@@ -1852,9 +2010,9 @@ class DndExtension extends WunderbaumExtension {
             if (!region) {
                 return; // We already rejected in dragenter
             }
-            targetNode.toggleClass("wb-drop-over", region === "over");
-            targetNode.toggleClass("wb-drop-before", region === "before");
-            targetNode.toggleClass("wb-drop-after", region === "after");
+            targetNode.setClass("wb-drop-over", region === "over");
+            targetNode.setClass("wb-drop-before", region === "before");
+            targetNode.setClass("wb-drop-after", region === "after");
             // console.log("dragover", e);
             // dt.dropEffect = this.lastDropEffect!;
             e.preventDefault(); // Allow drop (Drop operation is denied by default)
@@ -1877,7 +2035,7 @@ class DndExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - drag_observer
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
- * v0.0.3, Mon, 18 Apr 2022 11:52:44 GMT (https://github.com/mar10/wunderbaum)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
@@ -2011,7 +2169,7 @@ class DragObserver {
 /*!
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 class GridExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -2048,12 +2206,22 @@ class GridExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - deferred
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 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() {
@@ -2091,7 +2259,7 @@ class Deferred {
 /*!
  * Wunderbaum - wunderbaum_node
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 /** Top-level properties that can be passed with `data`. */
 const NODE_PROPS = new Set([
@@ -2110,7 +2278,7 @@ const NODE_PROPS = new Set([
 const NODE_ATTRS = new Set([
     "checkbox",
     "expanded",
-    "extraClasses",
+    "classes",
     "folder",
     "icon",
     "iconTooltip",
@@ -2152,8 +2320,8 @@ class WunderbaumNode {
          * @see {@link isSelected}, {@link setSelected}. */
         this.selected = false;
         /** Additional classes added to `div.wb-row`.
-         * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
-        this.extraClasses = new Set();
+         * @see {@link hasClass}, {@link setClass}. */
+        this.classes = null; //new Set<string>();
         /** Custom data that was passed to the constructor */
         this.data = {};
         this._isLoading = false;
@@ -2182,9 +2350,7 @@ class WunderbaumNode {
         this.lazy = data.lazy === true;
         this.selected = data.selected === true;
         if (data.classes) {
-            for (const c of data.classes.split(" ")) {
-                this.extraClasses.add(c.trim());
-            }
+            this.setClass(data.classes);
         }
         // Store custom fields as `node.data`
         for (const [key, value] of Object.entries(data)) {
@@ -2202,7 +2368,7 @@ class WunderbaumNode {
      * @internal
      */
     toString() {
-        return "WunderbaumNode@" + this.key + "<'" + this.title + "'>";
+        return `WunderbaumNode@${this.key}<'${this.title}'>`;
     }
     // /** Return an option value. */
     // protected _getOpt(
@@ -2225,8 +2391,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));
@@ -2324,31 +2490,41 @@ class WunderbaumNode {
     applyCommand(cmd, opts) {
         return this.tree.applyCommand(cmd, this, opts);
     }
-    addClass(className) {
-        const cnSet = toSet(className);
-        cnSet.forEach((cn) => {
-            var _a;
-            this.extraClasses.add(cn);
-            (_a = this._rowElem) === null || _a === void 0 ? void 0 : _a.classList.add(cn);
-        });
-    }
-    removeClass(className) {
-        const cnSet = toSet(className);
-        cnSet.forEach((cn) => {
-            var _a;
-            this.extraClasses.delete(cn);
-            (_a = this._rowElem) === null || _a === void 0 ? void 0 : _a.classList.remove(cn);
-        });
-    }
-    toggleClass(className, flag) {
+    /**
+     * Add/remove one or more classes to `<div class='wb-row'>`.
+     *
+     * This also maintains `node.classes`, so the class will survive a re-render.
+     *
+     * @param className one or more class names. Multiple classes can be passed
+     *     as space-separated string, array of strings, or set of strings.
+     */
+    setClass(className, flag = true) {
         const cnSet = toSet(className);
-        cnSet.forEach((cn) => {
-            var _a;
-            flag ? this.extraClasses.add(cn) : this.extraClasses.delete(cn);
-            (_a = this._rowElem) === null || _a === void 0 ? void 0 : _a.classList.toggle(cn, flag);
-        });
+        if (flag) {
+            if (this.classes === null) {
+                this.classes = new Set();
+            }
+            cnSet.forEach((cn) => {
+                var _a;
+                this.classes.add(cn);
+                (_a = this._rowElem) === null || _a === void 0 ? void 0 : _a.classList.toggle(cn, flag);
+            });
+        }
+        else {
+            if (this.classes === null) {
+                return;
+            }
+            cnSet.forEach((cn) => {
+                var _a;
+                this.classes.delete(cn);
+                (_a = this._rowElem) === null || _a === void 0 ? void 0 : _a.classList.toggle(cn, flag);
+            });
+            if (this.classes.size === 0) {
+                this.classes = null;
+            }
+        }
     }
-    /** */
+    /** Call `setExpanded()` on al child nodes*/
     async expandAll(flag = true) {
         this.visit((node) => {
             node.setExpanded(flag);
@@ -2520,6 +2696,10 @@ class WunderbaumNode {
         }
         return !!(this.children && this.children.length);
     }
+    /** Return true if node has className set. */
+    hasClass(className) {
+        return this.classes ? this.classes.has(className) : false;
+    }
     /** Return true if this node is the currently active tree node. */
     isActive() {
         return this.tree.activeNode === this;
@@ -2530,6 +2710,12 @@ class WunderbaumNode {
     isChildOf(other) {
         return this.parent && this.parent === other;
     }
+    /** Return true if this node's title spans all columns, i.e. the node has no
+     * grid cells.
+     */
+    isColspan() {
+        return !!this.getOption("colspan");
+    }
     /** Return true if this node is a direct or indirect sub node of `other`.
      * (See also [[isChildOf]].)
      */
@@ -2665,29 +2851,46 @@ class WunderbaumNode {
         assert(isPlainObject(source));
         assert(source.children, "If `source` is an object, it must have a `children` property");
         if (source.types) {
-            // TODO: convert types.classes to Set()
-            extend(tree.types, source.types);
+            tree.logInfo("Redefine types", source.columns);
+            tree.setTypes(source.types, false);
+            delete source.types;
+        }
+        if (source.columns) {
+            tree.logInfo("Redefine columns", source.columns);
+            tree.columns = source.columns;
+            delete source.columns;
+            tree.updateColumns({ calculateCols: false });
         }
         this.addChildren(source.children);
+        delete source.columns;
+        // Add extra data to `tree.data`
+        for (const [key, value] of Object.entries(source)) {
+            if (!RESERVED_TREE_SOURCE_KEYS.has(key)) {
+                tree.data[key] = value;
+                tree.logDebug(`Add source.${key} to tree.data.${key}`);
+            }
+        }
         this._callEvent("load");
     }
     /** Download  data from the cloud, then call `.update()`. */
     async load(source) {
         const tree = this.tree;
-        // const opts = tree.options;
         const requestId = Date.now();
         const prevParent = this.parent;
         const url = typeof source === "string" ? source : source.url;
+        const start = Date.now();
+        let elap = 0, elapLoad = 0, elapProcess = 0;
         // Check for overlapping requests
         if (this._requestId) {
             this.logWarn(`Recursive load request #${requestId} while #${this._requestId} is pending.`);
             // 	node.debug("Send load request #" + requestId);
         }
         this._requestId = requestId;
-        const timerLabel = tree.logTime(this + ".load()");
+        // const timerLabel = tree.logTime(this + ".load()");
         try {
             if (!url) {
                 this._loadSourceObject(source);
+                elapProcess = Date.now() - start;
             }
             else {
                 this.setStatus(NodeStatusType.loading);
@@ -2696,6 +2899,7 @@ class WunderbaumNode {
                     error(`GET ${url} returned ${response.status}, ${response}`);
                 }
                 const data = await response.json();
+                elapLoad = Date.now() - start;
                 if (this._requestId && this._requestId > requestId) {
                     this.logWarn(`Ignored load response #${requestId} because #${this._requestId} is pending.`);
                     return;
@@ -2708,25 +2912,30 @@ class WunderbaumNode {
                     return;
                 }
                 this.setStatus(NodeStatusType.ok);
-                if (data.columns) {
-                    tree.logInfo("Re-define columns", data.columns);
-                    assert(!this.parent);
-                    tree.columns = data.columns;
-                    delete data.columns;
-                    tree.updateColumns({ calculateCols: false });
-                }
+                // if (data.columns) {
+                //   tree.logInfo("Re-define columns", data.columns);
+                //   util.assert(!this.parent);
+                //   tree.columns = data.columns;
+                //   delete data.columns;
+                //   tree.updateColumns({ calculateCols: false });
+                // }
+                const startProcess = Date.now();
                 this._loadSourceObject(data);
+                elapProcess = Date.now() - startProcess;
             }
         }
         catch (error) {
             this.logError("Error during load()", source, error);
             this._callEvent("error", { error: error });
-            this.setStatus(NodeStatusType.error, "" + error);
+            this.setStatus(NodeStatusType.error, { message: "" + error });
             throw error;
         }
         finally {
             this._requestId = 0;
-            tree.logTimeEnd(timerLabel);
+            elap = Date.now() - start;
+            if (tree.options.debugLevel >= 3) {
+                tree.logInfo(`Load source took ${elap / 1000} seconds (transfer: ${elapLoad / 1000}s, processing: ${elapProcess / 1000}s)`);
+            }
         }
     }
     /**Load content of a lazy node. */
@@ -2762,7 +2971,7 @@ class WunderbaumNode {
         catch (e) {
             this.logError("Error during loadLazy()", e);
             this._callEvent("error", { error: e });
-            this.setStatus(NodeStatusType.error, "" + e);
+            this.setStatus(NodeStatusType.error, { message: "" + e });
         }
         return;
     }
@@ -2804,17 +3013,23 @@ class WunderbaumNode {
      *     Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
      */
     async makeVisible(opts) {
-        let i, dfd = new Deferred(), deferreds = [], parents = this.getParentList(false, false), len = parents.length, effects = !(opts && opts.noAnimation === true), scroll = !(opts && opts.scrollIntoView === false);
+        let i, dfd = new Deferred(), deferreds = [], parents = this.getParentList(false, false), len = parents.length, 
+        // effects = !(opts && opts.noAnimation === true),
+        scroll = !(opts && opts.scrollIntoView === false);
         // Expand bottom-up, so only the top node is animated
         for (i = len - 1; i >= 0; i--) {
             // self.debug("pushexpand" + parents[i]);
-            deferreds.push(parents[i].setExpanded(true, opts));
+            const seOpts = { noAnimation: opts === null || opts === void 0 ? void 0 : opts.noAnimation };
+            deferreds.push(parents[i].setExpanded(true, seOpts));
         }
         Promise.all(deferreds).then(() => {
             // All expands have finished
             // self.debug("expand DONE", scroll);
-            if (scroll) {
-                this.scrollIntoView(effects).then(() => {
+            // Note: this.tree may be none when switching demo trees
+            if (scroll && this.tree) {
+                // Make sure markup and _rowIdx is updated before we do the scroll calculations
+                this.tree.updatePendingModifications();
+                this.scrollIntoView().then(() => {
                     // self.debug("scroll DONE");
                     dfd.resolve();
                 });
@@ -2999,21 +3214,30 @@ class WunderbaumNode {
         }
     }
     _getRenderInfo() {
-        let colInfosById = {};
-        let idx = 0;
-        let colElems = this._rowElem
+        const allColInfosById = {};
+        const renderColInfosById = {};
+        const isColspan = this.isColspan();
+        const colElems = this._rowElem
             ? (this._rowElem.querySelectorAll("span.wb-col"))
             : null;
+        let idx = 0;
         for (let col of this.tree.columns) {
-            colInfosById[col.id] = {
+            allColInfosById[col.id] = {
                 id: col.id,
                 idx: idx,
                 elem: colElems ? colElems[idx] : null,
                 info: col,
             };
+            // renderColInfosById only contains columns that need rendering:
+            if (!isColspan && col.id !== "*") {
+                renderColInfosById[col.id] = allColInfosById[col.id];
+            }
             idx++;
         }
-        return colInfosById;
+        return {
+            allColInfosById: allColInfosById,
+            renderColInfosById: renderColInfosById,
+        };
     }
     _createIcon(parentElem, replaceChild) {
         let iconSpan;
@@ -3060,30 +3284,193 @@ class WunderbaumNode {
         else {
             parentElem.appendChild(iconSpan);
         }
-        // this.log("_createIcon: ", iconSpan);
-        return iconSpan;
+        // this.log("_createIcon: ", iconSpan);
+        return iconSpan;
+    }
+    /**
+     * Create a whole new `<div class="wb-row">` element.
+     * @see {@link WunderbaumNode.render}
+     */
+    _render_markup(opts) {
+        const tree = this.tree;
+        const treeOptions = tree.options;
+        const checkbox = this.getOption("checkbox") !== false;
+        const columns = tree.columns;
+        const level = this.getLevel();
+        let elem;
+        let nodeElem;
+        let rowDiv = this._rowElem;
+        let titleSpan;
+        let checkboxSpan = null;
+        let iconSpan;
+        let expanderSpan = null;
+        const activeColIdx = tree.isRowNav() ? null : tree.activeColIdx;
+        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
+        const isColspan = this.isColspan();
+        if (!isColspan && 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;
+                    }
+                }
+            }
+        }
+        // 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);
+        }
+        // Now go on and fill in data and update classes
+        opts.isNew = true;
+        this._render_data(opts);
+    }
+    /**
+     * Render `node.title`, `.icon` into an existing row.
+     *
+     * @see {@link WunderbaumNode.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 isColspan = this.isColspan();
+        // 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 (isColspan) {
+                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
+            const renderInfo = this._getRenderInfo();
+            this._callEvent("render", {
+                isNew: isNew,
+                isColspan: isColspan,
+                // isDataChange: true,
+                nodeElem: nodeElem,
+                allColInfosById: renderInfo.allColInfosById,
+                renderColInfosById: renderInfo.renderColInfosById,
+            });
+        }
     }
-    /** Create HTML markup for this node, i.e. the whole row. */
-    render(opts) {
+    /**
+     * Update row classes to reflect active, focuses, etc.
+     * @see {@link WunderbaumNode.render}
+     */
+    _render_status(opts) {
+        // this.log("_render_status", 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;
-        let rowDiv = this._rowElem;
-        let titleSpan;
-        let checkboxSpan = null;
-        let iconSpan;
-        let expanderSpan = null;
-        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());
-        //
+        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");
         let rowClasses = ["wb-row"];
         this.expanded ? rowClasses.push("wb-expanded") : 0;
         this.lazy ? rowClasses.push("wb-lazy") : 0;
@@ -3092,108 +3479,21 @@ class WunderbaumNode {
         this === tree.focusNode ? rowClasses.push("wb-focus") : 0;
         this._errorInfo ? rowClasses.push("wb-error") : 0;
         this._isLoading ? rowClasses.push("wb-loading") : 0;
+        this.isColspan() ? rowClasses.push("wb-colspan") : 0;
         this.statusNodeType
             ? rowClasses.push("wb-status-" + this.statusNodeType)
             : 0;
         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 (!treeOptions.minExpandLevel || 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
-        // Add classes from `node.extraClasses`
-        rowDiv.classList.add(...this.extraClasses);
+        // Replace previous classes:
+        rowDiv.className = rowClasses.join(" ");
+        // Add classes from `node.classes`
+        this.classes ? rowDiv.classList.add(...this.classes) : 0;
         // 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) {
@@ -3221,59 +3521,46 @@ class WunderbaumNode {
                 checkboxSpan.className = "wb-checkbox " + iconMap.checkUnchecked;
             }
         }
-        if (this.titleWithHighlight) {
-            titleSpan.innerHTML = this.titleWithHighlight;
-        }
-        else {
-            // } 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) {
-            if (this.colspan) {
-                let vpWidth = tree.element.clientWidth;
-                titleSpan.style.width =
-                    vpWidth - nodeElem._ofsTitlePx - ROW_EXTRA_PAD + "px";
+        // 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.style.width =
-                    columns[0]._widthPx -
-                        nodeElem._ofsTitlePx -
-                        ROW_EXTRA_PAD +
-                        "px";
+            // Update icon (if not opts.isNew, which would rebuild markup anyway)
+            const iconSpan = nodeElem.querySelector("i.wb-icon");
+            if (iconSpan) {
+                this._createIcon(nodeElem, iconSpan);
             }
         }
-        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 (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);
-            }
+    }
+    /**
+     * 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;
         }
     }
     /**
@@ -3395,7 +3682,8 @@ class WunderbaumNode {
      * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
      */
     async scrollIntoView(options) {
-        return this.tree.scrollTo(this);
+        const opts = Object.assign({ node: this }, options);
+        return this.tree.scrollTo(opts);
     }
     /**
      * Activate this node, deactivate previous, send events, activate column and scroll int viewport.
@@ -3403,26 +3691,26 @@ class WunderbaumNode {
     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 noEvents = options === null || options === void 0 ? void 0 : options.noEvents;
+        const retrigger = options === null || options === void 0 ? void 0 : options.retrigger; // Default: false
+        const focusTree = options === null || options === void 0 ? void 0 : options.focusTree; // Default: false
+        const focusNode = (options === null || options === void 0 ? void 0 : options.focusNode) !== false; // Default: true
+        const noEvents = options === null || options === void 0 ? void 0 : options.noEvents; // Default: false
+        const orgEvent = options === null || options === void 0 ? void 0 : options.event; // Default: false
         if (!noEvents) {
-            let orgEvent = options === null || options === void 0 ? void 0 : options.event;
             if (flag) {
                 if (prev !== this || retrigger) {
                     if ((prev === null || prev === void 0 ? void 0 : prev._callEvent("deactivate", {
                         nextNode: this,
                         orgEvent: orgEvent,
-                    })) === false) {
-                        return;
-                    }
-                    if (this._callEvent("activate", {
-                        prevNode: prev,
-                        orgEvent: orgEvent,
-                    }) === false) {
-                        tree.activeNode = null;
-                        prev === null || prev === void 0 ? void 0 : prev.setModified();
+                    })) === false ||
+                        this._callEvent("beforeActivate", {
+                            prevNode: prev,
+                            orgEvent: orgEvent,
+                        }) === false) {
                         return;
                     }
+                    tree.activeNode = null;
+                    prev === null || prev === void 0 ? void 0 : prev.setModified(ChangeType.status);
                 }
             }
             else if (prev === this || retrigger) {
@@ -3430,44 +3718,54 @@ class WunderbaumNode {
             }
         }
         if (prev !== this) {
-            tree.activeNode = this;
-            prev === null || prev === void 0 ? void 0 : prev.setModified();
-            this.setModified();
+            if (flag) {
+                tree.activeNode = this;
+                if (focusNode || focusTree)
+                    tree.focusNode = this;
+                if (focusTree)
+                    tree.setFocus();
+            }
+            prev === null || prev === void 0 ? void 0 : prev.setModified(ChangeType.status);
+            this.setModified(ChangeType.status);
         }
         if (options &&
             options.colIdx != null &&
             options.colIdx !== tree.activeColIdx &&
-            tree.navMode !== NavigationMode.row) {
+            tree.isCellNav()) {
             tree.setColumn(options.colIdx);
         }
-        // requestAnimationFrame(() => {
-        //   this.scrollIntoView();
-        // })
-        return this.scrollIntoView();
+        if (flag && !noEvents) {
+            this._callEvent("activate", { prevNode: prev, orgEvent: orgEvent });
+        }
+        return this.makeVisible();
     }
     /**
      * 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") &&
+            this.getLevel() <= this.tree.getOption("minExpandLevel") &&
             !getOption(options, "force")) {
             this.logDebug("Ignored collapse request below expandLevel.");
             return;
         }
+        if (!flag === !this.expanded) {
+            return; // Nothing to do
+        }
         if (flag && this.lazy && this.children == null) {
             await this.loadLazy();
         }
         this.expanded = flag;
-        this.tree.setModified(ChangeType.structure);
+        const updateOpts = { immediate: !!getOption(options, "immediate") };
+        this.tree.setModified(ChangeType.structure, updateOpts);
     }
     /**
      * Set keyboard focus here.
      * @see {@link setActive}
      */
-    setFocus(flag = true, options) {
+    setFocus(flag = true) {
+        assert(!!flag, "blur is not yet implemented");
         const prev = this.tree.focusNode;
         this.tree.focusNode = this;
         prev === null || prev === void 0 ? void 0 : prev.setModified();
@@ -3482,10 +3780,16 @@ class WunderbaumNode {
     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);
+    /**
+     * 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) {
@@ -3497,8 +3801,10 @@ class WunderbaumNode {
         this.setModified();
     }
     /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
-    setStatus(status, message, details) {
+    setStatus(status, options) {
         const tree = this.tree;
+        const message = options === null || options === void 0 ? void 0 : options.message;
+        const details = options === null || options === void 0 ? void 0 : options.details;
         let statusNode = null;
         const _clearStatusNode = () => {
             // Remove dedicated dummy node, if any
@@ -3596,9 +3902,9 @@ class WunderbaumNode {
      * @param {object} [extra]
      */
     triggerModify(operation, extra) {
-        if (!this.parent) {
-            return;
-        }
+        // if (!this.parent) {
+        //   return;
+        // }
         this.parent.triggerModifyChild(operation, this, extra);
     }
     /**
@@ -3681,7 +3987,7 @@ WunderbaumNode.sequence = 0;
 /*!
  * Wunderbaum - ext-edit
  * 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)
+ * v0.0.6, Sat, 10 Sep 2022 19:29:21 GMT (https://github.com/mar10/wunderbaum)
  */
 // const START_MARKER = "\uFFF7";
 class EditExtension extends WunderbaumExtension {
@@ -3711,7 +4017,7 @@ class EditExtension extends WunderbaumExtension {
     _applyChange(eventName, node, colElem, extra) {
         let res;
         node.log(`_applyChange(${eventName})`, extra);
-        colElem.classList.add("wb-dirty");
+        colElem.classList.add("wb-busy");
         colElem.classList.remove("wb-error");
         try {
             res = node._callEvent(eventName, extra);
@@ -3719,7 +4025,7 @@ class EditExtension extends WunderbaumExtension {
         catch (err) {
             node.logError(`Error in ${eventName} event handler`, err);
             colElem.classList.add("wb-error");
-            colElem.classList.remove("wb-dirty");
+            colElem.classList.remove("wb-busy");
         }
         // Convert scalar return value to a resolved promise
         if (!(res instanceof Promise)) {
@@ -3731,7 +4037,7 @@ class EditExtension extends WunderbaumExtension {
             colElem.classList.add("wb-error");
         })
             .finally(() => {
-            colElem.classList.remove("wb-dirty");
+            colElem.classList.remove("wb-busy");
         });
         return res;
     }
@@ -3770,12 +4076,12 @@ class EditExtension extends WunderbaumExtension {
         const eventName = eventToString(event);
         const tree = this.tree;
         const trigger = this.getPluginOption("trigger");
-        const inputElem = event.target && event.target.closest("input,[contenteditable]");
-        // let handled = true;
-        tree.logDebug(`_preprocessKeyEvent: ${eventName}`);
+        // const inputElem =
+        //   event.target && event.target.closest("input,[contenteditable]");
+        // tree.logDebug(`_preprocessKeyEvent: ${eventName}`);
         // --- Title editing: apply/discard ---
-        if (inputElem) {
-            //this.isEditingTitle()) {
+        // if (inputElem) {
+        if (this.isEditingTitle()) {
             switch (eventName) {
                 case "Enter":
                     this._stopEditTitle(true, { event: event });
@@ -3789,7 +4095,7 @@ class EditExtension extends WunderbaumExtension {
             return false;
         }
         // --- Trigger title editing
-        if (tree.navMode === NavigationMode.row || tree.activeColIdx === 0) {
+        if (tree.isRowNav() || tree.activeColIdx === 0) {
             switch (eventName) {
                 case "Enter":
                     if (trigger.indexOf("macEnter") >= 0 && isMac) {
@@ -3838,7 +4144,7 @@ class EditExtension extends WunderbaumExtension {
         titleSpan.innerHTML = inputHtml;
         const inputElem = titleSpan.firstElementChild;
         if (validity) {
-            // Permanently apply  input validations (CSS and tooltip)
+            // Permanently apply input validations (CSS and tooltip)
             inputElem.addEventListener("keydown", (e) => {
                 inputElem.setCustomValidity("");
                 if (!inputElem.reportValidity()) ;
@@ -3954,7 +4260,7 @@ class EditExtension extends WunderbaumExtension {
             return;
         }
         const newNode = node.addNode(init, mode);
-        newNode.addClass("wb-edit-new");
+        newNode.setClass("wb-edit-new");
         this.relatedNode = node;
         // Don't filter new nodes:
         newNode.match = true;
@@ -3967,17 +4273,26 @@ class EditExtension extends WunderbaumExtension {
 /*!
  * wunderbaum.ts
  *
- * A tree control.
+ * A treegrid control.
  *
  * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
- * Released under the MIT license.
+ * https://github.com/mar10/wunderbaum
  *
- * @version v0.0.3
- * @date Mon, 18 Apr 2022 11:52:44 GMT
+ * Released under the MIT license.
+ * @version v0.0.6
+ * @date Sat, 10 Sep 2022 19:29:21 GMT
  */
-// const class_prefix = "wb-";
-// const node_props: string[] = ["title", "key", "refKey"];
-// const MAX_CHANGED_NODES = 10;
+class WbSystemRoot extends WunderbaumNode {
+    constructor(tree) {
+        super(tree, null, {
+            key: "__root__",
+            title: tree.id,
+        });
+    }
+    toString() {
+        return `WbSystemRoot@${this.key}<'${this.tree.id}'>`;
+    }
+}
 /**
  * A persistent plain object or array.
  *
@@ -3985,14 +4300,15 @@ class EditExtension extends WunderbaumExtension {
  */
 class Wunderbaum {
     constructor(options) {
+        this.enabled = true;
+        /** Contains additional data that was sent as response to an Ajax source load request. */
+        this.data = {};
         this.extensionList = [];
         this.extensions = {};
         this.keyMap = new Map();
         this.refKeyMap = new Map();
-        // 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. */
@@ -4000,13 +4316,11 @@ class Wunderbaum {
         /** Shared properties, referenced by `node.type`. */
         this.types = {};
         /** List of column definitions. */
-        this.columns = [];
+        this.columns = []; // any[] = [];
         this._columnsById = {};
         // Modification Status
-        // protected changedSince = 0;
-        // protected changes = new Set<ChangeType>();
-        // protected changedNodes = new Set<WunderbaumNode>();
         this.changeRedrawRequestPending = false;
+        this.changeScrollRequestPending = false;
         /** Expose some useful methods of the util.ts module as `tree._util`. */
         this._util = util;
         // --- FILTER ---
@@ -4015,7 +4329,7 @@ class Wunderbaum {
         /** @internal Use `setColumn()`/`getActiveColElem()`*/
         this.activeColIdx = 0;
         /** @internal */
-        this.navMode = NavigationMode.row;
+        this._cellNavMode = false;
         /** @internal */
         this.lastQuicksearchTime = 0;
         /** @internal */
@@ -4032,18 +4346,21 @@ class Wunderbaum {
             element: null,
             debugLevel: DEFAULT_DEBUGLEVEL,
             header: null,
-            headerHeightPx: ROW_HEIGHT,
+            // headerHeightPx: ROW_HEIGHT,
             rowHeightPx: ROW_HEIGHT,
             columns: null,
             types: null,
             // escapeTitles: true,
+            enabled: true,
+            fixedCol: false,
             showSpinner: false,
-            checkbox: true,
+            checkbox: false,
             minExpandLevel: 0,
             updateThrottleWait: 200,
             skeleton: false,
+            connectTopBreadcrumb: null,
             // --- KeyNav ---
-            navigationMode: NavigationModeOption.startRow,
+            navigationModeOption: null,
             quicksearch: true,
             // --- Events ---
             change: noop,
@@ -4085,41 +4402,25 @@ class Wunderbaum {
             }
         });
         this.id = opts.id || "wb_" + ++Wunderbaum.sequence;
-        this.root = new WunderbaumNode(this, null, {
-            key: "__root__",
-            // title: "__root__",
-        });
+        this.root = new WbSystemRoot(this);
         this._registerExtension(new KeynavExtension(this));
         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));
+        this._updateViewportThrottled = adaptiveThrottle(this._updateViewportImmediately.bind(this), {});
         // --- Evaluate options
         this.columns = opts.columns;
         delete opts.columns;
-        if (!this.columns) {
-            let defaultName = typeof opts.header === "string" ? opts.header : this.id;
-            this.columns = [{ id: "*", title: defaultName, width: "*" }];
-        }
-        this.types = opts.types || {};
-        delete opts.types;
-        // Convert `TYPE.classes` to a Set
-        for (let t of Object.values(this.types)) {
-            if (t.classes) {
-                t.classes = toSet(t.classes);
-            }
+        if (!this.columns || !this.columns.length) {
+            const title = typeof opts.header === "string" ? opts.header : this.id;
+            this.columns = [{ id: "*", title: title, width: "*" }];
         }
-        if (this.columns.length === 1) {
-            opts.navigationMode = NavigationModeOption.row;
+        if (opts.types) {
+            this.setTypes(opts.types, true);
         }
-        if (opts.navigationMode === NavigationModeOption.cell ||
-            opts.navigationMode === NavigationModeOption.startCell) {
-            this.navMode = NavigationMode.cellNav;
-        }
-        this._updateViewportThrottled = throttle(() => {
-            this._updateViewport();
-        }, opts.updateThrottleWait, { leading: true, trailing: true });
+        delete opts.types;
         // --- Create Markup
         this.element = elemFromSelector(opts.element);
         assert(!!this.element, `Invalid 'element' option: ${opts.element}`);
@@ -4139,12 +4440,15 @@ class Wunderbaum {
             const rowElement = this.headerElement.querySelector("div.wb-row");
             for (const colDiv of rowElement.querySelectorAll("div")) {
                 this.columns.push({
-                    id: colDiv.dataset.id || null,
-                    text: "" + colDiv.textContent,
+                    id: colDiv.dataset.id || `col_${this.columns.length}`,
+                    // id: colDiv.dataset.id || null,
+                    title: "" + colDiv.textContent,
+                    // text: "" + colDiv.textContent,
+                    width: "*", // TODO: read from header span
                 });
             }
         }
-        else if (wantHeader) {
+        else {
             // We need a row div, the rest will be computed from `this.columns`
             const coldivs = "<span class='wb-col'></span>".repeat(this.columns.length);
             this.element.innerHTML = `
@@ -4153,23 +4457,27 @@ class Wunderbaum {
             ${coldivs}
           </div>
         </div>`;
-            // this.updateColumns({ render: false });
-        }
-        else {
-            this.element.innerHTML = "";
+            if (!wantHeader) {
+                const he = this.element.querySelector("div.wb-header");
+                he.style.display = "none";
+            }
         }
         //
         this.element.innerHTML += `
       <div class="wb-scroll-container">
         <div class="wb-node-list"></div>
       </div>`;
-        this.scrollContainer = this.element.querySelector("div.wb-scroll-container");
-        this.nodeListElement = this.scrollContainer.querySelector("div.wb-node-list");
+        this.scrollContainerElement = this.element.querySelector("div.wb-scroll-container");
+        this.nodeListElement = this.scrollContainerElement.querySelector("div.wb-node-list");
         this.headerElement = this.element.querySelector("div.wb-header");
-        if (this.columns.length > 1) {
-            this.element.classList.add("wb-grid");
-        }
+        this.element.classList.toggle("wb-grid", this.columns.length > 1);
         this._initExtensions();
+        // --- apply initial options
+        ["enabled", "fixedCol"].forEach((optName) => {
+            if (opts[optName] != null) {
+                this.setOption(optName, opts[optName]);
+            }
+        });
         // --- Load initial data
         if (opts.source) {
             if (opts.showSpinner) {
@@ -4178,6 +4486,18 @@ class Wunderbaum {
             }
             this.load(opts.source)
                 .then(() => {
+                // The source may have defined columns, so we may adjust the nav mode
+                if (opts.navigationModeOption == null) {
+                    if (this.isGrid()) {
+                        this.setNavigationOption(NavigationOptions.cell);
+                    }
+                    else {
+                        this.setNavigationOption(NavigationOptions.row);
+                    }
+                }
+                else {
+                    this.setNavigationOption(opts.navigationModeOption);
+                }
                 readyDeferred.resolve();
             })
                 .catch((error) => {
@@ -4192,23 +4512,37 @@ class Wunderbaum {
         else {
             readyDeferred.resolve();
         }
-        // TODO: This is sometimes required, because this.element.clientWidth
-        //       has a wrong value at start???
-        setTimeout(() => {
-            this.updateViewport();
-        }, 50);
+        // Async mode is sometimes required, because this.element.clientWidth
+        // has a wrong value at start???
+        this.setModified(ChangeType.any);
         // --- Bind listeners
-        this.scrollContainer.addEventListener("scroll", (e) => {
+        this.element.addEventListener("scroll", (e) => {
+            // this.log("scroll", e);
             this.setModified(ChangeType.vscroll);
         });
+        // this.scrollContainerElement.addEventListener("scroll", (e: Event) => {
+        //   this.log("scroll", e)
+        //   this.setModified(ChangeType.vscroll);
+        // });
         this.resizeObserver = new ResizeObserver((entries) => {
             this.setModified(ChangeType.vscroll);
-            console.log("ResizeObserver: Size changed", entries);
+            // 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( (e.target as HTMLElement).matches("input[type=checkbox]")){
+            //   // Click on an embedded checkbox triggers a change event.
+            //   // We return here, before the `setActive()` performs a render
+            //   this.log("click - cb", info, e);
+            //   // e.preventDefault()
+            //   setTimeout(()=>{
+            //     // (e.target as HTMLElement).click()
+            //   }, 50)
+            //   // return
+            // }
             if (this._callEvent("click", { event: e, node: node, info: info }) === false) {
                 this.lastClickTime = Date.now();
                 return false;
@@ -4236,16 +4570,15 @@ class Wunderbaum {
                     node.setSelected(!node.isSelected());
                 }
             }
-            // if(e.target.classList.)
-            // this.log("click", info);
             this.lastClickTime = Date.now();
         });
         onEvent(this.element, "keydown", (e) => {
             const info = Wunderbaum.getEventInfo(e);
             const eventName = eventToString(e);
+            const node = info.node || this.getFocusNode();
             this._callHook("onKeyEvent", {
                 event: e,
-                node: info.node,
+                node: node,
                 info: info,
                 eventName: eventName,
             });
@@ -4421,14 +4754,14 @@ class Wunderbaum {
      * 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 node for  given row index. */
@@ -4444,29 +4777,32 @@ class Wunderbaum {
         return node;
     }
     /** Return the topmost visible node in the viewport. */
-    _firstNodeInView(complete = true) {
+    getTopmostVpNode(complete = true) {
+        const gracePx = 1; // ignore subpixel scrolling
+        const scrollParent = this.element;
+        // const headerHeight = this.headerElement.clientHeight;  // May be 0
+        const scrollTop = scrollParent.scrollTop; // + headerHeight;
         let topIdx;
-        const gracePy = 1; // ignore subpixel scrolling
         if (complete) {
-            topIdx = Math.ceil((this.scrollContainer.scrollTop - gracePy) / ROW_HEIGHT);
+            topIdx = Math.ceil((scrollTop - gracePx) / ROW_HEIGHT);
         }
         else {
-            topIdx = Math.floor(this.scrollContainer.scrollTop / ROW_HEIGHT);
+            topIdx = Math.floor(scrollTop / ROW_HEIGHT);
         }
         return this._getNodeByRowIdx(topIdx);
     }
     /** Return the lowest visible node in the viewport. */
-    _lastNodeInView(complete = true) {
+    getLowestVpNode(complete = true) {
+        const scrollParent = this.element;
+        const headerHeight = this.headerElement.clientHeight; // May be 0
+        const scrollTop = scrollParent.scrollTop;
+        const clientHeight = scrollParent.clientHeight - headerHeight;
         let bottomIdx;
         if (complete) {
-            bottomIdx =
-                Math.floor((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
-                    ROW_HEIGHT) - 1;
+            bottomIdx = Math.floor((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
         }
         else {
-            bottomIdx =
-                Math.ceil((this.scrollContainer.scrollTop + this.scrollContainer.clientHeight) /
-                    ROW_HEIGHT) - 1;
+            bottomIdx = Math.ceil((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
         }
         bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
         return this._getNodeByRowIdx(bottomIdx);
@@ -4663,7 +4999,7 @@ class Wunderbaum {
      * Return `tree.option.NAME` (also resolving if this is a callback).
      *
      * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
-     * to consider `node.NAME` setting and `tree.types[node.type].NAME`.
+     * to evaluate `node.NAME` setting and `tree.types[node.type].NAME`.
      *
      * @param name option name (use dot notation to access extension option, e.g.
      * `filter.mode`)
@@ -4682,33 +5018,48 @@ class Wunderbaum {
             value = value({ type: "resolve", tree: this });
         }
         // Use value from value options dict, fallback do default
+        // console.info(name, value, opts)
         return value !== null && value !== void 0 ? value : defaultValue;
     }
     /**
-     *
-     * @param name
-     * @param value
+     * Set tree option.
+     * Use dot notation to set plugin option, e.g. "filter.mode".
      */
     setOption(name, value) {
-        if (name.indexOf(".") === -1) {
-            this.options[name] = value;
-            // switch (name) {
-            //   case value:
-            //     break;
-            //   default:
-            //     break;
-            // }
+        // this.log(`setOption(${name}, ${value})`);
+        if (name.indexOf(".") >= 0) {
+            const parts = name.split(".");
+            const ext = this.extensions[parts[0]];
+            ext.setPluginOption(parts[1], value);
             return;
         }
-        const parts = name.split(".");
-        const ext = this.extensions[parts[0]];
-        ext.setPluginOption(parts[1], value);
+        this.options[name] = value;
+        switch (name) {
+            case "checkbox":
+                this.setModified(ChangeType.any, { removeMarkup: true });
+                break;
+            case "enabled":
+                this.setEnabled(!!value);
+                break;
+            case "fixedCol":
+                this.element.classList.toggle("wb-fixed-col", !!value);
+                break;
+        }
     }
-    /**Return true if the tree (or one of its nodes) has the input focus. */
+    /** Return true if the tree (or one of its nodes) has the input focus. */
     hasFocus() {
         return this.element.contains(document.activeElement);
     }
-    /** Run code, but defer `updateViewport()` until done. */
+    /**
+     * Return true if the tree displays a header. Grids have a header unless the
+     * `header` option is set to `false`. Plain trees have a header if the `header`
+     * option is a string or `true`.
+     */
+    hasHeader() {
+        const header = this.options.header;
+        return this.isGrid() ? header !== false : !!header;
+    }
+    /** Run code, but defer rendering of viewport until done. */
     runWithoutUpdate(func, hint = null) {
         try {
             this.enableUpdate(false);
@@ -4732,6 +5083,18 @@ class Wunderbaum {
             this.logTimeEnd(tag);
         }
     }
+    /** Recursively select all nodes. */
+    selectAll(flag = true) {
+        try {
+            this.enableUpdate(false);
+            this.visit((node) => {
+                node.setSelected(flag);
+            });
+        }
+        finally {
+            this.enableUpdate(true);
+        }
+    }
     /** Return the number of nodes in the data model.*/
     count(visible = false) {
         if (visible) {
@@ -4773,6 +5136,17 @@ class Wunderbaum {
     findFirst(match) {
         return this.root.findFirst(match);
     }
+    /**
+     * 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 {@link WunderbaumNode.findFirst}
+     *
+     */
+    findKey(key) {
+        return this.keyMap.get(key);
+    }
     /**
      * Find the next visible node that starts with `match`, starting at `startNode`
      * and wrap-around at the end.
@@ -4815,7 +5189,7 @@ class Wunderbaum {
      */
     findRelatedNode(node, where, includeHidden = false) {
         let res = null;
-        const pageSize = Math.floor(this.scrollContainer.clientHeight / ROW_HEIGHT);
+        const pageSize = Math.floor(this.scrollContainerElement.clientHeight / ROW_HEIGHT);
         switch (where) {
             case "parent":
                 if (node.parent && node.parent.parent) {
@@ -4871,7 +5245,7 @@ class Wunderbaum {
                 res = this._getNextNodeInView(node);
                 break;
             case "pageDown":
-                const bottomNode = this._lastNodeInView();
+                const bottomNode = this.getLowestVpNode();
                 // this.logDebug(`${where}(${node}) -> ${bottomNode}`);
                 if (node._rowIdx < bottomNode._rowIdx) {
                     res = bottomNode;
@@ -4885,7 +5259,7 @@ class Wunderbaum {
                     res = node;
                 }
                 else {
-                    const topNode = this._firstNodeInView();
+                    const topNode = this.getTopmostVpNode();
                     // this.logDebug(`${where}(${node}) -> ${topNode}`);
                     if (node._rowIdx > topNode._rowIdx) {
                         res = topNode;
@@ -4965,6 +5339,10 @@ class Wunderbaum {
             const idx = Array.prototype.indexOf.call(parentCol.parentNode.children, parentCol);
             res.colIdx = idx;
         }
+        else if (cl.contains("wb-row")) {
+            // Plain tree
+            res.region = TargetType.title;
+        }
         else {
             // Somewhere near the title
             if (event.type !== "mousemove" && !(event instanceof KeyboardEvent)) {
@@ -4993,7 +5371,7 @@ class Wunderbaum {
      * @internal
      */
     toString() {
-        return "Wunderbaum<'" + this.id + "'>";
+        return `Wunderbaum<'${this.id}'>`;
     }
     /** Return true if any node is currently in edit-title mode. */
     isEditing() {
@@ -5055,67 +5433,119 @@ class Wunderbaum {
         }
     }
     /**
-     * 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 this node is vertically scrolled into the viewport.
      */
-    scrollTo(opts) {
-        const MARGIN = 1;
-        const node = opts.node || this.getActiveNode();
-        assert(node._rowIdx != null);
-        const curTop = this.scrollContainer.scrollTop;
-        const height = this.scrollContainer.clientHeight;
-        const nodeOfs = node._rowIdx * ROW_HEIGHT;
-        let newTop;
-        if (nodeOfs > curTop) {
-            if (nodeOfs + ROW_HEIGHT < curTop + height) ;
+    scrollTo(nodeOrOpts) {
+        const PADDING = 2; // leave some pixels between viewport bounds
+        let node;
+        let opts;
+        if (nodeOrOpts instanceof WunderbaumNode) {
+            node = nodeOrOpts;
+        }
+        else {
+            opts = nodeOrOpts;
+            node = opts.node;
+        }
+        assert(node && node._rowIdx != null);
+        const scrollParent = this.element;
+        const headerHeight = this.headerElement.clientHeight; // May be 0
+        const scrollTop = scrollParent.scrollTop;
+        const vpHeight = scrollParent.clientHeight;
+        const rowTop = node._rowIdx * ROW_HEIGHT + headerHeight;
+        const vpTop = headerHeight;
+        const vpRowTop = rowTop - scrollTop;
+        const vpRowBottom = vpRowTop + ROW_HEIGHT;
+        // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts );
+        let newScrollTop = null;
+        if (vpRowTop >= vpTop) {
+            if (vpRowBottom <= vpHeight) ;
             else {
                 // Node is below viewport
-                newTop = nodeOfs - height + ROW_HEIGHT - MARGIN;
+                // this.log("Below viewport");
+                newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between vieeport bounds
             }
         }
-        else if (nodeOfs < curTop) {
+        else {
             // Node is above viewport
-            newTop = nodeOfs + MARGIN;
+            // this.log("Above viewport");
+            newScrollTop = rowTop - vpTop - PADDING; // leave some pixels between vieeport bounds
         }
-        if (newTop != null) {
-            this.log("scrollTo(" + nodeOfs + "): " + curTop + " => " + newTop, height);
-            this.scrollContainer.scrollTop = newTop;
-            this.setModified(ChangeType.vscroll);
+        if (newScrollTop != null) {
+            this.log(`scrollTo(${rowTop}): ${scrollTop} => ${newScrollTop}`);
+            scrollParent.scrollTop = newScrollTop;
+            // this.setModified(ChangeType.vscroll);
         }
     }
+    /**
+     * Make sure that this node is horizontally scrolled into the viewport.
+     * Called by {@link setColumn}.
+     */
+    scrollToHorz() {
+        // const PADDING = 1;
+        const fixedWidth = this.columns[0]._widthPx;
+        const vpWidth = this.element.clientWidth;
+        const scrollLeft = this.element.scrollLeft;
+        // if (scrollLeft <= 0) {
+        //   return; // Not scrolled horizontally: Nothing to do
+        // }
+        const colElem = this.getActiveColElem();
+        const colLeft = Number.parseInt(colElem === null || colElem === void 0 ? void 0 : colElem.style.left, 10);
+        const colRight = colLeft + Number.parseInt(colElem === null || colElem === void 0 ? void 0 : colElem.style.width, 10);
+        let newLeft = scrollLeft;
+        if (colLeft - scrollLeft < fixedWidth) {
+            // The current column is scrolled behind the left fixed column
+            newLeft = colLeft - fixedWidth;
+        }
+        else if (colRight - scrollLeft > vpWidth) {
+            // The current column is scrolled outside the right side
+            newLeft = colRight - vpWidth;
+        }
+        // util.assert(node._rowIdx != null);
+        // const curLeft = this.scrollContainer.scrollLeft;
+        this.log(`scrollToHorz(${this.activeColIdx}): ${colLeft}..${colRight}, fixedOfs=${fixedWidth}, vpWidth=${vpWidth}, curLeft=${scrollLeft} -> ${newLeft}`);
+        // const nodeOfs = node._rowIdx * ROW_HEIGHT;
+        // let newLeft;
+        this.element.scrollLeft = newLeft;
+        // this.setModified(ChangeType.vscroll);
+        // }
+    }
     /**
      * 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.
+     * Available in cell-nav mode only.
      */
     setColumn(colIdx) {
-        assert(this.navMode !== NavigationMode.row);
+        var _a;
+        assert(this.isCellNav());
         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) {
+        if (this.hasHeader()) {
             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) {
                 colDiv.classList.toggle("wb-active", i++ === colIdx);
             }
         }
+        // Vertical scroll into view
+        // if (this.options.fixedCol) {
+        this.scrollToHorz();
+        // }
+    }
+    /** Set or remove keybaord focus to the tree container. */
+    setActiveNode(key, flag = true, options) {
+        var _a;
+        (_a = this.findKey(key)) === null || _a === void 0 ? void 0 : _a.setActive(flag, options);
     }
     /** Set or remove keybaord focus to the tree container. */
     setFocus(flag = true) {
@@ -5139,59 +5569,147 @@ class Wunderbaum {
             options = node;
         }
         const immediate = !!getOption(options, "immediate");
+        const removeMarkup = !!getOption(options, "removeMarkup");
+        if (removeMarkup) {
+            this.visit((n) => {
+                n.removeMarkup();
+            });
+        }
+        let callUpdate = false;
         switch (change) {
             case ChangeType.any:
             case ChangeType.structure:
             case ChangeType.header:
                 this.changeRedrawRequestPending = true;
-                this.updateViewport(immediate);
+                callUpdate = true;
                 break;
             case ChangeType.vscroll:
-                this.updateViewport(immediate);
+                this.changeScrollRequestPending = true;
+                callUpdate = true;
                 break;
             case ChangeType.row:
+            case ChangeType.data:
             case ChangeType.status:
-                // Single nodes are immedialtely updated if already inside the viewport
+                // Single nodes are immediately updated if already inside the viewport
                 // (otherwise we can ignore)
                 if (node._rowElem) {
-                    node.render();
+                    node.render({ change: change });
                 }
                 break;
             default:
                 error(`Invalid change type ${change}`);
         }
+        if (callUpdate) {
+            if (immediate) {
+                this._updateViewportImmediately();
+            }
+            else {
+                this._updateViewportThrottled();
+            }
+        }
+    }
+    /** Disable mouse and keyboard interaction (return prev. state). */
+    setEnabled(flag = true) {
+        const prev = this.enabled;
+        this.enabled = !!flag;
+        this.element.classList.toggle("wb-disabled", !flag);
+        return prev;
+    }
+    /** Return false if tree is disabled. */
+    isEnabled() {
+        return this.enabled;
+    }
+    /** Return true if tree has more than one column, i.e. has additional data columns. */
+    isGrid() {
+        return this.columns && this.columns.length > 1;
+    }
+    /** Return true if cell-navigation mode is acive. */
+    isCellNav() {
+        return !!this._cellNavMode;
+    }
+    /** Return true if row-navigation mode is acive. */
+    isRowNav() {
+        return !this._cellNavMode;
     }
     /** Set the tree's navigation mode. */
-    setNavigationMode(mode) {
-        // util.assert(this.cellNavMode);
-        // util.assert(0 <= colIdx && colIdx < this.columns.length);
-        if (mode === this.navMode) {
+    setCellNav(flag = true) {
+        var _a;
+        const prev = this._cellNavMode;
+        // if (flag === prev) {
+        //   return;
+        // }
+        this._cellNavMode = !!flag;
+        if (flag && !prev) {
+            // switch from row to cell mode
+            this.setColumn(0);
+        }
+        this.element.classList.toggle("wb-cell-mode", flag);
+        (_a = this.activeNode) === null || _a === void 0 ? void 0 : _a.setModified(ChangeType.status);
+    }
+    /** Set the tree's navigation mode option. */
+    setNavigationOption(mode, reset = false) {
+        if (!this.isGrid() && mode !== NavigationOptions.row) {
+            this.logWarn("Plain trees only support row navigation mode.");
             return;
         }
-        const prevMode = this.navMode;
-        const cellMode = mode !== NavigationMode.row;
-        this.navMode = mode;
-        if (cellMode && prevMode === NavigationMode.row) {
-            this.setColumn(0);
+        this.options.navigationModeOption = mode;
+        switch (mode) {
+            case NavigationOptions.cell:
+                this.setCellNav(true);
+                break;
+            case NavigationOptions.row:
+                this.setCellNav(false);
+                break;
+            case NavigationOptions.startCell:
+                if (reset) {
+                    this.setCellNav(true);
+                }
+                break;
+            case NavigationOptions.startRow:
+                if (reset) {
+                    this.setCellNav(false);
+                }
+                break;
+            default:
+                error(`Invalid mode '${mode}'`);
         }
-        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);
+    setStatus(status, options) {
+        return this.root.setStatus(status, options);
+    }
+    /** Add or redefine node type definitions. */
+    setTypes(types, replace = true) {
+        assert(isPlainObject(types));
+        if (replace) {
+            this.types = types;
+        }
+        else {
+            extend(this.types, types);
+        }
+        // Convert `TYPE.classes` to a Set
+        for (let t of Object.values(this.types)) {
+            if (t.classes) {
+                t.classes = toSet(t.classes);
+            }
+        }
     }
     /** Update column headers and width. */
     updateColumns(opts) {
         opts = Object.assign({ calculateCols: true, updateRows: true }, opts);
-        const minWidth = 4;
+        const defaultMinWidth = 4;
         const vpWidth = this.element.clientWidth;
+        const isGrid = this.isGrid();
+        let totalWidth = 0;
         let totalWeight = 0;
         let fixedWidth = 0;
         let modified = false;
+        this.element.classList.toggle("wb-grid", isGrid);
+        if (!isGrid && this.isCellNav()) {
+            this.setCellNav(false);
+        }
         if (opts.calculateCols) {
-            // Gather width requests
+            // Gather width definitions
             this._columnsById = {};
             for (let col of this.columns) {
                 this._columnsById[col.id] = col;
@@ -5214,14 +5732,25 @@ class Wunderbaum {
                     fixedWidth += px;
                 }
                 else {
-                    error("Invalid column width: " + cw);
+                    error(`Invalid column width: ${cw}`);
                 }
             }
             // Share remaining space between non-fixed columns
             const restPx = Math.max(0, vpWidth - fixedWidth);
             let ofsPx = 0;
             for (let col of this.columns) {
+                let minWidth;
                 if (col._weight) {
+                    const cmw = col.minWidth;
+                    if (typeof cmw === "number") {
+                        minWidth = cmw;
+                    }
+                    else if (typeof cmw === "string" && cmw.endsWith("px")) {
+                        minWidth = parseFloat(cmw.slice(0, -2));
+                    }
+                    else {
+                        minWidth = defaultMinWidth;
+                    }
                     const px = Math.max(minWidth, (restPx * col._weight) / totalWeight);
                     if (col._widthPx != px) {
                         modified = true;
@@ -5231,7 +5760,14 @@ class Wunderbaum {
                 col._ofsPx = ofsPx;
                 ofsPx += col._widthPx;
             }
+            totalWidth = ofsPx;
         }
+        // if (this.options.fixedCol) {
+        // 'position: fixed' requires that the content has the correct size
+        const tw = `${totalWidth}px`;
+        this.headerElement.style.width = tw;
+        this.scrollContainerElement.style.width = tw;
+        // }
         // Every column has now a calculated `_ofsPx` and `_widthPx`
         // this.logInfo("UC", this.columns, vpWidth, this.element.clientWidth, this.element);
         // console.trace();
@@ -5247,91 +5783,124 @@ class Wunderbaum {
      * @internal
      */
     _renderHeaderMarkup() {
-        if (!this.headerElement) {
+        assert(this.headerElement);
+        const wantHeader = this.hasHeader();
+        setElemDisplay(this.headerElement, wantHeader);
+        if (!wantHeader) {
             return;
         }
+        const colCount = this.columns.length;
         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++) {
+        headerRow.innerHTML = "<span class='wb-col'></span>".repeat(colCount);
+        for (let i = 0; i < colCount; 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>`;
+            let tooltip = "";
+            if (col.tooltip) {
+                tooltip = escapeTooltip(col.tooltip);
+                tooltip = ` title="${tooltip}"`;
+            }
+            let resizer = "";
+            if (i < colCount - 1) {
+                resizer = '<span class="wb-col-resizer"></span>';
+            }
+            colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
         }
     }
-    /** 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();
+    /**
+     * Render pending changes that were scheduled using {@link WunderbaumNode.setModified} if any.
+     *
+     * This is hardly ever neccessary, since we normally either
+     * - call `setModified(ChangeType.TYPE)` (async, throttled), or
+     * - call `setModified(ChangeType.TYPE, {immediate: true})` (synchronous)
+     *
+     * `updatePendingModifications()` will only force immediate execution of
+     * pending async changes if any.
+     */
+    updatePendingModifications() {
+        if (this.changeRedrawRequestPending || this.changeScrollRequestPending) {
+            this._updateViewportImmediately();
         }
     }
     /**
      * 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()`.
+     *
+     * This protected method should not be called directly but via
+     * {@link WunderbaumNode.setModified}`, {@link Wunderbaum.setModified},
+     * or {@link Wunderbaum.updatePendingModifications}.
      * @internal
      */
-    _updateViewport() {
+    _updateViewportImmediately() {
+        var _a;
         if (this._disableUpdateCount) {
-            this.log(`IGNORED _updateViewport() disable level: ${this._disableUpdateCount}`);
+            this.log(`IGNORED _updateViewportImmediately() disable level: ${this._disableUpdateCount}`);
             return;
         }
         const newNodesOnly = !this.changeRedrawRequestPending;
         this.changeRedrawRequestPending = false;
-        let height = this.scrollContainer.clientHeight;
+        this.changeScrollRequestPending = false;
+        let height = this.scrollContainerElement.clientHeight;
         // 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;
+        // const headerHeight = this.options.headerHeightPx;
+        const headerHeight = this.headerElement.clientHeight; // May be 0
         const wantHeight = this.element.clientHeight - headerHeight;
         if (Math.abs(height - wantHeight) > 1.0) {
             // this.log("resize", height, wantHeight);
-            this.scrollContainer.style.height = wantHeight + "px";
+            this.scrollContainerElement.style.height = wantHeight + "px";
             height = wantHeight;
         }
+        // console.profile(`_updateViewportImmediately()`)
         this.updateColumns({ updateRows: false });
         this._updateRows({ newNodesOnly: newNodesOnly });
+        // console.profileEnd(`_updateViewportImmediately()`)
+        if (this.options.connectTopBreadcrumb) {
+            let path = (_a = this.getTopmostVpNode(true)) === null || _a === void 0 ? void 0 : _a.getPath(false, "title", " > ");
+            path = path ? path + " >" : "";
+            this.options.connectTopBreadcrumb.textContent = path;
+        }
         this._callEvent("update");
     }
-    /**
-     * 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;
-    }
+    // /**
+    //  * Assert that TR order matches the natural node order
+    //  * @internal
+    //  */
+    // protected _validateRows(): boolean {
+    //   let trs = this.nodeListElement.childNodes;
+    //   let i = 0;
+    //   let prev = -1;
+    //   let ok = true;
+    //   trs.forEach((element) => {
+    //     const tr = element as HTMLTableRowElement;
+    //     const top = Number.parseInt(tr.style.top);
+    //     const n = (<any>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.
+     * - Traverse all *visible* nodes 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
@@ -5339,13 +5908,14 @@ class Wunderbaum {
      * -
      */
     _updateRows(opts) {
-        const label = this.logTime("_updateRows");
+        // 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 vp_height = this.element.clientHeight;
         const prefetch = RENDER_MAX_PREFETCH;
-        const ofs = this.scrollContainer.scrollTop;
+        const ofs = this.element.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
@@ -5369,7 +5939,7 @@ class Wunderbaum {
         let modified = false;
         let prevElem = "first";
         this.visitRows(function (node) {
-            // console.log("visit", node)
+            // node.log("visit")
             const rowDiv = node._rowElem;
             // Renumber all expanded nodes
             if (node._rowIdx !== idx) {
@@ -5391,8 +5961,11 @@ class Wunderbaum {
             else {
                 obsoleteNodes.delete(node);
                 // Create new markup
+                if (rowDiv) {
+                    rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                }
                 node.render({ top: top, after: prevElem });
-                // console.log("render", top, prevElem, "=>", node._rowElem);
+                // node.log("render", top, prevElem, "=>", node._rowElem);
                 prevElem = node._rowElem;
             }
             idx++;
@@ -5409,8 +5982,8 @@ class Wunderbaum {
         //   `render(scrollOfs:${ofs}, ${startIdx}..${endIdx})`,
         //   this.nodeListElement.style.height
         // );
-        this.logTimeEnd(label);
-        this._validateRows();
+        // this.logTimeEnd(label);
+        // this._validateRows();
         return modified;
     }
     /**
@@ -5557,17 +6130,11 @@ class Wunderbaum {
     /**
      * 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`).
+     * Previous data is cleared. Note that also column- and type defintions may
+     * be passed with the `source` object.
      */
-    load(source, options = {}) {
+    load(source) {
         this.clear();
-        const columns = options.columns || source.columns;
-        if (columns) {
-            this.columns = options.columns;
-            // this._renderHeaderMarkup();
-            this.updateColumns({ calculateCols: false });
-        }
         return this.root.load(source);
     }
     /**
@@ -5578,7 +6145,7 @@ class Wunderbaum {
      *   tree.enableUpdate(false);
      *   // ... (long running operation that would trigger many updates)
      *   foo();
-     *   // ... NOTE: make sure that async operations have finished
+     *   // ... NOTE: make sure that async operations have finished, e.g.
      *   await foo();
      * } finally {
      *   tree.enableUpdate(true);
@@ -5599,7 +6166,9 @@ class Wunderbaum {
             //   `enableUpdate(${flag}): count -> ${this._disableUpdateCount}...`
             // );
             if (this._disableUpdateCount === 0) {
-                this.updateViewport();
+                // this.changeRedrawRequestPending = true; // make sure, we re-render all markup
+                // this.updateViewport();
+                this.setModified(ChangeType.any, { immediate: true });
             }
         }
         else {
@@ -5641,7 +6210,7 @@ class Wunderbaum {
 }
 Wunderbaum.sequence = 0;
 /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-Wunderbaum.version = "v0.0.3"; // Set to semver by 'grunt release'
+Wunderbaum.version = "v0.0.6"; // Set to semver by 'grunt release'
 /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
 Wunderbaum.util = util;