@adecore/ui 0.16.0-beta.0 → 0.17.0-beta.1

package/dist/file-tree/helpers.d.ts

@@ -0,0 +1,42 @@
+import type { FileTree, FileTreeDirectoryHandle, FileTreeVisibleRow } from '@pierre/trees';
+export interface SortRow {
+    isDirectory: boolean;
+    segments: readonly string[];
+}
+export declare function directoryHandle(model: FileTree, path: string): FileTreeDirectoryHandle | null;
+export declare function pathOfRow(row: FileTreeVisibleRow): string;
+export declare function visibleRows(model: FileTree): FileTreeVisibleRow[];
+export declare function applyExpansion(model: FileTree, collapsed: ReadonlySet<string>, keyOf?: FoldKeyOf): void;
+export declare function resetExpandedPaths(model: FileTree, paths: readonly string[], expanded: ReadonlySet<string>): void;
+export declare function rowPathOf(event: {
+    nativeEvent: Event;
+}): string | null;
+export declare function menuTargetsOf(row: string, selected: readonly string[]): string[];
+export declare function extendsSelection(event: {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+}): boolean;
+export declare function movesFocus(event: {
+    key: string;
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+}): boolean;
+export declare function selectOnly(model: FileTree, path: string | null): void;
+export declare function followFocus(model: FileTree, onMoved?: (path: string) => void): () => void;
+export declare function focusRow(model: FileTree, path: string): boolean;
+export declare function ancestorDirsOf(treePath: string): string[];
+export declare function withoutClosedBranches(open: ReadonlySet<string>, known: ReadonlySet<string>): Set<string>;
+export declare function newlyExpanded(before: ReadonlySet<string>, after: ReadonlySet<string>): string[];
+export declare function mergeExpanded(remembered: ReadonlySet<string>, reported: ReadonlySet<string>, known: ReadonlySet<string>): Set<string>;
+export declare function compareRows(left: SortRow, right: SortRow): number;
+export declare function dirPathOf(rowPath: string): string;
+export type FoldKeyOf = (rowPath: string) => string | null;
+export declare function collapsedPathsOf(rows: readonly FileTreeVisibleRow[], keyOf?: FoldKeyOf): string[];
+export declare function mergeCollapsedPaths(current: string[], rows: readonly FileTreeVisibleRow[], keyOf?: FoldKeyOf): string[];
+export declare function expansionChanges(rows: readonly FileTreeVisibleRow[], collapsed: ReadonlySet<string>, keyOf?: FoldKeyOf): {
+    collapse: string[];
+    expand: string[];
+};

package/dist/file-tree/helpers.js

@@ -0,0 +1,167 @@
+// Expanded folders can reveal more flattened rows; cap custom-key cycles.
+const EXPANSION_PASSES = 32;
+export function directoryHandle(model, path) {
+    const item = model.getItem(path);
+    return item?.isDirectory() ? item : null;
+}
+export function pathOfRow(row) {
+    return row.isFlattened ? (row.flattenedSegments?.findLast((segment) => segment.isTerminal)?.path ?? row.path) : row.path;
+}
+export function visibleRows(model) {
+    return model.getVisibleRows(0, model.getVisibleCount()).map((row) => ({ ...row, path: pathOfRow(row) }));
+}
+export function applyExpansion(model, collapsed, keyOf) {
+    for (let pass = 0; pass < EXPANSION_PASSES; pass++) {
+        const { collapse, expand } = expansionChanges(visibleRows(model), collapsed, keyOf);
+        if (collapse.length === 0 && expand.length === 0) {
+            return;
+        }
+        for (const path of collapse) {
+            directoryHandle(model, path)?.collapse();
+        }
+        for (const path of expand) {
+            directoryHandle(model, path)?.expand();
+        }
+    }
+}
+export function resetExpandedPaths(model, paths, expanded) {
+    model.resetPaths(paths, { initialExpandedPaths: [...expanded] });
+    // @pierre/trees beta.6 restores expansion with its default sort, so custom sorting needs a second pass.
+    for (const path of expanded) {
+        directoryHandle(model, path)?.expand();
+    }
+}
+export function rowPathOf(event) {
+    for (const node of event.nativeEvent.composedPath()) {
+        const path = node instanceof HTMLElement ? node.dataset.itemPath : undefined;
+        if (path) {
+            return path;
+        }
+    }
+    return null;
+}
+export function menuTargetsOf(row, selected) {
+    return selected.includes(row) && selected.length > 1 ? [...selected] : [row];
+}
+export function extendsSelection(event) {
+    return event.shiftKey || event.metaKey || event.ctrlKey;
+}
+const FOCUS_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
+export function movesFocus(event) {
+    return FOCUS_KEYS.has(event.key) && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey;
+}
+export function selectOnly(model, path) {
+    for (const selected of model.getSelectedPaths()) {
+        if (selected !== path) {
+            model.getItem(selected)?.deselect();
+        }
+    }
+    const item = path === null ? null : model.getItem(path);
+    if (item && !item.isSelected()) {
+        item.select();
+    }
+}
+export function followFocus(model, onMoved) {
+    const from = model.getFocusedPath();
+    const timer = window.setTimeout(() => {
+        const path = model.getFocusedPath();
+        selectOnly(model, path);
+        if (path !== null && path !== from) {
+            onMoved?.(path);
+        }
+    }, 0);
+    return () => window.clearTimeout(timer);
+}
+export function focusRow(model, path) {
+    const selector = `[data-type="item"][data-item-path="${CSS.escape(path)}"]:not([data-item-parked="true"])`;
+    const row = model.getFileTreeContainer()?.shadowRoot?.querySelector(selector) ?? null;
+    row?.focus();
+    return row !== null;
+}
+export function ancestorDirsOf(treePath) {
+    const segments = treePath.split('/').filter((segment) => segment !== '');
+    segments.pop();
+    const dirs = [];
+    let prefix = '';
+    for (const segment of segments) {
+        prefix = `${prefix}${segment}/`;
+        dirs.push(prefix);
+    }
+    return dirs;
+}
+export function withoutClosedBranches(open, known) {
+    return new Set([...open].filter((path) => ancestorDirsOf(path).every((dir) => open.has(dir) || !known.has(dir))));
+}
+export function newlyExpanded(before, after) {
+    return [...after].filter((path) => !before.has(path));
+}
+export function mergeExpanded(remembered, reported, known) {
+    const merged = new Set(reported);
+    for (const path of remembered) {
+        if (!known.has(path)) {
+            merged.add(path);
+        }
+    }
+    return merged;
+}
+export function compareRows(left, right) {
+    const shared = Math.min(left.segments.length, right.segments.length);
+    for (let i = 0; i < shared; i++) {
+        const leftSegment = left.segments[i];
+        const rightSegment = right.segments[i];
+        if (leftSegment === rightSegment) {
+            continue;
+        }
+        const leftIsDirectory = left.isDirectory || i < left.segments.length - 1;
+        const rightIsDirectory = right.isDirectory || i < right.segments.length - 1;
+        if (leftIsDirectory !== rightIsDirectory) {
+            return leftIsDirectory ? -1 : 1;
+        }
+        // Case is not a reason to split two names apart; the raw compare only breaks a tie.
+        return leftSegment.localeCompare(rightSegment, undefined, { numeric: true, sensitivity: 'base' }) || leftSegment.localeCompare(rightSegment);
+    }
+    // One path is the head of the other, so the shorter one is the directory the longer one sits in.
+    return left.segments.length - right.segments.length;
+}
+export function dirPathOf(rowPath) {
+    return rowPath.endsWith('/') ? rowPath.slice(0, -1) : rowPath;
+}
+function plainKey(rowPath) {
+    return dirPathOf(rowPath);
+}
+export function collapsedPathsOf(rows, keyOf = plainKey) {
+    return rows.flatMap((row) => {
+        const key = row.kind === 'directory' && !row.isExpanded ? keyOf(row.path) : null;
+        return key === null ? [] : [key];
+    });
+}
+export function mergeCollapsedPaths(current, rows, keyOf = plainKey) {
+    const known = new Set(rows.flatMap((row) => (row.kind === 'directory' ? [keyOf(row.path)] : [])));
+    const folded = new Set(collapsedPathsOf(rows, keyOf));
+    const next = current.filter((dir) => !known.has(dir) || folded.has(dir));
+    const existing = new Set(current);
+    for (const dir of folded) {
+        if (!existing.has(dir)) {
+            next.push(dir);
+        }
+    }
+    // Selection also notifies subscribers; unchanged folds must not restart the shared-state cycle.
+    return next.length === current.length && next.every((dir, index) => dir === current[index]) ? current : next;
+}
+export function expansionChanges(rows, collapsed, keyOf = plainKey) {
+    const changes = { collapse: [], expand: [] };
+    for (const row of rows) {
+        const key = row.kind === 'directory' ? keyOf(row.path) : null;
+        if (key === null) {
+            continue;
+        }
+        const folded = collapsed.has(key);
+        if (folded && row.isExpanded) {
+            changes.collapse.push(row.path);
+        }
+        if (!folded && !row.isExpanded) {
+            changes.expand.push(row.path);
+        }
+    }
+    return changes;
+}

package/dist/file-tree/index.parts.d.ts

@@ -0,0 +1,3 @@
+export { FileTreeRoot as Root } from './parts.tsx';
+export { TreeCheckbox as Checkbox, TreeControl as Control, TreeDecoration as Decoration } from '../tree/parts.tsx';
+export { ancestorDirsOf, applyExpansion, collapsedPathsOf, compareRows, directoryHandle, dirPathOf, expansionChanges, extendsSelection, focusRow, followFocus, menuTargetsOf, mergeCollapsedPaths, mergeExpanded, movesFocus, newlyExpanded, pathOfRow, resetExpandedPaths, rowPathOf, selectOnly, visibleRows, withoutClosedBranches } from './helpers.ts';

package/dist/file-tree/index.parts.js

@@ -0,0 +1,3 @@
+export { FileTreeRoot as Root } from './parts.js';
+export { TreeCheckbox as Checkbox, TreeControl as Control, TreeDecoration as Decoration } from '../tree/parts.js';
+export { ancestorDirsOf, applyExpansion, collapsedPathsOf, compareRows, directoryHandle, dirPathOf, expansionChanges, extendsSelection, focusRow, followFocus, menuTargetsOf, mergeCollapsedPaths, mergeExpanded, movesFocus, newlyExpanded, pathOfRow, resetExpandedPaths, rowPathOf, selectOnly, visibleRows, withoutClosedBranches } from './helpers.js';

package/dist/file-tree/parts.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
+    model: FileTree;
+    label?: string;
+    resetKey?: string;
+    selectionFollowsFocus?: boolean;
+    onActivate?(path: string): void;
+    onFocusMove?(path: string): void;
+    onLoadChildren?(path: string): void;
+    onRowContextMenu?(path: string, targets: readonly string[], event: MouseEvent): void;
+    onRowDragStart?(path: string, targets: readonly string[], event: DragEvent): void;
+    onExpandedPathsChange?(paths: readonly string[]): void;
+    renderControl?(row: FileTreeVisibleRow): ReactNode;
+    renderDecoration?(row: FileTreeVisibleRow): ReactNode;
+    treeProps?: Omit<PierreProps, 'model'>;
+};
+export declare function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, treeProps, render, className, ref, children, onClick, onKeyDownCapture, ...props }: FileTreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/file-tree/parts.js

@@ -0,0 +1,150 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useRender } from '@base-ui-components/react/use-render';
+import { FileTree as PierreFileTree } from '@pierre/trees/react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { mergeRefs } from '../merge-refs.js';
+import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.js';
+import { useFileTreeShift } from './use-file-tree-shift.js';
+import { useFileTreeSlots } from './use-slots.js';
+function inSlot(event) {
+    return event.nativeEvent.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute('data-tree-slot'));
+}
+export function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus = true, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, treeProps, render, className, ref, children, onClick, onKeyDownCapture, ...props }) {
+    const { t } = useTranslation('ui');
+    const [frame, setFrame] = useState(null);
+    const { attach, bar } = useFileTreeShift(model, resetKey);
+    const frameRef = useCallback((node) => {
+        setFrame(node);
+        attach(node);
+        mergeRefs(ref)(node);
+    }, [ref, attach]);
+    const slots = useFileTreeSlots(model, frame, label ?? t('tree.label'));
+    const latestLoads = useRef({ onLoadChildren, onExpandedPathsChange });
+    useLayoutEffect(() => {
+        latestLoads.current = { onLoadChildren, onExpandedPathsChange };
+    }, [onLoadChildren, onExpandedPathsChange]);
+    const cancelFocus = useRef(undefined);
+    useEffect(() => () => cancelFocus.current?.(), [model]);
+    useEffect(() => {
+        let previous = new Set();
+        let disposed = false;
+        let pending = false;
+        const report = () => {
+            pending = false;
+            if (disposed) {
+                return;
+            }
+            const rows = visibleRows(model).filter((row) => row.kind === 'directory');
+            const known = new Set(rows.map((row) => row.path));
+            const expanded = new Set([...previous].filter((path) => !known.has(path)));
+            for (const row of rows) {
+                if (row.isExpanded) {
+                    expanded.add(row.path);
+                }
+            }
+            const opened = [...expanded].filter((path) => !previous.has(path));
+            const changed = opened.length > 0 || [...previous].some((path) => !expanded.has(path));
+            previous = expanded;
+            if (changed) {
+                latestLoads.current.onExpandedPathsChange?.([...expanded]);
+            }
+            for (const path of opened) {
+                latestLoads.current.onLoadChildren?.(path);
+            }
+        };
+        const schedule = () => {
+            if (!pending) {
+                pending = true;
+                queueMicrotask(report);
+            }
+        };
+        const unsubscribe = model.subscribe(schedule);
+        report();
+        return () => {
+            disposed = true;
+            unsubscribe();
+        };
+    }, [model]);
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const onClickRow = (event) => {
+            if (event.defaultPrevented || inSlot({ nativeEvent: event }) || extendsSelection(event)) {
+                return;
+            }
+            const path = rowPathOf({ nativeEvent: event });
+            if (path !== null && directoryHandle(model, path) === null) {
+                onActivate?.(path);
+            }
+        };
+        const onKey = (event) => {
+            if (event.defaultPrevented || inSlot({ nativeEvent: event })) {
+                return;
+            }
+            if (movesFocus(event) && selectionFollowsFocus) {
+                cancelFocus.current?.();
+                // beta.6 stops the key in its own handler; selection must follow after that handler moves focus.
+                cancelFocus.current = followFocus(model, onFocusMove);
+            }
+            else if (event.key === 'Enter' && !event.altKey && !event.metaKey && !event.ctrlKey) {
+                const path = model.getFocusedPath();
+                if (path === null) {
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                const directory = directoryHandle(model, path);
+                if (directory) {
+                    directory.toggle();
+                }
+                else {
+                    onActivate?.(path);
+                }
+            }
+        };
+        const onContext = (event) => {
+            if (inSlot({ nativeEvent: event })) {
+                return;
+            }
+            const path = rowPathOf({ nativeEvent: event });
+            if (path !== null) {
+                onRowContextMenu?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
+            }
+        };
+        const onDrag = (event) => {
+            if (inSlot({ nativeEvent: event })) {
+                return;
+            }
+            const path = rowPathOf({ nativeEvent: event });
+            if (path !== null) {
+                onRowDragStart?.(path, menuTargetsOf(path, model.getSelectedPaths()), event);
+            }
+        };
+        frame.addEventListener('click', onClickRow);
+        frame.addEventListener('keydown', onKey, true);
+        frame.addEventListener('contextmenu', onContext);
+        frame.addEventListener('dragstart', onDrag);
+        return () => {
+            frame.removeEventListener('click', onClickRow);
+            frame.removeEventListener('keydown', onKey, true);
+            frame.removeEventListener('contextmenu', onContext);
+            frame.removeEventListener('dragstart', onDrag);
+        };
+    }, [frame, model, selectionFollowsFocus, onActivate, onFocusMove, onRowContextMenu, onRowDragStart]);
+    return useRender({
+        render,
+        ref: frameRef,
+        defaultTagName: 'div',
+        props: {
+            ...props,
+            className: clsx('adecore-tree adecore-file-tree', className),
+            onClick,
+            onKeyDownCapture,
+            children: (_jsxs(_Fragment, { children: [_jsx(PierreFileTree, { ...treeProps, model: model, className: clsx('adecore-file-tree-host', treeProps?.className) }), slots.map(({ row, control, decoration }) => (_jsxs("span", { style: { display: 'contents' }, children: [createPortal(renderControl?.(row), control), createPortal(renderDecoration?.(row), decoration)] }, control.slot))), children, bar] }))
+        }
+    });
+}

package/dist/file-tree/shift.d.ts

@@ -0,0 +1,15 @@
+export declare const SHIFT_PROPERTY = "--adecore-tree-shift";
+export declare function clampShift(value: number, max: number): number;
+export declare function shiftNeed(textRight: number, limit: number, shift: number): number;
+export declare function maxShift(needs: readonly number[]): number;
+export interface WheelStep {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly deltaMode: number;
+    readonly shiftKey: boolean;
+}
+export declare function sidewaysDelta(step: WheelStep, pageWidth: number): number;
+export declare function shiftThumb(shift: number, max: number, track: number, view: number): {
+    left: number;
+    width: number;
+};

package/dist/file-tree/shift.js

@@ -0,0 +1,35 @@
+// SPDX-License-Identifier: FSL-1.1-MIT
+export const SHIFT_PROPERTY = '--adecore-tree-shift';
+const LINE_WIDTH = 16;
+const MIN_THUMB = 24;
+export function clampShift(value, max) {
+    return Math.min(Math.max(value, 0), Math.max(max, 0));
+}
+export function shiftNeed(textRight, limit, shift) {
+    return Math.max(0, Math.ceil(textRight + shift - limit));
+}
+export function maxShift(needs) {
+    return needs.reduce((max, need) => Math.max(max, need), 0);
+}
+export function sidewaysDelta(step, pageWidth) {
+    const swapped = step.shiftKey && step.deltaX === 0;
+    const sideways = swapped ? step.deltaY : step.deltaX;
+    const across = swapped ? 0 : step.deltaY;
+    if (sideways === 0 || Math.abs(sideways) <= Math.abs(across)) {
+        return 0;
+    }
+    if (step.deltaMode === 1) {
+        return sideways * LINE_WIDTH;
+    }
+    if (step.deltaMode === 2) {
+        return sideways * pageWidth;
+    }
+    return sideways;
+}
+export function shiftThumb(shift, max, track, view) {
+    if (max <= 0 || track <= 0) {
+        return { left: 0, width: Math.max(track, 0) };
+    }
+    const width = Math.min(track, Math.max(MIN_THUMB, Math.round((track * view) / (view + max))));
+    return { left: Math.round(((track - width) * clampShift(shift, max)) / max), width };
+}

package/dist/file-tree/style.d.ts

@@ -0,0 +1 @@
+export declare const FILE_TREE_CSS: string;

package/dist/file-tree/style.js

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: FSL-1.1-MIT
+import { treeRowStyle } from '../tree/style.js';
+// beta.6 splits the extension into nested grids; flatten them to truncate the end of the entire name.
+export const FILE_TREE_CSS = `
+    ${treeRowStyle('[data-type="item"]', 'data-item-selected')}
+    [data-type="item"] { overflow: clip; padding-inline: 4px 8px; --trees-item-row-gap: var(--tree-row-gap, 6px); }
+    [data-type="item"]::after {
+        content: "";
+        flex: none;
+        order: -100;
+        margin-inline: calc(var(--adecore-tree-shift, 0px) * -1) calc(var(--trees-item-row-gap) * -1);
+    }
+    [data-icon-name="file-tree-icon-chevron"] { width: 12px; height: 12px; }
+    [data-item-section="spacing"] { padding: 0; margin-inline-end: -6px; }
+    [data-item-section="spacing-item"] { position: relative; flex: none; width: 16px; margin: 0; border: 0; background: transparent; opacity: 1; transform: none; transition: none; }
+    [data-item-section="spacing-item"] + [data-item-section="spacing-item"] { margin: 0; }
+    [data-item-section="spacing-item"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 7px; width: 1px; background: var(--border); }
+    [data-item-section="icon"] { width: 16px; margin-inline-start: var(--adecore-tree-control-space, 0px); }
+    [data-item-section="content"] { white-space: nowrap; max-width: none; flex: 1 1 auto; margin-inline-end: var(--adecore-tree-decoration-space, 0px); }
+    [data-item-section="content"] :where([data-truncate-group-container], [data-truncate-group-container] div, [data-truncate-container], [data-truncate-container] div) { display: inline; }
+    [data-item-section="content"] [data-truncate-content] { direction: ltr; }
+    [data-item-section="content"] :where([data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]) { display: none; }
+    [data-tree-port] { position: absolute; z-index: 4; display: flex; align-items: center; height: 25px; pointer-events: none; }
+    [data-tree-port] > slot { pointer-events: auto; }
+`;

package/dist/file-tree/use-file-tree-shift.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+import type { FileTree } from '@pierre/trees';
+export declare function useFileTreeShift(model: FileTree, resetKey?: string): {
+    attach(node: HTMLElement | null): void;
+    bar: ReactElement;
+};

package/dist/file-tree/use-file-tree-shift.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// SPDX-License-Identifier: FSL-1.1-MIT
+import { useEffect, useState } from 'react';
+import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.js';
+const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
+const HIDE_AFTER = 900;
+const NEAR_BOTTOM = 16;
+function boxesOf(element) {
+    return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
+}
+function limitOf(row, content, gap) {
+    const start = content.getBoundingClientRect().left;
+    let limit = Number.POSITIVE_INFINITY;
+    for (const part of [...row.children].filter((child) => child !== content).flatMap((child) => boxesOf(child))) {
+        const rect = part.getBoundingClientRect();
+        if (rect.width === 0 || rect.left < start) {
+            continue;
+        }
+        if (part.childNodes.length === 0 && Number.parseFloat(getComputedStyle(part).flexGrow) > 0) {
+            continue;
+        }
+        limit = Math.min(limit, rect.left - gap);
+    }
+    if (limit !== Number.POSITIVE_INFINITY) {
+        return limit - (Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0);
+    }
+    return (row.getBoundingClientRect().right -
+        Number.parseFloat(getComputedStyle(row).paddingInlineEnd) -
+        (Number.parseFloat(getComputedStyle(content).marginInlineEnd) || 0));
+}
+function needOf(row, shift, gap, range) {
+    const content = row.querySelector(':scope > [data-item-section="content"]');
+    if (content === null || row.getBoundingClientRect().width === 0) {
+        return null;
+    }
+    range.selectNodeContents(content);
+    return shiftNeed(range.getBoundingClientRect().right, limitOf(row, content, gap), shift);
+}
+export function useFileTreeShift(model, resetKey) {
+    const [frame, setFrame] = useState(null);
+    const [track, setTrack] = useState(null);
+    const [thumb, setThumb] = useState(null);
+    useEffect(() => {
+        if (frame === null || track === null || thumb === null) {
+            return;
+        }
+        const range = document.createRange();
+        let root = null;
+        let exact = 0;
+        let drawn = 0;
+        let max = 0;
+        let pending = 0;
+        let hideTimer = 0;
+        let scrolling = false;
+        let near = false;
+        const draw = () => {
+            const shift = Math.round(exact);
+            if (shift !== drawn) {
+                drawn = shift;
+                frame.style.setProperty(SHIFT_PROPERTY, `${shift}px`);
+            }
+            const { left, width } = shiftThumb(shift, max, track.clientWidth, frame.clientWidth);
+            thumb.style.left = `${left}px`;
+            thumb.style.width = `${width}px`;
+            track.toggleAttribute('data-visible', max > 0 && (scrolling || near));
+        };
+        const measure = () => {
+            pending = 0;
+            if (root === null) {
+                root = model.getFileTreeContainer()?.shadowRoot ?? null;
+                if (root === null) {
+                    return;
+                }
+                rows.observe(root, { childList: true, subtree: true, characterData: true });
+            }
+            const drawnRows = [...root.querySelectorAll(ROWS)];
+            const gap = drawnRows.length === 0 ? 0 : Number.parseFloat(getComputedStyle(drawnRows[0]).columnGap) || 0;
+            max = maxShift(drawnRows.map((row) => needOf(row, drawn, gap, range)).filter((need) => need !== null));
+            exact = clampShift(exact, max);
+            draw();
+        };
+        const schedule = () => {
+            if (pending === 0) {
+                pending = requestAnimationFrame(measure);
+            }
+        };
+        const rows = new MutationObserver(schedule);
+        const mounts = new MutationObserver(schedule);
+        mounts.observe(frame, { childList: true, subtree: true });
+        const sizes = new ResizeObserver(schedule);
+        sizes.observe(frame);
+        const onWheel = (event) => {
+            const delta = sidewaysDelta(event, frame.clientWidth);
+            if (delta === 0 || max === 0) {
+                return;
+            }
+            scrolling = true;
+            window.clearTimeout(hideTimer);
+            hideTimer = window.setTimeout(() => {
+                scrolling = false;
+                draw();
+            }, HIDE_AFTER);
+            const next = clampShift(exact + delta, max);
+            if (next !== exact) {
+                event.preventDefault();
+                exact = next;
+            }
+            draw();
+        };
+        const onPointerMove = (event) => {
+            const bottom = track.getBoundingClientRect().bottom;
+            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
+            if (isNear !== near) {
+                near = isNear;
+                draw();
+            }
+        };
+        const onPointerLeave = () => {
+            if (near) {
+                near = false;
+                draw();
+            }
+        };
+        frame.addEventListener('wheel', onWheel, { passive: false });
+        frame.addEventListener('pointermove', onPointerMove);
+        frame.addEventListener('pointerleave', onPointerLeave);
+        schedule();
+        return () => {
+            frame.removeEventListener('wheel', onWheel);
+            frame.removeEventListener('pointermove', onPointerMove);
+            frame.removeEventListener('pointerleave', onPointerLeave);
+            rows.disconnect();
+            mounts.disconnect();
+            sizes.disconnect();
+            cancelAnimationFrame(pending);
+            window.clearTimeout(hideTimer);
+            frame.style.removeProperty(SHIFT_PROPERTY);
+            track.removeAttribute('data-visible');
+        };
+    }, [frame, track, thumb, model, resetKey]);
+    const bar = (_jsx("div", { "aria-hidden": true, className: "adecore-tree-shift", children: _jsx("div", { ref: setTrack, className: "adecore-tree-shift-track", children: _jsx("div", { ref: setThumb, className: "adecore-tree-shift-thumb" }) }) }));
+    return { attach: setFrame, bar };
+}

package/dist/file-tree/use-file-tree.d.ts

@@ -0,0 +1,5 @@
+import type { FileTreeOptions as PierreOptions } from '@pierre/trees';
+type WithoutSizing<Options> = Options extends unknown ? Omit<Options, 'itemHeight' | 'density'> : never;
+export type FileTreeOptions = WithoutSizing<PierreOptions>;
+export declare function useFileTree(options: FileTreeOptions): import("@pierre/trees/react").UseFileTreeResult;
+export {};

package/dist/file-tree/use-file-tree.js

@@ -0,0 +1,26 @@
+import { useFileTree as usePierreFileTree } from '@pierre/trees/react';
+import { useLayoutEffect, useRef } from 'react';
+import { FILE_TREE_ICONS } from '../file-icon.js';
+import { TREE_ROW_HEIGHT } from '../tree/style.js';
+import { compareRows } from './helpers.js';
+import { FILE_TREE_CSS } from './style.js';
+// Model options are initial; paths and status can subsequently change through the model's mutation methods.
+export function useFileTree(options) {
+    const latest = useRef(options.onSelectionChange);
+    useLayoutEffect(() => {
+        latest.current = options.onSelectionChange;
+    }, [options.onSelectionChange]);
+    return usePierreFileTree({
+        composition: { contextMenu: { enabled: false } },
+        icons: FILE_TREE_ICONS,
+        initialExpansion: 'closed',
+        search: false,
+        stickyFolders: false,
+        sort: compareRows,
+        ...options,
+        density: 'compact',
+        itemHeight: TREE_ROW_HEIGHT,
+        onSelectionChange: (paths) => latest.current?.(paths),
+        unsafeCSS: `${FILE_TREE_CSS}\n${options.unsafeCSS ?? ''}`
+    });
+}

package/dist/file-tree/use-slots.d.ts

@@ -0,0 +1,7 @@
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+export interface RowSlot {
+    row: FileTreeVisibleRow;
+    control: HTMLElement;
+    decoration: HTMLElement;
+}
+export declare function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string): RowSlot[];