wunderbaum 0.3.4 → 0.3.5

package/dist/wunderbaum.d.ts

@@ -369,781 +369,770 @@ declare module "deferred" {
         finally(cb: finallyCallbackType): Promise<any>;
     }
 }
-declare module "wb_options" {
+declare module "wb_node" {
     /*!
-     * Wunderbaum - utils
+     * Wunderbaum - wunderbaum_node
      * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
      * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
      */
-    import { BoolOptionResolver, ColumnDefinitionList, DndOptionsType, NavModeEnum, NodeTypeDefinitionMap, WbActivateEventType, WbChangeEventType, WbClickEventType, WbDeactivateEventType, WbEnhanceTitleEventType, WbErrorEventType, WbInitEventType, WbKeydownEventType, WbNodeEventType, WbReceiveEventType, WbRenderEventType, WbTreeEventType } from "types";
-    export interface WbNodeData {
-        title: string;
-        key?: string;
-        refKey?: string;
-        expanded?: boolean;
-        selected?: boolean;
-        checkbox?: boolean | string;
-        colspan?: boolean;
-        children?: Array<WbNodeData>;
-    }
+    import "./wunderbaum.scss";
+    import { Wunderbaum } from "wunderbaum";
+    import { AddChildrenOptions, InsertNodeType, ApplyCommandOptions, ApplyCommandType, ChangeType, ExpandAllOptions, MakeVisibleOptions, MatcherCallback, NavigateOptions, NodeAnyCallback, NodeStatusType, NodeStringCallback, NodeVisitCallback, NodeVisitResponse, RenderOptions, ScrollIntoViewOptions, SetActiveOptions, SetExpandedOptions, SetSelectedOptions, SetStatusOptions, SortCallback, NodeToDictCallback, WbNodeData } from "types";
     /**
-     * Available options for [[Wunderbaum]].
-     *
-     * Options are passed to the constructor as plain object:
-     *
-     * ```js
-     * const tree = new mar10.Wunderbaum({
-     *   id: "demo",
-     *   element: document.getElementById("demo-tree"),
-     *   source: "url/of/data/request",
-     *   ...
-     * });
-     * ```
-     *
-     * Event handlers are also passed as callbacks
+     * A single tree node.
      *
-     * ```js
-     * const tree = new mar10.Wunderbaum({
-     *   ...
-     *   init: (e) => {
-     *     console.log(`Tree ${e.tree} was initialized and loaded.`)
-     *   },
-     *   activate: (e) => {
-     *     console.log(`Node ${e.node} was activated.`)
-     *   },
-     *   ...
-     * });
-     * ```
+     * **NOTE:** <br>
+     * Generally you should not modify properties directly, since this may break
+     * the internal bookkeeping.
      */
-    export interface WunderbaumOptions {
+    export class WunderbaumNode {
+        static sequence: number;
+        /** Reference to owning tree. */
+        tree: Wunderbaum;
+        /** Parent node (null for the invisible root node `tree.root`). */
+        parent: WunderbaumNode;
+        /** Name of the node.
+         * @see Use {@link setTitle} to modify. */
+        title: string;
+        /** Unique key. Passed with constructor or defaults to `SEQUENCE`.
+         * @see Use {@link setKey} to modify. */
+        readonly key: string;
+        /** Reference key. Unlike {@link key}, a `refKey` may occur multiple
+         * times within a tree (in this case we have 'clone nodes').
+         * @see Use {@link setKey} to modify.
+         */
+        readonly refKey: string | undefined;
+        children: WunderbaumNode[] | null;
+        checkbox?: boolean;
+        /** If true, (in grid mode) no cells are rendered, except for the node title.*/
+        colspan?: boolean;
+        icon?: boolean | string;
+        lazy: boolean;
+        /** Expansion state.
+         * @see {@link isExpandable}, {@link isExpanded}, {@link setExpanded}. */
+        expanded: boolean;
+        /** Selection state.
+         * @see {@link isSelected}, {@link setSelected}. */
+        selected: boolean;
+        type?: string;
+        tooltip?: string;
+        /** Additional classes added to `div.wb-row`.
+         * @see {@link hasClass}, {@link setClass}. */
+        classes: Set<string> | null;
+        /** Custom data that was passed to the constructor */
+        data: any;
+        statusNodeType?: string;
+        _isLoading: boolean;
+        _requestId: number;
+        _errorInfo: any | null;
+        _partsel: boolean;
+        _partload: boolean;
+        match?: boolean;
+        subMatchCount?: number;
+        subMatchBadge?: HTMLElement;
+        /** @internal */
+        titleWithHighlight?: string;
+        _filterAutoExpanded?: boolean;
+        _rowIdx: number | undefined;
+        _rowElem: HTMLDivElement | undefined;
+        constructor(tree: Wunderbaum, parent: WunderbaumNode, data: any);
         /**
-         * The target `div` element (or selector) that shall become a Wunderbaum.
+         * Return readable string representation for this instance.
+         * @internal
          */
-        element: string | HTMLDivElement;
+        toString(): string;
         /**
-         * The identifier of this tree. Used to reference the instance, especially
-         * when multiple trees are present (e.g. `tree = mar10.Wunderbaum.getTree("demo")`).
+         * Iterate all descendant nodes depth-first, pre-order using `for ... of ...` syntax.
+         * More concise, but slightly slower than {@link WunderbaumNode.visit}.
          *
-         * Default: `"wb_" + COUNTER`.
+         * Example:
+         * ```js
+         * for(const n of node) {
+         *   ...
+         * }
+         * ```
          */
-        id?: string;
+        [Symbol.iterator](): IterableIterator<WunderbaumNode>;
+        /** Call event handler if defined in tree.options.
+         * Example:
+         * ```js
+         * node._callEvent("edit.beforeEdit", {foo: 42})
+         * ```
+         */
+        _callEvent(type: string, extra?: any): any;
         /**
-         * Define the initial tree data. Typically a URL of an endpoint that serves
-         * a JSON formatted structure, but also a callback, Promise, or static data
-         * is allowed.
+         * Append (or insert) a list of child nodes.
          *
-         * Default: `{}`.
+         * Tip: pass `{ before: 0 }` to prepend new nodes as first children.
+         *
+         * @returns first child added
          */
-        source?: string | Array<WbNodeData>;
+        addChildren(nodeData: WbNodeData | WbNodeData[], options?: AddChildrenOptions): WunderbaumNode;
         /**
-         * Define shared attributes for multiple nodes of the same type.
-         * This allows for more compact data models. Type definitions can be passed
-         * as tree option, or be part of a `source` response.
+         * Append or prepend a node, or append a child node.
          *
-         * Default: `{}`.
+         * This a convenience function that calls addChildren()
+         *
+         * @param nodeData node definition
+         * @param [mode=child] 'before', 'after', 'firstChild', or 'child' ('over' is a synonym for 'child')
+         * @returns new node
          */
-        types?: NodeTypeDefinitionMap;
+        addNode(nodeData: WbNodeData, mode?: InsertNodeType): WunderbaumNode;
         /**
-         * A list of maps that define column headers. If this option is set,
-         * Wunderbaum becomes a treegrid control instead of a plain tree.
-         * Column definitions can be passed as tree option, or be part of a `source`
-         * response.
-         * Default: `[]` meaning this is a plain tree.
+         * Apply a modification (or navigation) operation.
+         *
+         * @see {@link Wunderbaum.applyCommand}
          */
-        columns?: ColumnDefinitionList;
+        applyCommand(cmd: ApplyCommandType, options: ApplyCommandOptions): any;
         /**
-         * If true, add a `wb-skeleton` class to all nodes, that will result in a
-         * 'glow' effect. Typically used with initial dummy nodes, while loading the
-         * real data.
-         * Default: false.
+         * Add/remove one or more classes to `<div class='wb-row'>`.
+         *
+         * This also maintains `node.classes`, so the class will survive a re-render.
+         *
+         * @param className one or more class names. Multiple classes can be passed
+         *     as space-separated string, array of strings, or set of strings.
          */
-        skeleton?: boolean;
+        setClass(className: string | string[] | Set<string>, flag?: boolean): void;
+        /** Call `setExpanded()` on all descendant nodes. */
+        expandAll(flag?: boolean, options?: ExpandAllOptions): Promise<void>;
         /**
-         * Translation map for some system messages.
+         * Find all descendant nodes that match condition (excluding self).
+         *
+         * If `match` is a string, search for exact node title.
+         * If `match` is a RegExp expression, apply it to node.title, using
+         * [RegExp.test()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test).
+         * If `match` is a callback, match all nodes for that the callback(node) returns true.
+         *
+         * Returns an empty array if no nodes were found.
+         *
+         * Examples:
+         * ```js
+         * // Match all node titles that match exactly 'Joe':
+         * nodeList = node.findAll("Joe")
+         * // Match all node titles that start with 'Joe' case sensitive:
+         * nodeList = node.findAll(/^Joe/)
+         * // Match all node titles that contain 'oe', case insensitive:
+         * nodeList = node.findAll(/oe/i)
+         * // Match all nodes with `data.price` >= 99:
+         * nodeList = node.findAll((n) => {
+         *   return n.data.price >= 99;
+         * })
+         * ```
          */
-        strings?: any;
+        findAll(match: string | RegExp | MatcherCallback): WunderbaumNode[];
+        /** Return the direct child with a given key, index or null. */
+        findDirectChild(ptr: number | string | WunderbaumNode): WunderbaumNode | null;
         /**
-         * 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
-         * Default: 3 (4 in local debug environment)
+         * Find first descendant node that matches condition (excluding self) or null.
+         *
+         * @see {@link WunderbaumNode.findAll} for examples.
          */
-        debugLevel?: number;
-        /**
-         * Number of levels that are forced to be expanded, and have no expander icon.
-         * E.g. 1 would keep all toplevel nodes expanded.
-         * Default: 0
+        findFirst(match: string | RegExp | MatcherCallback): WunderbaumNode | null;
+        /** Find a node relative to self.
+         *
+         * @see {@link Wunderbaum.findRelatedNode|tree.findRelatedNode()}
          */
-        minExpandLevel?: number;
+        findRelatedNode(where: string, includeHidden?: boolean): any;
         /**
-         * If true, allow to expand parent nodes, even if `node.children` conatains
-         * an empty array (`[]`). This is the the behavior of macOS Finder, for example.
-         * Default: false
+         * Iterator version of {@link WunderbaumNode.format}.
          */
-        emptyChildListExpandable?: boolean;
+        format_iter(name_cb?: NodeStringCallback, connectors?: string[]): IterableIterator<string>;
         /**
-         * Height of a node row div.
-         * Default: 22
+         * Return a multiline string representation of a node/subnode hierarchy.
+         * Mostly useful for debugging.
+         *
+         * Example:
+         * ```js
+         * console.info(tree.getActiveNode().format((n)=>n.title));
+         * ```
+         * logs
+         * ```
+         * Books
+         *  ├─ Art of War
+         *  ╰─ Don Quixote
+         * ```
+         * @see {@link WunderbaumNode.format_iter}
          */
-        rowHeightPx?: number;
-        /**
-         * Collapse siblings when a node is expanded.
-         * Default: false
+        format(name_cb?: NodeStringCallback, connectors?: string[]): string;
+        /** Return the `<span class='wb-col'>` element with a given index or id.
+         * @returns {WunderbaumNode | null}
          */
-        autoCollapse?: boolean;
-        /**
-         * HTMLElement that receives the top nodes breadcrumb.
-         * Default: undefined
+        getColElem(colIdx: number | string): HTMLSpanElement;
+        /** Return the first child node or null.
+         * @returns {WunderbaumNode | null}
          */
-        connectTopBreadcrumb?: HTMLElement;
-        /**
-         * Default:  NavModeEnum.startRow
+        getFirstChild(): WunderbaumNode;
+        /** Return the last child node or null.
+         * @returns {WunderbaumNode | null}
          */
-        navigationModeOption?: NavModeEnum;
-        /**
-         * Show/hide header (default: null)
-         * null: assume false for plain tree and true for grids.
-         * string: use text as header (only for plain trees)
-         * true: display a header (use tree's id as text for plain trees)
-         * false: do not display a header
+        getLastChild(): WunderbaumNode;
+        /** Return node depth (starting with 1 for top level nodes). */
+        getLevel(): number;
+        /** Return the successive node (under the same parent) or null. */
+        getNextSibling(): WunderbaumNode | null;
+        /** Return the parent node (null for the system root node). */
+        getParent(): WunderbaumNode | null;
+        /** Return an array of all parent nodes (top-down).
+         * @param includeRoot Include the invisible system root node.
+         * @param includeSelf Include the node itself.
          */
-        header?: boolean | string | null;
-        /**
-         *
+        getParentList(includeRoot?: boolean, includeSelf?: boolean): any[];
+        /** Return a string representing the hierachical node path, e.g. "a/b/c".
+         * @param includeSelf
+         * @param node property name or callback
+         * @param separator
          */
-        showSpinner?: boolean;
-        /**
-         * If true, render a checkbox before the node tile to allow selection with the
-         * mouse.
-         * Default: false.
+        getPath(includeSelf?: boolean, part?: keyof WunderbaumNode | NodeAnyCallback, separator?: string): string;
+        /** Return the preceeding node (under the same parent) or null. */
+        getPrevSibling(): WunderbaumNode | null;
+        /** Return true if node has children.
+         * Return undefined if not sure, i.e. the node is lazy and not yet loaded.
          */
-        checkbox?: boolean | "radio" | BoolOptionResolver;
-        /**
-         * Default: 200
+        hasChildren(): boolean;
+        /** Return true if node has className set. */
+        hasClass(className: string): boolean;
+        /** Return true if this node is the currently active tree node. */
+        isActive(): boolean;
+        /** Return true if this node is a direct or indirect parent of `other`.
+         * (See also [[isParentOf]].)
          */
-        updateThrottleWait?: number;
-        /**
-         * Default: true
+        isAncestorOf(other: WunderbaumNode): boolean;
+        /** Return true if this node is a **direct** subnode of `other`.
+         * (See also [[isDescendantOf]].)
          */
-        enabled?: boolean;
-        /**
-         * Default: false
+        isChildOf(other: WunderbaumNode): boolean;
+        /** Return true if this node's title spans all columns, i.e. the node has no
+         * grid cells.
          */
-        fixedCol?: boolean;
-        /**
-         * Default: true
+        isColspan(): boolean;
+        /** Return true if this node is a direct or indirect subnode of `other`.
+         * (See also [[isChildOf]].)
          */
-        quicksearch?: boolean;
-        dnd?: DndOptionsType;
-        edit?: any;
-        filter?: any;
-        grid?: any;
-        /**
-         *
-         * @category Callback
+        isDescendantOf(other: WunderbaumNode): boolean;
+        /** Return true if this node has children, i.e. the node is generally expandable.
+         * If `andCollapsed` is set, we also check if this node is collapsed, i.e.
+         * an expand operation is currently possible.
          */
-        activate?: (e: WbActivateEventType) => void;
-        /**
-         *
-         * Return `false` to prevent default handling, e.g. activating the node.
-         * @category Callback
+        isExpandable(andCollapsed?: boolean): boolean;
+        /** Return true if this node is currently in edit-title mode. */
+        isEditing(): boolean;
+        /** Return true if this node is currently expanded. */
+        isExpanded(): boolean;
+        /** Return true if this node is the first node of its parent's children. */
+        isFirstSibling(): boolean;
+        /** Return true if this node is the last node of its parent's children. */
+        isLastSibling(): boolean;
+        /** Return true if this node is lazy (even if data was already loaded) */
+        isLazy(): boolean;
+        /** Return true if node is lazy and loaded. For non-lazy nodes always return true. */
+        isLoaded(): boolean;
+        /** Return true if node is currently loading, i.e. a GET request is pending. */
+        isLoading(): boolean;
+        /** Return true if this node is a temporarily generated status node of type 'paging'. */
+        isPagingNode(): boolean;
+        /** Return true if this node is a **direct** parent of `other`.
+         * (See also [[isAncestorOf]].)
          */
-        beforeActivate?: (e: WbActivateEventType) => void;
-        /**
-         *
-         * @category Callback
+        isParentOf(other: WunderbaumNode): boolean;
+        /** (experimental) Return true if this node is partially loaded. */
+        isPartload(): boolean;
+        /** Return true if this node is partially selected (tri-state). */
+        isPartsel(): boolean;
+        /** Return true if this node has DOM representaion, i.e. is displayed in the viewport. */
+        isRendered(): boolean;
+        /** Return true if this node is the (invisible) system root node.
+         * (See also [[isTopLevel()]].)
          */
-        change?: (e: WbChangeEventType) => void;
-        /**
+        isRootNode(): boolean;
+        /** Return true if this node is selected, i.e. the checkbox is set. */
+        isSelected(): boolean;
+        /** Return true if this node is a temporarily generated system node like
+         * 'loading', 'paging', or 'error' (node.statusNodeType contains the type).
+         */
+        isStatusNode(): boolean;
+        /** Return true if this a top level node, i.e. a direct child of the (invisible) system root node. */
+        isTopLevel(): boolean;
+        /** Return true if node is marked lazy but not yet loaded.
+         * For non-lazy nodes always return false.
+         */
+        isUnloaded(): boolean;
+        /** Return true if all parent nodes are expanded. Note: this does not check
+         * whether the node is scrolled into the visible part of the screen or viewport.
+         */
+        isVisible(): boolean;
+        protected _loadSourceObject(source: any, level?: number): void;
+        _fetchWithOptions(source: any): Promise<any>;
+        /** Download  data from the cloud, then call `.update()`. */
+        load(source: any): Promise<void>;
+        /**Load content of a lazy node. */
+        loadLazy(forceReload?: boolean): Promise<void>;
+        /** Alias for `logDebug` */
+        log(...args: any[]): void;
+        logDebug(...args: any[]): void;
+        logError(...args: any[]): void;
+        logInfo(...args: any[]): void;
+        logWarn(...args: any[]): void;
+        /** Expand all parents and optionally scroll into visible area as neccessary.
+         * Promise is resolved, when lazy loading and animations are done.
+         * @param {object} [options] passed to `setExpanded()`.
+         *     Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
+         */
+        makeVisible(options?: MakeVisibleOptions): Promise<any>;
+        /** Move this node to targetNode. */
+        moveTo(targetNode: WunderbaumNode, mode?: InsertNodeType, map?: NodeAnyCallback): void;
+        /** Set focus relative to this node and optionally activate.
          *
-         * Return `false` to prevent default handling, e.g. activating the node.
-         * @category Callback
+         * 'left' collapses the node if it is expanded, or move to the parent
+         * otherwise.
+         * 'right' expands the node if it is collapsed, or move to the first
+         * child otherwise.
+         *
+         * @param where 'down', 'first', 'last', 'left', 'parent', 'right', or 'up'.
+         *   (Alternatively the `event.key` that would normally trigger this move,
+         *   e.g. `ArrowLeft` = 'left'.
+         * @param options
          */
-        click?: (e: WbClickEventType) => void;
+        navigate(where: string, options?: NavigateOptions): Promise<any>;
+        /** Delete this node and all descendants. */
+        remove(): void;
+        /** Remove all descendants of this node. */
+        removeChildren(): void;
+        /** Remove all HTML markup from the DOM. */
+        removeMarkup(): void;
+        protected _getRenderInfo(): any;
+        protected _createIcon(parentElem: HTMLElement, replaceChild: HTMLElement | null, showLoading: boolean): HTMLElement | null;
         /**
-         *
-         * @category Callback
+         * Create a whole new `<div class="wb-row">` element.
+         * @see {@link WunderbaumNode.render}
          */
-        dblclick?: (e: WbClickEventType) => void;
+        protected _render_markup(opts: RenderOptions): void;
         /**
+         * Render `node.title`, `.icon` into an existing row.
          *
-         * Return `false` to prevent default handling, e.g. deactivating the node
-         * and activating the next.
-         * @category Callback
+         * @see {@link WunderbaumNode.render}
          */
-        deactivate?: (e: WbDeactivateEventType) => void;
+        protected _render_data(opts: RenderOptions): void;
         /**
-         *
-         * @category Callback
+         * Update row classes to reflect active, focuses, etc.
+         * @see {@link WunderbaumNode.render}
          */
-        discard?: (e: WbNodeEventType) => void;
+        protected _render_status(opts: RenderOptions): void;
         /**
+         * Create or update node's markup.
          *
-         * @category Callback
+         * `options.change` defaults to ChangeType.data, which updates the title,
+         * icon, and status. It also triggers the `render` event, that lets the user
+         * create or update the content of embeded cell elements.
+         *
+         * If only the status or other class-only modifications have changed,
+         * `options.change` should be set to ChangeType.status instead for best
+         * efficiency.
+         *
+         * Calling `setModified` instead may be a better alternative.
+         * @see {@link WunderbaumNode.setModified}
          */
-        enhanceTitle?: (e: WbEnhanceTitleEventType) => void;
+        render(options?: RenderOptions): void;
         /**
+         * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
+         * event is triggered on next expand.
+         */
+        resetLazy(): void;
+        /** Convert node (or whole branch) into a plain object.
          *
-         * @category Callback
+         * The result is compatible with node.addChildren().
+         *
+         * @param include child nodes
+         * @param callback(dict, node) is called for every node, in order to allow
+         *     modifications.
+         *     Return `false` to ignore this node or `"skip"` to include this node
+         *     without its children.
+         * @see {@link Wunderbaum.toDictArray}.
          */
-        error?: (e: WbErrorEventType) => void;
-        /**
+        toDict(recursive?: boolean, callback?: NodeToDictCallback): WbNodeData;
+        /** Return an option value that has a default, but may be overridden by a
+         * callback or a node instance attribute.
          *
-         * Check `e.flag` for status.
-         * @category Callback
+         * Evaluation sequence:
+         *
+         * - If `tree.options.<name>` is a callback that returns something, use that.
+         * - Else if `node.<name>` is defined, use that.
+         * - Else if `tree.types[<node.type>]` is a value, use that.
+         * - Else if `tree.options.<name>` is a value, use that.
+         * - Else use `defaultValue`.
+         *
+         * @param name name of the option property (on node and tree)
+         * @param defaultValue return this if nothing else matched
+         * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
          */
-        focus?: (e: WbTreeEventType) => void;
-        /**
-         * Fires when the tree markup was created and the initial source data was loaded.
-         * Typical use cases would be activating a node, setting focus, enabling other
-         * controls on the page, etc.<br>
-         * Check `e.error` for status.
-         * @category Callback
+        getOption(name: string, defaultValue?: any): any;
+        /** Make sure that this node is visible in the viewport.
+         * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
          */
-        init?: (e: WbInitEventType) => void;
+        scrollIntoView(options?: ScrollIntoViewOptions): Promise<void>;
         /**
-         *
-         * @category Callback
+         * Activate this node, deactivate previous, send events, activate column and scroll int viewport.
          */
-        keydown?: (e: WbKeydownEventType) => void;
+        setActive(flag?: boolean, options?: SetActiveOptions): Promise<any>;
         /**
-         * Fires when a node that was marked 'lazy', is expanded for the first time.
-         * Typically we return an endpoint URL or the Promise of a fetch request that
-         * provides a (potentially nested) list of child nodes.
-         * @category Callback
+         * Expand or collapse this node.
          */
-        lazyLoad?: (e: WbNodeEventType) => void;
+        setExpanded(flag?: boolean, options?: SetExpandedOptions): Promise<void>;
         /**
-         * Fires when data was loaded (initial request, reload, or lazy loading),
-         * after the data is applied and rendered.
-         * @category Callback
+         * Set keyboard focus here.
+         * @see {@link setActive}
          */
-        load?: (e: WbNodeEventType) => void;
+        setFocus(flag?: boolean): void;
+        /** Set a new icon path or class. */
+        setIcon(icon: string): void;
+        /** Change node's {@link key} and/or {@link refKey}.  */
+        setKey(key: string | null, refKey: string | null): void;
         /**
-         * @category Callback
+         * Trigger a repaint, typically after a status or data change.
+         *
+         * `change` defaults to 'data', which handles modifcations of title, icon,
+         * and column content. It can be reduced to 'ChangeType.status' if only
+         * active/focus/selected state has changed.
+         *
+         * This method will eventually call  {@link WunderbaumNode.render()} with
+         * default options, but may be more consistent with the tree's
+         * {@link Wunderbaum.setModified()} API.
          */
-        modifyChild?: (e: WbNodeEventType) => void;
+        setModified(change?: ChangeType): void;
+        /** Modify the check/uncheck state. */
+        setSelected(flag?: boolean, options?: SetSelectedOptions): void;
+        /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
+        setStatus(status: NodeStatusType, options?: SetStatusOptions): WunderbaumNode | null;
+        /** Rename this node. */
+        setTitle(title: string): void;
+        _sortChildren(cmp: SortCallback, deep: boolean): void;
         /**
-         * Fires when data was fetched (initial request, reload, or lazy loading),
-         * but before the data is applied and rendered.
-         * Here we can modify and adjust the received data, for example to convert an
-         * external response to native Wunderbaum syntax.
-         * @category Callback
+         * Sort child list by title or custom criteria.
+         * @param {function} cmp custom compare function(a, b) that returns -1, 0, or 1
+         *    (defaults to sorting by title).
+         * @param {boolean} deep pass true to sort all descendant nodes recursively
          */
-        receive?: (e: WbReceiveEventType) => void;
+        sortChildren(cmp?: SortCallback | null, deep?: boolean): void;
         /**
-         * Fires when a node is about to be displayed.
-         * The default HTML markup is already created, but not yet added to the DOM.
-         * Now we can tweak the markup, create HTML elements in this node's column
-         * cells, etc.
-         * See also `Custom Rendering` for details.
-         * @category Callback
+         * Trigger `modifyChild` event on a parent to signal that a child was modified.
+         * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
          */
-        render?: (e: WbRenderEventType) => void;
+        triggerModifyChild(operation: string, child: WunderbaumNode | null, extra?: any): void;
         /**
+         * Trigger `modifyChild` event on node.parent(!).
+         * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
+         * @param {object} [extra]
+         */
+        triggerModify(operation: string, extra?: any): void;
+        /**
+         * Call `callback(node)` for all child nodes in hierarchical order (depth-first, pre-order).
          *
-         * @category Callback
+         * Stop iteration, if fn() returns false. Skip current branch, if fn()
+         * returns "skip".<br>
+         * Return false if iteration was stopped.
+         *
+         * @param {function} callback the callback function.
+         *     Return false to stop iteration, return "skip" to skip this node and
+         *     its children only.
+         * @see {@link IterableIterator<WunderbaumNode>}, {@link Wunderbaum.visit}.
          */
-        renderStatusNode?: (e: WbRenderEventType) => void;
+        visit(callback: NodeVisitCallback, includeSelf?: boolean): NodeVisitResponse;
+        /** Call fn(node) for all parent nodes, bottom-up, including invisible system root.<br>
+         * Stop iteration, if callback() returns false.<br>
+         * Return false if iteration was stopped.
+         *
+         * @param callback the callback function. Return false to stop iteration
+         */
+        visitParents(callback: (node: WunderbaumNode) => boolean | void, includeSelf?: boolean): boolean;
         /**
+         * Call fn(node) for all sibling nodes.<br>
+         * Stop iteration, if fn() returns false.<br>
+         * Return false if iteration was stopped.
          *
-         * Check `e.flag` for status.
-         * @category Callback
+         * @param {function} fn the callback function.
+         *     Return false to stop iteration.
          */
-        select?: (e: WbNodeEventType) => void;
+        visitSiblings(callback: (node: WunderbaumNode) => boolean | void, includeSelf?: boolean): boolean;
         /**
-         * Fires when the viewport content was updated, after scroling, expanding etc.
-         * @category Callback
+         * [ext-filter] Return true if this node is matched by current filter (or no filter is active).
          */
-        update?: (e: WbTreeEventType) => void;
+        isMatched(): boolean;
     }
 }
-declare module "wb_node" {
+declare module "wb_options" {
     /*!
-     * Wunderbaum - wunderbaum_node
+     * Wunderbaum - utils
      * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
      * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
      */
-    import "./wunderbaum.scss";
-    import { Wunderbaum } from "wunderbaum";
-    import { AddChildrenOptions, InsertNodeType, ApplyCommandOptions, ApplyCommandType, ChangeType, ExpandAllOptions, MakeVisibleOptions, MatcherCallback, NavigateOptions, NodeAnyCallback, NodeStatusType, NodeStringCallback, NodeVisitCallback, NodeVisitResponse, RenderOptions, ScrollIntoViewOptions, SetActiveOptions, SetExpandedOptions, SetSelectedOptions, SetStatusOptions, SortCallback } from "types";
-    import { WbNodeData } from "wb_options";
+    import { BoolOptionResolver, ColumnDefinitionList, DndOptionsType, NavModeEnum, NodeTypeDefinitionMap, WbActivateEventType, WbChangeEventType, WbClickEventType, WbDeactivateEventType, WbEnhanceTitleEventType, WbErrorEventType, WbInitEventType, WbKeydownEventType, WbNodeData, WbNodeEventType, WbReceiveEventType, WbRenderEventType, WbTreeEventType } from "types";
     /**
-     * A single tree node.
+     * Available options for [[Wunderbaum]].
      *
-     * **NOTE:** <br>
-     * Generally you should not modify properties directly, since this may break
-     * the internal bookkeeping.
+     * Options are passed to the constructor as plain object:
+     *
+     * ```js
+     * const tree = new mar10.Wunderbaum({
+     *   id: "demo",
+     *   element: document.getElementById("demo-tree"),
+     *   source: "url/of/data/request",
+     *   ...
+     * });
+     * ```
+     *
+     * Event handlers are also passed as callbacks
+     *
+     * ```js
+     * const tree = new mar10.Wunderbaum({
+     *   ...
+     *   init: (e) => {
+     *     console.log(`Tree ${e.tree} was initialized and loaded.`)
+     *   },
+     *   activate: (e) => {
+     *     console.log(`Node ${e.node} was activated.`)
+     *   },
+     *   ...
+     * });
+     * ```
      */
-    export class WunderbaumNode {
-        static sequence: number;
-        /** Reference to owning tree. */
-        tree: Wunderbaum;
-        /** Parent node (null for the invisible root node `tree.root`). */
-        parent: WunderbaumNode;
-        /** Name of the node.
-         * @see Use {@link setTitle} to modify. */
-        title: string;
-        /** Unique key. Passed with constructor or defaults to `SEQUENCE`.
-         * @see Use {@link setKey} to modify. */
-        readonly key: string;
-        /** Reference key. Unlike {@link key}, a `refKey` may occur multiple
-         * times within a tree (in this case we have 'clone nodes').
-         * @see Use {@link setKey} to modify.
-         */
-        readonly refKey: string | undefined;
-        children: WunderbaumNode[] | null;
-        checkbox?: boolean;
-        /** If true, (in grid mode) no cells are rendered, except for the node title.*/
-        colspan?: boolean;
-        icon?: boolean | string;
-        lazy: boolean;
-        /** Expansion state.
-         * @see {@link isExpandable}, {@link isExpanded}, {@link setExpanded}. */
-        expanded: boolean;
-        /** Selection state.
-         * @see {@link isSelected}, {@link setSelected}. */
-        selected: boolean;
-        type?: string;
-        tooltip?: string;
-        /** Additional classes added to `div.wb-row`.
-         * @see {@link hasClass}, {@link setClass}. */
-        classes: Set<string> | null;
-        /** Custom data that was passed to the constructor */
-        data: any;
-        statusNodeType?: string;
-        _isLoading: boolean;
-        _requestId: number;
-        _errorInfo: any | null;
-        _partsel: boolean;
-        _partload: boolean;
-        match?: boolean;
-        subMatchCount?: number;
-        subMatchBadge?: HTMLElement;
-        /** @internal */
-        titleWithHighlight?: string;
-        _filterAutoExpanded?: boolean;
-        _rowIdx: number | undefined;
-        _rowElem: HTMLDivElement | undefined;
-        constructor(tree: Wunderbaum, parent: WunderbaumNode, data: any);
+    export interface WunderbaumOptions {
         /**
-         * Return readable string representation for this instance.
-         * @internal
+         * The target `div` element (or selector) that shall become a Wunderbaum.
          */
-        toString(): string;
+        element: string | HTMLDivElement;
         /**
-         * Iterate all descendant nodes depth-first, pre-order using `for ... of ...` syntax.
-         * More concise, but slightly slower than {@link WunderbaumNode.visit}.
+         * The identifier of this tree. Used to reference the instance, especially
+         * when multiple trees are present (e.g. `tree = mar10.Wunderbaum.getTree("demo")`).
          *
-         * Example:
-         * ```js
-         * for(const n of node) {
-         *   ...
-         * }
-         * ```
-         */
-        [Symbol.iterator](): IterableIterator<WunderbaumNode>;
-        /** Call event handler if defined in tree.options.
-         * Example:
-         * ```js
-         * node._callEvent("edit.beforeEdit", {foo: 42})
-         * ```
+         * Default: `"wb_" + COUNTER`.
          */
-        _callEvent(type: string, extra?: any): any;
+        id?: string;
         /**
-         * Append (or insert) a list of child nodes.
-         *
-         * Tip: pass `{ before: 0 }` to prepend new nodes as first children.
+         * Define the initial tree data. Typically a URL of an endpoint that serves
+         * a JSON formatted structure, but also a callback, Promise, or static data
+         * is allowed.
          *
-         * @returns first child added
+         * Default: `{}`.
          */
-        addChildren(nodeData: WbNodeData | WbNodeData[], options?: AddChildrenOptions): WunderbaumNode;
+        source?: string | Array<WbNodeData>;
         /**
-         * Append or prepend a node, or append a child node.
-         *
-         * This a convenience function that calls addChildren()
+         * Define shared attributes for multiple nodes of the same type.
+         * This allows for more compact data models. Type definitions can be passed
+         * as tree option, or be part of a `source` response.
          *
-         * @param {NodeData} node node definition
-         * @param [mode=child] 'before', 'after', 'firstChild', or 'child' ('over' is a synonym for 'child')
-         * @returns new node
+         * Default: `{}`.
          */
-        addNode(nodeData: WbNodeData, mode?: InsertNodeType): WunderbaumNode;
+        types?: NodeTypeDefinitionMap;
         /**
-         * Apply a modification (or navigation) operation.
-         *
-         * @see {@link Wunderbaum.applyCommand}
+         * A list of maps that define column headers. If this option is set,
+         * Wunderbaum becomes a treegrid control instead of a plain tree.
+         * Column definitions can be passed as tree option, or be part of a `source`
+         * response.
+         * Default: `[]` meaning this is a plain tree.
          */
-        applyCommand(cmd: ApplyCommandType, options: ApplyCommandOptions): any;
+        columns?: ColumnDefinitionList;
         /**
-         * Add/remove one or more classes to `<div class='wb-row'>`.
-         *
-         * This also maintains `node.classes`, so the class will survive a re-render.
-         *
-         * @param className one or more class names. Multiple classes can be passed
-         *     as space-separated string, array of strings, or set of strings.
+         * If true, add a `wb-skeleton` class to all nodes, that will result in a
+         * 'glow' effect. Typically used with initial dummy nodes, while loading the
+         * real data.
+         * Default: false.
          */
-        setClass(className: string | string[] | Set<string>, flag?: boolean): void;
-        /** Call `setExpanded()` on all descendant nodes. */
-        expandAll(flag?: boolean, options?: ExpandAllOptions): Promise<void>;
+        skeleton?: boolean;
         /**
-         * Find all descendant nodes that match condition (excluding self).
-         *
-         * If `match` is a string, search for exact node title.
-         * If `match` is a RegExp expression, apply it to node.title, using
-         * [RegExp.test()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test).
-         * If `match` is a callback, match all nodes for that the callback(node) returns true.
-         *
-         * Returns an empty array if no nodes were found.
-         *
-         * Examples:
-         * ```js
-         * // Match all node titles that match exactly 'Joe':
-         * nodeList = node.findAll("Joe")
-         * // Match all node titles that start with 'Joe' case sensitive:
-         * nodeList = node.findAll(/^Joe/)
-         * // Match all node titles that contain 'oe', case insensitive:
-         * nodeList = node.findAll(/oe/i)
-         * // Match all nodes with `data.price` >= 99:
-         * nodeList = node.findAll((n) => {
-         *   return n.data.price >= 99;
-         * })
-         * ```
+         * Translation map for some system messages.
          */
-        findAll(match: string | RegExp | MatcherCallback): WunderbaumNode[];
-        /** Return the direct child with a given key, index or null. */
-        findDirectChild(ptr: number | string | WunderbaumNode): WunderbaumNode | null;
+        strings?: any;
         /**
-         * Find first descendant node that matches condition (excluding self) or null.
-         *
-         * @see {@link WunderbaumNode.findAll} for examples.
-         */
-        findFirst(match: string | RegExp | MatcherCallback): WunderbaumNode | null;
-        /** Find a node relative to self.
-         *
-         * @see {@link Wunderbaum.findRelatedNode|tree.findRelatedNode()}
+         * 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
+         * Default: 3 (4 in local debug environment)
          */
-        findRelatedNode(where: string, includeHidden?: boolean): any;
+        debugLevel?: number;
         /**
-         * Iterator version of {@link WunderbaumNode.format}.
+         * Number of levels that are forced to be expanded, and have no expander icon.
+         * E.g. 1 would keep all toplevel nodes expanded.
+         * Default: 0
          */
-        format_iter(name_cb?: NodeStringCallback, connectors?: string[]): IterableIterator<string>;
+        minExpandLevel?: number;
         /**
-         * Return a multiline string representation of a node/subnode hierarchy.
-         * Mostly useful for debugging.
-         *
-         * Example:
-         * ```js
-         * console.info(tree.getActiveNode().format((n)=>n.title));
-         * ```
-         * logs
-         * ```
-         * Books
-         *  ├─ Art of War
-         *  ╰─ Don Quixote
-         * ```
-         * @see {@link WunderbaumNode.format_iter}
-         */
-        format(name_cb?: NodeStringCallback, connectors?: string[]): string;
-        /** Return the `<span class='wb-col'>` element with a given index or id.
-         * @returns {WunderbaumNode | null}
-         */
-        getColElem(colIdx: number | string): HTMLSpanElement;
-        /** Return the first child node or null.
-         * @returns {WunderbaumNode | null}
-         */
-        getFirstChild(): WunderbaumNode;
-        /** Return the last child node or null.
-         * @returns {WunderbaumNode | null}
-         */
-        getLastChild(): WunderbaumNode;
-        /** Return node depth (starting with 1 for top level nodes). */
-        getLevel(): number;
-        /** Return the successive node (under the same parent) or null. */
-        getNextSibling(): WunderbaumNode | null;
-        /** Return the parent node (null for the system root node). */
-        getParent(): WunderbaumNode | null;
-        /** Return an array of all parent nodes (top-down).
-         * @param includeRoot Include the invisible system root node.
-         * @param includeSelf Include the node itself.
-         */
-        getParentList(includeRoot?: boolean, includeSelf?: boolean): any[];
-        /** Return a string representing the hierachical node path, e.g. "a/b/c".
-         * @param includeSelf
-         * @param node property name or callback
-         * @param separator
-         */
-        getPath(includeSelf?: boolean, part?: keyof WunderbaumNode | NodeAnyCallback, separator?: string): string;
-        /** Return the preceeding node (under the same parent) or null. */
-        getPrevSibling(): WunderbaumNode | null;
-        /** Return true if node has children.
-         * Return undefined if not sure, i.e. the node is lazy and not yet loaded.
-         */
-        hasChildren(): boolean;
-        /** Return true if node has className set. */
-        hasClass(className: string): boolean;
-        /** Return true if this node is the currently active tree node. */
-        isActive(): boolean;
-        /** Return true if this node is a direct or indirect parent of `other`.
-         * (See also [[isParentOf]].)
-         */
-        isAncestorOf(other: WunderbaumNode): boolean;
-        /** Return true if this node is a **direct** subnode of `other`.
-         * (See also [[isDescendantOf]].)
-         */
-        isChildOf(other: WunderbaumNode): boolean;
-        /** Return true if this node's title spans all columns, i.e. the node has no
-         * grid cells.
-         */
-        isColspan(): boolean;
-        /** Return true if this node is a direct or indirect subnode of `other`.
-         * (See also [[isChildOf]].)
-         */
-        isDescendantOf(other: WunderbaumNode): boolean;
-        /** Return true if this node has children, i.e. the node is generally expandable.
-         * If `andCollapsed` is set, we also check if this node is collapsed, i.e.
-         * an expand operation is currently possible.
-         */
-        isExpandable(andCollapsed?: boolean): boolean;
-        /** Return true if this node is currently in edit-title mode. */
-        isEditing(): boolean;
-        /** Return true if this node is currently expanded. */
-        isExpanded(): boolean;
-        /** Return true if this node is the first node of its parent's children. */
-        isFirstSibling(): boolean;
-        /** Return true if this node is the last node of its parent's children. */
-        isLastSibling(): boolean;
-        /** Return true if this node is lazy (even if data was already loaded) */
-        isLazy(): boolean;
-        /** Return true if node is lazy and loaded. For non-lazy nodes always return true. */
-        isLoaded(): boolean;
-        /** Return true if node is currently loading, i.e. a GET request is pending. */
-        isLoading(): boolean;
-        /** Return true if this node is a temporarily generated status node of type 'paging'. */
-        isPagingNode(): boolean;
-        /** Return true if this node is a **direct** parent of `other`.
-         * (See also [[isAncestorOf]].)
+         * If true, allow to expand parent nodes, even if `node.children` conatains
+         * an empty array (`[]`). This is the the behavior of macOS Finder, for example.
+         * Default: false
          */
-        isParentOf(other: WunderbaumNode): boolean;
-        /** (experimental) Return true if this node is partially loaded. */
-        isPartload(): boolean;
-        /** Return true if this node is partially selected (tri-state). */
-        isPartsel(): boolean;
-        /** Return true if this node has DOM representaion, i.e. is displayed in the viewport. */
-        isRendered(): boolean;
-        /** Return true if this node is the (invisible) system root node.
-         * (See also [[isTopLevel()]].)
+        emptyChildListExpandable?: boolean;
+        /**
+         * Height of a node row div.
+         * Default: 22
          */
-        isRootNode(): boolean;
-        /** Return true if this node is selected, i.e. the checkbox is set. */
-        isSelected(): boolean;
-        /** Return true if this node is a temporarily generated system node like
-         * 'loading', 'paging', or 'error' (node.statusNodeType contains the type).
+        rowHeightPx?: number;
+        /**
+         * Collapse siblings when a node is expanded.
+         * Default: false
          */
-        isStatusNode(): boolean;
-        /** Return true if this a top level node, i.e. a direct child of the (invisible) system root node. */
-        isTopLevel(): boolean;
-        /** Return true if node is marked lazy but not yet loaded.
-         * For non-lazy nodes always return false.
+        autoCollapse?: boolean;
+        /**
+         * HTMLElement that receives the top nodes breadcrumb.
+         * Default: undefined
          */
-        isUnloaded(): boolean;
-        /** Return true if all parent nodes are expanded. Note: this does not check
-         * whether the node is scrolled into the visible part of the screen or viewport.
+        connectTopBreadcrumb?: HTMLElement;
+        /**
+         * Default:  NavModeEnum.startRow
          */
-        isVisible(): boolean;
-        protected _loadSourceObject(source: any, level?: number): void;
-        _fetchWithOptions(source: any): Promise<any>;
-        /** Download  data from the cloud, then call `.update()`. */
-        load(source: any): Promise<void>;
-        /**Load content of a lazy node. */
-        loadLazy(forceReload?: boolean): Promise<void>;
-        /** Alias for `logDebug` */
-        log(...args: any[]): void;
-        logDebug(...args: any[]): void;
-        logError(...args: any[]): void;
-        logInfo(...args: any[]): void;
-        logWarn(...args: any[]): void;
-        /** Expand all parents and optionally scroll into visible area as neccessary.
-         * Promise is resolved, when lazy loading and animations are done.
-         * @param {object} [options] passed to `setExpanded()`.
-         *     Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
+        navigationModeOption?: NavModeEnum;
+        /**
+         * Show/hide header (default: null)
+         * null: assume false for plain tree and true for grids.
+         * string: use text as header (only for plain trees)
+         * true: display a header (use tree's id as text for plain trees)
+         * false: do not display a header
          */
-        makeVisible(options?: MakeVisibleOptions): Promise<any>;
-        /** Move this node to targetNode. */
-        moveTo(targetNode: WunderbaumNode, mode?: InsertNodeType, map?: NodeAnyCallback): void;
-        /** Set focus relative to this node and optionally activate.
-         *
-         * 'left' collapses the node if it is expanded, or move to the parent
-         * otherwise.
-         * 'right' expands the node if it is collapsed, or move to the first
-         * child otherwise.
+        header?: boolean | string | null;
+        /**
          *
-         * @param where 'down', 'first', 'last', 'left', 'parent', 'right', or 'up'.
-         *   (Alternatively the `event.key` that would normally trigger this move,
-         *   e.g. `ArrowLeft` = 'left'.
-         * @param options
          */
-        navigate(where: string, options?: NavigateOptions): Promise<any>;
-        /** Delete this node and all descendants. */
-        remove(): void;
-        /** Remove all descendants of this node. */
-        removeChildren(): void;
-        /** Remove all HTML markup from the DOM. */
-        removeMarkup(): void;
-        protected _getRenderInfo(): any;
-        protected _createIcon(parentElem: HTMLElement, replaceChild: HTMLElement | null, showLoading: boolean): HTMLElement | null;
+        showSpinner?: boolean;
         /**
-         * Create a whole new `<div class="wb-row">` element.
-         * @see {@link WunderbaumNode.render}
+         * If true, render a checkbox before the node tile to allow selection with the
+         * mouse.
+         * Default: false.
          */
-        protected _render_markup(opts: RenderOptions): void;
+        checkbox?: boolean | "radio" | BoolOptionResolver;
         /**
-         * Render `node.title`, `.icon` into an existing row.
-         *
-         * @see {@link WunderbaumNode.render}
+         * Default: 200
          */
-        protected _render_data(opts: RenderOptions): void;
+        updateThrottleWait?: number;
         /**
-         * Update row classes to reflect active, focuses, etc.
-         * @see {@link WunderbaumNode.render}
+         * Default: true
          */
-        protected _render_status(opts: RenderOptions): void;
+        enabled?: boolean;
         /**
-         * Create or update node's markup.
-         *
-         * `options.change` defaults to ChangeType.data, which updates the title,
-         * icon, and status. It also triggers the `render` event, that lets the user
-         * create or update the content of embeded cell elements.
-         *
-         * If only the status or other class-only modifications have changed,
-         * `options.change` should be set to ChangeType.status instead for best
-         * efficiency.
-         *
-         * Calling `setModified` instead may be a better alternative.
-         * @see {@link WunderbaumNode.setModified}
+         * Default: false
          */
-        render(options?: RenderOptions): void;
+        fixedCol?: boolean;
         /**
-         * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
-         * event is triggered on next expand.
+         * Default: true
          */
-        resetLazy(): void;
-        /** Convert node (or whole branch) into a plain object.
+        quicksearch?: boolean;
+        dnd?: DndOptionsType;
+        edit?: any;
+        filter?: any;
+        grid?: any;
+        /**
          *
-         * The result is compatible with node.addChildren().
+         * @category Callback
+         */
+        activate?: (e: WbActivateEventType) => void;
+        /**
          *
-         * @param include child nodes
-         * @param callback(dict, node) is called for every node, in order to allow
-         *     modifications.
-         *     Return `false` to ignore this node or `"skip"` to include this node
-         *     without its children.
-         * @returns {NodeData}
+         * Return `false` to prevent default handling, e.g. activating the node.
+         * @category Callback
          */
-        toDict(recursive?: boolean, callback?: any): any;
-        /** Return an option value that has a default, but may be overridden by a
-         * callback or a node instance attribute.
+        beforeActivate?: (e: WbActivateEventType) => void;
+        /**
          *
-         * Evaluation sequence:
+         * @category Callback
+         */
+        change?: (e: WbChangeEventType) => void;
+        /**
          *
-         * - If `tree.options.<name>` is a callback that returns something, use that.
-         * - Else if `node.<name>` is defined, use that.
-         * - Else if `tree.types[<node.type>]` is a value, use that.
-         * - Else if `tree.options.<name>` is a value, use that.
-         * - Else use `defaultValue`.
+         * Return `false` to prevent default handling, e.g. activating the node.
+         * @category Callback
+         */
+        click?: (e: WbClickEventType) => void;
+        /**
          *
-         * @param name name of the option property (on node and tree)
-         * @param defaultValue return this if nothing else matched
-         * {@link Wunderbaum.getOption|Wunderbaum.getOption()}
+         * @category Callback
          */
-        getOption(name: string, defaultValue?: any): any;
-        /** Make sure that this node is visible in the viewport.
-         * @see {@link Wunderbaum.scrollTo|Wunderbaum.scrollTo()}
+        dblclick?: (e: WbClickEventType) => void;
+        /**
+         *
+         * Return `false` to prevent default handling, e.g. deactivating the node
+         * and activating the next.
+         * @category Callback
          */
-        scrollIntoView(options?: ScrollIntoViewOptions): Promise<void>;
+        deactivate?: (e: WbDeactivateEventType) => void;
         /**
-         * Activate this node, deactivate previous, send events, activate column and scroll int viewport.
+         *
+         * @category Callback
          */
-        setActive(flag?: boolean, options?: SetActiveOptions): Promise<any>;
+        discard?: (e: WbNodeEventType) => void;
         /**
-         * Expand or collapse this node.
+         *
+         * @category Callback
          */
-        setExpanded(flag?: boolean, options?: SetExpandedOptions): Promise<void>;
+        enhanceTitle?: (e: WbEnhanceTitleEventType) => void;
         /**
-         * Set keyboard focus here.
-         * @see {@link setActive}
+         *
+         * @category Callback
          */
-        setFocus(flag?: boolean): void;
-        /** Set a new icon path or class. */
-        setIcon(icon: string): void;
-        /** Change node's {@link key} and/or {@link refKey}.  */
-        setKey(key: string | null, refKey: string | null): void;
+        error?: (e: WbErrorEventType) => void;
         /**
-         * Trigger a repaint, typically after a status or data change.
          *
-         * `change` defaults to 'data', which handles modifcations of title, icon,
-         * and column content. It can be reduced to 'ChangeType.status' if only
-         * active/focus/selected state has changed.
+         * Check `e.flag` for status.
+         * @category Callback
+         */
+        focus?: (e: WbTreeEventType) => void;
+        /**
+         * Fires when the tree markup was created and the initial source data was loaded.
+         * Typical use cases would be activating a node, setting focus, enabling other
+         * controls on the page, etc.<br>
+         * Check `e.error` for status.
+         * @category Callback
+         */
+        init?: (e: WbInitEventType) => void;
+        /**
          *
-         * This method will eventually call  {@link WunderbaumNode.render()} with
-         * default options, but may be more consistent with the tree's
-         * {@link Wunderbaum.setModified()} API.
+         * @category Callback
          */
-        setModified(change?: ChangeType): void;
-        /** Modify the check/uncheck state. */
-        setSelected(flag?: boolean, options?: SetSelectedOptions): void;
-        /** Display node status (ok, loading, error, noData) using styles and a dummy child node. */
-        setStatus(status: NodeStatusType, options?: SetStatusOptions): WunderbaumNode | null;
-        /** Rename this node. */
-        setTitle(title: string): void;
-        _sortChildren(cmp: SortCallback, deep: boolean): void;
+        keydown?: (e: WbKeydownEventType) => void;
         /**
-         * Sort child list by title or custom criteria.
-         * @param {function} cmp custom compare function(a, b) that returns -1, 0, or 1
-         *    (defaults to sorting by title).
-         * @param {boolean} deep pass true to sort all descendant nodes recursively
+         * Fires when a node that was marked 'lazy', is expanded for the first time.
+         * Typically we return an endpoint URL or the Promise of a fetch request that
+         * provides a (potentially nested) list of child nodes.
+         * @category Callback
          */
-        sortChildren(cmp?: SortCallback | null, deep?: boolean): void;
+        lazyLoad?: (e: WbNodeEventType) => void;
         /**
-         * Trigger `modifyChild` event on a parent to signal that a child was modified.
-         * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
+         * Fires when data was loaded (initial request, reload, or lazy loading),
+         * after the data is applied and rendered.
+         * @category Callback
          */
-        triggerModifyChild(operation: string, child: WunderbaumNode | null, extra?: any): void;
+        load?: (e: WbNodeEventType) => void;
         /**
-         * Trigger `modifyChild` event on node.parent(!).
-         * @param {string} operation Type of change: 'add', 'remove', 'rename', 'move', 'data', ...
-         * @param {object} [extra]
+         * @category Callback
          */
-        triggerModify(operation: string, extra?: any): void;
+        modifyChild?: (e: WbNodeEventType) => void;
         /**
-         * Call `callback(node)` for all child nodes in hierarchical order (depth-first, pre-order).
-         *
-         * Stop iteration, if fn() returns false. Skip current branch, if fn()
-         * returns "skip".<br>
-         * Return false if iteration was stopped.
-         *
-         * @param {function} callback the callback function.
-         *     Return false to stop iteration, return "skip" to skip this node and
-         *     its children only.
-         * @see {@link IterableIterator<WunderbaumNode>}, {@link Wunderbaum.visit}.
+         * Fires when data was fetched (initial request, reload, or lazy loading),
+         * but before the data is applied and rendered.
+         * Here we can modify and adjust the received data, for example to convert an
+         * external response to native Wunderbaum syntax.
+         * @category Callback
          */
-        visit(callback: NodeVisitCallback, includeSelf?: boolean): NodeVisitResponse;
-        /** Call fn(node) for all parent nodes, bottom-up, including invisible system root.<br>
-         * Stop iteration, if callback() returns false.<br>
-         * Return false if iteration was stopped.
+        receive?: (e: WbReceiveEventType) => void;
+        /**
+         * Fires when a node is about to be displayed.
+         * The default HTML markup is already created, but not yet added to the DOM.
+         * Now we can tweak the markup, create HTML elements in this node's column
+         * cells, etc.
+         * See also `Custom Rendering` for details.
+         * @category Callback
+         */
+        render?: (e: WbRenderEventType) => void;
+        /**
          *
-         * @param callback the callback function. Return false to stop iteration
+         * @category Callback
          */
-        visitParents(callback: (node: WunderbaumNode) => boolean | void, includeSelf?: boolean): boolean;
+        renderStatusNode?: (e: WbRenderEventType) => void;
         /**
-         * Call fn(node) for all sibling nodes.<br>
-         * Stop iteration, if fn() returns false.<br>
-         * Return false if iteration was stopped.
          *
-         * @param {function} fn the callback function.
-         *     Return false to stop iteration.
+         * Check `e.flag` for status.
+         * @category Callback
          */
-        visitSiblings(callback: (node: WunderbaumNode) => boolean | void, includeSelf?: boolean): boolean;
+        select?: (e: WbNodeEventType) => void;
         /**
-         * [ext-filter] Return true if this node is matched by current filter (or no filter is active).
+         * Fires when the viewport content was updated, after scroling, expanding etc.
+         * @category Callback
          */
-        isMatched(): boolean;
+        update?: (e: WbTreeEventType) => void;
     }
 }
 declare module "types" {
@@ -1162,10 +1151,28 @@ declare module "types" {
     export type BoolOptionResolver = (node: WunderbaumNode) => boolean;
     /** When set as option, called when the value is needed (e.g. `icon` type definition). */
     export type BoolOrStringOptionResolver = (node: WunderbaumNode) => boolean | string;
+    /** A callback that receives a node instance and returns an arbitrary value type. */
     export type NodeAnyCallback = (node: WunderbaumNode) => any;
+    /** A callback that receives a node instance and returns a string value. */
     export type NodeStringCallback = (node: WunderbaumNode) => string;
-    export type NodeVisitResponse = "skip" | boolean | void;
+    /** A callback that receives a node instance and returns an iteration modifier. */
     export type NodeVisitCallback = (node: WunderbaumNode) => NodeVisitResponse;
+    /** A callback that receives a node instance and returns a string value. */
+    export type NodeVisitResponse = "skip" | boolean | void;
+    /** A callback that receives a node-data dictionary and a node instance and returns an iteration modifier. */
+    export type NodeToDictCallback = (dict: WbNodeData, node: WunderbaumNode) => NodeVisitResponse;
+    /** A plain object (dictionary) that represents a node instance. */
+    export interface WbNodeData {
+        title: string;
+        key?: string;
+        refKey?: string;
+        expanded?: boolean;
+        selected?: boolean;
+        checkbox?: boolean | string;
+        colspan?: boolean;
+        children?: Array<WbNodeData>;
+        treeId?: string;
+    }
     export interface WbTreeEventType {
         /** Name of the event. */
         type: string;
@@ -1301,8 +1308,14 @@ declare module "types" {
          * Default: `4px`.
          */
         minWidth?: string | number;
-        /** Optional class names that are added to all `span.wb-col` elements of that column.*/
+        /** Optional class names that are added to all `span.wb-col` header AND data
+         * elements of that column.
+         */
         classes?: string;
+        /** If `headerClasses` is a string, it will be used for the header element,
+         * while `classes` is used for data elements.
+         */
+        headerClasses?: string;
         /** Optional HTML content that is rendered into all `span.wb-col` elements of that column.*/
         html?: string;
         _weight?: number;
@@ -1981,8 +1994,7 @@ declare module "wb_ext_edit" {
     import { Wunderbaum } from "wunderbaum";
     import { WunderbaumExtension } from "wb_extension_base";
     import { WunderbaumNode } from "wb_node";
-    import { InsertNodeType } from "types";
-    import { WbNodeData } from "wb_options";
+    import { InsertNodeType, WbNodeData } from "types";
     export class EditExtension extends WunderbaumExtension {
         protected debouncedOnChange: (e: Event) => void;
         protected curEditNode: WunderbaumNode | null;
@@ -2025,7 +2037,7 @@ declare module "wunderbaum" {
     import "./wunderbaum.scss";
     import * as util from "util";
     import { ExtensionsDict, WunderbaumExtension } from "wb_extension_base";
-    import { ApplyCommandType, ChangeType, ColumnDefinitionList, ExpandAllOptions, FilterModeType, MatcherCallback, NavModeEnum, NodeStatusType, NodeStringCallback, NodeTypeDefinitionMap, ScrollToOptions, SetActiveOptions, SetModifiedOptions, SetStatusOptions, WbEventInfo, ApplyCommandOptions, AddChildrenOptions, VisitRowsOptions, NodeFilterCallback, FilterNodesOptions, RenderFlag, NodeVisitCallback, SortCallback } from "types";
+    import { ApplyCommandType, ChangeType, ColumnDefinitionList, ExpandAllOptions, FilterModeType, MatcherCallback, NavModeEnum, NodeStatusType, NodeStringCallback, NodeTypeDefinitionMap, ScrollToOptions, SetActiveOptions, SetModifiedOptions, SetStatusOptions, WbEventInfo, ApplyCommandOptions, AddChildrenOptions, VisitRowsOptions, NodeFilterCallback, FilterNodesOptions, RenderFlag, NodeVisitCallback, SortCallback, NodeToDictCallback, WbNodeData } from "types";
     import { WunderbaumNode } from "wb_node";
     import { WunderbaumOptions } from "wb_options";
     /**
@@ -2391,6 +2403,15 @@ declare module "wunderbaum" {
          * @param {boolean} deep pass true to sort all descendant nodes recursively
          */
         sortChildren(cmp?: SortCallback | null, deep?: boolean): void;
+        /** Convert tree to an array of plain objects.
+         *
+         * @param callback(dict, node) is called for every node, in order to allow
+         *     modifications.
+         *     Return `false` to ignore this node or `"skip"` to include this node
+         *     without its children.
+         * @see {@link WunderbaumNode.toDict}.
+         */
+        toDictArray(callback?: NodeToDictCallback): Array<WbNodeData>;
         /**
          * Update column headers and column width.
          * Return true if at least one column width changed.