@adecore/ui 0.19.0 → 0.20.0

package/dist/workspace/SplitView.js

@@ -0,0 +1,421 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../IconButton.js';
+import { WorkspaceContext } from './context.js';
+import { paneRadius, resizeSplit, splitGeometry, splitSideAt, tabGapAt } from './geometry.js';
+import { splitPanes, updateSplitLayout } from './model.js';
+import { TabStrip } from './TabStrip.js';
+import { dropPreviewPath, rectPreview, tabPreview } from './preview.js';
+const ZERO = { width: 0, height: 0, left: 0, top: 0, scaleX: 1, scaleY: 1 };
+const MINIMUM = { width: 120, height: 80 };
+function Divider({ divider, minimumResizeShare, onResize, onEqualize }) {
+    const { t } = useTranslation('ui');
+    const cleanup = useRef(null);
+    useEffect(() => () => cleanup.current?.(), []);
+    const horizontal = divider.axis === 'horizontal';
+    const before = divider.lengths.slice(0, divider.index + 1).reduce((sum, value) => sum + value, 0);
+    const total = divider.lengths.reduce((sum, value) => sum + value, 0);
+    const position = total ? Math.round((before / total) * 100) : 0;
+    const limit = (delta) => resizeSplit(divider, delta, false, 0, minimumResizeShare)
+        .slice(0, divider.index + 1)
+        .reduce((sum, size) => sum + size, 0) * 100;
+    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": t('workspace.resize'), "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-valuenow": position, "aria-valuemin": total ? Math.floor(limit(-total)) : 0, "aria-valuemax": total ? Math.ceil(limit(total)) : 100, className: "ade-split-divider", style: { left: divider.x, top: divider.y, width: divider.width, height: divider.height }, onDoubleClick: (event) => onEqualize(event.altKey), onKeyDown: (event) => {
+            const negative = horizontal ? 'ArrowLeft' : 'ArrowUp';
+            const positive = horizontal ? 'ArrowRight' : 'ArrowDown';
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                onEqualize(event.altKey);
+            }
+            else if ([negative, positive, 'Home', 'End'].includes(event.key)) {
+                event.preventDefault();
+                const delta = event.key === 'Home' ? -total : event.key === 'End' ? total : (event.key === negative ? -1 : 1) * (event.shiftKey ? 50 : 10);
+                onResize(resizeSplit(divider, delta, event.altKey, 0, minimumResizeShare));
+            }
+        }, onPointerDown: (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            event.preventDefault();
+            cleanup.current?.();
+            const element = event.currentTarget;
+            const pointerId = event.pointerId;
+            const start = horizontal ? event.clientX : event.clientY;
+            const parent = element.parentElement;
+            const rect = parent?.getBoundingClientRect();
+            const scale = horizontal ? (rect?.width ?? 1) / (parent?.clientWidth || 1) : (rect?.height ?? 1) / (parent?.clientHeight || 1);
+            element.dataset.resizing = '';
+            element.focus();
+            const move = (next) => {
+                if (next.pointerId !== pointerId) {
+                    return;
+                }
+                const delta = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
+                onResize(resizeSplit(divider, delta, next.altKey, 8 / (scale || 1), minimumResizeShare));
+            };
+            const end = () => {
+                element.removeEventListener('pointermove', move);
+                element.removeEventListener('pointerup', end);
+                element.removeEventListener('pointercancel', end);
+                element.removeEventListener('lostpointercapture', end);
+                element.ownerDocument.defaultView?.removeEventListener('blur', end);
+                delete element.dataset.resizing;
+                if (element.hasPointerCapture(pointerId)) {
+                    element.releasePointerCapture(pointerId);
+                }
+                cleanup.current = null;
+            };
+            cleanup.current = end;
+            element.setPointerCapture(pointerId);
+            element.addEventListener('pointermove', move);
+            element.addEventListener('pointerup', end);
+            element.addEventListener('pointercancel', end);
+            element.addEventListener('lostpointercapture', end);
+            element.ownerDocument.defaultView?.addEventListener('blur', end);
+        }, children: _jsx("span", {}) }));
+}
+export function SplitView({ value, onValueChange, renderView, getTab, renderPaneHeader, onClose, onTabDoubleClick, onTabContextMenu, onViewDragStart, canDrop, canDropExternal, onExternalDrop, onViewBoundsChange, minimumSize = MINIMUM, minimumResizeShare = 0, layout: ownLayout, flushEdges, showTabs = true, headerHeight = 36, render, ref, className, style, ...props }) {
+    const { t } = useTranslation('ui');
+    const inherited = useContext(WorkspaceContext);
+    const layout = ownLayout ?? inherited.layout;
+    const edges = flushEdges ?? inherited.edges;
+    const root = useRef(null);
+    const prefix = useId();
+    const serial = useRef(0);
+    const lastFocus = useRef(null);
+    useEffect(() => {
+        const previous = lastFocus.current;
+        const element = root.current;
+        const active = element?.ownerDocument.activeElement;
+        if (previous &&
+            element &&
+            (!previous.isConnected || previous.closest('[hidden]')) &&
+            (!active || active === element.ownerDocument.body || active === previous)) {
+            const pane = Array.from(element.querySelectorAll('[data-split-pane]')).find((item) => item.dataset.splitPane === value.focused);
+            const target = pane?.querySelector('[role="tab"][aria-selected="true"]') ?? pane;
+            target?.focus({ preventScroll: true });
+        }
+    });
+    const [measurement, setMeasurement] = useState(ZERO);
+    const [dragging, setDragging] = useState(false);
+    const drag = useRef(null);
+    const [preview, setPreview] = useState(null);
+    const latest = useRef({ value, onValueChange });
+    useLayoutEffect(() => {
+        latest.current = { value, onValueChange };
+    });
+    const dispatch = useCallback((command) => {
+        const state = latest.current;
+        const next = updateSplitLayout(state.value, command);
+        if (next !== state.value) {
+            state.onValueChange(next, command);
+        }
+    }, []);
+    const measure = useCallback(() => {
+        const element = root.current;
+        if (!element) {
+            return;
+        }
+        const rect = element.getBoundingClientRect();
+        const next = {
+            width: element.clientWidth,
+            height: element.clientHeight,
+            left: rect.left,
+            top: rect.top,
+            scaleX: rect.width / (element.clientWidth || 1),
+            scaleY: rect.height / (element.clientHeight || 1)
+        };
+        setMeasurement((current) => (Object.keys(next).every((key) => current[key] === next[key]) ? current : next));
+    }, []);
+    useLayoutEffect(measure);
+    useEffect(() => {
+        const element = root.current;
+        if (!element) {
+            return;
+        }
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+        observer?.observe(element);
+        const view = element.ownerDocument.defaultView;
+        view?.addEventListener('resize', measure);
+        view?.addEventListener('scroll', measure, true);
+        return () => {
+            observer?.disconnect();
+            view?.removeEventListener('resize', measure);
+            view?.removeEventListener('scroll', measure, true);
+        };
+    }, [measure]);
+    const stopDrag = useCallback(() => {
+        drag.current = null;
+        setDragging(false);
+        setPreview(null);
+    }, []);
+    useEffect(() => {
+        if (!dragging) {
+            return;
+        }
+        const document = root.current?.ownerDocument;
+        const view = document?.defaultView;
+        document?.addEventListener('dragend', stopDrag);
+        document?.addEventListener('drop', stopDrag);
+        view?.addEventListener('blur', stopDrag);
+        return () => {
+            document?.removeEventListener('dragend', stopDrag);
+            document?.removeEventListener('drop', stopDrag);
+            view?.removeEventListener('blur', stopDrag);
+        };
+    }, [dragging, stopDrag]);
+    const gap = layout === 'roomy' ? 8 : 1;
+    const barHeight = showTabs || renderPaneHeader ? Math.max(0, headerHeight) : 0;
+    const geometry = splitGeometry(value, measurement.width, measurement.height, gap, (pane) => typeof minimumSize === 'function' ? minimumSize(pane) : minimumSize);
+    const panes = splitPanes(value.root);
+    // A stable sibling order also avoids DOM moves, which reload embedded browsing contexts.
+    const views = panes
+        .flatMap((pane) => pane.views.map((viewId) => ({ pane, viewId })))
+        .sort((left, right) => (left.viewId < right.viewId ? -1 : left.viewId > right.viewId ? 1 : 0));
+    const visible = new Map(geometry.panes.map((pane) => [pane.pane.id, pane]));
+    const radius = (rect) => paneRadius(rect, measurement.width, measurement.height, edges, layout === 'roomy' ? 8 : 0);
+    const bounds = panes.flatMap((pane) => {
+        const rect = visible.get(pane.id);
+        const header = Math.min(barHeight, rect?.height ?? 0);
+        const body = rect
+            ? {
+                x: measurement.left + rect.x * measurement.scaleX,
+                y: measurement.top + (rect.y + header) * measurement.scaleY,
+                width: rect.width * measurement.scaleX,
+                height: Math.max(0, rect.height - header) * measurement.scaleY
+            }
+            : { x: 0, y: 0, width: 0, height: 0 };
+        const corners = rect ? radius(rect).split(' ') : ['0px', '0px', '0px', '0px'];
+        if (header > 0) {
+            corners[0] = corners[1] = '0px';
+        }
+        return pane.views.map((viewId) => ({ viewId, paneId: pane.id, active: !!rect && pane.active === viewId, rect: body, borderRadius: corners.join(' ') }));
+    });
+    const boundsKey = JSON.stringify(bounds);
+    const reportedBounds = useRef('');
+    const boundsCallback = useRef(onViewBoundsChange);
+    useLayoutEffect(() => {
+        boundsCallback.current = onViewBoundsChange;
+    });
+    useEffect(() => () => boundsCallback.current?.([]), []);
+    useLayoutEffect(() => {
+        if (onViewBoundsChange && reportedBounds.current !== boundsKey) {
+            reportedBounds.current = boundsKey;
+            onViewBoundsChange(bounds);
+        }
+    });
+    const id = (kind, viewId) => `${prefix}-${kind}-${encodeURIComponent(viewId)}`;
+    const startDrag = (pane, event, viewId) => {
+        drag.current = { sourceId: pane.id, viewId, width: event.currentTarget.closest('[data-document-tab]')?.getBoundingClientRect().width ?? 128 };
+        event.dataTransfer.setData('application/x-adecore-view', JSON.stringify({ workspace: prefix, paneId: pane.id, viewId }));
+        event.dataTransfer.effectAllowed = 'move';
+        if (viewId) {
+            onViewDragStart?.(viewId, event);
+        }
+        setDragging(true);
+    };
+    const commandFor = (target) => {
+        if (!drag.current) {
+            return null;
+        }
+        const { sourceId, viewId } = drag.current;
+        if (target.side === 'center') {
+            return { type: 'swap', sourceId, targetId: target.paneId, viewId };
+        }
+        return {
+            type: 'move',
+            sourceId,
+            viewId,
+            targetId: target.paneId,
+            side: target.side,
+            index: target.index,
+            newPaneId: `${prefix}-pane-${serial.current}`,
+            splitId: `${prefix}-split-${serial.current}`
+        };
+    };
+    const locateDrop = (event) => {
+        const x = (event.clientX - measurement.left) / (measurement.scaleX || 1);
+        const y = (event.clientY - measurement.top) / (measurement.scaleY || 1);
+        const rect = geometry.panes.find((item) => x >= item.x && x <= item.x + item.width && y >= item.y && y <= item.y + item.height);
+        if (!rect) {
+            return null;
+        }
+        const header = Math.min(barHeight, rect.height);
+        const strip = Array.from(root.current?.querySelectorAll('[data-split-header]') ?? []).find((element) => element.dataset.splitHeader === rect.pane.id);
+        const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
+        const inHeader = y < rect.y + header;
+        const side = inHeader ? undefined : (splitSideAt(rect, x, y) ?? 'center');
+        const index = inHeader ? tabGapAt(tabRects, event.clientX) : undefined;
+        const target = { paneId: rect.pane.id, side, index };
+        const command = commandFor(target);
+        if (drag.current) {
+            if (canDrop?.(drag.current, target) === false || !command || updateSplitLayout(value, command) === value) {
+                return null;
+            }
+        }
+        else if (!onExternalDrop || !canDropExternal?.(event, target)) {
+            return null;
+        }
+        if (side === 'center') {
+            return { target, shape: rectPreview(rect) };
+        }
+        if (side) {
+            const horizontal = side === 'left' || side === 'right';
+            const width = horizontal ? Math.max(0, (rect.width - gap) / 2) : rect.width;
+            const height = horizontal ? rect.height : Math.max(0, (rect.height - gap) / 2);
+            return {
+                target,
+                shape: rectPreview({
+                    x: side === 'right' ? rect.x + rect.width - width : rect.x,
+                    y: side === 'bottom' ? rect.y + rect.height - height : rect.y,
+                    width,
+                    height
+                })
+            };
+        }
+        if (header === 0) {
+            return { target, shape: rectPreview(rect) };
+        }
+        const tabWidth = Math.min(rect.width, (drag.current?.width ?? 128) / (measurement.scaleX || 1));
+        const next = tabRects[index ?? tabRects.length];
+        const left = next?.left ?? tabRects.at(-1)?.right ?? measurement.left + rect.x * measurement.scaleX;
+        const relative = Math.max(0, Math.min(rect.width - tabWidth, (left - measurement.left) / (measurement.scaleX || 1) - rect.x));
+        return {
+            target,
+            shape: tabPreview({ gap: index ?? rect.pane.views.length, left: relative, tabWidth, width: rect.width, height: rect.height, barHeight: header }, { x: rect.x, y: rect.y })
+        };
+    };
+    const focusDirection = (key) => {
+        const source = visible.get(value.focused);
+        if (!source) {
+            return;
+        }
+        const horizontal = key === 'ArrowLeft' || key === 'ArrowRight';
+        const positive = key === 'ArrowRight' || key === 'ArrowDown';
+        const center = (rect) => (horizontal ? rect.x + rect.width / 2 : rect.y + rect.height / 2);
+        const cross = (rect) => (horizontal ? rect.y + rect.height / 2 : rect.x + rect.width / 2);
+        const options = geometry.panes.filter((rect) => rect !== source && (positive ? center(rect) > center(source) : center(rect) < center(source)));
+        options.sort((left, right) => Math.abs(center(left) - center(source)) +
+            2 * Math.abs(cross(left) - cross(source)) -
+            (Math.abs(center(right) - center(source)) + 2 * Math.abs(cross(right) - cross(source))));
+        const next = options[0];
+        if (next) {
+            dispatch({ type: 'focus', paneId: next.pane.id });
+            const element = Array.from(root.current?.querySelectorAll('[data-split-pane]') ?? []).find((pane) => pane.dataset.splitPane === next.pane.id);
+            element?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
+            if (!showTabs) {
+                element?.focus();
+            }
+        }
+    };
+    return useRender({
+        render,
+        ref: [root, ref ?? null],
+        defaultTagName: 'div',
+        props: {
+            ...props,
+            className: clsx('ade-split-view', className),
+            style,
+            'data-layout': layout,
+            'data-dragging': dragging || undefined,
+            onFocusCapture: (event) => {
+                props.onFocusCapture?.(event);
+                lastFocus.current = event.target;
+            },
+            onKeyDown: (event) => {
+                props.onKeyDown?.(event);
+                const target = event.target;
+                const navigation = target === event.currentTarget || target.matches('.ade-split-pane, .ade-split-content') || !!target.closest('.ade-split-header');
+                if (!event.defaultPrevented && navigation && event.altKey && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+                    event.preventDefault();
+                    focusDirection(event.key);
+                }
+                if (event.key === 'Escape') {
+                    stopDrag();
+                }
+            },
+            onDragOver: (event) => {
+                props.onDragOver?.(event);
+                if (event.defaultPrevented) {
+                    setPreview(null);
+                    return;
+                }
+                const drop = locateDrop(event);
+                setPreview(drop?.shape ?? null);
+                if (drop) {
+                    event.preventDefault();
+                    event.dataTransfer.dropEffect = drag.current ? 'move' : 'copy';
+                }
+            },
+            onDragLeave: (event) => {
+                props.onDragLeave?.(event);
+                if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+                    setPreview(null);
+                }
+            },
+            onDrop: (event) => {
+                props.onDrop?.(event);
+                if (event.defaultPrevented) {
+                    stopDrag();
+                    return;
+                }
+                const drop = locateDrop(event);
+                if (drop) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const command = commandFor(drop.target);
+                    if (command) {
+                        serial.current++;
+                        dispatch(command);
+                    }
+                    else {
+                        onExternalDrop?.(drop.target, event);
+                    }
+                }
+                stopDrag();
+            },
+            children: (_jsxs(_Fragment, { children: [panes.map((pane) => {
+                        const rect = visible.get(pane.id);
+                        const header = Math.min(barHeight, rect?.height ?? 0);
+                        return (_jsx("section", { "data-split-pane": pane.id, "data-focused": value.focused === pane.id || undefined, className: "ade-split-pane", "aria-label": t('workspace.pane'), tabIndex: -1, hidden: !rect, inert: !rect, style: rect ? { left: rect.x, top: rect.y, width: rect.width, height: rect.height, borderRadius: radius(rect) } : undefined, onFocusCapture: () => dispatch({ type: 'focus', paneId: pane.id }), onPointerDown: () => dispatch({ type: 'focus', paneId: pane.id }), children: header > 0 && (_jsx("div", { className: "ade-split-header", "data-split-header": pane.id, style: { height: header }, children: renderPaneHeader ? (renderPaneHeader(pane)) : (_jsxs(_Fragment, { children: [_jsx(TabStrip, { items: pane.views.map((viewId) => {
+                                                const metadata = getTab?.(viewId);
+                                                return {
+                                                    ...metadata,
+                                                    id: viewId,
+                                                    label: metadata?.label ?? viewId,
+                                                    tabId: id('tab', viewId),
+                                                    panelId: id('view', viewId)
+                                                };
+                                            }), value: pane.active, focused: value.focused === pane.id, onValueChange: (viewId) => dispatch({ type: 'activate', paneId: pane.id, viewId }), onClose: onClose ?? ((viewId) => dispatch({ type: 'close', viewId })), onDoubleClick: onTabDoubleClick, onContextMenu: onTabContextMenu, onDragStart: (viewId, event) => startDrag(pane, event, viewId), onDragEnd: stopDrag }), _jsx(IconButton, { icon: GripVertical, size: "sm", label: t('workspace.movePane'), draggable: true, onDragStart: (event) => startDrag(pane, event), onDragEnd: stopDrag }), _jsx(IconButton, { icon: value.maximized === pane.id ? Minimize2 : Maximize2, size: "sm", label: t(value.maximized === pane.id ? 'workspace.restore' : 'workspace.maximize'), onClick: () => dispatch({ type: 'maximize', paneId: value.maximized === pane.id ? null : pane.id }) })] })) })) }, pane.id));
+                    }), views.map(({ pane, viewId }) => {
+                        const rect = visible.get(pane.id);
+                        const active = !!rect && pane.active === viewId;
+                        const header = Math.min(barHeight, rect?.height ?? 0);
+                        const corners = rect ? radius(rect).split(' ') : [];
+                        if (header > 0) {
+                            corners[0] = corners[1] = '0px';
+                        }
+                        const position = rect
+                            ? {
+                                left: rect.x,
+                                top: rect.y + header,
+                                width: rect.width,
+                                height: Math.max(0, rect.height - header),
+                                borderRadius: corners.join(' ')
+                            }
+                            : {};
+                        return (_jsx("div", { id: id('view', viewId), role: "tabpanel", "aria-labelledby": showTabs && !renderPaneHeader ? id('tab', viewId) : undefined, "aria-label": !showTabs || renderPaneHeader ? (getTab?.(viewId).label ?? viewId) : undefined, className: "ade-split-content", "data-split-view-id": viewId, hidden: !active, inert: !active, tabIndex: 0, style: position, onFocusCapture: () => dispatch({ type: 'focus', paneId: pane.id }), onPointerDown: () => dispatch({ type: 'focus', paneId: pane.id }), children: renderView(viewId, { paneId: pane.id, active }) }, viewId));
+                    }), geometry.dividers.map((divider) => (_jsx(Divider, { divider: divider, minimumResizeShare: minimumResizeShare, onResize: (sizes) => dispatch({ type: 'resize', splitId: divider.splitId, sizes }), onEqualize: (all) => dispatch(all
+                            ? {
+                                type: 'equalizeAxis',
+                                axis: divider.axis,
+                                length: divider.axis === 'horizontal' ? measurement.width : measurement.height,
+                                gap: layout === 'roomy' ? 8 : 1
+                            }
+                            : { type: 'equalize', splitId: divider.splitId, index: divider.index }) }, `${divider.splitId}:${divider.index}`))), preview && (_jsx("svg", { className: "ade-split-preview", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("path", { style: { d: `path("${dropPreviewPath(preview)}")` } }) }))] }))
+        }
+    });
+}

package/dist/workspace/TabStrip.d.ts

@@ -0,0 +1,42 @@
+import { type DragEvent, type MouseEvent, type ReactNode } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { type IconButtonProps } from '../IconButton.tsx';
+export interface TabStripItem {
+    id: string;
+    label: string;
+    hint?: string;
+    icon?: ReactNode;
+    detail?: ReactNode;
+    attention?: ReactNode;
+    unsaved?: boolean | string;
+    pinned?: boolean;
+    closable?: boolean;
+    tabId?: string;
+    panelId?: string;
+}
+export interface TabStripProps extends Omit<useRender.ComponentProps<'div'>, 'children' | 'onDragStart' | 'onDragEnd' | 'onDoubleClick' | 'onContextMenu'> {
+    items: readonly TabStripItem[];
+    value: string | null;
+    onValueChange(value: string): void;
+    renderTab?(item: TabStripItem): ReactNode;
+    focused?: boolean;
+    insertAt?: number | null;
+    onClose?(id: string): void;
+    onDoubleClick?(id: string, event: MouseEvent<HTMLButtonElement>): void;
+    onContextMenu?(id: string, event: MouseEvent<HTMLSpanElement>): void;
+    onDragStart?(id: string, event: DragEvent<HTMLButtonElement>): void;
+    onDragEnd?(event: DragEvent<HTMLButtonElement>): void;
+    onTabDragOver?(index: number, event: DragEvent<HTMLDivElement>): void;
+    onTabDrop?(index: number, event: DragEvent<HTMLDivElement>): void;
+}
+export declare function TabStrip({ items, value, onValueChange, renderTab, focused, insertAt, onClose, onDoubleClick, onContextMenu, onDragStart, onDragEnd, onTabDragOver, onTabDrop, render, className, ref, ...props }: TabStripProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface DocumentTabProps extends Omit<useRender.ComponentProps<'span'>, 'children' | 'onDoubleClick' | 'onDragStart' | 'onDragEnd'> {
+    item: TabStripItem;
+    onClose?(): void;
+    closeShortcut?: IconButtonProps['kbd'];
+    onDoubleClick?: TabStripProps['onDoubleClick'];
+    onDragStart?: TabStripProps['onDragStart'];
+    onDragEnd?: TabStripProps['onDragEnd'];
+}
+/** A tab with application-owned metadata and menus, rendered inside TabStrip's renderTab slot. */
+export declare function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDragStart, onDragEnd, className, render, ref, ...props }: DocumentTabProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/workspace/TabStrip.js

@@ -0,0 +1,168 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { Pin, X } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '../Icon.js';
+import { IconButton } from '../IconButton.js';
+import { Tooltip } from '../Tooltip.js';
+import { tabGapAt } from './geometry.js';
+export function TabStrip({ items, value, onValueChange, renderTab, focused = true, insertAt, onClose, onDoubleClick, onContextMenu, onDragStart, onDragEnd, onTabDragOver, onTabDrop, render, className, ref, ...props }) {
+    const { t } = useTranslation('ui');
+    const strip = useRef(null);
+    const closingFocus = useRef(null);
+    useLayoutEffect(() => {
+        if (closingFocus.current && !items.some((item) => item.id === closingFocus.current)) {
+            closingFocus.current = null;
+            const target = strip.current?.querySelector('[aria-selected="true"]') ?? strip.current?.querySelector('[role="tab"]');
+            target?.focus({ preventScroll: true });
+        }
+    });
+    const close = (id, action) => {
+        if (strip.current?.contains(strip.current.ownerDocument.activeElement)) {
+            closingFocus.current = id;
+        }
+        if (action) {
+            action();
+        }
+        else {
+            onClose?.(id);
+        }
+    };
+    const [edges, setEdges] = useState({ start: false, end: false });
+    const [insertion, setInsertion] = useState(0);
+    const measure = useCallback(() => {
+        const element = strip.current;
+        if (!element) {
+            return;
+        }
+        const start = element.scrollLeft > 0;
+        const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
+        setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
+        if (insertAt !== undefined && insertAt !== null) {
+            const tabs = Array.from(element.querySelectorAll('[data-document-tab]'));
+            const after = tabs[insertAt];
+            const last = tabs.at(-1);
+            setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
+        }
+    }, [insertAt]);
+    useLayoutEffect(measure);
+    useEffect(() => {
+        const element = strip.current;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
+        return () => observer.disconnect();
+    });
+    useEffect(() => {
+        strip.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }, [value]);
+    const gap = (event) => {
+        const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
+        return tabGapAt(rects, event.clientX);
+    };
+    const context = {
+        items,
+        value,
+        onValueChange,
+        onClose,
+        onDoubleClick,
+        onContextMenu,
+        onDragStart,
+        onDragEnd,
+        close,
+        focus: (index) => strip.current?.querySelectorAll('[role="tab"]')[index]?.focus()
+    };
+    return useRender({
+        render,
+        ref: [strip, ref ?? null],
+        defaultTagName: 'div',
+        props: {
+            ...props,
+            role: 'tablist',
+            'aria-label': props['aria-label'] ?? t('workspace.tabs'),
+            className: clsx('ade-tab-strip scroll-fade-x', className),
+            'data-focused': focused || undefined,
+            'data-fade-start': edges.start || undefined,
+            'data-fade-end': edges.end || undefined,
+            onScroll: (event) => {
+                props.onScroll?.(event);
+                measure();
+            },
+            onWheel: (event) => {
+                props.onWheel?.(event);
+                if (!event.defaultPrevented && !event.deltaX && event.deltaY) {
+                    event.currentTarget.scrollLeft += event.deltaY;
+                }
+            },
+            onDragOver: (event) => {
+                props.onDragOver?.(event);
+                if (!event.defaultPrevented) {
+                    onTabDragOver?.(gap(event), event);
+                }
+            },
+            onDrop: (event) => {
+                props.onDrop?.(event);
+                if (!event.defaultPrevented) {
+                    onTabDrop?.(gap(event), event);
+                }
+            },
+            children: (_jsxs(_Fragment, { children: [items.map((item) => (_jsx(TabContext.Provider, { value: context, children: renderTab ? renderTab(item) : _jsx(DocumentTab, { item: item }) }, item.id))), insertAt !== undefined && insertAt !== null && _jsx("span", { "aria-hidden": "true", className: "ade-tab-insertion", style: { left: insertion } })] }))
+        }
+    });
+}
+const TabContext = createContext(null);
+/** A tab with application-owned metadata and menus, rendered inside TabStrip's renderTab slot. */
+export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDragStart, onDragEnd, className, render, ref, ...props }) {
+    const context = useContext(TabContext);
+    if (!context) {
+        throw new Error('DocumentTab must be rendered inside TabStrip.');
+    }
+    const { t } = useTranslation('ui');
+    const { items, value, onValueChange } = context;
+    const index = items.findIndex((candidate) => candidate.id === item.id);
+    const close = () => context.close(item.id, onClose);
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            className: clsx('ade-document-tab', className),
+            'data-document-tab': item.id,
+            'data-active': item.id === value || undefined,
+            'data-detail': !!item.detail || undefined,
+            onContextMenu: (event) => {
+                props.onContextMenu?.(event);
+                context.onContextMenu?.(item.id, event);
+            },
+            children: (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: item.hint ?? item.label, children: _jsxs("button", { type: "button", role: "tab", id: item.tabId, "aria-controls": item.panelId, "aria-selected": item.id === value, tabIndex: item.id === value || (value === null && index === 0) ? 0 : -1, className: "ade-document-tab-open", draggable: !!(onDragStart ?? context.onDragStart), onClick: () => onValueChange(item.id), onDoubleClick: (event) => (onDoubleClick ?? context.onDoubleClick)?.(item.id, event), onDragStart: (event) => {
+                                event.stopPropagation();
+                                (onDragStart ?? context.onDragStart)?.(item.id, event);
+                            }, onDragEnd: onDragEnd ?? context.onDragEnd, onKeyDown: (event) => {
+                                const next = event.key === 'ArrowRight'
+                                    ? (index + 1) % items.length
+                                    : event.key === 'ArrowLeft'
+                                        ? (index + items.length - 1) % items.length
+                                        : event.key === 'Home'
+                                            ? 0
+                                            : event.key === 'End'
+                                                ? items.length - 1
+                                                : null;
+                                if (next !== null) {
+                                    event.preventDefault();
+                                    onValueChange(items[next].id);
+                                    context.focus(next);
+                                }
+                                else if (event.key === 'Delete' && item.closable !== false && (onClose || context.onClose)) {
+                                    event.preventDefault();
+                                    close();
+                                }
+                            }, children: [item.icon, _jsx("span", { className: "truncate", children: item.label }), item.detail, item.attention, item.unsaved && (_jsx("span", { className: "ade-tab-unsaved", children: _jsx("span", { className: "sr-only", children: typeof item.unsaved === 'string' ? item.unsaved : t('workspace.unsaved') }) }))] }) }), item.pinned && _jsx(Icon, { icon: Pin, size: 12, className: "shrink-0 text-text-muted" }), item.closable !== false && (onClose || context.onClose) && (_jsx(IconButton, { icon: X, size: "2xs", label: t('workspace.closeTab', { name: item.label }), kbd: closeShortcut, className: "ade-document-tab-close", onClick: close }))] }))
+        }
+    });
+}

package/dist/workspace/Workspace.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { useRender } from '@base-ui-components/react/use-render';
+import { type WorkspaceLayout } from './context.ts';
+export interface WorkspaceProps extends useRender.ComponentProps<'div'> {
+    layout?: WorkspaceLayout;
+    toolbar?: ReactNode;
+    sidebar?: ReactNode;
+    sidePanel?: ReactNode;
+    /** Auto-sized regions keep their own width, separators and opening animation. */
+    sidebarWidth?: number | 'auto';
+    sidePanelWidth?: number | 'auto';
+    sidebarOpen?: boolean;
+    sidePanelOpen?: boolean;
+}
+export declare function Workspace({ layout, toolbar, sidebar, sidePanel, sidebarWidth, sidePanelWidth, sidebarOpen, sidePanelOpen, children, className, ref, render, style, ...props }: WorkspaceProps): import("react").JSX.Element;