@adecore/ui 0.16.0 → 0.17.0-beta.2

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

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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[];

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

@@ -0,0 +1,171 @@
+import { useEffect, useId, useState } from 'react';
+import { pathOfRow, visibleRows } from './helpers.js';
+import { FILE_TREE_CSS } from './style.js';
+// beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
+export function useFileTreeSlots(model, frame, label) {
+    const prefix = useId().replaceAll(':', '');
+    const [slots, setSlots] = useState([]);
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const ports = new Map();
+        let shadow = null;
+        let style = null;
+        let serial = 0;
+        let disposed = false;
+        let pending = false;
+        let snapshot = null;
+        const position = () => {
+            for (const port of ports.values()) {
+                const row = port.rowElement;
+                const content = row.querySelector('[data-item-section="content"]');
+                const icon = row.querySelector('[data-item-section="icon"]');
+                const control = port.lightControl;
+                const decoration = port.lightDecoration;
+                const controlSpace = control.childNodes.length > 0 ? Math.ceil(control.getBoundingClientRect().width) + 6 : 0;
+                const decorationSpace = decoration.childNodes.length > 0 ? Math.ceil(decoration.getBoundingClientRect().width) + 6 : 0;
+                row.style.setProperty('--adecore-tree-control-space', `${controlSpace}px`);
+                row.style.setProperty('--adecore-tree-decoration-space', `${decorationSpace}px`);
+                port.control.style.top = `${row.offsetTop}px`;
+                port.control.style.left = `${row.offsetLeft + (icon?.offsetLeft ?? 4) - controlSpace}px`;
+                port.decoration.style.top = `${row.offsetTop}px`;
+                port.decoration.style.left = `${row.offsetLeft + (content === null ? row.offsetWidth - decorationSpace - 2 : content.offsetLeft + content.offsetWidth + 6)}px`;
+            }
+        };
+        const resize = new ResizeObserver(position);
+        const scan = () => {
+            pending = false;
+            if (disposed) {
+                return;
+            }
+            const current = model.getFileTreeContainer();
+            if (!current?.shadowRoot) {
+                return;
+            }
+            if (shadow !== current.shadowRoot) {
+                shadow = current.shadowRoot;
+                style = document.createElement('style');
+                style.dataset.adecoreTreeStyle = 'true';
+                style.textContent = FILE_TREE_CSS;
+                shadow.append(style);
+                changes.observe(shadow, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['data-item-path', 'aria-selected', 'aria-expanded']
+                });
+                changes.observe(current, { childList: true, subtree: true });
+                resize.observe(current);
+            }
+            shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
+            const rows = visibleRows(model);
+            const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
+            const elements = [
+                ...shadow.querySelectorAll('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')
+            ];
+            const live = new Set(elements);
+            for (const [element, port] of ports) {
+                if (!live.has(element)) {
+                    port.control.remove();
+                    port.decoration.remove();
+                    resize.unobserve(port.lightControl);
+                    resize.unobserve(port.lightDecoration);
+                    port.lightControl.remove();
+                    port.lightDecoration.remove();
+                    ports.delete(element);
+                }
+            }
+            const next = [];
+            for (const element of elements) {
+                const path = element.dataset.itemPath;
+                const row = path === undefined ? undefined : byPath.get(path);
+                if (row === undefined) {
+                    continue;
+                }
+                element.dataset.interactive = 'true';
+                element.dataset.joinedStart = String(row.isSelected && rows[row.index - 1]?.isSelected === true);
+                element.dataset.joinedEnd = String(row.isSelected && rows[row.index + 1]?.isSelected === true);
+                let port = ports.get(element);
+                if (port === undefined) {
+                    const makePort = (kind) => {
+                        const container = document.createElement('span');
+                        container.dataset.treePort = kind;
+                        const slot = document.createElement('slot');
+                        slot.name = `${prefix}-${kind}-${serial}`;
+                        container.append(slot);
+                        element.parentElement?.append(container);
+                        const target = document.createElement('span');
+                        target.slot = slot.name;
+                        target.dataset.treeSlot = kind;
+                        target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+                        // React delegates to this portal target before the event reaches the engine's shadow tree.
+                        for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
+                            target.addEventListener(type, (event) => event.stopPropagation());
+                        }
+                        current.append(target);
+                        resize.observe(target);
+                        return { container, target };
+                    };
+                    serial++;
+                    const control = makePort('control');
+                    const decoration = makePort('decoration');
+                    port = {
+                        rowElement: element,
+                        control: control.container,
+                        decoration: decoration.container,
+                        lightControl: control.target,
+                        lightDecoration: decoration.target
+                    };
+                    ports.set(element, port);
+                }
+                if (port.control.dataset.itemPath !== row.path) {
+                    port.control.dataset.itemPath = row.path;
+                }
+                if (port.decoration.dataset.itemPath !== row.path) {
+                    port.decoration.dataset.itemPath = row.path;
+                }
+                port.lightControl.dataset.itemPath = row.path;
+                port.lightDecoration.dataset.itemPath = row.path;
+                next.push({ row, control: port.lightControl, decoration: port.lightDecoration });
+            }
+            const key = next
+                .map(({ row, control }) => `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}`)
+                .join('|');
+            if (snapshot !== key) {
+                snapshot = key;
+                setSlots(next);
+            }
+            position();
+        };
+        const schedule = () => {
+            if (!pending && !disposed) {
+                pending = true;
+                queueMicrotask(scan);
+            }
+        };
+        const shifts = new MutationObserver(position);
+        shifts.observe(frame, { attributes: true, attributeFilter: ['style'] });
+        const changes = new MutationObserver(schedule);
+        changes.observe(frame, { childList: true, subtree: true });
+        const unsubscribe = model.subscribe(schedule);
+        schedule();
+        return () => {
+            disposed = true;
+            unsubscribe();
+            changes.disconnect();
+            shifts.disconnect();
+            resize.disconnect();
+            style?.remove();
+            for (const port of ports.values()) {
+                port.rowElement.style.removeProperty('--adecore-tree-control-space');
+                port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
+                port.control.remove();
+                port.decoration.remove();
+                port.lightControl.remove();
+                port.lightDecoration.remove();
+            }
+        };
+    }, [frame, model, label, prefix]);
+    return slots;
+}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * as ContextMenu from './context-menu/index.parts.ts';
+export * as FileTree from './file-tree/index.parts.ts';
+export * as Tree from './tree/index.parts.ts';
 export * as Dialog from './dialog/index.parts.ts';
 export * as KeyValueList from './key-value-list/index.parts.ts';
 export * as Menu from './menu/index.parts.ts';
@@ -76,3 +78,8 @@ export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
 export { ZOOM_PRESETS } from './zoom.ts';
+export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
+export type { FileTreeRootProps } from './file-tree/parts.tsx';
+export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
+export type { FoldKeyOf, SortRow } from './file-tree/helpers.ts';
+export type { TreeRootProps, TreeRowProps, TreeChevronProps, TreeChevronSlotProps, TreeLabelProps, TreeDecorationProps, TreeControlProps, TreeCheckboxProps } from './tree/parts.tsx';

package/dist/index.js

@@ -3,6 +3,8 @@
  * `exports.test.ts` turns any change to this list into a diff someone has to accept.
  */
 export * as ContextMenu from './context-menu/index.parts.js';
+export * as FileTree from './file-tree/index.parts.js';
+export * as Tree from './tree/index.parts.js';
 export * as Dialog from './dialog/index.parts.js';
 export * as KeyValueList from './key-value-list/index.parts.js';
 export * as Menu from './menu/index.parts.js';
@@ -74,3 +76,4 @@ export { useContentSize } from './useContentSize.js';
 export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
 export { ZOOM_PRESETS } from './zoom.js';
+export { useFileTree } from './file-tree/use-file-tree.js';

package/dist/locales/en.json

@@ -59,5 +59,10 @@
     "tabs": {
         "more": "More",
         "close": "Close tab"
+    },
+    "tree": {
+        "label": "Files",
+        "expand": "Expand",
+        "collapse": "Collapse"
     }
 }

package/dist/locales/nl.json

@@ -59,5 +59,10 @@
     "tabs": {
         "more": "Meer",
         "close": "Tabblad sluiten"
+    },
+    "tree": {
+        "label": "Bestanden",
+        "expand": "Uitvouwen",
+        "collapse": "Invouwen"
     }
 }

package/dist/menu/parts.js

@@ -9,6 +9,7 @@ import { useRender } from '@base-ui-components/react/use-render';
 import { withClass } from '../class-name.js';
 import { Icon } from '../Icon.js';
 import { Tooltip } from '../Tooltip.js';
+import { renderPositioner } from '../popup-layer.js';
 const MenuKindContext = createContext('menu');
 /*
  * A menu hangs under its trigger, lined up with its start, unless there is no room. A context menu
@@ -45,7 +46,7 @@ export const ContextMenuTrigger = BaseContextMenu.Trigger;
  */
 export function MenuPopup({ side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }) {
     const defaults = PLACEMENT[useContext(MenuKindContext)];
-    return (_jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: "popup-positioner", side: side ?? defaults.side, align: align ?? defaults.align, sideOffset: sideOffset ?? defaults.sideOffset, alignOffset: alignOffset ?? defaults.alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BaseMenu.Popup, { className: withClass('menu-popup', className), ...props }) }) }));
+    return (_jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: "popup-positioner", render: renderPositioner, side: side ?? defaults.side, align: align ?? defaults.align, sideOffset: sideOffset ?? defaults.sideOffset, alignOffset: alignOffset ?? defaults.alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BaseMenu.Popup, { className: withClass('menu-popup', className), ...props }) }) }));
 }
 export function MenuItem({ unstyled = false, className, ...props }) {
     return _jsx(BaseMenu.Item, { className: unstyled ? className : withClass('menu-item', className), ...props });

package/dist/popover/parts.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as BasePopover } from '@base-ui-components/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui-components/react/preview-card';
 import { withClass } from '../class-name.js';
+import { renderPositioner } from '../popup-layer.js';
 /*
  * The surface a popup is drawn on. `menu` is the padded card menus use, `picker` a card whose
  * content runs to its edges (a search field on top of a list), and `plain` leaves the surface to the caller.
@@ -18,7 +19,7 @@ export const PopoverTitle = BasePopover.Title;
 export const PopoverDescription = BasePopover.Description;
 /* The portal, the positioner and the popup of a popover: under its trigger and lined up with its start unless it says otherwise. */
 export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }) {
-    return (_jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { className: "popup-positioner", side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BasePopover.Popup, { className: withClass(POPUP_VARIANT[variant], className), ...props }) }) }));
+    return (_jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { className: "popup-positioner", render: renderPositioner, side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BasePopover.Popup, { className: withClass(POPUP_VARIANT[variant], className), ...props }) }) }));
 }
 export const PreviewCardRoot = BasePreviewCard.Root;
 export const PreviewCardTrigger = BasePreviewCard.Trigger;

package/dist/popup-layer.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from 'react';
+export declare const renderPositioner: (props: ComponentProps<'div'>, state: {
+    open: boolean;
+}) => import("react").FunctionComponentElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    readonly open: boolean;
+}>;

package/dist/popup-layer.js

@@ -0,0 +1,30 @@
+import { createElement, useLayoutEffect } from 'react';
+// One attribute serves every open popup, so it stays until the last one closes.
+const open = new Set();
+/*
+ * Marks the root with `data-popup-open` while a popup is open, which the theme reads to turn the
+ * window's drag regions off. An attribute on the root instead of `:root:has(...)`, which made the
+ * browser restyle the whole page on every DOM insertion.
+ */
+function usePopupLayer(isOpen) {
+    useLayoutEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const self = Symbol('popup');
+        open.add(self);
+        document.documentElement.setAttribute('data-popup-open', '');
+        return () => {
+            open.delete(self);
+            if (open.size === 0) {
+                document.documentElement.removeAttribute('data-popup-open');
+            }
+        };
+    }, [isOpen]);
+}
+function LayerPositioner({ open: isOpen, ...props }) {
+    usePopupLayer(isOpen);
+    return createElement('div', props);
+}
+/* The `render` of a popup's positioner, which knows whether the popup is open and so marks the root for as long as it is. */
+export const renderPositioner = (props, state) => createElement(LayerPositioner, { ...props, open: state.open });

package/dist/theme.css

@@ -424,7 +424,7 @@
     /* A press on a window's drag region goes to the system and never reaches the page, so a popup
        that closes on a press outside it would stay open over a custom title bar. While one is open
        nothing drags, the way a native title bar takes that first press to close a menu. */
-    :root:has(.popup-positioner[data-open]) * { -webkit-app-region: no-drag; }
+    :root[data-popup-open] * { -webkit-app-region: no-drag; }
     .dialog-backdrop { position: fixed; inset: 0; z-index: var(--z-dialog-backdrop); background: color-mix(in srgb, var(--bg) 55%, transparent); }
     .dialog-backdrop[data-starting-style], .dialog-backdrop[data-ending-style] { opacity: 0; }
     .dialog-popup {
@@ -563,3 +563,106 @@
     .sliding-column[data-resizing],
     .sliding-column[data-instant] { transition: none; }
 }
+
+@layer components {
+    .adecore-tree {
+        --tree-row-height: 25px;
+        --tree-row-gap: 6px;
+        --tree-row-radius: 6px;
+        --trees-bg-override: transparent;
+        --trees-padding-inline-override: 8px;
+        --trees-bg-muted-override: var(--surface-hover);
+        --trees-fg-override: var(--text);
+        --trees-fg-muted-override: var(--text-muted);
+        --trees-selected-bg-override: var(--surface-active);
+        --trees-selected-fg-override: var(--text);
+        --trees-border-color-override: var(--border);
+        --trees-accent-override: var(--accent);
+        --trees-focus-ring-color-override: var(--accent);
+        --trees-selected-focused-border-color-override: var(--accent);
+        --trees-status-ignored-override: var(--text-faint);
+        --trees-git-ignored-color-override: var(--text-faint);
+        --trees-git-modified-color-override: var(--status-needs-you);
+        --trees-git-added-color-override: var(--status-idle);
+        --trees-git-untracked-color-override: var(--status-idle);
+        --trees-git-deleted-color-override: var(--status-error);
+        --trees-git-renamed-color-override: var(--status-running);
+        --trees-font-family-override: var(--font-sans);
+        --trees-font-size-override: var(--text-xs);
+    }
+    .adecore-tree-row {
+        margin-inline: 8px;
+        padding-inline-end: 8px;
+    }
+    .adecore-tree-guide {
+        pointer-events: none;
+        position: absolute;
+        inset-block: 0;
+        width: 1px;
+        background: var(--border);
+    }
+    .adecore-tree-chevron-slot {
+        display: grid;
+        place-items: center;
+        flex: none;
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+    }
+    .adecore-tree-label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .adecore-tree-control,
+    .adecore-tree-decoration {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        gap: 6px;
+    }
+    .adecore-tree-decoration {
+        font-variant-numeric: tabular-nums;
+    }
+    .adecore-file-tree {
+        position: relative;
+        min-height: 0;
+        overflow: hidden;
+    }
+    .adecore-file-tree-host {
+        display: block;
+        height: 100%;
+    }
+    .adecore-tree-shift {
+        pointer-events: none;
+        position: sticky;
+        bottom: 0;
+        height: 0;
+    }
+    .adecore-tree-shift-track {
+        position: absolute;
+        inset-inline: 8px;
+        bottom: 2px;
+        height: 6px;
+        opacity: 0;
+        transition: opacity 150ms ease-out;
+    }
+    .adecore-tree-shift-track[data-visible] {
+        opacity: 1;
+    }
+    .adecore-tree-shift-thumb {
+        position: absolute;
+        inset-block: 0;
+        border-radius: 999px;
+        background: var(--text-faint);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .adecore-tree-shift-track {
+            transition: none;
+        }
+    }
+}

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

@@ -0,0 +1 @@
+export { TreeRoot as Root, TreeRow as Row, TreeChevron as Chevron, TreeChevronSlot as ChevronSlot, TreeLabel as Label, TreeDecoration as Decoration, TreeControl as Control, TreeCheckbox as Checkbox } from './parts.tsx';

package/dist/tree/index.parts.js

@@ -0,0 +1 @@
+export { TreeRoot as Root, TreeRow as Row, TreeChevron as Chevron, TreeChevronSlot as ChevronSlot, TreeLabel as Label, TreeDecoration as Decoration, TreeControl as Control, TreeCheckbox as Checkbox } from './parts.js';

package/dist/tree/parts.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from '@base-ui-components/react/use-render';
+import { type CheckboxProps } from '../Checkbox.tsx';
+export type TreeRootProps = useRender.ComponentProps<'div'>;
+export declare function TreeRoot({ render, className, ref, children, ...props }: TreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeRowProps = useRender.ComponentProps<'div'> & {
+    level?: number;
+    selected?: boolean;
+    joinedStart?: boolean;
+    joinedEnd?: boolean;
+    interactive?: boolean;
+};
+export declare function TreeRow({ level, selected, joinedStart, joinedEnd, interactive, render, className, ref, style, children, ...props }: TreeRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeChevronSlotProps = useRender.ComponentProps<'span'>;
+export declare function TreeChevronSlot({ render, className, ref, ...props }: TreeChevronSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeChevronProps = useRender.ComponentProps<'button'> & {
+    expanded: boolean;
+    onExpandedChange?(expanded: boolean): void;
+};
+export declare function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }: TreeChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeLabelProps = useRender.ComponentProps<'span'>;
+export declare function TreeLabel({ render, className, ref, ...props }: TreeLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeDecorationProps = useRender.ComponentProps<'span'>;
+export declare function TreeDecoration({ render, className, ref, ...props }: TreeDecorationProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeControlProps = useRender.ComponentProps<'span'>;
+export declare function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }: TreeControlProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeCheckboxProps = CheckboxProps;
+export declare function TreeCheckbox(props: TreeCheckboxProps): import("react").JSX.Element;