wunderbaum 0.10.1 → 0.11.1

package/dist/wunderbaum.umd.js

@@ -294,7 +294,7 @@
     /*!
      * 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` */
@@ -926,6 +926,11 @@
         // 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) {
@@ -954,12 +959,7 @@
      * 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;
@@ -978,12 +978,7 @@
      * 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;
@@ -991,6 +986,15 @@
         }
         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)
@@ -1119,6 +1123,7 @@
         extractHtmlText: extractHtmlText,
         getOption: getOption,
         getValueFromElem: getValueFromElem,
+        intToBool: intToBool,
         isArray: isArray,
         isEmptyObject: isEmptyObject,
         isFunction: isFunction,
@@ -1127,6 +1132,7 @@
         noop: noop,
         onEvent: onEvent,
         overrideMethod: overrideMethod,
+        rotate: rotate,
         setElemDisplay: setElemDisplay,
         setTimeoutPromise: setTimeoutPromise,
         setValueToElem: setValueToElem,
@@ -1142,10 +1148,10 @@
     /*!
      * 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) {
@@ -1174,7 +1180,7 @@
         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";
@@ -1206,7 +1212,7 @@
     /*!
      * 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) {
@@ -1265,7 +1271,7 @@
     /*!
      * 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";
@@ -1590,7 +1596,7 @@
     /*!
      * 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 {
@@ -1954,7 +1960,7 @@
     /*!
      * 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) {
@@ -1994,409 +2000,84 @@
     }
 
     /*!
-     * 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;
             }
         }
         /** */
@@ -2420,14 +2101,15 @@
          * 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";
             }
@@ -2436,7 +2118,7 @@
             }
             else {
                 // Only 'before' and 'after':
-                return dy > ROW_HEIGHT / 2 ? "after" : "before";
+                return dy > rowHeight / 2 ? "after" : "before";
             }
             // return "over";
         }
@@ -2697,7 +2379,11 @@
                 }
                 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 ---
@@ -2762,160 +2448,500 @@
             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) {
@@ -2932,7 +2958,7 @@
                     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);
@@ -3006,7 +3032,7 @@
     /*!
      * 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.
@@ -3059,7 +3085,7 @@
     /*!
      * 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`.)
@@ -3087,6 +3113,20 @@
     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.
      *
@@ -3102,6 +3142,12 @@
              * @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}. */
@@ -3122,20 +3168,26 @@
             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);
             }
@@ -3689,7 +3741,7 @@
         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;
         }
@@ -3911,6 +3963,8 @@
             if (tree.options.selectMode === "hier") {
                 this.fixSelection3FromEndNodes();
             }
+            // Allow to un-sort nodes after sorting
+            this.resetNativeChildOrder();
             this._callEvent("load");
         }
         async _fetchWithOptions(source) {
@@ -3962,8 +4016,8 @@
             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()");
@@ -4443,6 +4497,7 @@
         _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();
@@ -4457,7 +4512,7 @@
             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;
@@ -4854,7 +4909,7 @@
          *
          * @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;
@@ -4890,7 +4945,7 @@
             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);
@@ -5029,9 +5084,9 @@
          * 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}`);
@@ -5360,6 +5415,95 @@
             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', ...
@@ -5468,7 +5612,7 @@
     /*!
      * 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 {
@@ -5632,6 +5776,10 @@
             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) {
@@ -5799,8 +5947,8 @@
      * 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 {
@@ -5882,7 +6030,7 @@
                 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,
@@ -5967,10 +6115,15 @@
             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`
@@ -6007,8 +6160,10 @@
         <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
@@ -6065,6 +6220,16 @@
                 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;
@@ -6363,31 +6528,33 @@
         }
         /** 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);
@@ -6645,7 +6812,7 @@
         }
         /** Run code, but defer rendering of viewport until done.
          *
-         * ```
+         * ```js
          * tree.runWithDeferredUpdate(() => {
          *   return someFuncThatWouldUpdateManyNodes();
          * });
@@ -6819,8 +6986,9 @@
          * @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) {
@@ -7123,13 +7291,17 @@
                 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.
          *
@@ -7139,6 +7311,7 @@
         scrollTo(nodeOrOpts) {
             const PADDING = 2; // leave some pixels between viewport bounds
             let node;
+            // WunderbaumNode;
             let options;
             if (nodeOrOpts instanceof WunderbaumNode) {
                 node = nodeOrOpts;
@@ -7148,14 +7321,15 @@
                 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;
@@ -7164,7 +7338,7 @@
                 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 {
@@ -7444,6 +7618,14 @@
         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
@@ -7557,6 +7739,11 @@
             // }
             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
          */
@@ -7567,6 +7754,7 @@
             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");
@@ -7585,23 +7773,54 @@
                 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);
                 }
@@ -7732,19 +7951,19 @@
             // 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();
@@ -7773,21 +7992,21 @@
                 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) {
@@ -8018,6 +8237,7 @@
         /**
          * Return the number of nodes that match the current filter.
          * @see {@link Wunderbaum.filterNodes}
+         * @since 0.9.0
          */
         countMatches() {
             return this.extensions.filter.countMatches();
@@ -8050,7 +8270,7 @@
     }
     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;