wunderbaum 0.10.1 → 0.11.1

package/dist/wunderbaum.esm.js

@@ -288,7 +288,7 @@ function throttle(func, wait = 0, options = {}) {
 /*!
  * Wunderbaum - util
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 /** @module util */
 /** Readable names for `MouseEvent.button` */
@@ -920,6 +920,11 @@ function getOption(opts, name, defaultValue = undefined) {
     // Use value from value options dict, fallback do default
     return value !== null && value !== void 0 ? value : defaultValue;
 }
+/** Return the next value from a list of values (rotating). @since 0.11 */
+function rotate(value, values) {
+    const idx = values.indexOf(value);
+    return values[(idx + 1) % values.length];
+}
 /** Convert an Array or space-separated string to a Set. */
 function toSet(val) {
     if (val instanceof Set) {
@@ -948,12 +953,7 @@ function toSet(val) {
  * const width = util.toPixel(x, y, 100);  // returns 123
  * ```
  */
-function toPixel(
-// val: string | number | undefined | null,
-...defaults) {
-    // if (typeof val === "number") {
-    //   return val;
-    // }
+function toPixel(...defaults) {
     for (const d of defaults) {
         if (typeof d === "number") {
             return d;
@@ -972,12 +972,7 @@ function toPixel(
  * const value = util.toBool(opts.foo, opts.flag, false);  // returns true
  * ```
  */
-function toBool(
-// val: boolean | undefined | null,
-...boolDefaults) {
-    // if (val != null) {
-    //   return !!val;
-    // }
+function toBool(...boolDefaults) {
     for (const d of boolDefaults) {
         if (d != null) {
             return !!d;
@@ -985,6 +980,15 @@ function toBool(
     }
     throw new Error("No default boolean value provided");
 }
+/**
+ * Return `val` unless `val` is a number in which case we convert to boolean.
+ * This is useful when a boolean value is stored as a 0/1 (e.g. in JSON) and
+ * we still want to maintain string values. null and undefined are returned as
+ * is. E.g. `checkbox` may be boolean or 'radio'.
+ */
+function intToBool(val) {
+    return typeof val === "number" ? !!val : val;
+}
 // /** Check if a string is contained in an Array or Set. */
 // export function isAnyOf(s: string, items: Array<string>|Set<string>): boolean {
 //   return Array.prototype.includes.call(items, s)
@@ -1113,6 +1117,7 @@ var util = /*#__PURE__*/Object.freeze({
     extractHtmlText: extractHtmlText,
     getOption: getOption,
     getValueFromElem: getValueFromElem,
+    intToBool: intToBool,
     isArray: isArray,
     isEmptyObject: isEmptyObject,
     isFunction: isFunction,
@@ -1121,6 +1126,7 @@ var util = /*#__PURE__*/Object.freeze({
     noop: noop,
     onEvent: onEvent,
     overrideMethod: overrideMethod,
+    rotate: rotate,
     setElemDisplay: setElemDisplay,
     setTimeoutPromise: setTimeoutPromise,
     setValueToElem: setValueToElem,
@@ -1136,10 +1142,10 @@ var util = /*#__PURE__*/Object.freeze({
 /*!
  * Wunderbaum - types
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
- * Possible values for {@link WunderbaumNode.update()} and {@link Wunderbaum.update()}.
+ * Possible values for {@link WunderbaumNode.update} and {@link Wunderbaum.update}.
  */
 var ChangeType;
 (function (ChangeType) {
@@ -1168,7 +1174,7 @@ var RenderFlag;
     RenderFlag["redraw"] = "redraw";
     RenderFlag["scroll"] = "scroll";
 })(RenderFlag || (RenderFlag = {}));
-/** Possible values for {@link WunderbaumNode.setStatus()}. */
+/** Possible values for {@link WunderbaumNode.setStatus}. */
 var NodeStatusType;
 (function (NodeStatusType) {
     NodeStatusType["ok"] = "ok";
@@ -1200,7 +1206,7 @@ var NavModeEnum;
 /*!
  * Wunderbaum - wb_extension_base
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 class WunderbaumExtension {
     constructor(tree, id, defaults) {
@@ -1259,7 +1265,7 @@ class WunderbaumExtension {
 /*!
  * Wunderbaum - ext-filter
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 const START_MARKER = "\uFFF7";
 const END_MARKER = "\uFFF8";
@@ -1584,7 +1590,7 @@ function _markFuzzyMatchedChars(text, matches, escapeTitles = true) {
 /*!
  * Wunderbaum - ext-keynav
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 const QUICKSEARCH_DELAY = 500;
 class KeynavExtension extends WunderbaumExtension {
@@ -1948,7 +1954,7 @@ class KeynavExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - ext-logger
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 class LoggerExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -1988,409 +1994,84 @@ class LoggerExtension extends WunderbaumExtension {
 }
 
 /*!
- * Wunderbaum - common
+ * Wunderbaum - ext-dnd
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
- */
-const DEFAULT_DEBUGLEVEL = 3; // Replaced by rollup script
-/**
- * Fixed height of a row in pixel. Must match the SCSS variable `$row-outer-height`.
- */
-const ROW_HEIGHT = 22;
-/**
- * Fixed width of node icons in pixel. Must match the SCSS variable `$icon-outer-width`.
- */
-const ICON_WIDTH = 20;
-/**
- * Adjust the width of the title span, so overflow ellipsis work.
- * (2 x `$col-padding-x` + 3px rounding errors).
- */
-const TITLE_SPAN_PAD_Y = 7;
-/** Render row markup for N nodes above and below the visible viewport. */
-const RENDER_MAX_PREFETCH = 5;
-/** Minimum column width if not set otherwise. */
-const DEFAULT_MIN_COL_WIDTH = 4;
-/** Regular expression to detect if a string describes an image URL (in contrast
- * to a class name). Strings are considered image urls if they contain '.' or '/'.
- */
-const TEST_IMG = new RegExp(/\.|\//);
-// export const RECURSIVE_REQUEST_ERROR = "$recursive_request";
-// export const INVALID_REQUEST_TARGET_ERROR = "$request_target_invalid";
-/**
- * Default node icons.
- * Requires bootstrap icons https://icons.getbootstrap.com
- */
-const iconMaps = {
-    bootstrap: {
-        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 bi-dash-square-dotted",
-        radioChecked: "bi bi-circle-fill",
-        radioUnchecked: "bi bi-circle",
-        radioUnknown: "bi bi-record-circle",
-        folder: "bi bi-folder2",
-        folderOpen: "bi bi-folder2-open",
-        folderLazy: "bi bi-folder-symlink",
-        doc: "bi bi-file-earmark",
-    },
-    fontawesome6: {
-        error: "fa-solid fa-triangle-exclamation",
-        loading: "fa-solid fa-chevron-right fa-beat",
-        noData: "fa-solid fa-circle-question",
-        expanderExpanded: "fa-solid fa-chevron-down",
-        expanderCollapsed: "fa-solid fa-chevron-right",
-        expanderLazy: "fa-solid fa-chevron-right wb-helper-lazy-expander",
-        checkChecked: "fa-regular fa-square-check",
-        checkUnchecked: "fa-regular fa-square",
-        checkUnknown: "fa-regular fa-square-minus",
-        radioChecked: "fa-solid fa-circle",
-        radioUnchecked: "fa-regular fa-circle",
-        radioUnknown: "fa-regular fa-circle-question",
-        folder: "fa-solid fa-folder-closed",
-        folderOpen: "fa-regular fa-folder-open",
-        folderLazy: "fa-solid fa-folder-plus",
-        doc: "fa-regular fa-file",
-    },
-};
-/** Dict keys that are evaluated by source loader (others are added to `tree.data` instead). */
-const RESERVED_TREE_SOURCE_KEYS = new Set([
-    "_format", // reserved for future use
-    "_keyMap", // Used for compressed data format
-    "_positional", // Used for compressed data format
-    "_typeList", // Used for compressed data format @deprecated
-    "_valueMap", // Used for compressed data format
-    "_version", // reserved for future use
-    "children",
-    "columns",
-    "types",
-]);
-// /** Key codes that trigger grid navigation, even when inside an input element. */
-// export const INPUT_BREAKOUT_KEYS: Set<string> = 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", // macOs
-    "Meta+ArrowUp": "first", // macOs
-    "*": "expandAll",
-    Multiply: "expandAll",
-    PageDown: "pageDown",
-    PageUp: "pageUp",
-    "-": "collapse",
-    Subtract: "collapse",
-};
-/** Return a callback that returns true if the node title matches the string
- * or regular expression.
- * @see {@link WunderbaumNode.findAll()}
- */
-function makeNodeTitleMatcher(match) {
-    if (match instanceof RegExp) {
-        return function (node) {
-            return match.test(node.title);
-        };
-    }
-    assert(typeof match === "string", `Expected a string or RegExp: ${match}`);
-    // s = escapeRegex(s.toLowerCase());
-    return function (node) {
-        return node.title === match;
-        // console.log("match " + node, node.title.toLowerCase().indexOf(match))
-        // return node.title.toLowerCase().indexOf(match) >= 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);
-    };
-}
-/** Compare two nodes by title (case-insensitive). */
-function nodeTitleSorter(a, b) {
-    const x = a.title.toLowerCase();
-    const y = b.title.toLowerCase();
-    return x === y ? 0 : x > y ? 1 : -1;
-}
-/**
- * Convert 'flat' to 'nested' format.
- *
- *  Flat node entry format:
- *    [PARENT_ID, [POSITIONAL_ARGS]]
- *  or
- *    [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
- *
- * 1. Parent-referencing list is converted to a list of nested dicts with
- *    optional `children` properties.
- * 2. `[POSITIONAL_ARGS]` are added as dict attributes.
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
-function unflattenSource(source) {
-    var _a, _b, _c;
-    const { _format, _keyMap = {}, _positional = [], children } = source;
-    if (_format !== "flat") {
-        throw new Error(`Expected source._format: "flat", but got ${_format}`);
+const nodeMimeType = "application/x-wunderbaum-node";
+class DndExtension extends WunderbaumExtension {
+    constructor(tree) {
+        super(tree, "dnd", {
+            autoExpandMS: 1500, // Expand nodes after n milliseconds of hovering
+            // dropMarkerInsertOffsetX: -16, // Additional offset for drop-marker with hitMode = "before"/"after"
+            // dropMarkerOffsetX: -24, // Absolute position offset for .fancytree-drop-marker relatively to ..fancytree-title (icon/img near a node accepting drop)
+            // #1021 `document.body` is not available yet
+            // dropMarkerParent: "body", // Root Container used for drop marker (could be a shadow root)
+            multiSource: false, // true: Drag multiple (i.e. selected) nodes. Also a callback() is allowed
+            effectAllowed: "all", // Restrict the possible cursor shapes and modifier operations (can also be set in the dragStart event)
+            dropEffectDefault: "move", // Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (override in drag, dragOver).
+            guessDropEffect: true, // Calculate from `effectAllowed` and modifier keys)
+            preventForeignNodes: false, // Prevent dropping nodes from different Wunderbaum trees
+            preventLazyParents: true, // Prevent dropping items on unloaded lazy Wunderbaum tree nodes
+            preventNonNodes: false, // Prevent dropping items other than Wunderbaum tree nodes
+            preventRecursion: true, // Prevent dropping nodes on own descendants
+            preventSameParent: false, // Prevent dropping nodes under same direct parent
+            preventVoidMoves: true, // Prevent dropping nodes 'before self', etc. (move only)
+            serializeClipboardData: true, // Serialize node data to dataTransfer object
+            scroll: true, // Enable auto-scrolling while dragging
+            scrollSensitivity: 20, // Active top/bottom margin in pixel
+            // scrollnterval: 50, // Generate event every 50 ms
+            scrollSpeed: 5, // Scroll pixel per 50 ms
+            // setTextTypeJson: false, // Allow dragging of nodes to different IE windows
+            sourceCopyHook: null, // Optional callback passed to `toDict` on dragStart @since 2.38
+            // Events (drag support)
+            dragStart: null, // Callback(sourceNode, data), return true, to enable dnd drag
+            drag: null, // Callback(sourceNode, data)
+            dragEnd: null, // Callback(sourceNode, data)
+            // Events (drop support)
+            dragEnter: null, // Callback(targetNode, data), return true, to enable dnd drop
+            dragOver: null, // Callback(targetNode, data)
+            dragExpand: null, // Callback(targetNode, data), return false to prevent autoExpand
+            drop: null, // Callback(targetNode, data)
+            dragLeave: null, // Callback(targetNode, data)
+        });
+        // public dropMarkerElem?: HTMLElement;
+        this.srcNode = null;
+        this.lastTargetNode = null;
+        this.lastEnterStamp = 0;
+        this.lastAllowedDropRegions = null;
+        this.lastDropEffect = null;
+        this.lastDropRegion = false;
+        this.currentScrollDir = 0;
+        this.applyScrollDirThrottled = throttle(this._applyScrollDir, 50);
     }
-    if (_positional && _positional.includes("children")) {
-        throw new Error(`source._positional must not include "children": ${_positional}`);
+    init() {
+        super.init();
+        // Store the current scroll parent, which may be the tree
+        // container, any enclosing div, or the document.
+        // #761: scrollParent() always needs a container child
+        // $temp = $("<span>").appendTo(this.$container);
+        // this.$scrollParent = $temp.scrollParent();
+        // $temp.remove();
+        const tree = this.tree;
+        const dndOpts = tree.options.dnd;
+        // Enable drag support if dragStart() is specified:
+        if (dndOpts.dragStart) {
+            onEvent(tree.element, "dragstart drag dragend", this.onDragEvent.bind(this));
+        }
+        // Enable drop support if dragEnter() is specified:
+        if (dndOpts.dragEnter) {
+            onEvent(tree.element, "dragenter dragover dragleave drop", this.onDropEvent.bind(this));
+        }
     }
-    let longToShort = _keyMap;
-    if (_keyMap.t) {
-        // Inverse keyMap was used (pre 0.7.0)
-        // TODO: raise Error on final 1.x release
-        const msg = `source._keyMap maps from long to short since v0.7.0. Flip key/value!`;
-        console.warn(msg); // eslint-disable-line no-console
-        longToShort = {};
-        for (const [key, value] of Object.entries(_keyMap)) {
-            longToShort[value] = key;
-        }
-    }
-    const positionalShort = _positional.map((e) => longToShort[e]);
-    const newChildren = [];
-    const keyToNodeMap = {};
-    const indexToNodeMap = {};
-    const keyAttrName = (_a = longToShort["key"]) !== null && _a !== void 0 ? _a : "key";
-    const childrenAttrName = (_b = longToShort["children"]) !== null && _b !== void 0 ? _b : "children";
-    for (const [index, nodeTuple] of children.entries()) {
-        // Node entry format:
-        //   [PARENT_ID, [POSITIONAL_ARGS]]
-        // or
-        //   [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
-        const [parentId, args, kwargs = {}] = nodeTuple;
-        // Free up some memory as we go
-        nodeTuple[1] = null;
-        if (nodeTuple[2] != null) {
-            nodeTuple[2] = null;
-        }
-        // console.log("flatten", parentId, args, kwargs)
-        // We keep `kwargs` as our new node definition. Then we add all positional
-        // values to this object:
-        args.forEach((val, positionalIdx) => {
-            kwargs[positionalShort[positionalIdx]] = val;
-        });
-        // Find the parent node. `null` means 'toplevel'. PARENT_ID may be the numeric
-        // index of the source.children list. If PARENT_ID is a string, we search
-        // a parent with node.key of this value.
-        indexToNodeMap[index] = kwargs;
-        const key = kwargs[keyAttrName];
-        if (key != null) {
-            keyToNodeMap[key] = kwargs;
-        }
-        let parentNode = null;
-        if (parentId === null) ;
-        else if (typeof parentId === "number") {
-            parentNode = indexToNodeMap[parentId];
-            if (parentNode === undefined) {
-                throw new Error(`unflattenSource: Could not find parent node by index: ${parentId}.`);
-            }
-        }
-        else {
-            parentNode = keyToNodeMap[parentId];
-            if (parentNode === undefined) {
-                throw new Error(`unflattenSource: Could not find parent node by key: ${parentId}`);
-            }
-        }
-        if (parentNode) {
-            (_c = parentNode[childrenAttrName]) !== null && _c !== void 0 ? _c : (parentNode[childrenAttrName] = []);
-            parentNode[childrenAttrName].push(kwargs);
-        }
-        else {
-            newChildren.push(kwargs);
-        }
-    }
-    source.children = newChildren;
-}
-/**
- * Decompresses the source data by
- * - converting from 'flat' to 'nested' format
- * - expanding short alias names to long names (if defined in _keyMap)
- * - resolving value indexes to value strings (if defined in _valueMap)
- *
- * @param source - The source object to be decompressed.
- * @returns void
- */
-function decompressSourceData(source) {
-    let { _format, _version = 1, _keyMap, _valueMap } = source;
-    assert(_version === 1, `Expected file version 1 instead of ${_version}`);
-    let longToShort = _keyMap;
-    let shortToLong = {};
-    if (longToShort) {
-        for (const [key, value] of Object.entries(longToShort)) {
-            shortToLong[value] = key;
-        }
-    }
-    // Fallback for old format (pre 0.7.0, using _keyMap in reverse direction)
-    // TODO: raise Error on final 1.x release
-    if (longToShort && longToShort.t) {
-        const msg = `source._keyMap maps from long to short since v0.7.0. Flip key/value!`;
-        console.warn(msg); // eslint-disable-line no-console
-        [longToShort, shortToLong] = [shortToLong, longToShort];
-    }
-    // Fallback for old format (pre 0.7.0, using _typeList instead of _valueMap)
-    // TODO: raise Error on final 1.x release
-    if (source._typeList != null) {
-        const msg = `source._typeList is deprecated since v0.7.0: use source._valueMap: {"type": [...]} instead.`;
-        if (_valueMap != null) {
-            throw new Error(msg);
-        }
-        else {
-            console.warn(msg); // eslint-disable-line no-console
-            _valueMap = { type: source._typeList };
-            delete source._typeList;
-        }
-    }
-    if (_format === "flat") {
-        unflattenSource(source);
-    }
-    delete source._format;
-    delete source._version;
-    delete source._keyMap;
-    delete source._valueMap;
-    delete source._positional;
-    function _iter(childList) {
-        for (const node of childList) {
-            // Iterate over a list of names, because we modify inside the loop
-            // (for ... of ... does not allow this)
-            Object.getOwnPropertyNames(node).forEach((propName) => {
-                const value = node[propName];
-                // Replace short names with long names if defined in _keyMap
-                let longName = propName;
-                if (_keyMap && shortToLong[propName] != null) {
-                    longName = shortToLong[propName];
-                    if (longName !== propName) {
-                        node[longName] = value;
-                        delete node[propName];
-                    }
-                }
-                // Replace type index with type name if defined in _valueMap
-                if (_valueMap &&
-                    typeof value === "number" &&
-                    _valueMap[longName] != null) {
-                    const newValue = _valueMap[longName][value];
-                    if (newValue == null) {
-                        throw new Error(`Expected valueMap[${longName}][${value}] entry in [${_valueMap[longName]}]`);
-                    }
-                    node[longName] = newValue;
-                }
-            });
-            // Recursion
-            if (node.children) {
-                _iter(node.children);
-            }
-        }
-    }
-    if (_keyMap || _valueMap) {
-        _iter(source.children);
-    }
-}
-
-/*!
- * Wunderbaum - ext-dnd
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
- */
-const nodeMimeType = "application/x-wunderbaum-node";
-class DndExtension extends WunderbaumExtension {
-    constructor(tree) {
-        super(tree, "dnd", {
-            autoExpandMS: 1500, // Expand nodes after n milliseconds of hovering
-            // dropMarkerInsertOffsetX: -16, // Additional offset for drop-marker with hitMode = "before"/"after"
-            // dropMarkerOffsetX: -24, // Absolute position offset for .fancytree-drop-marker relatively to ..fancytree-title (icon/img near a node accepting drop)
-            // #1021 `document.body` is not available yet
-            // dropMarkerParent: "body", // Root Container used for drop marker (could be a shadow root)
-            multiSource: false, // true: Drag multiple (i.e. selected) nodes. Also a callback() is allowed
-            effectAllowed: "all", // Restrict the possible cursor shapes and modifier operations (can also be set in the dragStart event)
-            dropEffectDefault: "move", // Default dropEffect ('copy', 'link', or 'move') when no modifier is pressed (override in drag, dragOver).
-            guessDropEffect: true, // Calculate from `effectAllowed` and modifier keys)
-            preventForeignNodes: false, // Prevent dropping nodes from different Wunderbaum trees
-            preventLazyParents: true, // Prevent dropping items on unloaded lazy Wunderbaum tree nodes
-            preventNonNodes: false, // Prevent dropping items other than Wunderbaum tree nodes
-            preventRecursion: true, // Prevent dropping nodes on own descendants
-            preventSameParent: false, // Prevent dropping nodes under same direct parent
-            preventVoidMoves: true, // Prevent dropping nodes 'before self', etc. (move only)
-            serializeClipboardData: true, // Serialize node data to dataTransfer object
-            scroll: true, // Enable auto-scrolling while dragging
-            scrollSensitivity: 20, // Active top/bottom margin in pixel
-            // scrollnterval: 50, // Generate event every 50 ms
-            scrollSpeed: 5, // Scroll pixel per 50 ms
-            // setTextTypeJson: false, // Allow dragging of nodes to different IE windows
-            sourceCopyHook: null, // Optional callback passed to `toDict` on dragStart @since 2.38
-            // Events (drag support)
-            dragStart: null, // Callback(sourceNode, data), return true, to enable dnd drag
-            drag: null, // Callback(sourceNode, data)
-            dragEnd: null, // Callback(sourceNode, data)
-            // Events (drop support)
-            dragEnter: null, // Callback(targetNode, data), return true, to enable dnd drop
-            dragOver: null, // Callback(targetNode, data)
-            dragExpand: null, // Callback(targetNode, data), return false to prevent autoExpand
-            drop: null, // Callback(targetNode, data)
-            dragLeave: null, // Callback(targetNode, data)
-        });
-        // public dropMarkerElem?: HTMLElement;
-        this.srcNode = null;
-        this.lastTargetNode = null;
-        this.lastEnterStamp = 0;
-        this.lastAllowedDropRegions = null;
-        this.lastDropEffect = null;
-        this.lastDropRegion = false;
-        this.currentScrollDir = 0;
-        this.applyScrollDirThrottled = throttle(this._applyScrollDir, 50);
-    }
-    init() {
-        super.init();
-        // Store the current scroll parent, which may be the tree
-        // container, any enclosing div, or the document.
-        // #761: scrollParent() always needs a container child
-        // $temp = $("<span>").appendTo(this.$container);
-        // this.$scrollParent = $temp.scrollParent();
-        // $temp.remove();
-        const tree = this.tree;
-        const dndOpts = tree.options.dnd;
-        // Enable drag support if dragStart() is specified:
-        if (dndOpts.dragStart) {
-            onEvent(tree.element, "dragstart drag dragend", this.onDragEvent.bind(this));
-        }
-        // Enable drop support if dragEnter() is specified:
-        if (dndOpts.dragEnter) {
-            onEvent(tree.element, "dragenter dragover dragleave drop", this.onDropEvent.bind(this));
-        }
-    }
-    /** Cleanup classes after target node is no longer hovered. */
-    _leaveNode() {
-        // We remove the marker on dragenter from the previous target:
-        const ltn = this.lastTargetNode;
-        this.lastEnterStamp = 0;
-        if (ltn) {
-            ltn.setClass("wb-drop-target wb-drop-over wb-drop-after wb-drop-before", false);
-            this.lastTargetNode = null;
+    /** Cleanup classes after target node is no longer hovered. */
+    _leaveNode() {
+        // We remove the marker on dragenter from the previous target:
+        const ltn = this.lastTargetNode;
+        this.lastEnterStamp = 0;
+        if (ltn) {
+            ltn.setClass("wb-drop-target wb-drop-over wb-drop-after wb-drop-before", false);
+            this.lastTargetNode = null;
         }
     }
     /** */
@@ -2414,14 +2095,15 @@ class DndExtension extends WunderbaumExtension {
      * Calculates the drop region based on the drag event and the allowed drop regions.
      */
     _calcDropRegion(e, allowed) {
+        const rowHeight = this.tree.options.rowHeightPx;
         const dy = e.offsetY;
         if (!allowed) {
             return false;
         }
         else if (allowed.size === 3) {
-            return dy < 0.25 * ROW_HEIGHT
+            return dy < 0.25 * rowHeight
                 ? "before"
-                : dy > 0.75 * ROW_HEIGHT
+                : dy > 0.75 * rowHeight
                     ? "after"
                     : "over";
         }
@@ -2430,7 +2112,7 @@ class DndExtension extends WunderbaumExtension {
         }
         else {
             // Only 'before' and 'after':
-            return dy > ROW_HEIGHT / 2 ? "after" : "before";
+            return dy > rowHeight / 2 ? "after" : "before";
         }
         // return "over";
     }
@@ -2691,7 +2373,11 @@ class DndExtension extends WunderbaumExtension {
             }
             this.lastAllowedDropRegions = regionSet;
             this.lastDropEffect = dt.dropEffect;
+            const region = this._calcDropRegion(e, this.lastAllowedDropRegions);
             targetNode.setClass("wb-drop-target");
+            targetNode.setClass("wb-drop-over", region === "over");
+            targetNode.setClass("wb-drop-before", region === "before");
+            targetNode.setClass("wb-drop-after", region === "after");
             e.preventDefault(); // Allow drop (Drop operation is denied by default)
             return false;
             // --- dragover ---
@@ -2756,160 +2442,500 @@ class DndExtension extends WunderbaumExtension {
         return false;
     }
 }
-
-/*!
- * Wunderbaum - drag_observer
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
- */
+
+/*!
+ * Wunderbaum - drag_observer
+ * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
+ */
+/**
+ * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
+ */
+class DragObserver {
+    constructor(opts) {
+        this.start = {
+            event: null,
+            x: 0,
+            y: 0,
+            altKey: false,
+            ctrlKey: false,
+            metaKey: false,
+            shiftKey: false,
+        };
+        this.dragElem = null;
+        this.dragging = false;
+        this.customData = {};
+        // TODO: touch events
+        this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
+        if (!opts.root) {
+            throw new Error("Missing `root` option.");
+        }
+        this.opts = Object.assign({ thresh: 5 }, opts);
+        this.root = opts.root;
+        this._handler = this.handleEvent.bind(this);
+        this.events.forEach((type) => {
+            this.root.addEventListener(type, this._handler);
+        });
+    }
+    /** Unregister all event listeners. */
+    disconnect() {
+        this.events.forEach((type) => {
+            this.root.removeEventListener(type, this._handler);
+        });
+    }
+    getDragElem() {
+        return this.dragElem;
+    }
+    isDragging() {
+        return this.dragging;
+    }
+    stopDrag(cb_event) {
+        if (this.dragging && this.opts.dragstop && cb_event) {
+            cb_event.type = "dragstop";
+            try {
+                this.opts.dragstop(cb_event);
+            }
+            catch (err) {
+                console.error("dragstop error", err); // eslint-disable-line no-console
+            }
+        }
+        this.dragElem = null;
+        this.dragging = false;
+        this.start.event = null;
+        this.customData = {};
+    }
+    handleEvent(e) {
+        const type = e.type;
+        const opts = this.opts;
+        const cb_event = {
+            type: e.type,
+            startEvent: type === "mousedown" ? e : this.start.event,
+            event: e,
+            customData: this.customData,
+            dragElem: this.dragElem,
+            dx: e.pageX - this.start.x,
+            dy: e.pageY - this.start.y,
+            apply: undefined,
+        };
+        // console.log("handleEvent", type, cb_event);
+        switch (type) {
+            case "keydown":
+                this.stopDrag(cb_event);
+                break;
+            case "mousedown":
+                if (this.dragElem) {
+                    this.stopDrag(cb_event);
+                    break;
+                }
+                if (opts.selector) {
+                    let elem = e.target;
+                    if (elem.matches(opts.selector)) {
+                        this.dragElem = elem;
+                    }
+                    else {
+                        elem = elem.closest(opts.selector);
+                        if (elem) {
+                            this.dragElem = elem;
+                        }
+                        else {
+                            break; // no event delegation selector matched
+                        }
+                    }
+                }
+                this.start.event = e;
+                this.start.x = e.pageX;
+                this.start.y = e.pageY;
+                this.start.altKey = e.altKey;
+                this.start.ctrlKey = e.ctrlKey;
+                this.start.metaKey = e.metaKey;
+                this.start.shiftKey = e.shiftKey;
+                break;
+            case "mousemove":
+                // TODO: debounce/throttle?
+                // TODO: horizontal mode: ignore if dx unchanged
+                if (!this.dragElem) {
+                    break;
+                }
+                if (!this.dragging) {
+                    if (opts.thresh) {
+                        const dist2 = cb_event.dx * cb_event.dx + cb_event.dy * cb_event.dy;
+                        if (dist2 < opts.thresh * opts.thresh) {
+                            break;
+                        }
+                    }
+                    cb_event.type = "dragstart";
+                    if (opts.dragstart(cb_event) === false) {
+                        this.stopDrag(cb_event);
+                        break;
+                    }
+                    this.dragging = true;
+                }
+                if (this.dragging && this.opts.drag) {
+                    cb_event.type = "drag";
+                    this.opts.drag(cb_event);
+                }
+                break;
+            case "mouseup":
+                if (!this.dragging) {
+                    this.stopDrag(cb_event);
+                    break;
+                }
+                if (e.button === 0) {
+                    cb_event.apply = true;
+                }
+                else {
+                    cb_event.apply = false;
+                }
+                this.stopDrag(cb_event);
+                break;
+        }
+    }
+}
+
+/*!
+ * Wunderbaum - common
+ * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
+ */
+const DEFAULT_DEBUGLEVEL = 3; // Replaced by rollup script
+/**
+ * Fixed height of a row in pixel. Must match the SCSS variable `$row-outer-height`.
+ */
+const DEFAULT_ROW_HEIGHT = 22;
+/**
+ * Fixed width of node icons in pixel. Must match the SCSS variable `$icon-outer-width`.
+ */
+const ICON_WIDTH = 20;
+/**
+ * Adjust the width of the title span, so overflow ellipsis work.
+ * (2 x `$col-padding-x` + 3px rounding errors).
+ */
+const TITLE_SPAN_PAD_Y = 7;
+/** Render row markup for N nodes above and below the visible viewport. */
+const RENDER_MAX_PREFETCH = 5;
+/** Minimum column width if not set otherwise. */
+const DEFAULT_MIN_COL_WIDTH = 4;
+/** Regular expression to detect if a string describes an image URL (in contrast
+ * to a class name). Strings are considered image urls if they contain '.' or '/'.
+ */
+const TEST_IMG = new RegExp(/\.|\//);
+// export const RECURSIVE_REQUEST_ERROR = "$recursive_request";
+// export const INVALID_REQUEST_TARGET_ERROR = "$request_target_invalid";
+/**
+ * Default node icons.
+ * Requires bootstrap icons https://icons.getbootstrap.com
+ */
+const iconMaps = {
+    bootstrap: {
+        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 bi-dash-square-dotted",
+        radioChecked: "bi bi-circle-fill",
+        radioUnchecked: "bi bi-circle",
+        radioUnknown: "bi bi-record-circle",
+        folder: "bi bi-folder2",
+        folderOpen: "bi bi-folder2-open",
+        folderLazy: "bi bi-folder-symlink",
+        doc: "bi bi-file-earmark",
+        colSortable: "bi bi-chevron-expand",
+        // colSortable: "bi bi-arrow-down-up",
+        // colSortAsc: "bi bi-chevron-down",
+        // colSortDesc: "bi bi-chevron-up",
+        colSortAsc: "bi bi-arrow-down",
+        colSortDesc: "bi bi-arrow-up",
+        colFilter: "bi bi-filter-circle",
+        colFilterActive: "bi bi-filter-circle-fill wb-helper-invalid",
+        colMenu: "bi bi-three-dots-vertical",
+    },
+    fontawesome6: {
+        error: "fa-solid fa-triangle-exclamation",
+        loading: "fa-solid fa-chevron-right fa-beat",
+        noData: "fa-solid fa-circle-question",
+        expanderExpanded: "fa-solid fa-chevron-down",
+        expanderCollapsed: "fa-solid fa-chevron-right",
+        expanderLazy: "fa-solid fa-chevron-right wb-helper-lazy-expander",
+        checkChecked: "fa-regular fa-square-check",
+        checkUnchecked: "fa-regular fa-square",
+        checkUnknown: "fa-regular fa-square-minus",
+        radioChecked: "fa-solid fa-circle",
+        radioUnchecked: "fa-regular fa-circle",
+        radioUnknown: "fa-regular fa-circle-question",
+        folder: "fa-solid fa-folder-closed",
+        folderOpen: "fa-regular fa-folder-open",
+        folderLazy: "fa-solid fa-folder-plus",
+        doc: "fa-regular fa-file",
+        colSortable: "fa-solid fa-fw fa-sort",
+        colSortAsc: "fa-solid fa-fw fa-sort-up",
+        colSortDesc: "fa-solid fa-fw fa-sort-down",
+        colFilter: "fa-solid fa-fw fa-filter",
+        colFilterActive: "fa-solid fa-fw fa-filter wb-helper-invalid",
+        colMenu: "fa-solid fa-fw fa-ellipsis-v",
+    },
+};
+/** Dict keys that are evaluated by source loader (others are added to `tree.data` instead). */
+const RESERVED_TREE_SOURCE_KEYS = new Set([
+    "_format", // reserved for future use
+    "_keyMap", // Used for compressed data format
+    "_positional", // Used for compressed data format
+    "_typeList", // Used for compressed data format @deprecated
+    "_valueMap", // Used for compressed data format
+    "_version", // reserved for future use
+    "children",
+    "columns",
+    "types",
+]);
+// /** Key codes that trigger grid navigation, even when inside an input element. */
+// export const INPUT_BREAKOUT_KEYS: Set<string> = 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", // macOs
+    "Meta+ArrowUp": "first", // macOs
+    "*": "expandAll",
+    Multiply: "expandAll",
+    PageDown: "pageDown",
+    PageUp: "pageUp",
+    "-": "collapse",
+    Subtract: "collapse",
+};
+/** Return a callback that returns true if the node title matches the string
+ * or regular expression.
+ * @see {@link WunderbaumNode.findAll}
+ */
+function makeNodeTitleMatcher(match) {
+    if (match instanceof RegExp) {
+        return function (node) {
+            return match.test(node.title);
+        };
+    }
+    assert(typeof match === "string", `Expected a string or RegExp: ${match}`);
+    // s = escapeRegex(s.toLowerCase());
+    return function (node) {
+        return node.title === match;
+        // console.log("match " + node, node.title.toLowerCase().indexOf(match))
+        // return node.title.toLowerCase().indexOf(match) >= 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);
+    };
+}
+/** Compare two nodes by title (case-insensitive). */
+function nodeTitleSorter(a, b) {
+    const x = a.title.toLowerCase();
+    const y = b.title.toLowerCase();
+    return x === y ? 0 : x > y ? 1 : -1;
+}
+/**
+ * Convert 'flat' to 'nested' format.
+ *
+ *  Flat node entry format:
+ *    [PARENT_ID, [POSITIONAL_ARGS]]
+ *  or
+ *    [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
+ *
+ * 1. Parent-referencing list is converted to a list of nested dicts with
+ *    optional `children` properties.
+ * 2. `[POSITIONAL_ARGS]` are added as dict attributes.
+ */
+function unflattenSource(source) {
+    var _a, _b, _c;
+    const { _format, _keyMap = {}, _positional = [], children } = source;
+    if (_format !== "flat") {
+        throw new Error(`Expected source._format: "flat", but got ${_format}`);
+    }
+    if (_positional && _positional.includes("children")) {
+        throw new Error(`source._positional must not include "children": ${_positional}`);
+    }
+    let longToShort = _keyMap;
+    if (_keyMap.t) {
+        // Inverse keyMap was used (pre 0.7.0)
+        // TODO: raise Error on final 1.x release
+        const msg = `source._keyMap maps from long to short since v0.7.0. Flip key/value!`;
+        console.warn(msg); // eslint-disable-line no-console
+        longToShort = {};
+        for (const [key, value] of Object.entries(_keyMap)) {
+            longToShort[value] = key;
+        }
+    }
+    const positionalShort = _positional.map((e) => longToShort[e]);
+    const newChildren = [];
+    const keyToNodeMap = {};
+    const indexToNodeMap = {};
+    const keyAttrName = (_a = longToShort["key"]) !== null && _a !== void 0 ? _a : "key";
+    const childrenAttrName = (_b = longToShort["children"]) !== null && _b !== void 0 ? _b : "children";
+    for (const [index, nodeTuple] of children.entries()) {
+        // Node entry format:
+        //   [PARENT_ID, [POSITIONAL_ARGS]]
+        // or
+        //   [PARENT_ID, [POSITIONAL_ARGS], {KEY_VALUE_ARGS}]
+        const [parentId, args, kwargs = {}] = nodeTuple;
+        // Free up some memory as we go
+        nodeTuple[1] = null;
+        if (nodeTuple[2] != null) {
+            nodeTuple[2] = null;
+        }
+        // console.log("flatten", parentId, args, kwargs)
+        // We keep `kwargs` as our new node definition. Then we add all positional
+        // values to this object:
+        args.forEach((val, positionalIdx) => {
+            kwargs[positionalShort[positionalIdx]] = val;
+        });
+        // Find the parent node. `null` means 'toplevel'. PARENT_ID may be the numeric
+        // index of the source.children list. If PARENT_ID is a string, we search
+        // a parent with node.key of this value.
+        indexToNodeMap[index] = kwargs;
+        const key = kwargs[keyAttrName];
+        if (key != null) {
+            keyToNodeMap[key] = kwargs;
+        }
+        let parentNode = null;
+        if (parentId === null) ;
+        else if (typeof parentId === "number") {
+            parentNode = indexToNodeMap[parentId];
+            if (parentNode === undefined) {
+                throw new Error(`unflattenSource: Could not find parent node by index: ${parentId}.`);
+            }
+        }
+        else {
+            parentNode = keyToNodeMap[parentId];
+            if (parentNode === undefined) {
+                throw new Error(`unflattenSource: Could not find parent node by key: ${parentId}`);
+            }
+        }
+        if (parentNode) {
+            (_c = parentNode[childrenAttrName]) !== null && _c !== void 0 ? _c : (parentNode[childrenAttrName] = []);
+            parentNode[childrenAttrName].push(kwargs);
+        }
+        else {
+            newChildren.push(kwargs);
+        }
+    }
+    source.children = newChildren;
+}
 /**
- * Convert mouse- and touch events to 'dragstart', 'drag', and 'dragstop'.
+ * Decompresses the source data by
+ * - converting from 'flat' to 'nested' format
+ * - expanding short alias names to long names (if defined in _keyMap)
+ * - resolving value indexes to value strings (if defined in _valueMap)
+ *
+ * @param source - The source object to be decompressed.
+ * @returns void
  */
-class DragObserver {
-    constructor(opts) {
-        this.start = {
-            event: null,
-            x: 0,
-            y: 0,
-            altKey: false,
-            ctrlKey: false,
-            metaKey: false,
-            shiftKey: false,
-        };
-        this.dragElem = null;
-        this.dragging = false;
-        this.customData = {};
-        // TODO: touch events
-        this.events = ["mousedown", "mouseup", "mousemove", "keydown"];
-        if (!opts.root) {
-            throw new Error("Missing `root` option.");
+function decompressSourceData(source) {
+    let { _format, _version = 1, _keyMap, _valueMap } = source;
+    assert(_version === 1, `Expected file version 1 instead of ${_version}`);
+    let longToShort = _keyMap;
+    let shortToLong = {};
+    if (longToShort) {
+        for (const [key, value] of Object.entries(longToShort)) {
+            shortToLong[value] = key;
         }
-        this.opts = Object.assign({ thresh: 5 }, opts);
-        this.root = opts.root;
-        this._handler = this.handleEvent.bind(this);
-        this.events.forEach((type) => {
-            this.root.addEventListener(type, this._handler);
-        });
-    }
-    /** Unregister all event listeners. */
-    disconnect() {
-        this.events.forEach((type) => {
-            this.root.removeEventListener(type, this._handler);
-        });
-    }
-    getDragElem() {
-        return this.dragElem;
     }
-    isDragging() {
-        return this.dragging;
+    // Fallback for old format (pre 0.7.0, using _keyMap in reverse direction)
+    // TODO: raise Error on final 1.x release
+    if (longToShort && longToShort.t) {
+        const msg = `source._keyMap maps from long to short since v0.7.0. Flip key/value!`;
+        console.warn(msg); // eslint-disable-line no-console
+        [longToShort, shortToLong] = [shortToLong, longToShort];
     }
-    stopDrag(cb_event) {
-        if (this.dragging && this.opts.dragstop && cb_event) {
-            cb_event.type = "dragstop";
-            try {
-                this.opts.dragstop(cb_event);
-            }
-            catch (err) {
-                console.error("dragstop error", err); // eslint-disable-line no-console
-            }
+    // Fallback for old format (pre 0.7.0, using _typeList instead of _valueMap)
+    // TODO: raise Error on final 1.x release
+    if (source._typeList != null) {
+        const msg = `source._typeList is deprecated since v0.7.0: use source._valueMap: {"type": [...]} instead.`;
+        if (_valueMap != null) {
+            throw new Error(msg);
+        }
+        else {
+            console.warn(msg); // eslint-disable-line no-console
+            _valueMap = { type: source._typeList };
+            delete source._typeList;
         }
-        this.dragElem = null;
-        this.dragging = false;
-        this.start.event = null;
-        this.customData = {};
     }
-    handleEvent(e) {
-        const type = e.type;
-        const opts = this.opts;
-        const cb_event = {
-            type: e.type,
-            startEvent: type === "mousedown" ? e : this.start.event,
-            event: e,
-            customData: this.customData,
-            dragElem: this.dragElem,
-            dx: e.pageX - this.start.x,
-            dy: e.pageY - this.start.y,
-            apply: undefined,
-        };
-        // console.log("handleEvent", type, cb_event);
-        switch (type) {
-            case "keydown":
-                this.stopDrag(cb_event);
-                break;
-            case "mousedown":
-                if (this.dragElem) {
-                    this.stopDrag(cb_event);
-                    break;
-                }
-                if (opts.selector) {
-                    let elem = e.target;
-                    if (elem.matches(opts.selector)) {
-                        this.dragElem = elem;
-                    }
-                    else {
-                        elem = elem.closest(opts.selector);
-                        if (elem) {
-                            this.dragElem = elem;
-                        }
-                        else {
-                            break; // no event delegation selector matched
-                        }
+    if (_format === "flat") {
+        unflattenSource(source);
+    }
+    delete source._format;
+    delete source._version;
+    delete source._keyMap;
+    delete source._valueMap;
+    delete source._positional;
+    function _iter(childList) {
+        for (const node of childList) {
+            // Iterate over a list of names, because we modify inside the loop
+            // (for ... of ... does not allow this)
+            Object.getOwnPropertyNames(node).forEach((propName) => {
+                const value = node[propName];
+                // Replace short names with long names if defined in _keyMap
+                let longName = propName;
+                if (_keyMap && shortToLong[propName] != null) {
+                    longName = shortToLong[propName];
+                    if (longName !== propName) {
+                        node[longName] = value;
+                        delete node[propName];
                     }
                 }
-                this.start.event = e;
-                this.start.x = e.pageX;
-                this.start.y = e.pageY;
-                this.start.altKey = e.altKey;
-                this.start.ctrlKey = e.ctrlKey;
-                this.start.metaKey = e.metaKey;
-                this.start.shiftKey = e.shiftKey;
-                break;
-            case "mousemove":
-                // TODO: debounce/throttle?
-                // TODO: horizontal mode: ignore if dx unchanged
-                if (!this.dragElem) {
-                    break;
-                }
-                if (!this.dragging) {
-                    if (opts.thresh) {
-                        const dist2 = cb_event.dx * cb_event.dx + cb_event.dy * cb_event.dy;
-                        if (dist2 < opts.thresh * opts.thresh) {
-                            break;
-                        }
-                    }
-                    cb_event.type = "dragstart";
-                    if (opts.dragstart(cb_event) === false) {
-                        this.stopDrag(cb_event);
-                        break;
+                // Replace type index with type name if defined in _valueMap
+                if (_valueMap &&
+                    typeof value === "number" &&
+                    _valueMap[longName] != null) {
+                    const newValue = _valueMap[longName][value];
+                    if (newValue == null) {
+                        throw new Error(`Expected valueMap[${longName}][${value}] entry in [${_valueMap[longName]}]`);
                     }
-                    this.dragging = true;
-                }
-                if (this.dragging && this.opts.drag) {
-                    cb_event.type = "drag";
-                    this.opts.drag(cb_event);
-                }
-                break;
-            case "mouseup":
-                if (!this.dragging) {
-                    this.stopDrag(cb_event);
-                    break;
-                }
-                if (e.button === 0) {
-                    cb_event.apply = true;
-                }
-                else {
-                    cb_event.apply = false;
+                    node[longName] = newValue;
                 }
-                this.stopDrag(cb_event);
-                break;
+            });
+            // Recursion
+            if (node.children) {
+                _iter(node.children);
+            }
         }
     }
+    if (_keyMap || _valueMap) {
+        _iter(source.children);
+    }
 }
 
 /*!
  * Wunderbaum - ext-grid
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 class GridExtension extends WunderbaumExtension {
     constructor(tree) {
@@ -2926,7 +2952,7 @@ class GridExtension extends WunderbaumExtension {
                 const colDef = info.colDef;
                 const allow = colDef &&
                     this.tree.element.contains(e.dragElem) &&
-                    toBool(colDef.resizable, tree.options.resizableColumns, false);
+                    toBool(colDef.resizable, tree.options.columnsResizable, false);
                 // this.tree.log("dragstart", colDef, e, info);
                 this.tree.element.classList.toggle("wb-col-resizing", !!allow);
                 info.colElem.classList.toggle("wb-col-resizing", !!allow);
@@ -3000,7 +3026,7 @@ class GridExtension extends WunderbaumExtension {
 /*!
  * Wunderbaum - deferred
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 /**
  * Implement a ES6 Promise, that exposes a resolve() and reject() method.
@@ -3053,7 +3079,7 @@ class Deferred {
 /*!
  * Wunderbaum - wunderbaum_node
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 /** WunderbaumNode properties that can be passed with source data.
  * (Any other source properties will be stored as `node.data.PROP`.)
@@ -3081,6 +3107,20 @@ const NODE_PROPS = new Set([
 const NODE_DICT_PROPS = new Set(NODE_PROPS);
 NODE_DICT_PROPS.delete("_partsel");
 NODE_DICT_PROPS.delete("unselectable");
+// /** Node properties that are of type bool (or boolean & string).
+//  *  When parsing, we accept 0 for false and 1 for true for better JSON compression.
+//  */
+// export const NODE_BOOL_PROPS: Set<string> = new Set([
+//   "checkbox",
+//   "colspan",
+//   "expanded",
+//   "icon",
+//   "iconTooltip",
+//   "radiogroup",
+//   "selected",
+//   "tooltip",
+//   "unselectable",
+// ]);
 /**
  * A single tree node.
  *
@@ -3096,6 +3136,12 @@ class WunderbaumNode {
          * @see Use {@link setKey} to modify.
          */
         this.refKey = undefined;
+        /**
+         * Array of child nodes (null for leaf nodes).
+         * For lazy nodes, this is `null` or ùndefined` until the children are loaded
+         * and leaf nodes may be `[]` (empty array).
+         * @see {@link hasChildren}, {@link addChildren}, {@link lazy}.
+         */
         this.children = null;
         /** Additional classes added to `div.wb-row`.
          * @see {@link hasClass}, {@link setClass}. */
@@ -3116,20 +3162,26 @@ class WunderbaumNode {
         this.parent = parent;
         this.key = "" + ((_a = data.key) !== null && _a !== void 0 ? _a : ++WunderbaumNode.sequence);
         this.title = "" + ((_b = data.title) !== null && _b !== void 0 ? _b : "<" + this.key + ">");
+        this.expanded = !!data.expanded;
+        this.lazy = !!data.lazy;
+        // We set the following node properties only if a matching data value is
+        // passed
         data.refKey != null ? (this.refKey = "" + data.refKey) : 0;
         data.type != null ? (this.type = "" + data.type) : 0;
-        this.expanded = data.expanded === true;
-        data.icon != null ? (this.icon = data.icon) : 0;
-        this.lazy = data.lazy === true;
+        data.icon != null ? (this.icon = intToBool(data.icon)) : 0;
+        data.tooltip != null ? (this.tooltip = intToBool(data.tooltip)) : 0;
+        data.iconTooltip != null
+            ? (this.iconTooltip = intToBool(data.iconTooltip))
+            : 0;
         data.statusNodeType != null
             ? (this.statusNodeType = ("" + data.statusNodeType))
             : 0;
         data.colspan != null ? (this.colspan = !!data.colspan) : 0;
         // Selection
-        data.checkbox != null ? (this.checkbox = !!data.checkbox) : 0;
+        data.checkbox != null ? intToBool(data.checkbox) : 0;
         data.radiogroup != null ? (this.radiogroup = !!data.radiogroup) : 0;
-        this.selected = data.selected === true;
-        data.unselectable === true ? (this.unselectable = true) : 0;
+        data.selected != null ? (this.selected = !!data.selected) : 0;
+        data.unselectable != null ? (this.unselectable = !!data.unselectable) : 0;
         if (data.classes) {
             this.setClass(data.classes);
         }
@@ -3683,7 +3735,7 @@ class WunderbaumNode {
     hasClass(className) {
         return this.classes ? this.classes.has(className) : false;
     }
-    /** Return true if node ist the currently focused node. */
+    /** Return true if node ist the currently focused node. @since 0.9.0 */
     hasFocus() {
         return this.tree.focusNode === this;
     }
@@ -3905,6 +3957,8 @@ class WunderbaumNode {
         if (tree.options.selectMode === "hier") {
             this.fixSelection3FromEndNodes();
         }
+        // Allow to un-sort nodes after sorting
+        this.resetNativeChildOrder();
         this._callEvent("load");
     }
     async _fetchWithOptions(source) {
@@ -3956,8 +4010,8 @@ class WunderbaumNode {
         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.logWarn(`Recursive load request #${requestId} while #${this._requestId} is pending. ` +
+                "The previous request will be ignored.");
         }
         this._requestId = requestId;
         // const timerLabel = tree.logTime(this + ".load()");
@@ -4437,6 +4491,7 @@ class WunderbaumNode {
     _render_markup(opts) {
         const tree = this.tree;
         const treeOptions = tree.options;
+        const rowHeight = treeOptions.rowHeightPx;
         const checkbox = this.getOption("checkbox");
         const columns = tree.columns;
         const level = this.getLevel();
@@ -4451,7 +4506,7 @@ class WunderbaumNode {
         assert(!this.isRootNode(), "Root node not allowed");
         rowDiv = document.createElement("div");
         rowDiv.classList.add("wb-row");
-        rowDiv.style.top = this._rowIdx * ROW_HEIGHT + "px";
+        rowDiv.style.top = this._rowIdx * rowHeight + "px";
         this._rowElem = rowDiv;
         // Attach a node reference to the DOM Element:
         rowDiv._wb_node = this;
@@ -4848,7 +4903,7 @@ class WunderbaumNode {
      *
      * @param name name of the option property (on node and tree)
      * @param defaultValue return this if nothing else matched
-     * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
+     * {@link Wunderbaum.getOption|Wunderbaum.getOption}
      */
     getOption(name, defaultValue) {
         const tree = this.tree;
@@ -4884,7 +4939,7 @@ class WunderbaumNode {
         return value !== null && value !== void 0 ? value : defaultValue;
     }
     /** Make sure that this node is visible in the viewport.
-     * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
+     * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo}
      */
     async scrollIntoView(options) {
         const opts = Object.assign({ node: this }, options);
@@ -5023,9 +5078,9 @@ class WunderbaumNode {
      * and column content. It can be reduced to 'ChangeType.status' if only
      * active/focus/selected state has changed.
      *
-     * This method will eventually call  {@link WunderbaumNode._render()} with
+     * This method will eventually call  {@link WunderbaumNode._render} with
      * default options, but may be more consistent with the tree's
-     * {@link Wunderbaum.update()} API.
+     * {@link Wunderbaum.update} API.
      */
     update(change = ChangeType.data) {
         assert(change === ChangeType.status || change === ChangeType.data, `Invalid change type ${change}`);
@@ -5354,6 +5409,95 @@ class WunderbaumNode {
         this.tree.update(ChangeType.structure);
         // this.triggerModify("sort"); // TODO
     }
+    /**
+     * Renumber nodes `_nativeIndex`. This is useful to allow to restore the
+     * order after sorting a column.
+     * This method is automatically called after loading new child nodes.
+     * @since 0.11.0
+     */
+    resetNativeChildOrder(options) {
+        const { recursive = true, propName = "_nativeIndex" } = options !== null && options !== void 0 ? options : {};
+        if (this.children) {
+            this.children.forEach((child, i) => {
+                child.data[propName] = i;
+                if (recursive && child.children) {
+                    child.resetNativeChildOrder(options);
+                }
+            });
+        }
+    }
+    /**
+     * Convenience method to implement column sorting.
+     * @since 0.11.0
+     */
+    sortByProperty(options) {
+        var _a, _b, _c;
+        const { caseInsensitive = true, deep = true, nativeOrderPropName = "_nativeIndex", updateColInfo = false, } = options;
+        let order;
+        let colDef;
+        if (updateColInfo) {
+            colDef = this.tree["_columnsById"][options.colId];
+            assert(colDef, `Invalid colId specified: ${options.colId}`);
+            order =
+                (_a = options.order) !== null && _a !== void 0 ? _a : rotate(colDef.sortOrder, ["asc", "desc", undefined]);
+            for (const col of this.tree.columns) {
+                col.sortOrder = col === colDef ? order : undefined;
+            }
+            this.tree.update(ChangeType.colStructure);
+        }
+        else {
+            order = (_b = options.order) !== null && _b !== void 0 ? _b : "asc";
+        }
+        let propName = (_c = options.propName) !== null && _c !== void 0 ? _c : (options.colId || "");
+        if (propName === "*") {
+            propName = "title";
+        }
+        if (order == null) {
+            propName = nativeOrderPropName;
+            order = "asc";
+        }
+        this.logDebug(`sortByProperty(), propName=${propName}, ${order}`, options);
+        assert(propName, "No property name specified");
+        const cmp = (a, b) => {
+            let av, bv;
+            if (NODE_DICT_PROPS.has(propName)) {
+                av = a[propName];
+                bv = b[propName];
+            }
+            else {
+                av = a.data[propName];
+                bv = b.data[propName];
+            }
+            if (av == null && bv == null) {
+                return 0;
+            }
+            if (av == null) {
+                av = typeof bv === "string" ? "" : 0;
+            }
+            else if (typeof av === "boolean") {
+                av = av ? 1 : 0;
+            }
+            if (bv == null) {
+                bv = typeof av === "string" ? "" : 0;
+            }
+            else if (typeof bv === "boolean") {
+                bv = bv ? 1 : 0;
+            }
+            if (caseInsensitive) {
+                if (typeof av === "string") {
+                    av = av.toLowerCase();
+                }
+                if (typeof bv === "string") {
+                    bv = bv.toLowerCase();
+                }
+            }
+            if (order === "desc") {
+                return av === bv ? 0 : av > bv ? -1 : 1;
+            }
+            return av === bv ? 0 : av > bv ? 1 : -1;
+        };
+        return this.sortChildren(cmp, deep);
+    }
     /**
      * Trigger `modifyChild` event on a parent to signal that a child was modified.
      * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
@@ -5462,7 +5606,7 @@ WunderbaumNode.sequence = 0;
 /*!
  * Wunderbaum - ext-edit
  * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
- * v0.10.1, Sat, 20 Jul 2024 13:53:46 GMT (https://github.com/mar10/wunderbaum)
+ * v0.11.1, Fri, 27 Dec 2024 22:58:06 GMT (https://github.com/mar10/wunderbaum)
  */
 // const START_MARKER = "\uFFF7";
 class EditExtension extends WunderbaumExtension {
@@ -5626,6 +5770,10 @@ class EditExtension extends WunderbaumExtension {
         if (!node) {
             return;
         }
+        if (node.isStatusNode()) {
+            node.logWarn("Cannot edit status node.");
+            return;
+        }
         this.tree.logDebug(`startEditTitle(node=${node})`);
         let inputHtml = node._callEvent("edit.beforeEdit");
         if (inputHtml === false) {
@@ -5793,8 +5941,8 @@ class EditExtension extends WunderbaumExtension {
  * https://github.com/mar10/wunderbaum
  *
  * Released under the MIT license.
- * @version v0.10.1
- * @date Sat, 20 Jul 2024 13:53:46 GMT
+ * @version v0.11.1
+ * @date Fri, 27 Dec 2024 22:58:06 GMT
  */
 // import "./wunderbaum.scss";
 class WbSystemRoot extends WunderbaumNode {
@@ -5876,7 +6024,7 @@ class Wunderbaum {
             debugLevel: DEFAULT_DEBUGLEVEL, // 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
             header: null, // Show/hide header (pass bool or string)
             // headerHeightPx: ROW_HEIGHT,
-            rowHeightPx: ROW_HEIGHT,
+            rowHeightPx: DEFAULT_ROW_HEIGHT,
             iconMap: "bootstrap",
             columns: null,
             types: null,
@@ -5961,10 +6109,15 @@ class Wunderbaum {
         if (!this.element.getAttribute("tabindex")) {
             this.element.tabIndex = 0;
         }
+        if (opts.rowHeightPx !== DEFAULT_ROW_HEIGHT) {
+            this.element.style.setProperty("--wb-row-outer-height", opts.rowHeightPx + "px");
+            this.element.style.setProperty("--wb-row-inner-height", opts.rowHeightPx - 2 + "px");
+        }
         // Attach tree instance to <div>
         this.element._wb_tree = this;
         // Create header markup, or take it from the existing html
-        this.headerElement = this.element.querySelector("div.wb-header");
+        this.headerElement =
+            this.element.querySelector("div.wb-header");
         const wantHeader = opts.header == null ? this.columns.length > 1 : !!opts.header;
         if (this.headerElement) {
             // User existing header markup to define `this.columns`
@@ -6001,8 +6154,10 @@ class Wunderbaum {
         <div class="wb-node-list"></div>
       </div>`;
         this.listContainerElement = this.element.querySelector("div.wb-list-container");
-        this.nodeListElement = this.listContainerElement.querySelector("div.wb-node-list");
-        this.headerElement = this.element.querySelector("div.wb-header");
+        this.nodeListElement =
+            this.listContainerElement.querySelector("div.wb-node-list");
+        this.headerElement =
+            this.element.querySelector("div.wb-header");
         this.element.classList.toggle("wb-grid", this.columns.length > 1);
         this._initExtensions();
         // --- apply initial options
@@ -6059,6 +6214,16 @@ class Wunderbaum {
             this.update(ChangeType.resize);
         });
         this.resizeObserver.observe(this.element);
+        onEvent(this.element, "click", ".wb-button,.wb-col-icon", (e) => {
+            var _a, _b;
+            const info = Wunderbaum.getEventInfo(e);
+            const command = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.command;
+            this._callEvent("buttonClick", {
+                event: e,
+                info: info,
+                command: command,
+            });
+        });
         onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
             const info = Wunderbaum.getEventInfo(e);
             const node = info.node;
@@ -6357,31 +6522,33 @@ class Wunderbaum {
     }
     /** Return the topmost visible node in the viewport. */
     getTopmostVpNode(complete = true) {
+        const rowHeight = this.options.rowHeightPx;
         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;
         if (complete) {
-            topIdx = Math.ceil((scrollTop - gracePx) / ROW_HEIGHT);
+            topIdx = Math.ceil((scrollTop - gracePx) / rowHeight);
         }
         else {
-            topIdx = Math.floor(scrollTop / ROW_HEIGHT);
+            topIdx = Math.floor(scrollTop / rowHeight);
         }
         return this._getNodeByRowIdx(topIdx);
     }
     /** Return the lowest visible node in the viewport. */
     getLowestVpNode(complete = true) {
+        const rowHeight = this.options.rowHeightPx;
         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((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
+            bottomIdx = Math.floor((scrollTop + clientHeight) / rowHeight) - 1;
         }
         else {
-            bottomIdx = Math.ceil((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
+            bottomIdx = Math.ceil((scrollTop + clientHeight) / rowHeight) - 1;
         }
         bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
         return this._getNodeByRowIdx(bottomIdx);
@@ -6639,7 +6806,7 @@ class Wunderbaum {
     }
     /** Run code, but defer rendering of viewport until done.
      *
-     * ```
+     * ```js
      * tree.runWithDeferredUpdate(() => {
      *   return someFuncThatWouldUpdateManyNodes();
      * });
@@ -6813,8 +6980,9 @@ class Wunderbaum {
      * @param includeHidden Not yet implemented
      */
     findRelatedNode(node, where, includeHidden = false) {
+        const rowHeight = this.options.rowHeightPx;
         let res = null;
-        const pageSize = Math.floor(this.listContainerElement.clientHeight / ROW_HEIGHT);
+        const pageSize = Math.floor(this.listContainerElement.clientHeight / rowHeight);
         switch (where) {
             case "parent":
                 if (node.parent && node.parent.parent) {
@@ -7117,13 +7285,17 @@ class Wunderbaum {
             console.warn(this.toString(), ...args); // eslint-disable-line no-console
         }
     }
-    /** Reset column widths to default. */
+    /** Reset column widths to default. @since 0.10.0 */
     resetColumns() {
         this.columns.forEach((col) => {
             delete col.customWidthPx;
         });
         this.update(ChangeType.colStructure);
     }
+    // /** Renumber nodes `_nativeIndex`. @see {@link WunderbaumNode.resetNativeChildOrder} */
+    // resetNativeChildOrder(options?: ResetOrderOptions) {
+    //   this.root.resetNativeChildOrder(options);
+    // }
     /**
      * Make sure that this node is vertically scrolled into the viewport.
      *
@@ -7133,6 +7305,7 @@ class Wunderbaum {
     scrollTo(nodeOrOpts) {
         const PADDING = 2; // leave some pixels between viewport bounds
         let node;
+        // WunderbaumNode;
         let options;
         if (nodeOrOpts instanceof WunderbaumNode) {
             node = nodeOrOpts;
@@ -7142,14 +7315,15 @@ class Wunderbaum {
             node = options.node;
         }
         assert(node && node._rowIdx != null, `Invalid node: ${node}`);
+        const rowHeight = this.options.rowHeightPx;
         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 rowTop = node._rowIdx * rowHeight + headerHeight;
         const vpTop = headerHeight;
         const vpRowTop = rowTop - scrollTop;
-        const vpRowBottom = vpRowTop + ROW_HEIGHT;
+        const vpRowBottom = vpRowTop + rowHeight;
         const topNode = options === null || options === void 0 ? void 0 : options.topNode;
         // this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts , options);
         let newScrollTop = null;
@@ -7158,7 +7332,7 @@ class Wunderbaum {
             else {
                 // Node is below viewport
                 // this.log("Below viewport");
-                newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between viewport bounds
+                newScrollTop = rowTop + rowHeight - vpHeight + PADDING; // leave some pixels between viewport bounds
             }
         }
         else {
@@ -7438,6 +7612,14 @@ class Wunderbaum {
     sortChildren(cmp = nodeTitleSorter, deep = false) {
         this.root.sortChildren(cmp, deep);
     }
+    /**
+     * Convenience method to implement column sorting.
+     * @see {@link WunderbaumNode.sortByProperty}.
+     * @since 0.11.0
+     */
+    sortByProperty(options) {
+        this.root.sortByProperty(options);
+    }
     /** Convert tree to an array of plain objects.
      *
      * @param callback is called for every node, in order to allow
@@ -7551,6 +7733,11 @@ class Wunderbaum {
         // }
         return modified;
     }
+    _insertIcon(icon, elem) {
+        const iconElem = document.createElement("i");
+        iconElem.className = icon;
+        elem.appendChild(iconElem);
+    }
     /** Create/update header markup from `this.columns` definition.
      * @internal
      */
@@ -7561,6 +7748,7 @@ class Wunderbaum {
         if (!wantHeader) {
             return;
         }
+        const iconMap = this.iconMap;
         const colCount = this.columns.length;
         const headerRow = this.headerElement.querySelector(".wb-row");
         assert(headerRow, "Expected a row in header element");
@@ -7579,23 +7767,54 @@ class Wunderbaum {
             else {
                 col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
             }
-            const title = escapeHtml(col.title || col.id);
+            // Add tooltip to column title
             let tooltip = "";
             if (col.tooltip) {
                 tooltip = escapeTooltip(col.tooltip);
                 tooltip = ` title="${tooltip}"`;
             }
-            let resizer = "";
+            // Add column header icons
+            let addMarkup = "";
+            // NOTE: we use CSS float: right to align icons, so they must be added in
+            // reverse order
+            if (toBool(col.menu, this.options.columnsMenu, false)) {
+                const iconClass = "wb-col-icon-menu " + iconMap.colMenu;
+                const icon = `<i data-command=menu class="wb-col-icon ${iconClass}"></i>`;
+                addMarkup += icon;
+            }
+            if (toBool(col.sortable, this.options.columnsSortable, false)) {
+                let iconClass = "wb-col-icon-sort " + iconMap.colSortable;
+                if (col.sortOrder) {
+                    iconClass += `wb-col-sort-${col.sortOrder}`;
+                    iconClass +=
+                        col.sortOrder === "asc" ? iconMap.colSortAsc : iconMap.colSortDesc;
+                }
+                const icon = `<i data-command=sort class="wb-col-icon ${iconClass}"></i>`;
+                addMarkup += icon;
+            }
+            if (toBool(col.filterable, this.options.columnsFilterable, false)) {
+                colElem.classList.toggle("wb-col-filter", !!col.filterActive);
+                let iconClass = "wb-col-icon-filter " + iconMap.colFilter;
+                if (col.filterActive) {
+                    iconClass += iconMap.colFilterActive;
+                }
+                const icon = `<i data-command=filter class="wb-col-icon ${iconClass}"></i>`;
+                addMarkup += icon;
+            }
+            // Add resizer to all but the last column
             if (i < colCount - 1) {
-                if (toBool(col.resizable, this.options.resizableColumns, false)) {
-                    resizer =
+                if (toBool(col.resizable, this.options.columnsResizable, false)) {
+                    addMarkup +=
                         '<span class="wb-col-resizer wb-col-resizer-active"></span>';
                 }
                 else {
-                    resizer = '<span class="wb-col-resizer"></span>';
+                    addMarkup += '<span class="wb-col-resizer"></span>';
                 }
             }
-            colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
+            // Create column header
+            const title = escapeHtml(col.title || col.id);
+            colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${addMarkup}`;
+            // Highlight active column
             if (this.isCellNav()) {
                 colElem.classList.toggle("wb-active", i === this.activeColIdx);
             }
@@ -7726,19 +7945,19 @@ class Wunderbaum {
         // this.log("_updateRows", opts)
         options = Object.assign({ newNodesOnly: false }, options);
         const newNodesOnly = !!options.newNodesOnly;
-        const row_height = ROW_HEIGHT;
-        const vp_height = this.element.clientHeight;
+        const rowHeight = this.options.rowHeightPx;
+        const vpHeight = this.element.clientHeight;
         const prefetch = RENDER_MAX_PREFETCH;
         // const grace_prefetch = RENDER_MAX_PREFETCH - RENDER_MIN_PREFETCH;
         const ofs = this.element.scrollTop;
-        let startIdx = Math.max(0, ofs / row_height - prefetch);
+        let startIdx = Math.max(0, ofs / rowHeight - prefetch);
         startIdx = Math.floor(startIdx);
         // Make sure start is always even, so the alternating row colors don't
         // change when scrolling:
         if (startIdx % 2) {
             startIdx--;
         }
-        let endIdx = Math.max(0, (ofs + vp_height) / row_height + prefetch);
+        let endIdx = Math.max(0, (ofs + vpHeight) / rowHeight + prefetch);
         endIdx = Math.ceil(endIdx);
         // this.debug("render", opts);
         const obsoleteNodes = new Set();
@@ -7767,21 +7986,21 @@ class Wunderbaum {
             else if (rowDiv && newNodesOnly) {
                 obsoleteNodes.delete(node);
                 // no need to update existing node markup
-                rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                rowDiv.style.top = idx * rowHeight + "px";
                 prevElem = rowDiv;
             }
             else {
                 obsoleteNodes.delete(node);
                 // Create new markup
                 if (rowDiv) {
-                    rowDiv.style.top = idx * ROW_HEIGHT + "px";
+                    rowDiv.style.top = idx * rowHeight + "px";
                 }
                 node._render({ top: top, after: prevElem });
                 // node.log("render", top, prevElem, "=>", node._rowElem);
                 prevElem = node._rowElem;
             }
             idx++;
-            top += row_height;
+            top += rowHeight;
         });
         this.treeRowCount = idx;
         for (const n of obsoleteNodes) {
@@ -8012,6 +8231,7 @@ class Wunderbaum {
     /**
      * Return the number of nodes that match the current filter.
      * @see {@link Wunderbaum.filterNodes}
+     * @since 0.9.0
      */
     countMatches() {
         return this.extensions.filter.countMatches();
@@ -8044,7 +8264,7 @@ class Wunderbaum {
 }
 Wunderbaum.sequence = 0;
 /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
-Wunderbaum.version = "v0.10.1"; // Set to semver by 'grunt release'
+Wunderbaum.version = "v0.11.1"; // Set to semver by 'grunt release'
 /** Expose some useful methods of the util.ts module as `Wunderbaum.util`. */
 Wunderbaum.util = util;