@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.2

package/dist/tree-view/root.d.ts

@@ -0,0 +1,17 @@
+import { type PropsWithChildren, type Ref } from "react";
+export interface TreeRootProps {
+    readonly transitionEnter?: number;
+    readonly transitionExit?: number;
+    readonly gridWrappedBranches?: boolean;
+    readonly expansions?: Record<string, boolean>;
+    readonly expansionDefault?: boolean;
+    readonly onExpansionChange?: (n: Record<string, boolean>) => void;
+    readonly selectMode?: "single" | "multiple" | "none";
+    readonly selection?: Set<string>;
+    readonly onSelectionChange?: (c: Set<string>) => void;
+    readonly onFocusChange?: (el: HTMLElement | null) => void;
+    readonly getAllIds?: (panel: HTMLElement) => Set<string>;
+    readonly getIdsBetweenNodes?: (start: HTMLElement, end: HTMLElement, panel: HTMLElement) => string[];
+    readonly ref?: Ref<HTMLElement | null>;
+}
+export declare const TreeRoot: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TreeRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/tree-view/root.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { context } from "./context.js";
+import { useCombinedRefs, useEvent } from "@1771technologies/lytenyte-react-hooks";
+import { getAllIds } from "./navigation/get-all-ids.js";
+import { getIdsBetweenNodes } from "./utils/get-ids-between-nodes.js";
+export const TreeRoot = forwardRef((p, forwarded) => {
+    const [panel, setPanel] = useState(null);
+    const [expansions, onExpansionChange] = useState({});
+    const [selection, setSelections] = useState(() => new Set());
+    const ref = useCombinedRefs(setPanel, forwarded);
+    const selectionPivotRef = useRef(null);
+    const allIds = useEvent((el) => {
+        if (p.getAllIds)
+            return p.getAllIds(el);
+        return getAllIds(el);
+    });
+    const idsBetween = useEvent((left, right, panel) => {
+        if (p.getIdsBetweenNodes)
+            return p.getIdsBetweenNodes(left, right, panel);
+        return getIdsBetweenNodes(left, right, panel);
+    });
+    const onFocusChange = useEvent((el) => {
+        p.onFocusChange?.(el);
+    });
+    const value = useMemo(() => {
+        return {
+            panel,
+            panelRef: ref,
+            selectionMode: p.selectMode ?? "single",
+            transitionEnterMs: p.transitionEnter ?? 0,
+            transitionExitMs: p.transitionExit ?? 0,
+            gridWrappedBranches: p.gridWrappedBranches ?? false,
+            expansions: p.expansions ?? expansions,
+            onExpansionChange: p.onExpansionChange ?? onExpansionChange,
+            selection: p.selection ?? selection,
+            onSelectionChange: p.onSelectionChange ?? setSelections,
+            selectionPivotRef,
+            expansionDefault: p.expansionDefault ?? false,
+            onFocusChange,
+            getAllIds: allIds,
+            getIdsBetweenNodes: idsBetween,
+        };
+    }, [
+        allIds,
+        expansions,
+        idsBetween,
+        onFocusChange,
+        p.expansionDefault,
+        p.expansions,
+        p.gridWrappedBranches,
+        p.onExpansionChange,
+        p.onSelectionChange,
+        p.selectMode,
+        p.selection,
+        p.transitionEnter,
+        p.transitionExit,
+        panel,
+        ref,
+        selection,
+    ]);
+    return _jsx(context.Provider, { value: value, children: p.children });
+});

package/dist/tree-view/utils/get-focusable-nodes.d.ts

@@ -0,0 +1 @@
+export declare function getFocusableNodes(panel: HTMLElement): HTMLElement[];

package/dist/tree-view/utils/get-focusable-nodes.js

@@ -0,0 +1,5 @@
+import { getFocusables, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+export function getFocusableNodes(panel) {
+    const focusNodes = getFocusables(panel).filter((c) => isHTMLElement(c) && c.getAttribute("data-ln-tree-node") === "true");
+    return focusNodes;
+}

package/dist/tree-view/utils/get-focused-node.d.ts

@@ -0,0 +1 @@
+export declare function getFocusedNode(): HTMLElement | null;

package/dist/tree-view/utils/get-focused-node.js

@@ -0,0 +1,14 @@
+import { isLastTraversableNode } from "@1771technologies/lytenyte-dom-utils";
+export function getFocusedNode() {
+    if (!document.activeElement)
+        return null;
+    let current = document.activeElement;
+    while (current &&
+        !isLastTraversableNode(current) &&
+        current.getAttribute("data-ln-tree-node") !== "true") {
+        current = current.parentElement;
+    }
+    if (current?.getAttribute("data-ln-tree-node"))
+        return current;
+    return null;
+}

package/dist/tree-view/utils/get-ids-between-nodes.d.ts

@@ -0,0 +1 @@
+export declare function getIdsBetweenNodes(start: HTMLElement, end: HTMLElement, panel: HTMLElement): string[];

package/dist/tree-view/utils/get-ids-between-nodes.js

@@ -0,0 +1,15 @@
+import { getFocusableNodes } from "./get-focusable-nodes.js";
+import { getTreeNodeId } from "./get-tree-node-id.js";
+export function getIdsBetweenNodes(start, end, panel) {
+    const focusables = getFocusableNodes(panel);
+    let startIndex = focusables.indexOf(start);
+    let endIndex = focusables.indexOf(end);
+    if (startIndex == -1 || endIndex == -1)
+        return [];
+    [startIndex, endIndex] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
+    const ids = [];
+    for (let i = startIndex; i <= endIndex; i++) {
+        ids.push(getTreeNodeId(focusables[i]));
+    }
+    return ids;
+}

package/dist/tree-view/utils/get-panel.d.ts

@@ -0,0 +1 @@
+export declare function getPanel(el: HTMLElement): HTMLElement | null;

package/dist/tree-view/utils/get-panel.js

@@ -0,0 +1,7 @@
+export function getPanel(el) {
+    let current = el;
+    while (current && !current.getAttribute("data-ln-tree-panel")) {
+        current = current.parentElement;
+    }
+    return current;
+}

package/dist/tree-view/utils/get-parent-node.d.ts

@@ -0,0 +1 @@
+export declare function getParentNode(el: HTMLElement): HTMLElement | null;

package/dist/tree-view/utils/get-parent-node.js

@@ -0,0 +1,10 @@
+import { isBranchNode } from "./is-branch-node.js";
+export function getParentNode(el) {
+    let current = el.parentElement;
+    while (current && !current.getAttribute("data-ln-tree-panel") && !isBranchNode(current)) {
+        current = current.parentElement;
+    }
+    if (current?.getAttribute("data-ln-tree-panel"))
+        return null;
+    return current;
+}

package/dist/tree-view/utils/get-sibling-branches.d.ts

@@ -0,0 +1 @@
+export declare function getSiblingBranches(el: HTMLElement): HTMLElement[] | undefined;

package/dist/tree-view/utils/get-sibling-branches.js

@@ -0,0 +1,14 @@
+import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+import { isBranchNode } from "./is-branch-node.js";
+export function getSiblingBranches(el) {
+    const children = el.parentElement?.children;
+    if (!children)
+        return;
+    const branchSiblings = [];
+    for (let i = 0; i < children.length; i++) {
+        const node = children[i];
+        if (isHTMLElement(node) && isBranchNode(node))
+            branchSiblings.push(node);
+    }
+    return branchSiblings;
+}

package/dist/tree-view/utils/get-tree-node-id.d.ts

@@ -0,0 +1 @@
+export declare function getTreeNodeId(el: HTMLElement): string;

package/dist/tree-view/utils/get-tree-node-id.js

@@ -0,0 +1,3 @@
+export function getTreeNodeId(el) {
+    return el.getAttribute("data-ln-tree-id") ?? "";
+}

package/dist/tree-view/utils/is-branch-node.d.ts

@@ -0,0 +1 @@
+export declare function isBranchNode(el: HTMLElement): boolean;

package/dist/tree-view/utils/is-branch-node.js

@@ -0,0 +1,3 @@
+export function isBranchNode(el) {
+    return el.getAttribute("data-ln-tree-branch") === "true";
+}

package/dist/tree-view/utils/is-leaf-node.d.ts

@@ -0,0 +1 @@
+export declare function isLeafNode(el: HTMLElement): boolean;

package/dist/tree-view/utils/is-leaf-node.js

@@ -0,0 +1,3 @@
+export function isLeafNode(el) {
+    return el.getAttribute("data-ln-tree-leaf") === "true";
+}

package/dist/tree-view/utils/is-tree-node-disabled.d.ts

@@ -0,0 +1 @@
+export declare function isTreeNodeDisabled(el: HTMLElement): boolean;

package/dist/tree-view/utils/is-tree-node-disabled.js

@@ -0,0 +1,3 @@
+export function isTreeNodeDisabled(el) {
+    return el.getAttribute("data-ln-tree-node-disabled") === "true";
+}

package/dist/tree-view/utils/select-node.d.ts

@@ -0,0 +1,2 @@
+import type { TreeViewRootContext } from "../context.js";
+export declare function selectNode(node: HTMLElement | null | undefined, ctx: TreeViewRootContext, focus?: boolean): void;

package/dist/tree-view/utils/select-node.js

@@ -0,0 +1,15 @@
+import { getTreeNodeId } from "./get-tree-node-id.js";
+import { isTreeNodeDisabled } from "./is-tree-node-disabled.js";
+export function selectNode(node, ctx, focus) {
+    if (!node || isTreeNodeDisabled(node))
+        return;
+    if (focus)
+        node.focus();
+    const id = getTreeNodeId(node);
+    if (ctx.selection.has(id))
+        return;
+    ctx.selectionPivotRef.current = id;
+    const next = new Set(ctx.selection);
+    next.add(id);
+    ctx.onSelectionChange(next);
+}

package/dist/tree-view/utils/toggle-all-selections.d.ts

@@ -0,0 +1,2 @@
+import type { TreeViewRootContext } from "../context.js";
+export declare function toggleAllSelections(ctx: TreeViewRootContext): void;

package/dist/tree-view/utils/toggle-all-selections.js

@@ -0,0 +1,9 @@
+import { getAllIds } from "../navigation/get-all-ids.js";
+export function toggleAllSelections(ctx) {
+    const allIds = getAllIds(ctx.panel);
+    const selection = ctx.selection;
+    if (allIds.isSubsetOf(selection))
+        ctx.onSelectionChange(new Set());
+    else
+        ctx.onSelectionChange(allIds);
+}

package/dist/tree-view/utils/toggle-selection.d.ts

@@ -0,0 +1,2 @@
+import type { TreeViewRootContext } from "../context.js";
+export declare function toggleSelection(el: HTMLElement, ctx: TreeViewRootContext): void;

package/dist/tree-view/utils/toggle-selection.js

@@ -0,0 +1,21 @@
+import { getTreeNodeId } from "./get-tree-node-id.js";
+export function toggleSelection(el, ctx) {
+    const id = getTreeNodeId(el);
+    if (ctx.selectionMode === "single") {
+        if (ctx.selection.has(id))
+            ctx.onSelectionChange(new Set());
+        else
+            ctx.onSelectionChange(new Set([id]));
+        return;
+    }
+    const next = new Set(ctx.selection);
+    if (next.has(id)) {
+        next.delete(id);
+        ctx.selectionPivotRef.current = null;
+    }
+    else {
+        next.add(id);
+        ctx.selectionPivotRef.current = id;
+    }
+    ctx.onSelectionChange(next);
+}

package/dist/tree-view/virtualized/force-sync-scrolling.d.ts

@@ -0,0 +1,2 @@
+import { type PropsWithChildren } from "react";
+export declare function ForceSyncScrolling(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/tree-view/virtualized/force-sync-scrolling.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTreeRoot } from "../context.js";
+export function ForceSyncScrolling(props) {
+    const [scroll, setScroll] = useState(0);
+    const ctx = useTreeRoot();
+    useEffect(() => {
+        if (!ctx.panel)
+            return;
+        const controller = new AbortController();
+        ctx.panel.addEventListener("scroll", () => {
+            setScroll(Math.max(0, ctx.panel.scrollTop));
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, [ctx.panel]);
+    return (_jsx("div", { style: {
+            position: "sticky",
+            top: 0,
+            height: 0,
+            width: "100%",
+            transform: `translate3d(0px, -${scroll}px, 0px)`,
+        }, children: props.children }));
+}

package/dist/tree-view/virtualized/get-virtual-tree-paths.d.ts

@@ -0,0 +1,2 @@
+import type { PathBranch, PathLeaf, PathProvidedItem } from "@1771technologies/lytenyte-shared";
+export declare function buildVirtualTreePartial<T extends PathProvidedItem>(items: (PathBranch<T> | PathLeaf<T>)[]): [string[], PathBranch<T> | PathLeaf<T>][];

package/dist/tree-view/virtualized/get-virtual-tree-paths.js

@@ -0,0 +1,14 @@
+export function buildVirtualTreePartial(items) {
+    const paths = items.map((c) => {
+        if (c.kind === "leaf") {
+            const parent = c.parent;
+            if (parent.kind === "root")
+                return ["", c];
+            const path = parent.id.split("#");
+            return [path, c];
+        }
+        const path = c.id.split("#");
+        return [path, c];
+    });
+    return paths;
+}

package/dist/tree-view/virtualized/make-virtual-tree.d.ts

@@ -0,0 +1,31 @@
+import type { PathBranch, PathLeaf, PathProvidedItem } from "@1771technologies/lytenyte-shared";
+import type { CSSProperties } from "react";
+export interface TreeVirtualBranch<T extends PathProvidedItem> {
+    readonly kind: "branch";
+    readonly path: string;
+    readonly branch: PathBranch<T>;
+    readonly children: TreeVirtualItem<T>[];
+    readonly rowIndex: number;
+    readonly attrs: {
+        readonly style: CSSProperties;
+        "data-ln-row-index": number;
+        readonly "aria-posinset": number;
+        readonly "aria-setsize": number;
+    };
+}
+export interface TreeVirtualLeaf<T extends PathProvidedItem> {
+    readonly kind: "leaf";
+    readonly leaf: PathLeaf<T>;
+    readonly rowIndex: number;
+    readonly attrs: {
+        readonly style: CSSProperties;
+        "data-ln-row-index": number;
+        readonly "aria-posinset": number;
+        readonly "aria-setsize": number;
+    };
+}
+export type TreeVirtualItem<T extends PathProvidedItem> = TreeVirtualBranch<T> | TreeVirtualLeaf<T>;
+type Path = string[];
+type PathEntry<T extends PathProvidedItem> = [Path | "", PathBranch<T> | PathLeaf<T>];
+export declare function makeVirtualTree<T extends PathProvidedItem>(paths: PathEntry<T>[], nodeToIndex: Map<PathBranch<T> | PathLeaf<T>, number>, itemHeight: number, nonAdjacentPathTrees: boolean): TreeVirtualItem<T>[];
+export {};

package/dist/tree-view/virtualized/make-virtual-tree.js

@@ -0,0 +1,90 @@
+export function makeVirtualTree(paths, nodeToIndex, itemHeight, nonAdjacentPathTrees) {
+    const root = [];
+    const lookup = new Map();
+    for (const [rawPath, node] of paths) {
+        const path = typeof rawPath === "string" ? [] : rawPath;
+        if (nonAdjacentPathTrees)
+            path.pop();
+        const joinPath = path.join("#");
+        if (node.kind === "branch") {
+            const rowIndex = nodeToIndex.get(node);
+            const parentIndex = node.parent.kind === "root" ? 0 : nodeToIndex.get(node.parent);
+            const posinset = rowIndex - parentIndex + 1;
+            const setSize = node.parent.children.size;
+            const branchNode = {
+                kind: "branch",
+                path: joinPath,
+                branch: node,
+                children: [],
+                rowIndex,
+                attrs: {
+                    style: {
+                        position: "absolute",
+                        height: itemHeight,
+                        width: "100%",
+                        boxSizing: "border-box",
+                        top: 0,
+                        left: 0,
+                        transform: `translate3d(0px, ${(posinset - 1) * itemHeight}px, 0px)`,
+                    },
+                    "data-ln-row-index": rowIndex,
+                    "aria-posinset": posinset,
+                    "aria-setsize": setSize,
+                },
+            };
+            lookup.set(joinPath, branchNode);
+            if (path.length === 0) {
+                root.push(branchNode);
+            }
+            else {
+                const parentPath = path.slice(0, -1).join("#");
+                const parent = lookup.get(parentPath);
+                if (parent) {
+                    parent.children.push(branchNode);
+                }
+                else {
+                    root.push(branchNode); // fallback
+                }
+            }
+        }
+        else {
+            const rowIndex = nodeToIndex.get(node);
+            const parentIndex = node.parent.kind === "root" ? 0 : nodeToIndex.get(node.parent);
+            const posinset = rowIndex - parentIndex + 1;
+            const setSize = node.parent.children.size;
+            const leafNode = {
+                kind: "leaf",
+                leaf: node,
+                rowIndex,
+                attrs: {
+                    style: {
+                        position: "absolute",
+                        height: itemHeight,
+                        boxSizing: "border-box",
+                        width: "100%",
+                        top: 0,
+                        left: 0,
+                        transform: `translate3d(0px, ${(posinset - 1) * itemHeight}px, 0px)`,
+                    },
+                    "data-ln-row-index": rowIndex,
+                    "aria-posinset": posinset,
+                    "aria-setsize": setSize,
+                },
+            };
+            if (path.length === 0) {
+                root.push(leafNode); // top-level leaf
+            }
+            else {
+                const parentPath = path.join("#");
+                const parent = lookup.get(parentPath);
+                if (parent) {
+                    parent.children.push(leafNode);
+                }
+                else {
+                    root.push(leafNode); // fallback
+                }
+            }
+        }
+    }
+    return root;
+}

package/dist/tree-view/virtualized/use-flattened-tree.d.ts

@@ -0,0 +1,9 @@
+import { type PathBranch, type PathLeaf, type PathProvidedItem } from "@1771technologies/lytenyte-shared";
+export declare function useFlattenedTree<T extends PathProvidedItem>(paths: T[], expansions: Record<string, boolean>, expansionDefault: boolean, nonAdjacentPathTrees?: boolean): {
+    flat: (PathBranch<T> | PathLeaf<T>)[];
+    nodeToIndex: Map<PathBranch<T> | PathLeaf<T>, number>;
+    indexToId: Map<number, string>;
+    allIds: Set<string>;
+    idToNode: Map<string, PathBranch<T> | PathLeaf<T>>;
+    root: import("@1771technologies/lytenyte-shared").PathRoot<T>;
+};

package/dist/tree-view/virtualized/use-flattened-tree.js

@@ -0,0 +1,36 @@
+import { computePathTree, } from "@1771technologies/lytenyte-shared";
+import { useMemo } from "react";
+export function useFlattenedTree(paths, expansions, expansionDefault, nonAdjacentPathTrees) {
+    const { flat, nodeToIndex, indexToId, allIds, idToNode, root } = useMemo(() => {
+        const root = computePathTree(paths, undefined, nonAdjacentPathTrees);
+        const flat = [];
+        const nodeToIndex = new Map();
+        const stack = [...root.children.values()];
+        const allIds = new Set();
+        const indexToId = new Map();
+        const idToNode = new Map();
+        let index = 0;
+        while (stack.length) {
+            const item = stack.shift();
+            if (item.kind === "leaf") {
+                flat.push(item);
+            }
+            else {
+                flat.push(item);
+                const isExpanded = expansions[item.id] ?? expansionDefault;
+                if (isExpanded) {
+                    const children = [...item.children.values()];
+                    stack.unshift(...children);
+                }
+            }
+            const id = item.kind === "branch" ? item.data.idOccurrence : item.data.id;
+            allIds.add(id);
+            indexToId.set(index, id);
+            nodeToIndex.set(item, index);
+            idToNode.set(id, item);
+            index++;
+        }
+        return { flat, nodeToIndex, indexToId, allIds, idToNode, root };
+    }, [expansionDefault, expansions, nonAdjacentPathTrees, paths]);
+    return { flat, nodeToIndex, indexToId, allIds, idToNode, root };
+}

package/dist/tree-view/virtualized/use-row-start-and-end.d.ts

@@ -0,0 +1,2 @@
+import type { RectReadOnly } from "@1771technologies/lytenyte-react-hooks";
+export declare function useRowStartAndEnd(panel: HTMLElement | null | undefined, itemHeight: number, bounds: RectReadOnly, size: number): number[];

package/dist/tree-view/virtualized/use-row-start-and-end.js

@@ -0,0 +1,27 @@
+import { clamp } from "@1771technologies/lytenyte-js-utils";
+import { useEffect, useMemo, useState } from "react";
+export function useRowStartAndEnd(panel, itemHeight, bounds, size) {
+    const [startOffset, setStartOffset] = useState(0);
+    const [rowStart, rowEnd] = useMemo(() => {
+        if (!panel)
+            return [0, 0];
+        const start = startOffset;
+        const end = start + Math.ceil(bounds.height / itemHeight) + 1;
+        return [clamp(0, start - 3, size), clamp(0, end + 3, size)];
+    }, [bounds.height, itemHeight, panel, size, startOffset]);
+    useEffect(() => {
+        if (!panel)
+            return;
+        const handleViewChange = () => {
+            const scrollTop = panel.scrollTop;
+            const start = Math.floor(scrollTop / itemHeight);
+            setStartOffset(start);
+        };
+        handleViewChange();
+        panel.addEventListener("scroll", handleViewChange);
+        return () => {
+            panel.removeEventListener("scroll", handleViewChange);
+        };
+    }, [itemHeight, panel]);
+    return [rowStart, rowEnd];
+}

package/dist/tree-view/virtualized/use-virtualized-tree.d.ts

@@ -0,0 +1,22 @@
+import { type PathProvidedItem, type PathRoot } from "@1771technologies/lytenyte-shared";
+import { type JSX } from "react";
+import { type TreeVirtualItem } from "./make-virtual-tree.js";
+export interface VirtualizedTreeViewPathsArgs<T extends PathProvidedItem> {
+    readonly itemHeight: number;
+    readonly expansions: Record<string, boolean>;
+    readonly expansionDefault?: boolean;
+    readonly paths: T[];
+    readonly nonAdjacentPathTrees?: boolean;
+}
+export interface TreeReturn<T extends PathProvidedItem> {
+    readonly ref: (h: HTMLElement | null) => void;
+    readonly virtualTree: TreeVirtualItem<T>[];
+    readonly spacer: JSX.Element;
+    readonly rootProps: {
+        readonly getAllIds: () => Set<string>;
+        readonly getIdsBetweenNodes: (h: HTMLElement, r: HTMLElement) => string[];
+        readonly onFocusChange: (h: HTMLElement | null) => void;
+        readonly root: PathRoot<T>;
+    };
+}
+export declare function useVirtualizedTree<T extends PathProvidedItem>({ itemHeight, expansions, expansionDefault, nonAdjacentPathTrees, paths, }: VirtualizedTreeViewPathsArgs<T>): TreeReturn<T>;

package/dist/tree-view/virtualized/use-virtualized-tree.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "@1771technologies/lytenyte-shared";
+import { useEvent, useMeasure } from "@1771technologies/lytenyte-react-hooks";
+import { useMemo, useState } from "react";
+import { buildVirtualTreePartial } from "./get-virtual-tree-paths.js";
+import { makeVirtualTree } from "./make-virtual-tree.js";
+import { useFlattenedTree } from "./use-flattened-tree.js";
+import { useRowStartAndEnd } from "./use-row-start-and-end.js";
+import { getTreeNodeId } from "../utils/get-tree-node-id.js";
+export function useVirtualizedTree({ itemHeight, expansions, expansionDefault = false, nonAdjacentPathTrees, paths, }) {
+    const [ref, bounds, _, panel] = useMeasure({ scroll: true });
+    const { flat, nodeToIndex, indexToId, allIds, idToNode, root } = useFlattenedTree(paths, expansions, expansionDefault, nonAdjacentPathTrees);
+    const size = useMemo(() => flat.length, [flat.length]);
+    const [rowStart, rowEnd] = useRowStartAndEnd(panel, itemHeight, bounds, size);
+    const [focused, setFocused] = useState(null);
+    const virtualTree = useMemo(() => {
+        const items = flat.slice(rowStart, rowEnd);
+        if (!items.length)
+            return [];
+        // Ensure that the parent nodes of the current tree in view are added as well. This ensure that
+        // the nodes are always visible.
+        while (items[0].parent.kind !== "root") {
+            items.unshift(items[0].parent);
+        }
+        // Ensure that the first node is always in the list of tree nodes so the home key works fine.
+        if (rowStart !== 0 && items[0] !== flat[0])
+            items.unshift(flat[0]);
+        // Ensure the last node is always in the list of nodes present.
+        if (rowEnd !== flat.length) {
+            const endItems = [flat.at(-1)];
+            while (endItems[0].parent.kind !== "root" && endItems[0].parent !== items.at(-1)) {
+                endItems.unshift(endItems[0].parent);
+            }
+            items.push(...endItems);
+        }
+        // Finally we need to ensure the focused node is present. We add the node before and after
+        // the current node - so that the next and previous node are selectable.
+        if (focused && idToNode.has(focused)) {
+            const node = idToNode.get(focused);
+            const index = nodeToIndex.get(node);
+            const nextId = indexToId.get(index + 1);
+            const prevId = indexToId.get(index - 1);
+            const next = idToNode.get(nextId);
+            const prev = idToNode.get(prevId);
+            if (!items.includes(node)) {
+                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index);
+                items.splice(firstIndexGreater, 0, node);
+            }
+            if (next && !items.includes(next)) {
+                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index + 1);
+                items.splice(firstIndexGreater, 0, next);
+            }
+            if (prev && !items.includes(prev)) {
+                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index - 1);
+                items.splice(firstIndexGreater, 0, prev);
+            }
+        }
+        const subtreePaths = buildVirtualTreePartial(items);
+        const subtree = makeVirtualTree(subtreePaths, nodeToIndex, itemHeight, nonAdjacentPathTrees ?? false);
+        return subtree;
+    }, [
+        flat,
+        focused,
+        idToNode,
+        indexToId,
+        itemHeight,
+        nodeToIndex,
+        nonAdjacentPathTrees,
+        rowEnd,
+        rowStart,
+    ]);
+    const spacer = _jsx("div", { style: { height: size * itemHeight, width: 0 } });
+    const onFocusChange = useEvent((el) => {
+        setFocused(el ? getTreeNodeId(el) : null);
+    });
+    const getAllIds = useEvent(() => allIds);
+    const getIdsBetweenNodes = useEvent((left, right) => {
+        const leftIndex = Number.parseInt(left.getAttribute("data-ln-row-index"));
+        const rightIndex = Number.parseInt(right.getAttribute("data-ln-row-index"));
+        const [start, end] = leftIndex < rightIndex ? [leftIndex, rightIndex] : [rightIndex, leftIndex];
+        if (start === end)
+            return [indexToId.get(start)];
+        const ids = [];
+        for (let i = start; i <= end; i++) {
+            ids.push(indexToId.get(i));
+        }
+        return ids;
+    });
+    return {
+        ref,
+        virtualTree,
+        spacer,
+        rootProps: {
+            getAllIds,
+            getIdsBetweenNodes,
+            onFocusChange,
+            root,
+        },
+    };
+}