@adecore/ui 0.16.0 → 0.17.0-beta.2

package/src/file-tree/style.ts

@@ -0,0 +1,25 @@
+import { treeRowStyle } from '../tree/style.ts';
+
+// 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/src/file-tree/use-file-tree-shift.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import type { FileTree } from '@pierre/trees';
+import { clampShift, maxShift, SHIFT_PROPERTY, shiftNeed, shiftThumb, sidewaysDelta } from './shift.ts';
+
+const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
+
+const HIDE_AFTER = 900;
+
+const NEAR_BOTTOM = 16;
+
+function boxesOf(element: Element): Element[] {
+    return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap((child) => boxesOf(child));
+}
+
+function limitOf(row: HTMLElement, content: Element, gap: number): number {
+    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: HTMLElement, shift: number, gap: number, range: Range): number | null {
+    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: FileTree, resetKey?: string): { attach(node: HTMLElement | null): void; bar: ReactElement } {
+    const [frame, setFrame] = useState<HTMLElement | null>(null);
+    const [track, setTrack] = useState<HTMLDivElement | null>(null);
+    const [thumb, setThumb] = useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        if (frame === null || track === null || thumb === null) {
+            return;
+        }
+        const range = document.createRange();
+        let root: ShadowRoot | null = null;
+        let exact = 0;
+        let drawn = 0;
+        let max = 0;
+        let pending = 0;
+        let hideTimer = 0;
+        let scrolling = false;
+        let near = false;
+
+        const draw = (): void => {
+            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 = (): void => {
+            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<HTMLElement>(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 = (): void => {
+            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: WheelEvent): void => {
+            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: PointerEvent): void => {
+            const bottom = track.getBoundingClientRect().bottom;
+            const isNear = event.clientY >= bottom - NEAR_BOTTOM;
+            if (isNear !== near) {
+                near = isNear;
+                draw();
+            }
+        };
+
+        const onPointerLeave = (): void => {
+            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 = (
+        <div aria-hidden className="adecore-tree-shift">
+            <div ref={setTrack} className="adecore-tree-shift-track">
+                <div ref={setThumb} className="adecore-tree-shift-thumb" />
+            </div>
+        </div>
+    );
+
+    return { attach: setFrame, bar };
+}

package/src/file-tree/use-file-tree.ts

@@ -0,0 +1,31 @@
+import type { FileTreeOptions as PierreOptions } from '@pierre/trees';
+import { useFileTree as usePierreFileTree } from '@pierre/trees/react';
+import { useLayoutEffect, useRef } from 'react';
+import { FILE_TREE_ICONS } from '../file-icon.ts';
+import { TREE_ROW_HEIGHT } from '../tree/style.ts';
+import { compareRows } from './helpers.ts';
+import { FILE_TREE_CSS } from './style.ts';
+
+type WithoutSizing<Options> = Options extends unknown ? Omit<Options, 'itemHeight' | 'density'> : never;
+export type FileTreeOptions = WithoutSizing<PierreOptions>;
+
+// Model options are initial; paths and status can subsequently change through the model's mutation methods.
+export function useFileTree(options: FileTreeOptions) {
+    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/src/file-tree/use-slots.ts

@@ -0,0 +1,191 @@
+import { useEffect, useId, useState } from 'react';
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import { pathOfRow, visibleRows } from './helpers.ts';
+import { FILE_TREE_CSS } from './style.ts';
+
+export interface RowSlot {
+    row: FileTreeVisibleRow;
+    control: HTMLElement;
+    decoration: HTMLElement;
+}
+
+interface Port {
+    rowElement: HTMLElement;
+    control: HTMLElement;
+    decoration: HTMLElement;
+    lightControl: HTMLElement;
+    lightDecoration: HTMLElement;
+}
+
+// beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
+export function useFileTreeSlots(model: FileTree, frame: HTMLElement | null, label: string) {
+    const prefix = useId().replaceAll(':', '');
+    const [slots, setSlots] = useState<RowSlot[]>([]);
+
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const ports = new Map<HTMLElement, Port>();
+        let shadow: ShadowRoot | null = null;
+        let style: HTMLStyleElement | null = null;
+        let serial = 0;
+        let disposed = false;
+        let pending = false;
+        let snapshot: string | null = null;
+
+        const position = (): void => {
+            for (const port of ports.values()) {
+                const row = port.rowElement;
+                const content = row.querySelector<HTMLElement>('[data-item-section="content"]');
+                const icon = row.querySelector<HTMLElement>('[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 = (): void => {
+            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<HTMLElement>('[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: RowSlot[] = [];
+            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: string): { container: HTMLElement; target: HTMLElement } => {
+                        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 = (): void => {
+            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/src/index.ts

@@ -4,6 +4,8 @@
  */
 
 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';
@@ -105,3 +107,18 @@ 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/src/locales/en.json

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

package/src/locales/nl.json

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

package/src/menu/parts.tsx

@@ -8,6 +8,7 @@ import { useRender } from '@base-ui-components/react/use-render';
 import { withClass } from '../class-name.ts';
 import { Icon } from '../Icon.tsx';
 import { Tooltip } from '../Tooltip.tsx';
+import { renderPositioner } from '../popup-layer.ts';
 
 /* Where a popup opens from decides where it goes when a call site says nothing. */
 type MenuKind = 'menu' | 'context' | 'submenu';
@@ -96,6 +97,7 @@ export function MenuPopup({
         <BaseMenu.Portal>
             <BaseMenu.Positioner
                 className="popup-positioner"
+                render={renderPositioner}
                 side={side ?? defaults.side}
                 align={align ?? defaults.align}
                 sideOffset={sideOffset ?? defaults.sideOffset}

package/src/popover/parts.tsx

@@ -2,6 +2,7 @@ import type { ComponentProps } from 'react';
 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.ts';
+import { renderPositioner } from '../popup-layer.ts';
 
 /*
  * The surface a popup is drawn on. `menu` is the padded card menus use, `picker` a card whose
@@ -55,6 +56,7 @@ export function PopoverPopup({
         <BasePopover.Portal>
             <BasePopover.Positioner
                 className="popup-positioner"
+                render={renderPositioner}
                 side={side}
                 align={align}
                 sideOffset={sideOffset}

package/src/popup-layer.ts

@@ -0,0 +1,34 @@
+import { createElement, useLayoutEffect, type ComponentProps } from 'react';
+
+// One attribute serves every open popup, so it stays until the last one closes.
+const open = new Set<symbol>();
+
+/*
+ * 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: boolean): void {
+    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 }: ComponentProps<'div'> & { readonly open: boolean }) {
+    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: ComponentProps<'div'>, state: { open: boolean }) => createElement(LayerPositioner, { ...props, open: state.open });

package/src/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/src/tree/index.parts.ts

@@ -0,0 +1,10 @@
+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';