@adecore/ui 0.23.0 → 0.24.0

package/src/tabs/parts.tsx

@@ -3,7 +3,9 @@ import {
     createContext,
     isValidElement,
     useContext,
+    useEffect,
     useLayoutEffect,
+    useMemo,
     useRef,
     useState,
     type ComponentProps,
@@ -13,8 +15,8 @@ import {
 import clsx from 'clsx';
 import { ChevronDown, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Tabs as BaseTabs } from '@base-ui-components/react/tabs';
-import { useRender } from '@base-ui-components/react/use-render';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.ts';
 import { formatNumber } from '../format/number.ts';
 import { Icon } from '../Icon.tsx';
@@ -42,6 +44,21 @@ const TAB =
 /* The button that opens the tabs that do not fit reads as one more tab, at the very end of the strip. */
 const MORE = clsx(TAB, 'ml-auto data-[popup-open]:text-text');
 
+/* A tab as a key in a bar, for tabs that share a toolbar with buttons and must not read as the tabs of a pane under it. */
+const PILL =
+    'relative flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-xs font-medium text-text-muted hover:bg-surface-hover hover:text-text data-[active]:bg-surface-active data-[active]:text-text data-[disabled]:opacity-50 has-[button]:pr-1';
+
+const PILL_MORE = clsx(PILL, 'ml-auto data-[popup-open]:bg-surface-active data-[popup-open]:text-text');
+
+export type TabsVariant = 'line' | 'pill';
+
+const VariantContext = createContext<TabsVariant>('line');
+
+const STYLES = {
+    line: { strip: 'gap-4 border-b border-border', list: 'items-end gap-4', row: 'gap-4', tab: TAB, more: MORE },
+    pill: { strip: 'gap-1', list: 'items-center gap-1', row: 'gap-1', tab: PILL, more: PILL_MORE }
+} as const;
+
 export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueChange'> & {
     onValueChange?(value: TabsValue): void;
 };
@@ -49,16 +66,25 @@ export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueC
 /* Holds the picked tab itself, uncontrolled or not, so a tab picked from the menu of the strip changes it too. */
 export function TabsRoot({ value, defaultValue = 0, onValueChange, ...props }: TabsRootProps) {
     const [own, setOwn] = useState<TabsValue>(defaultValue);
-    const current = value === undefined ? own : value;
-    const select = (next: TabsValue): void => {
-        if (value === undefined) {
-            setOwn(next);
-        }
-        onValueChange?.(next);
-    };
+    const controlled = value !== undefined;
+    const current = controlled ? value : own;
+    // The latest handler without a new context for every render of a parent that writes it inline.
+    const latest = useRef(onValueChange);
+    useLayoutEffect(() => {
+        latest.current = onValueChange;
+    });
+    const selection = useMemo(() => {
+        const select = (next: TabsValue): void => {
+            if (!controlled) {
+                setOwn(next);
+            }
+            latest.current?.(next);
+        };
+        return { value: current, select };
+    }, [controlled, current]);
     return (
-        <SelectionContext value={{ value: current, select }}>
-            <BaseTabs.Root value={current} onValueChange={(next) => select(next)} {...props} />
+        <SelectionContext value={selection}>
+            <BaseTabs.Root value={current} onValueChange={(next) => selection.select(next)} {...props} />
         </SelectionContext>
     );
 }
@@ -70,6 +96,12 @@ export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'classNam
     start?: ReactNode;
     /* Drawn after the tabs, such as a button that adds one. It keeps its own width: the tabs fit in what is left. */
     end?: ReactNode;
+    /* Like `end`, but right beside the last tab instead of at the end of the strip, so it moves with the tabs. */
+    after?: ReactNode;
+    /* `line` underlines the picked tab over the strip's border; `pill` fills it, for tabs in a toolbar. */
+    variant?: TabsVariant;
+    /* What happens to tabs that do not fit: a "More" menu at the end of the strip, or a row that scrolls sideways. */
+    overflow?: 'menu' | 'scroll';
 };
 
 const sameIndices = (left: readonly number[] | null, right: readonly number[]): boolean =>
@@ -80,13 +112,19 @@ const sameIndices = (left: readonly number[] | null, right: readonly number[]):
  * in a row nobody sees, so the strip knows what fits before it draws. The tabs are the direct children,
  * since the menu repeats what a tab holds.
  */
-export function TabsList({ className, children, start, end, ...props }: TabsListProps) {
+export function TabsList({ className, children, start, end, after, variant = 'line', overflow = 'menu', ...props }: TabsListProps) {
+    const style = STYLES[variant];
     const { t } = useTranslation('ui');
     const { value, select } = useContext(SelectionContext);
     const strip = useRef<HTMLDivElement>(null);
     const measure = useRef<HTMLDivElement>(null);
     const head = useRef<HTMLDivElement>(null);
     const tail = useRef<HTMLDivElement>(null);
+    const beside = useRef<HTMLDivElement>(null);
+    const list = useRef<HTMLDivElement>(null);
+    const scrolls = overflow === 'scroll';
+    // Which edges of a scrolling row still hide a tab, where it fades out.
+    const [edges, setEdges] = useState({ start: false, end: false });
     // Null until the first measure, which runs before the first paint.
     const [shown, setShown] = useState<number[] | null>(null);
     const tabs = Children.toArray(children).filter(
@@ -97,13 +135,16 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
     useLayoutEffect(() => {
         const host = strip.current;
         const row = measure.current;
-        if (!host || !row) {
+        if (scrolls || !host || !row) {
             return;
         }
         const fit = (): void => {
             const style = getComputedStyle(host);
             const gap = parseFloat(style.columnGap) || 0;
-            const taken = [head.current, tail.current].reduce((sum, part) => (part === null ? sum : sum + part.getBoundingClientRect().width + gap), 0);
+            const taken = [head.current, beside.current, tail.current].reduce(
+                (sum, part) => (part === null ? sum : sum + part.getBoundingClientRect().width + gap),
+                0
+            );
             const room = host.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - taken;
             const cells = [...row.children].map((cell) => cell.getBoundingClientRect().width);
             const more = cells.pop() ?? 0;
@@ -114,7 +155,7 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
         const observer = new ResizeObserver(fit);
         observer.observe(host);
         observer.observe(row);
-        for (const part of [head.current, tail.current]) {
+        for (const part of [head.current, beside.current, tail.current]) {
             if (part !== null) {
                 observer.observe(part);
             }
@@ -122,6 +163,51 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
         return () => observer.disconnect();
     });
 
+    // A picked tab that scrolled out of sight comes back into it, wherever it was picked from.
+    useEffect(() => {
+        if (scrolls) {
+            list.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        }
+    }, [scrolls, value]);
+
+    useEffect(() => {
+        const row = list.current;
+        if (!scrolls || !row) {
+            return;
+        }
+        const measure = (): void => {
+            const start = row.scrollLeft > 0;
+            const end = row.scrollLeft + row.clientWidth < row.scrollWidth - 1;
+            setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
+        };
+        measure();
+        row.addEventListener('scroll', measure, { passive: true });
+        const observer = new ResizeObserver(measure);
+        observer.observe(row);
+        for (const tab of row.children) {
+            observer.observe(tab);
+        }
+        return () => {
+            row.removeEventListener('scroll', measure);
+            observer.disconnect();
+        };
+    });
+
+    // A mouse wheel only turns vertically, and on a row that scrolls sideways that is the way it should turn.
+    useEffect(() => {
+        const row = list.current;
+        if (!scrolls || !row) {
+            return;
+        }
+        const onWheel = (event: WheelEvent): void => {
+            if (!event.deltaX && event.deltaY) {
+                row.scrollLeft += event.deltaY;
+            }
+        };
+        row.addEventListener('wheel', onWheel, { passive: true });
+        return () => row.removeEventListener('wheel', onWheel);
+    }, [scrolls]);
+
     const visible = shown === null ? tabs : shown.map((index) => tabs[index]!);
     const hidden = shown === null ? [] : tabs.filter((_, index) => !shown.includes(index));
     const more = (
@@ -132,44 +218,59 @@ export function TabsList({ className, children, start, end, ...props }: TabsList
     );
 
     return (
-        <div ref={strip} className={clsx('relative flex items-center gap-4 border-b border-border', className)}>
-            {start !== undefined && start !== null && (
-                <div ref={head} className="flex shrink-0 items-center gap-1">
-                    {start}
-                </div>
-            )}
-            <BaseTabs.List className="flex min-w-0 items-end gap-4" {...props}>
-                {visible}
-            </BaseTabs.List>
-            {hidden.length > 0 && (
-                <MenuRoot>
-                    <MenuTrigger className={MORE}>{more}</MenuTrigger>
-                    <MenuPopup align="end" className="min-w-48">
-                        <InMenuContext value>
-                            {hidden.map((tab) => (
-                                <MenuItem key={tab.key} disabled={tab.props.disabled} onClick={() => select(tab.props.value)}>
-                                    {tab.props.children}
-                                </MenuItem>
-                            ))}
-                        </InMenuContext>
-                    </MenuPopup>
-                </MenuRoot>
-            )}
-            {end !== undefined && end !== null && (
-                <div ref={tail} className={clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto')}>
-                    {end}
-                </div>
-            )}
-            <div ref={measure} aria-hidden inert className="pointer-events-none invisible absolute top-0 left-0 flex gap-4">
-                {tabs.map((tab) => (
-                    <span key={tab.key} className={TAB}>
-                        {tab.props.children}
-                        {tab.props.onClose !== undefined && <span className="size-5 shrink-0" />}
-                    </span>
-                ))}
-                <span className={MORE}>{more}</span>
+        <VariantContext value={variant}>
+            <div ref={strip} className={clsx('relative flex items-center', style.strip, className)}>
+                {start !== undefined && start !== null && (
+                    <div ref={head} className="flex shrink-0 items-center gap-1">
+                        {start}
+                    </div>
+                )}
+                <BaseTabs.List
+                    ref={list}
+                    className={clsx('flex min-w-0', style.list, scrolls && 'tabs-scroll scroll-fade-x')}
+                    data-fade-start={scrolls && edges.start ? '' : undefined}
+                    data-fade-end={scrolls && edges.end ? '' : undefined}
+                    {...props}
+                >
+                    {visible}
+                </BaseTabs.List>
+                {hidden.length > 0 && (
+                    <MenuRoot>
+                        <MenuTrigger className={style.more}>{more}</MenuTrigger>
+                        <MenuPopup align="end" className="min-w-48">
+                            <InMenuContext value>
+                                {hidden.map((tab) => (
+                                    <MenuItem key={tab.key} disabled={tab.props.disabled} onClick={() => select(tab.props.value)}>
+                                        {tab.props.children}
+                                    </MenuItem>
+                                ))}
+                            </InMenuContext>
+                        </MenuPopup>
+                    </MenuRoot>
+                )}
+                {after !== undefined && after !== null && (
+                    <div ref={beside} className="flex shrink-0 items-center gap-1">
+                        {after}
+                    </div>
+                )}
+                {end !== undefined && end !== null && (
+                    <div ref={tail} className={clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto')}>
+                        {end}
+                    </div>
+                )}
+                {!scrolls && (
+                    <div ref={measure} aria-hidden inert className={clsx('pointer-events-none invisible absolute top-0 left-0 flex', style.row)}>
+                        {tabs.map((tab) => (
+                            <span key={tab.key} className={style.tab}>
+                                {tab.props.children}
+                                {tab.props.onClose !== undefined && <span className="size-5 shrink-0" />}
+                            </span>
+                        ))}
+                        <span className={style.more}>{more}</span>
+                    </div>
+                )}
             </div>
-        </div>
+        </VariantContext>
     );
 }
 
@@ -183,10 +284,11 @@ export type TabsTabProps = TabProps & {
 /* The close button stays out of the tab order, so a closable tab is still one stop; the keys close it from the tab itself. */
 export function TabsTab({ className, onClose, children, ...props }: TabsTabProps) {
     const { t } = useTranslation('ui');
+    const tab = STYLES[useContext(VariantContext)].tab;
 
     if (onClose === undefined) {
         return (
-            <BaseTabs.Tab className={withClass(TAB, className)} {...props}>
+            <BaseTabs.Tab className={withClass(tab, className)} {...props}>
                 {children}
             </BaseTabs.Tab>
         );
@@ -222,7 +324,7 @@ export function TabsTab({ className, onClose, children, ...props }: TabsTabProps
         <BaseTabs.Tab
             nativeButton={false}
             render={<div />}
-            className={withClass(TAB, className)}
+            className={withClass(tab, className)}
             onKeyDown={handleKeyDown}
             onMouseDown={handleMouseDown}
             onAuxClick={handleAuxClick}

package/src/testing/dedupe.ts

@@ -1,5 +1,5 @@
-import { existsSync, readFileSync, realpathSync } from 'node:fs';
-import { dirname, join } from 'node:path';
+import { existsSync, readdirSync, readFileSync, realpathSync } from 'node:fs';
+import { dirname, join, sep } from 'node:path';
 import { Glob, plugin } from 'bun';
 
 /*
@@ -7,10 +7,12 @@ import { Glob, plugin } from 'bun';
  * does for Vite. The checkout has node_modules of its own, and a second React, i18next or Base UI
  * breaks every hook, every word and every compound part. Bun has no dedupe and its resolve hook never
  * sees a package import, so every file of these packages in the checkout loads as a stand-in for the
- * same file in the app's copy. Does nothing for a package the checkout has no copy of, which is every
- * package once the library is installed from the registry.
+ * same file in the app's copy. Does nothing once the library is installed from the registry.
+ *
+ * CodeMirror and Lezer reject an extension, a facet or a node prop made by another copy, and the chat
+ * views take both from the app; shiki is in the list for the highlighter an app hands them.
  */
-const SHARED = ['react', 'react-dom', 'i18next', 'react-i18next', '@base-ui-components/react'];
+const SHARED = ['react', 'react-dom', 'i18next', 'react-i18next', '@base-ui/react', '@codemirror/*', '@lezer/*', 'shiki'];
 
 const NAME = '@adecore/ui';
 
@@ -22,6 +24,12 @@ interface Manifest {
     dependencies?: Record<string, string>;
     devDependencies?: Record<string, string>;
     peerDependencies?: Record<string, string>;
+    adecore?: { dedupe?: unknown };
+}
+
+interface Copy {
+    theirs: string;
+    ours: string;
 }
 
 const manifestOf = (folder: string): Manifest | null => {
@@ -32,19 +40,47 @@ const manifestOf = (folder: string): Manifest | null => {
 const dependsOnLibrary = (manifest: Manifest | null): boolean =>
     manifest !== null && [manifest.dependencies, manifest.devDependencies, manifest.peerDependencies].some((deps) => deps !== undefined && NAME in deps);
 
+const membersOf = (root: string, manifest: Manifest | null): string[] => {
+    const workspaces = manifest?.workspaces;
+    const patterns = (Array.isArray(workspaces) ? workspaces : workspaces?.packages) ?? [];
+    return patterns
+        .flatMap((pattern) => [...new Glob(`${pattern}/package.json`).scanSync({ cwd: root, onlyFiles: true })])
+        .map((path) => join(root, dirname(path)));
+};
+
 /*
  * Where the app's copies are found: the folder the tests run in, then each workspace of it that
  * depends on the library. With an isolated install the root of a monorepo has no React of its own.
  */
 const appFolders = (): string[] => {
     const root = process.cwd();
-    const workspaces = manifestOf(root)?.workspaces;
-    const patterns = (Array.isArray(workspaces) ? workspaces : workspaces?.packages) ?? [];
-    const members = patterns
-        .flatMap((pattern) => [...new Glob(`${pattern}/package.json`).scanSync({ cwd: root, onlyFiles: true })])
-        .map((path) => join(root, dirname(path)))
-        .filter((folder) => dependsOnLibrary(manifestOf(folder)));
-    return [root, ...members];
+    return [root, ...membersOf(root, manifestOf(root)).filter((folder) => dependsOnLibrary(manifestOf(folder)))];
+};
+
+/* Where the checkout keeps its copies: the library's other packages in the same monorepo bring their own. */
+const checkoutFolders = (): string[] => {
+    for (let folder = dirname(library); dirname(folder) !== folder; folder = dirname(folder)) {
+        const manifest = manifestOf(folder);
+        if (manifest?.workspaces !== undefined) {
+            const members = membersOf(folder, manifest);
+            return members.includes(library) ? [folder, ...members] : [library];
+        }
+    }
+    return [library];
+};
+
+/* The packages a name of the list stands for in a folder: itself, or every package of the scope for `@scope/*`. */
+const namesIn = (folder: string, pattern: string): string[] => {
+    if (!pattern.endsWith('/*')) {
+        return [pattern];
+    }
+    const scope = pattern.slice(0, -2);
+    const path = join(folder, 'node_modules', scope);
+    return existsSync(path)
+        ? readdirSync(path)
+              .filter((entry) => !entry.startsWith('.'))
+              .map((entry) => `${scope}/${entry}`)
+        : [];
 };
 
 /* The copy of a package that `from` resolves to, walking up the node_modules folders as Node does. */
@@ -60,24 +96,51 @@ const copyFrom = (from: string, name: string): string | null => {
     }
 };
 
-const folders = appFolders();
-
-const copies = SHARED.flatMap((name) => {
-    const theirs = join(library, 'node_modules', name);
-    if (!existsSync(theirs)) {
+const findCopies = (): Copy[] => {
+    const checkout = checkoutFolders();
+    const inside = (path: string): boolean => path === checkout[0] || path.startsWith(`${checkout[0]}/`);
+    // A run inside the checkout is the library's own; a node_modules above it belongs to no app.
+    if (inside(realpathSync(process.cwd()))) {
         return [];
     }
-    const real = realpathSync(theirs);
-    const ours = folders.map((folder) => copyFrom(folder, name)).find((copy): copy is string => copy !== null && !copy.startsWith(`${library}/`));
-    return ours === undefined || ours === real ? [] : [{ theirs: `${real}/`, ours: `${ours}/` }];
-});
+    const folders = appFolders();
+    const added = folders.flatMap((folder) => {
+        const names = manifestOf(folder)?.adecore?.dedupe;
+        return Array.isArray(names) ? names.filter((name): name is string => typeof name === 'string') : [];
+    });
+    const names = new Set([...SHARED, ...added].flatMap((pattern) => checkout.flatMap((folder) => namesIn(folder, pattern))));
+    return [...names].flatMap((name) => {
+        const ours = folders.map((folder) => copyFrom(folder, name)).find((copy): copy is string => copy !== null && !inside(copy));
+        if (ours === undefined) {
+            return [];
+        }
+        const theirs = new Set(
+            checkout
+                .map((folder) => join(folder, 'node_modules', name))
+                .filter((path) => existsSync(path))
+                .map((path) => realpathSync(path))
+        );
+        return [...theirs].filter((real) => real !== ours).map((real) => ({ theirs: `${real}/`, ours: `${ours}/` }));
+    });
+};
+
+// From the registry the package manager already decided what to share; a copy nested in the library is on purpose.
+const copies = library.split(sep).includes('node_modules') ? [] : findCopies();
 
 const escape = (text: string): string => text.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
 
-// Bun refuses `export default` beside `export *`, so the stand-in names every export of the real file.
+let transpiler: Bun.Transpiler | null = null;
+
+/*
+ * Re-exports the app's file without running it: `require` refuses an ES module of the app that is
+ * still loading. `export *` skips the default, which CommonJS always has and an ES module only when it says so.
+ */
 const standIn = (path: string): string => {
-    const names = Object.keys(require(path) as object).filter((name) => name !== 'default' && /^[A-Za-z_$][\w$]*$/.test(name));
-    return [`import * as real from ${JSON.stringify(path)};`, 'export default real.default;', `export const { ${names.join(', ')} } = real;`].join('\n');
+    transpiler ??= new Bun.Transpiler({ loader: 'js' });
+    const { exports, imports } = transpiler.scan(readFileSync(path, 'utf8'));
+    const esm = exports.length > 0 || imports.some((entry) => entry.kind === 'import-statement');
+    const target = JSON.stringify(path);
+    return [`export * from ${target};`, ...(!esm || exports.includes('default') ? [`export { default } from ${target};`] : [])].join('\n');
 };
 
 if (copies.length > 0) {

package/src/theme.css

@@ -473,18 +473,16 @@
     }
     /* A picture holds the eye better against a heavier dim than a dialog of controls needs. */
     .lightbox-backdrop { background: color-mix(in srgb, var(--bg) 80%, transparent); }
-    /* Tooltips. The positioner animates its position, so a tooltip slides to the next button
-       instead of blinking; the popup fades and scales from its anchor side. Both drop the motion
-       while Base UI says the tooltip is instant. */
+    /* Tooltips. The popup fades and scales from its anchor side, and drops the motion while Base UI
+       says the tooltip is instant. The positioner does not animate its place: Base UI parks it at the
+       window's origin until it is measured, so it would slide in from the corner. */
     /* As wide as its label up to the viewport's max width, so a short label near the edge of the
        window does not wrap to the room left of it before the positioner moves it back in. */
     .tooltip-positioner {
         width: max-content;
         z-index: var(--z-tooltip);
         pointer-events: none;
-        transition: top 150ms ease, left 150ms ease, right 150ms ease, bottom 150ms ease;
     }
-    .tooltip-positioner[data-instant] { transition: none; }
     .tooltip-popup {
         display: flex;
         border-radius: 7px;
@@ -824,14 +822,14 @@
     .ade-workspace[data-layout="roomy"][data-toolbar][data-sidebar] > .ade-workspace-center > .ade-workspace-content { border-top-left-radius: 8px; }
     .ade-workspace[data-layout="roomy"][data-toolbar][data-side-panel] > .ade-workspace-center > .ade-workspace-content { border-top-right-radius: 8px; }
     .ade-split-divider:is(:hover, :focus-visible, [data-resizing])::after { background: var(--accent); }
-    .ade-split-preview {
+    .ade-drop-preview {
         position: absolute;
         inset: 0;
         z-index: 4;
         pointer-events: none;
         overflow: visible;
     }
-    .ade-split-preview path {
+    .ade-drop-preview path {
         fill: color-mix(in srgb, var(--accent) 8%, transparent);
         stroke: var(--accent);
         stroke-width: 2px;
@@ -848,6 +846,15 @@
         scrollbar-width: none;
     }
     .ade-tab-strip::-webkit-scrollbar { display: none; }
+    /* Tabs that scroll sideways instead of handing the rest to a menu. The pixel at the bottom holds a
+       line tab's underline, which the scroll box would clip otherwise. */
+    .tabs-scroll {
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 1px;
+        scrollbar-width: none;
+    }
+    .tabs-scroll::-webkit-scrollbar { display: none; }
     .ade-document-tab {
         position: relative;
         display: inline-flex;
@@ -885,5 +892,14 @@
     .ade-document-tab[data-detail] .ade-document-tab-open { max-width: 200px; }
     .ade-tab-unsaved { width: 6px; height: 6px; flex: none; border-radius: 999px; background: var(--text-muted); }
     .ade-tab-insertion { position: absolute; top: 4px; bottom: 4px; width: 2px; pointer-events: none; background: var(--accent); }
-    @media (prefers-reduced-motion: reduce) { .ade-split-preview path { transition: none; } }
+    @media (prefers-reduced-motion: reduce) { .ade-drop-preview path { transition: none; } }
+}
+
+@layer components {
+    /* `MiddleTruncate`. The text again, unseen and without height, so the element asks for the width of all of it while it draws a part. */
+    .middle-truncate { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    .middle-truncate::before { content: attr(data-text) / ""; display: block; height: 0; visibility: hidden; }
+    .middle-truncate-head::after { content: "\2026" / ""; }
+    /* The cut part stays in the text at no width, so a selection copies it and a find matches across the cut. */
+    .middle-truncate-middle { display: inline-block; width: 0; overflow: hidden; vertical-align: top; }
 }

package/src/tree/parts.tsx

@@ -1,6 +1,6 @@
 import { useCallback, type MouseEvent } from 'react';
 import clsx from 'clsx';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox as UICheckbox, type CheckboxProps } from '../Checkbox.tsx';

package/src/workspace/DropPreview.tsx

@@ -0,0 +1,26 @@
+import type { Ref } from 'react';
+import clsx from 'clsx';
+import { dropPreviewPath, type DropPreviewShape } from './preview.ts';
+
+export interface DropPreviewProps {
+    /* Where the drop would land, in the coordinates of the box the preview fills; null draws nothing. */
+    shape: DropPreviewShape | null;
+    className?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+
+/*
+ * The outline `SplitView` draws where a drag would land, for an app with a drag layer of its own. It
+ * fills its nearest positioned ancestor. One shape moves into the next as a transition of its path,
+ * and the first shape after a null appears in place.
+ */
+export function DropPreview({ shape, className, ref }: DropPreviewProps) {
+    if (shape === null) {
+        return null;
+    }
+    return (
+        <svg ref={ref} className={clsx('ade-drop-preview', className)} width="100%" height="100%" aria-hidden="true">
+            <path style={{ d: `path("${dropPreviewPath(shape)}")` }} />
+        </svg>
+    );
+}