@adecore/ui 0.16.0 → 0.17.0-beta.2

package/LICENSE

@@ -1,13 +1,102 @@
-MIT License
+# Functional Source License, Version 1.1, MIT Future License
 
-Copyright (c) 2026 Bas Milius
+## Abbreviation
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 - present Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.

package/README.md

@@ -80,4 +80,4 @@ Nothing else is public. No module does work on import, so a bundler keeps only w
 
 ## License
 
-MIT
+FSL-1.1-MIT, see [LICENSE](./LICENSE).

package/dist/Select.js

@@ -5,6 +5,7 @@ import { ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.js';
 import { MENU_LABEL, MenuCheck } from './menu/parts.js';
+import { renderPositioner } from './popup-layer.js';
 const isGroup = (entry) => Array.isArray(entry.items);
 const TRIGGER_SIZE = {
     sm: 'h-7 gap-1 px-2',
@@ -28,7 +29,7 @@ export function Select({ value, onValueChange, items, label, placeholder, size =
     const groups = items.length > 0 && isGroup(items[0]) ? items : null;
     const flat = groups ? groups.flatMap((group) => group.items) : items;
     const selected = flat.find((item) => item.value === value) ?? null;
-    return (_jsxs(BaseSelect.Root, { items: flat.map((item) => ({ value: item.value, label: item.label })), value: value, disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsxs(BaseSelect.Trigger, { ref: ref, "aria-label": label, className: clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className), children: [selected?.icon, _jsx(BaseSelect.Value, { className: clsx(truncateValue && 'truncate'), children: () => selected?.label ?? placeholder ?? t('action.select') }), _jsx(BaseSelect.Icon, { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "popup-positioner", side: "bottom", align: align, sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu-popup", children: _jsx(BaseSelect.List, { className: "max-h-80 overflow-auto", children: groups
+    return (_jsxs(BaseSelect.Root, { items: flat.map((item) => ({ value: item.value, label: item.label })), value: value, disabled: disabled, onValueChange: (next) => onValueChange(next), children: [_jsxs(BaseSelect.Trigger, { ref: ref, "aria-label": label, className: clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className), children: [selected?.icon, _jsx(BaseSelect.Value, { className: clsx(truncateValue && 'truncate'), children: () => selected?.label ?? placeholder ?? t('action.select') }), _jsx(BaseSelect.Icon, { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "menu-popup", children: _jsx(BaseSelect.List, { className: "max-h-80 overflow-auto", children: groups
                                 ? groups.map((group) => (_jsxs(BaseSelect.Group, { children: [_jsx(BaseSelect.GroupLabel, { className: MENU_LABEL, children: group.label }), group.items.map((item) => (_jsx(Row, { item: item, picked: item.value === value }, item.value)))] }, group.label)))
                                 : flat.map((item) => _jsx(Row, { item: item, picked: item.value === value }, item.value)) }) }) }) })] }));
 }

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,34 @@
+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,24 @@
+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;
+};