@adecore/ui 0.23.0 → 0.24.0

package/dist/tabs/parts.d.ts

@@ -1,7 +1,8 @@
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
-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';
 export type TabsValue = BaseTabs.Tab.Value;
+export type TabsVariant = 'line' | 'pill';
 export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueChange'> & {
     onValueChange?(value: TabsValue): void;
 };
@@ -10,14 +11,17 @@ export type TabsListProps = Omit<ComponentProps<typeof BaseTabs.List>, 'classNam
     className?: string;
     start?: ReactNode;
     end?: ReactNode;
+    after?: ReactNode;
+    variant?: TabsVariant;
+    overflow?: 'menu' | 'scroll';
 };
-export declare function TabsList({ className, children, start, end, ...props }: TabsListProps): import("react").JSX.Element;
+export declare function TabsList({ className, children, start, end, after, variant, overflow, ...props }: TabsListProps): import("react").JSX.Element;
 type TabProps = ComponentProps<typeof BaseTabs.Tab>;
 export type TabsTabProps = TabProps & {
     onClose?(): void;
 };
 export declare function TabsTab({ className, onClose, children, ...props }: TabsTabProps): import("react").JSX.Element;
-export declare const TabsPanel: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/tabs").TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type TabsCountProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
     value: number;
 };

package/dist/tabs/parts.js

@@ -1,10 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 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.js';
 import { formatNumber } from '../format/number.js';
 import { Icon } from '../Icon.js';
@@ -19,17 +19,34 @@ const InMenuContext = createContext(false);
 const TAB = 'relative flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium text-text-muted hover:text-text data-[active]:text-text data-[disabled]:opacity-50 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 data-[active]:after:bg-text';
 /* 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');
+const VariantContext = createContext('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 }
+};
 /* 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 }) {
     const [own, setOwn] = useState(defaultValue);
-    const current = value === undefined ? own : value;
-    const select = (next) => {
-        if (value === undefined) {
-            setOwn(next);
-        }
-        onValueChange?.(next);
-    };
-    return (_jsx(SelectionContext, { value: { value: current, select }, children: _jsx(BaseTabs.Root, { value: current, onValueChange: (next) => select(next), ...props }) }));
+    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) => {
+            if (!controlled) {
+                setOwn(next);
+            }
+            latest.current?.(next);
+        };
+        return { value: current, select };
+    }, [controlled, current]);
+    return (_jsx(SelectionContext, { value: selection, children: _jsx(BaseTabs.Root, { value: current, onValueChange: (next) => selection.select(next), ...props }) }));
 }
 const sameIndices = (left, right) => left !== null && left.length === right.length && left.every((index, at) => index === right[at]);
 /*
@@ -37,13 +54,19 @@ const sameIndices = (left, right) => left !== null && left.length === right.leng
  * 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 }) {
+export function TabsList({ className, children, start, end, after, variant = 'line', overflow = 'menu', ...props }) {
+    const style = STYLES[variant];
     const { t } = useTranslation('ui');
     const { value, select } = useContext(SelectionContext);
     const strip = useRef(null);
     const measure = useRef(null);
     const head = useRef(null);
     const tail = useRef(null);
+    const beside = useRef(null);
+    const list = useRef(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(null);
     const tabs = Children.toArray(children).filter((child) => isValidElement(child) && child.type === TabsTab);
@@ -51,13 +74,13 @@ export function TabsList({ className, children, start, end, ...props }) {
     useLayoutEffect(() => {
         const host = strip.current;
         const row = measure.current;
-        if (!host || !row) {
+        if (scrolls || !host || !row) {
             return;
         }
         const fit = () => {
             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;
@@ -68,23 +91,66 @@ export function TabsList({ className, children, start, end, ...props }) {
         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);
             }
         }
         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 = () => {
+            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) => {
+            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 = (_jsxs(_Fragment, { children: [t('tabs.more'), _jsx(Icon, { icon: ChevronDown, size: 14 })] }));
-    return (_jsxs("div", { ref: strip, className: clsx('relative flex items-center gap-4 border-b border-border', className), children: [start !== undefined && start !== null && (_jsx("div", { ref: head, className: "flex shrink-0 items-center gap-1", children: start })), _jsx(BaseTabs.List, { className: "flex min-w-0 items-end gap-4", ...props, children: visible }), hidden.length > 0 && (_jsxs(MenuRoot, { children: [_jsx(MenuTrigger, { className: MORE, children: more }), _jsx(MenuPopup, { align: "end", className: "min-w-48", children: _jsx(InMenuContext, { value: true, children: hidden.map((tab) => (_jsx(MenuItem, { disabled: tab.props.disabled, onClick: () => select(tab.props.value), children: tab.props.children }, tab.key))) }) })] })), end !== undefined && end !== null && (_jsx("div", { ref: tail, className: clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto'), children: end })), _jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: "pointer-events-none invisible absolute top-0 left-0 flex gap-4", children: [tabs.map((tab) => (_jsxs("span", { className: TAB, children: [tab.props.children, tab.props.onClose !== undefined && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsx("span", { className: MORE, children: more })] })] }));
+    return (_jsx(VariantContext, { value: variant, children: _jsxs("div", { ref: strip, className: clsx('relative flex items-center', style.strip, className), children: [start !== undefined && start !== null && (_jsx("div", { ref: head, className: "flex shrink-0 items-center gap-1", children: start })), _jsx(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, children: visible }), hidden.length > 0 && (_jsxs(MenuRoot, { children: [_jsx(MenuTrigger, { className: style.more, children: more }), _jsx(MenuPopup, { align: "end", className: "min-w-48", children: _jsx(InMenuContext, { value: true, children: hidden.map((tab) => (_jsx(MenuItem, { disabled: tab.props.disabled, onClick: () => select(tab.props.value), children: tab.props.children }, tab.key))) }) })] })), after !== undefined && after !== null && (_jsx("div", { ref: beside, className: "flex shrink-0 items-center gap-1", children: after })), end !== undefined && end !== null && (_jsx("div", { ref: tail, className: clsx('flex shrink-0 items-center gap-1', hidden.length === 0 && 'ml-auto'), children: end })), !scrolls && (_jsxs("div", { ref: measure, "aria-hidden": true, inert: true, className: clsx('pointer-events-none invisible absolute top-0 left-0 flex', style.row), children: [tabs.map((tab) => (_jsxs("span", { className: style.tab, children: [tab.props.children, tab.props.onClose !== undefined && _jsx("span", { className: "size-5 shrink-0" })] }, tab.key))), _jsx("span", { className: style.more, children: more })] }))] }) }));
 }
 /* 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 }) {
     const { t } = useTranslation('ui');
+    const tab = STYLES[useContext(VariantContext)].tab;
     if (onClose === undefined) {
-        return (_jsx(BaseTabs.Tab, { className: withClass(TAB, className), ...props, children: children }));
+        return (_jsx(BaseTabs.Tab, { className: withClass(tab, className), ...props, children: children }));
     }
     const { onKeyDown, onAuxClick, onMouseDown, ...rest } = props;
     const handleKeyDown = (e) => {
@@ -108,7 +174,7 @@ export function TabsTab({ className, onClose, children, ...props }) {
             onClose();
         }
     };
-    return (_jsxs(BaseTabs.Tab, { nativeButton: false, render: _jsx("div", {}), className: withClass(TAB, className), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onAuxClick: handleAuxClick, ...rest, children: [children, _jsx(IconButton, { icon: X, size: "2xs", label: t('tabs.close'), tabIndex: -1, onClick: (e) => {
+    return (_jsxs(BaseTabs.Tab, { nativeButton: false, render: _jsx("div", {}), className: withClass(tab, className), onKeyDown: handleKeyDown, onMouseDown: handleMouseDown, onAuxClick: handleAuxClick, ...rest, children: [children, _jsx(IconButton, { icon: X, size: "2xs", label: t('tabs.close'), tabIndex: -1, onClick: (e) => {
                     e.stopPropagation();
                     onClose();
                 } })] }));

package/dist/testing/dedupe.js

@@ -1,15 +1,17 @@
-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';
 /*
  * A preload for `bun test` in an app that links a checkout of this library: what `resolve.dedupe`
  * 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';
 /* The package root, from `src/testing` or `dist/testing` alike. */
 const library = realpathSync(join(import.meta.dir, '..', '..'));
@@ -18,19 +20,44 @@ const manifestOf = (folder) => {
     return existsSync(path) ? JSON.parse(readFileSync(path, 'utf8')) : null;
 };
 const dependsOnLibrary = (manifest) => manifest !== null && [manifest.dependencies, manifest.devDependencies, manifest.peerDependencies].some((deps) => deps !== undefined && NAME in deps);
+const membersOf = (root, manifest) => {
+    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 = () => {
     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 = () => {
+    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, pattern) => {
+    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. */
 const copyFrom = (from, name) => {
@@ -44,21 +71,45 @@ const copyFrom = (from, name) => {
         }
     }
 };
-const folders = appFolders();
-const copies = SHARED.flatMap((name) => {
-    const theirs = join(library, 'node_modules', name);
-    if (!existsSync(theirs)) {
+const findCopies = () => {
+    const checkout = checkoutFolders();
+    const inside = (path) => 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 !== 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) => 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 !== 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) => text.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
-// Bun refuses `export default` beside `export *`, so the stand-in names every export of the real file.
+let transpiler = 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) => {
-    const names = Object.keys(require(path)).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) {
     plugin({

package/dist/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/dist/tree/parts.d.ts

@@ -1,4 +1,4 @@
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { type CheckboxProps } from '../Checkbox.tsx';
 export type TreeRootProps = useRender.ComponentProps<'div'> & {
     overflow?: 'truncate' | 'scroll';

package/dist/tree/parts.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } 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 } from '../Checkbox.js';

package/dist/workspace/DropPreview.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'react';
+import { type DropPreviewShape } from './preview.ts';
+export interface DropPreviewProps {
+    shape: DropPreviewShape | null;
+    className?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+export declare function DropPreview({ shape, className, ref }: DropPreviewProps): import("react").JSX.Element | null;

package/dist/workspace/DropPreview.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { dropPreviewPath } from './preview.js';
+/*
+ * 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 }) {
+    if (shape === null) {
+        return null;
+    }
+    return (_jsx("svg", { ref: ref, className: clsx('ade-drop-preview', className), width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("path", { style: { d: `path("${dropPreviewPath(shape)}")` } }) }));
+}

package/dist/workspace/SplitView.d.ts

@@ -1,5 +1,5 @@
 import { type DragEvent, type ReactNode } from 'react';
-import { useRender } from '@base-ui-components/react/use-render';
+import { useRender } from '@base-ui/react/use-render';
 import { type WorkspaceLayout } from './context.ts';
 import { type SplitEdges, type SplitMinimum, type SplitRect } from './geometry.ts';
 import { type SplitCommand, type SplitLayout, type SplitPane } from './model.ts';