@harborclient/sdk 1.0.67 → 1.0.68

package/dist/components/TabBar/index.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { DndContext as DndContextBase, DragOverlay as DragOverlayBase, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, arrayMove, horizontalListSortingStrategy, rectSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useEffect, useMemo, useState } from '@harborclient/sdk/react';
+import { cn, resolveTabListKeyAction } from '../utils.js';
+import { ClosingTabShell } from './ClosingTabShell.js';
+import { TabBarShell } from './TabBarShell.js';
+import { TabContextMenu } from './TabContextMenu.js';
+import { TabNewButton } from './TabNewButton.js';
+import { useExitingTabItems } from './useExitingTabItems.js';
+const DndContext = DndContextBase;
+const DragOverlay = DragOverlayBase;
+/**
+ * Builds a stable dnd-kit sortable id for a tab row.
+ *
+ * @param prefix - Sortable id prefix.
+ * @param id - Open tab id.
+ */
+function tabSortableId(prefix, id) {
+    return `${prefix}${String(id)}`;
+}
+/**
+ * Parses a sortable drag id back to its tab id string.
+ *
+ * @param prefix - Sortable id prefix.
+ * @param dragId - Sortable id from dnd-kit.
+ */
+function parseTabSortableId(prefix, dragId) {
+    if (!dragId.startsWith(prefix)) {
+        return null;
+    }
+    return dragId.slice(prefix.length);
+}
+/**
+ * Resolves the tab list index for arrow-key navigation from keyboard focus.
+ *
+ * @param tabs - Open tabs in display order.
+ * @param activeId - Currently selected tab id.
+ * @param tabIdPrefix - Prefix for tab element ids.
+ * @returns Index into `tabs`, or `-1` when the list is empty.
+ */
+function resolveFocusedTabIndex(tabs, activeId, tabIdPrefix) {
+    const activeElement = document.activeElement;
+    if (activeElement instanceof HTMLElement) {
+        const tabElement = activeElement.closest('[role="tab"]');
+        if (tabElement instanceof HTMLElement && tabElement.id.startsWith(tabIdPrefix)) {
+            const tabId = tabElement.id.slice(tabIdPrefix.length);
+            const focusedIndex = tabs.findIndex((tab) => String(tab.id) === tabId);
+            if (focusedIndex >= 0) {
+                return focusedIndex;
+            }
+        }
+    }
+    return tabs.findIndex((tab) => tab.id === activeId);
+}
+/**
+ * Document-style tab bar with drag reorder, keyboard navigation, close animation,
+ * optional context menu, and a new-tab control.
+ */
+export function TabBar({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPrefix, sortablePrefix, newTab, onSelect, onClose, onReorder, buildContextMenuGroups, onArrowDownIntoPanel, onFocusTab, renderScrollContainer, maxTabWidthClass, sortableCursor, className }) {
+    const resolvedSortablePrefix = sortablePrefix ?? `${tabIdPrefix}sort:`;
+    const [activeDragId, setActiveDragId] = useState(null);
+    const [contextMenu, setContextMenu] = useState(null);
+    const getId = useMemo(() => (item) => item.id, []);
+    const sortableEnabled = tabs.length >= 2;
+    const { completeExit, getExitingBefore, removedIds } = useExitingTabItems(tabs, getId);
+    /**
+     * Stable sortable ids for open tabs.
+     */
+    const sortableIds = useMemo(() => tabs.map((tab) => tabSortableId(resolvedSortablePrefix, tab.id)), [tabs, resolvedSortablePrefix]);
+    /**
+     * Stable tab ids in display order for context menu close actions.
+     */
+    const orderedIds = useMemo(() => tabs.map((tab) => tab.id), [tabs]);
+    /**
+     * Menu groups for the open tab context menu, when one is visible.
+     */
+    const contextMenuGroups = useMemo(() => {
+        if (contextMenu == null || buildContextMenuGroups == null) {
+            return [];
+        }
+        return buildContextMenuGroups(contextMenu.targetId, orderedIds);
+    }, [buildContextMenuGroups, contextMenu, orderedIds]);
+    /**
+     * Moves focus to the active tab when the focused tab row was just removed.
+     */
+    useEffect(() => {
+        if (removedIds.length === 0 || onFocusTab == null) {
+            return;
+        }
+        const focusedTab = document.activeElement?.closest('[role="tab"]');
+        if (!(focusedTab instanceof HTMLElement) || !focusedTab.id.startsWith(tabIdPrefix)) {
+            return;
+        }
+        const focusedTabId = focusedTab.id.slice(tabIdPrefix.length);
+        if (!removedIds.some((id) => String(id) === focusedTabId)) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            onFocusTab(activeId);
+        });
+    }, [activeId, onFocusTab, removedIds, tabIdPrefix]);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    /**
+     * Tab currently being dragged for overlay preview.
+     */
+    const activeDragTab = useMemo(() => {
+        if (activeDragId == null) {
+            return null;
+        }
+        return tabs.find((tab) => tab.id === activeDragId) ?? null;
+    }, [activeDragId, tabs]);
+    /**
+     * Records the tab being dragged for overlay preview.
+     */
+    const handleDragStart = (event) => {
+        const tabId = parseTabSortableId(resolvedSortablePrefix, String(event.active.id));
+        if (tabId == null) {
+            setActiveDragId(null);
+            return;
+        }
+        const match = tabs.find((tab) => String(tab.id) === tabId);
+        setActiveDragId(match?.id ?? null);
+    };
+    /**
+     * Persists a new tab order when a tab is dropped.
+     */
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        setActiveDragId(null);
+        if (!over || !sortableEnabled) {
+            return;
+        }
+        const activeTabIdFromDrag = parseTabSortableId(resolvedSortablePrefix, String(active.id));
+        const overTabId = parseTabSortableId(resolvedSortablePrefix, String(over.id));
+        if (activeTabIdFromDrag == null || overTabId == null || activeTabIdFromDrag === overTabId) {
+            return;
+        }
+        const tabIds = tabs.map((tab) => tab.id);
+        const oldIndex = tabIds.findIndex((id) => String(id) === activeTabIdFromDrag);
+        const newIndex = tabIds.findIndex((id) => String(id) === overTabId);
+        if (oldIndex < 0 || newIndex < 0) {
+            return;
+        }
+        onReorder(arrayMove(tabIds, oldIndex, newIndex));
+    };
+    /**
+     * Moves focus and selection across open tabs with arrow, Home, and End keys.
+     */
+    const handleTabListKeyDown = (event) => {
+        if (event.key === 'ArrowDown' && onArrowDownIntoPanel != null) {
+            const activeElement = document.activeElement;
+            if (activeElement instanceof HTMLElement) {
+                const tabElement = activeElement.closest('[role="tab"]');
+                if (tabElement instanceof HTMLElement && tabElement.id.startsWith(tabIdPrefix)) {
+                    const tabId = tabElement.id.slice(tabIdPrefix.length);
+                    const match = tabs.find((tab) => String(tab.id) === tabId);
+                    if (match != null && onArrowDownIntoPanel(match.id)) {
+                        event.preventDefault();
+                        return;
+                    }
+                }
+            }
+        }
+        const currentIndex = resolveFocusedTabIndex(tabs, activeId, tabIdPrefix);
+        if (currentIndex < 0) {
+            return;
+        }
+        const nextIndex = resolveTabListKeyAction(event.key, currentIndex, tabs.length);
+        if (nextIndex === null) {
+            return;
+        }
+        event.preventDefault();
+        const nextTab = tabs[nextIndex];
+        onSelect(nextTab.id);
+        if (onFocusTab != null) {
+            requestAnimationFrame(() => {
+                onFocusTab(nextTab.id);
+            });
+        }
+    };
+    const tabRowClassName = wrap ? 'w-full min-w-0 py-1' : 'flex w-max flex-nowrap items-end py-1';
+    const tabListClassName = wrap
+        ? 'flex min-w-0 w-full flex-wrap items-end gap-y-2'
+        : 'flex items-end';
+    const sortStrategy = wrap ? rectSortingStrategy : horizontalListSortingStrategy;
+    const newTabButton = (_jsx(TabNewButton, { wrapped: wrap, ariaLabel: newTab.ariaLabel, title: newTab.title, onClick: newTab.onClick }));
+    /**
+     * Renders one tab shell, optionally inside a close-animation wrapper.
+     */
+    const renderTabShell = (item, options) => (_jsx(TabBarShell, { item: item, tabIndex: options.tabIndex, sortableId: tabSortableId(resolvedSortablePrefix, item.id), sortableDisabled: options.sortableDisabled, exiting: options.exiting, tabIdPrefix: tabIdPrefix, panelIdPrefix: panelIdPrefix, maxTabWidthClass: maxTabWidthClass, sortableCursor: sortableCursor, onSelect: onSelect, onClose: onClose, onContextMenu: options.onContextMenu }));
+    const tabRow = (_jsxs("div", { className: tabRowClassName, children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: () => setActiveDragId(null), children: [_jsxs("div", { role: "tablist", "aria-label": ariaLabel, className: tabListClassName, onKeyDown: handleTabListKeyDown, children: [_jsxs(SortableContext, { items: sortableIds, strategy: sortStrategy, children: [tabs.flatMap((tab) => {
+                                        const nodes = getExitingBefore(tab.id).map((exitingTab) => (_jsx(ClosingTabShell, { onComplete: () => completeExit(exitingTab.exitKey), children: renderTabShell(exitingTab.item, {
+                                                tabIndex: -1,
+                                                sortableDisabled: true,
+                                                exiting: true
+                                            }) }, exitingTab.exitKey)));
+                                        nodes.push(_jsx(TabBarShell, { item: tab, tabIndex: 0, sortableId: tabSortableId(resolvedSortablePrefix, tab.id), sortableDisabled: !sortableEnabled, tabIdPrefix: tabIdPrefix, panelIdPrefix: panelIdPrefix, maxTabWidthClass: maxTabWidthClass, sortableCursor: sortableCursor, onSelect: onSelect, onClose: onClose, onContextMenu: buildContextMenuGroups == null
+                                                ? undefined
+                                                : (id, event) => {
+                                                    setContextMenu({
+                                                        targetId: id,
+                                                        x: event.clientX,
+                                                        y: event.clientY
+                                                    });
+                                                } }, `live-${String(tab.id)}`));
+                                        return nodes;
+                                    }), getExitingBefore(null).map((exitingTab) => (_jsx(ClosingTabShell, { onComplete: () => completeExit(exitingTab.exitKey), children: renderTabShell(exitingTab.item, {
+                                            tabIndex: -1,
+                                            sortableDisabled: true,
+                                            exiting: true
+                                        }) }, exitingTab.exitKey)))] }), wrap ? newTabButton : null] }), _jsx(DragOverlay, { children: activeDragTab ? (_jsx("div", { className: "rounded-t-lg border border-separator bg-surface px-3 py-2 text-[14px] font-medium shadow-md", children: activeDragTab.dragLabel })) : null })] }), wrap ? null : newTabButton] }));
+    const defaultScrollContainer = (row) => (_jsx("div", { className: "min-w-0 flex-1 overflow-x-auto", children: row }));
+    const scrollContainer = renderScrollContainer ?? defaultScrollContainer;
+    const containerClassName = cn('app-no-drag flex shrink-0 items-end border-b border-separator bg-sidebar px-2', className);
+    return (_jsxs("div", { className: containerClassName, children: [wrap ? _jsx("div", { className: "min-w-0 flex-1", children: tabRow }) : scrollContainer(tabRow), contextMenu != null && buildContextMenuGroups != null && (_jsx(TabContextMenu, { groups: contextMenuGroups, position: { x: contextMenu.x, y: contextMenu.y }, onClose: () => setContextMenu(null) }))] }));
+}
+export { TabNewButton } from './TabNewButton.js';
+export { TabContextMenu } from './TabContextMenu.js';
+export { ClosingTabShell } from './ClosingTabShell.js';
+export { TabBarShell } from './TabBarShell.js';
+export { useSortableTabItem } from './useSortableTabItem.js';
+export { useExitingTabItems, detectRemovedTabItems, resolveInsertBeforeId } from './useExitingTabItems.js';
+export { buildTabCloseMenuGroups, tabIdsToCloseOthers, tabIdsToCloseToTheRight } from './tabCloseMenuHelpers.js';

package/dist/components/TabBar/tabCloseMenuHelpers.d.ts

@@ -0,0 +1,41 @@
+import type { MenuItem } from '../RowActionsMenu/index.js';
+interface TabCloseMenuActions<T extends string | number> {
+    /**
+     * Closes a single tab.
+     */
+    onClose: (id: T) => void;
+    /**
+     * Closes every tab in `ids`.
+     */
+    onCloseMany: (ids: T[]) => void;
+    /**
+     * Closes tabs that are considered saved (non-dirty for requests, with messages for AI).
+     */
+    onCloseSaved: () => void;
+}
+/**
+ * Builds grouped context menu items shared by request and AI tab bars.
+ *
+ * @param orderedIds - Tab ids in display order.
+ * @param targetId - Tab that was right-clicked.
+ * @param actions - Close handlers for single, bulk, and saved-only operations.
+ */
+export declare function buildTabCloseMenuGroups<T extends string | number>(orderedIds: readonly T[], targetId: T, actions: TabCloseMenuActions<T>): MenuItem[][];
+/**
+ * Returns tab ids for every tab except the one at `targetId`.
+ *
+ * @param orderedIds - Tab ids in display order.
+ * @param targetId - Tab that should remain open.
+ * @returns Ids of all other tabs.
+ */
+export declare function tabIdsToCloseOthers<T extends string | number>(orderedIds: readonly T[], targetId: T): T[];
+/**
+ * Returns tab ids positioned to the right of `targetId` in display order.
+ *
+ * @param orderedIds - Tab ids in display order.
+ * @param targetId - Tab whose right-hand neighbors should be closed.
+ * @returns Ids of tabs after `targetId`, or an empty array when not found.
+ */
+export declare function tabIdsToCloseToTheRight<T extends string | number>(orderedIds: readonly T[], targetId: T): T[];
+export {};
+//# sourceMappingURL=tabCloseMenuHelpers.d.ts.map

package/dist/components/TabBar/tabCloseMenuHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabCloseMenuHelpers.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/tabCloseMenuHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE3D,UAAU,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC/D,UAAU,EAAE,SAAS,CAAC,EAAE,EACxB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAC9B,QAAQ,EAAE,EAAE,CAuBd;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC3D,UAAU,EAAE,SAAS,CAAC,EAAE,EACxB,QAAQ,EAAE,CAAC,GACV,CAAC,EAAE,CAEL;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC/D,UAAU,EAAE,SAAS,CAAC,EAAE,EACxB,QAAQ,EAAE,CAAC,GACV,CAAC,EAAE,CAML"}

package/dist/components/TabBar/tabCloseMenuHelpers.js

@@ -0,0 +1,48 @@
+/**
+ * Builds grouped context menu items shared by request and AI tab bars.
+ *
+ * @param orderedIds - Tab ids in display order.
+ * @param targetId - Tab that was right-clicked.
+ * @param actions - Close handlers for single, bulk, and saved-only operations.
+ */
+export function buildTabCloseMenuGroups(orderedIds, targetId, actions) {
+    const targetIndex = orderedIds.indexOf(targetId);
+    const others = tabIdsToCloseOthers(orderedIds, targetId);
+    const toTheRight = tabIdsToCloseToTheRight(orderedIds, targetId);
+    const items = [{ label: 'Close', onSelect: () => actions.onClose(targetId) }];
+    if (orderedIds.length > 1) {
+        items.push({ label: 'Close others', onSelect: () => actions.onCloseMany(others) });
+    }
+    if (targetIndex >= 0 && targetIndex < orderedIds.length - 1) {
+        items.push({
+            label: 'Close to the right',
+            onSelect: () => actions.onCloseMany(toTheRight)
+        });
+    }
+    items.push({ label: 'Close saved', onSelect: () => actions.onCloseSaved() }, { label: 'Close all', onSelect: () => actions.onCloseMany([...orderedIds]) });
+    return [items];
+}
+/**
+ * Returns tab ids for every tab except the one at `targetId`.
+ *
+ * @param orderedIds - Tab ids in display order.
+ * @param targetId - Tab that should remain open.
+ * @returns Ids of all other tabs.
+ */
+export function tabIdsToCloseOthers(orderedIds, targetId) {
+    return orderedIds.filter((id) => id !== targetId);
+}
+/**
+ * Returns tab ids positioned to the right of `targetId` in display order.
+ *
+ * @param orderedIds - Tab ids in display order.
+ * @param targetId - Tab whose right-hand neighbors should be closed.
+ * @returns Ids of tabs after `targetId`, or an empty array when not found.
+ */
+export function tabIdsToCloseToTheRight(orderedIds, targetId) {
+    const index = orderedIds.indexOf(targetId);
+    if (index < 0) {
+        return [];
+    }
+    return orderedIds.slice(index + 1);
+}

package/dist/components/TabBar/types.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+/**
+ * Data for a single tab row rendered by {@link TabBar}.
+ */
+export interface TabBarItem<TId extends string | number> {
+    /**
+     * Stable tab identifier used for selection, close, and reorder callbacks.
+     */
+    id: TId;
+    /**
+     * Whether this tab is the currently selected tab.
+     */
+    active: boolean;
+    /**
+     * Label and icon content rendered inside the tab shell.
+     */
+    content: ReactNode;
+    /**
+     * Accessible name for the tab control, including unsaved or status suffixes.
+     */
+    accessibleName: string;
+    /**
+     * Accessible name for the close button, typically including the tab title.
+     */
+    closeAccessibleName: string;
+    /**
+     * Native tooltip text when the label is truncated.
+     */
+    title?: string;
+    /**
+     * Plain-text or element preview shown in the drag overlay.
+     */
+    dragLabel: ReactNode;
+    /**
+     * When true, uses active styling even when not selected (for example tab group edit).
+     */
+    highlighted?: boolean;
+}
+/**
+ * Configuration for the new-tab "+" control at the end of the tab bar.
+ */
+export interface TabBarNewTab {
+    /**
+     * Accessible name for the new-tab control.
+     */
+    ariaLabel: string;
+    /**
+     * Native tooltip text for the new-tab control.
+     */
+    title: string;
+    /**
+     * Called when the user opens a new tab or chat.
+     */
+    onClick: () => void;
+}
+/**
+ * Cursor style applied to draggable tab rows when reordering is enabled.
+ */
+export type TabBarSortableCursor = 'pointer' | 'grab';
+//# sourceMappingURL=types.d.ts.map

package/dist/components/TabBar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACrD;;OAEG;IACH,EAAE,EAAE,GAAG,CAAC;IAER;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,MAAM,CAAC"}

package/dist/components/TabBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/TabBar/useExitingTabItems.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Snapshot of a tab row kept in the DOM while its close animation plays.
+ */
+export interface ExitingTabItem<T, TId> {
+    /**
+     * Tab data captured at removal time.
+     */
+    item: T;
+    /**
+     * Id of the live tab immediately to the right before removal, or null when
+     * this tab was last in the row.
+     */
+    insertBeforeId: TId | null;
+    /**
+     * Stable React key for this exit animation instance.
+     */
+    exitKey: string;
+}
+/**
+ * Resolves the anchor id for an exiting tab: the first still-open tab that was
+ * to its right in the previous list, or null when none remain on the right.
+ *
+ * @param previousItems - Tab list before removal.
+ * @param removedIndex - Index of the tab being removed.
+ * @param currentIds - Ids that remain open after removal.
+ * @param getId - Reads a stable id from a tab item.
+ * @returns Anchor id for render placement, or null for end-of-row placement.
+ */
+export declare function resolveInsertBeforeId<T, TId>(previousItems: T[], removedIndex: number, currentIds: Set<TId>, getId: (item: T) => TId): TId | null;
+/**
+ * Detects tabs removed between two list snapshots and their render anchors.
+ *
+ * @param previousItems - Tab list before removal.
+ * @param currentItems - Tab list after removal.
+ * @param getId - Reads a stable id from a tab item.
+ * @returns Removed tabs with placement anchors for exit animation.
+ */
+export declare function detectRemovedTabItems<T, TId>(previousItems: T[], currentItems: T[], getId: (item: T) => TId): Array<{
+    item: T;
+    insertBeforeId: TId | null;
+}>;
+interface UseExitingTabItemsResult<T, TId> {
+    /**
+     * Tabs currently playing their close animation.
+     */
+    exiting: ExitingTabItem<T, TId>[];
+    /**
+     * Ids removed in the latest list update (cleared on the next stable render).
+     */
+    removedIds: TId[];
+    /**
+     * Drops a finished exit snapshot from local state.
+     *
+     * @param exitKey - Key returned with the exiting tab entry.
+     */
+    completeExit: (exitKey: string) => void;
+    /**
+     * Returns exit snapshots that should render immediately before an anchor tab.
+     *
+     * @param anchorId - Live tab id to the right of the snapshot, or null for end-of-row.
+     */
+    getExitingBefore: (anchorId: TId | null) => ExitingTabItem<T, TId>[];
+}
+/**
+ * Tracks tab rows removed from a live list and keeps snapshots for exit animation.
+ *
+ * @param items - Current open tabs from Redux or parent state.
+ * @param getId - Reads a stable id from a tab item.
+ * @returns Exiting snapshots, placement helpers, and ids removed last update.
+ */
+export declare function useExitingTabItems<T, TId>(items: T[], getId: (item: T) => TId): UseExitingTabItemsResult<T, TId>;
+export {};
+//# sourceMappingURL=useExitingTabItems.d.ts.map

package/dist/components/TabBar/useExitingTabItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExitingTabItems.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/useExitingTabItems.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,EAAE,GAAG;IACpC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;;OAGG;IACH,cAAc,EAAE,GAAG,GAAG,IAAI,CAAC;IAE3B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,GAAG,EAC1C,aAAa,EAAE,CAAC,EAAE,EAClB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,EACpB,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,GACtB,GAAG,GAAG,IAAI,CASZ;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,GAAG,EAC1C,aAAa,EAAE,CAAC,EAAE,EAClB,YAAY,EAAE,CAAC,EAAE,EACjB,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,GACtB,KAAK,CAAC;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,cAAc,EAAE,GAAG,GAAG,IAAI,CAAA;CAAE,CAAC,CAkBhD;AAED,UAAU,wBAAwB,CAAC,CAAC,EAAE,GAAG;IACvC;;OAEG;IACH,OAAO,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAElC;;OAEG;IACH,UAAU,EAAE,GAAG,EAAE,CAAC;IAElB;;;;OAIG;IACH,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,gBAAgB,EAAE,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI,KAAK,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;CACtE;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,GAAG,EACvC,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,GACtB,wBAAwB,CAAC,CAAC,EAAE,GAAG,CAAC,CA8DlC"}

package/dist/components/TabBar/useExitingTabItems.js

@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useRef, useState } from '@harborclient/sdk/react';
+/**
+ * Resolves the anchor id for an exiting tab: the first still-open tab that was
+ * to its right in the previous list, or null when none remain on the right.
+ *
+ * @param previousItems - Tab list before removal.
+ * @param removedIndex - Index of the tab being removed.
+ * @param currentIds - Ids that remain open after removal.
+ * @param getId - Reads a stable id from a tab item.
+ * @returns Anchor id for render placement, or null for end-of-row placement.
+ */
+export function resolveInsertBeforeId(previousItems, removedIndex, currentIds, getId) {
+    for (let index = removedIndex + 1; index < previousItems.length; index += 1) {
+        const id = getId(previousItems[index]);
+        if (currentIds.has(id)) {
+            return id;
+        }
+    }
+    return null;
+}
+/**
+ * Detects tabs removed between two list snapshots and their render anchors.
+ *
+ * @param previousItems - Tab list before removal.
+ * @param currentItems - Tab list after removal.
+ * @param getId - Reads a stable id from a tab item.
+ * @returns Removed tabs with placement anchors for exit animation.
+ */
+export function detectRemovedTabItems(previousItems, currentItems, getId) {
+    const currentIds = new Set(currentItems.map(getId));
+    const removed = [];
+    for (let index = 0; index < previousItems.length; index += 1) {
+        const item = previousItems[index];
+        const id = getId(item);
+        if (currentIds.has(id)) {
+            continue;
+        }
+        removed.push({
+            item,
+            insertBeforeId: resolveInsertBeforeId(previousItems, index, currentIds, getId)
+        });
+    }
+    return removed;
+}
+/**
+ * Tracks tab rows removed from a live list and keeps snapshots for exit animation.
+ *
+ * @param items - Current open tabs from Redux or parent state.
+ * @param getId - Reads a stable id from a tab item.
+ * @returns Exiting snapshots, placement helpers, and ids removed last update.
+ */
+export function useExitingTabItems(items, getId) {
+    const previousItemsRef = useRef(items);
+    const getIdRef = useRef(getId);
+    const exitCounterRef = useRef(0);
+    const [exiting, setExiting] = useState([]);
+    const [removedIds, setRemovedIds] = useState([]);
+    /**
+     * Keeps the latest id getter available to the removal effect without re-running it.
+     */
+    useEffect(() => {
+        getIdRef.current = getId;
+    }, [getId]);
+    /**
+     * Captures removed tabs whenever the live list shrinks.
+     */
+    useEffect(() => {
+        const previousItems = previousItemsRef.current;
+        const removed = detectRemovedTabItems(previousItems, items, getIdRef.current);
+        if (removed.length > 0) {
+            const nextExiting = removed.map(({ item, insertBeforeId }) => {
+                exitCounterRef.current += 1;
+                return {
+                    item,
+                    insertBeforeId,
+                    exitKey: `${String(getIdRef.current(item))}-exit-${exitCounterRef.current}`
+                };
+            });
+            setExiting((current) => [...current, ...nextExiting]);
+            setRemovedIds(removed.map((entry) => getIdRef.current(entry.item)));
+        }
+        else {
+            setRemovedIds([]);
+        }
+        previousItemsRef.current = items;
+    }, [items]);
+    /**
+     * Removes a finished exit snapshot after its width transition completes.
+     */
+    const completeExit = useCallback((exitKey) => {
+        setExiting((current) => current.filter((entry) => entry.exitKey !== exitKey));
+    }, []);
+    /**
+     * Groups exit snapshots by the live tab they should render in front of.
+     */
+    const getExitingBefore = useCallback((anchorId) => exiting.filter((entry) => entry.insertBeforeId === anchorId), [exiting]);
+    return {
+        exiting,
+        removedIds,
+        completeExit,
+        getExitingBefore
+    };
+}

package/dist/components/TabBar/useSortableTabItem.d.ts

@@ -0,0 +1,31 @@
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { CSSProperties } from 'react';
+interface SortableTabItemResult {
+    /**
+     * Ref for the sortable tab shell element.
+     */
+    setNodeRef: (element: HTMLElement | null) => void;
+    /**
+     * dnd-kit pointer and keyboard listeners for the tab shell.
+     */
+    listeners: SyntheticListenerMap | undefined;
+    /**
+     * Inline styles for transform and drag feedback on the tab shell.
+     */
+    style: CSSProperties;
+    /**
+     * Whether this tab is currently being dragged.
+     */
+    isDragging: boolean;
+}
+/**
+ * Wraps dnd-kit sortable behavior for horizontal tab bar items while keeping
+ * the tab element itself as a direct child of the tab list for ARIA compliance.
+ *
+ * @param id - Stable sortable id for this tab.
+ * @param disabled - When true, skips drag behavior (for example a single open tab).
+ * @returns Refs, listeners, and styles for the draggable tab shell.
+ */
+export declare function useSortableTabItem(id: string, disabled?: boolean): SortableTabItemResult;
+export {};
+//# sourceMappingURL=useSortableTabItem.d.ts.map

package/dist/components/TabBar/useSortableTabItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortableTabItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/useSortableTabItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAG/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,UAAU,qBAAqB;IAC7B;;OAEG;IACH,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAElD;;OAEG;IACH,SAAS,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAE5C;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,qBAAqB,CAoBtF"}

package/dist/components/TabBar/useSortableTabItem.js

@@ -0,0 +1,29 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+/**
+ * Wraps dnd-kit sortable behavior for horizontal tab bar items while keeping
+ * the tab element itself as a direct child of the tab list for ARIA compliance.
+ *
+ * @param id - Stable sortable id for this tab.
+ * @param disabled - When true, skips drag behavior (for example a single open tab).
+ * @returns Refs, listeners, and styles for the draggable tab shell.
+ */
+export function useSortableTabItem(id, disabled = false) {
+    const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        disabled
+    });
+    const style = disabled
+        ? {}
+        : {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            opacity: isDragging ? 0.45 : undefined
+        };
+    return {
+        setNodeRef,
+        listeners,
+        style,
+        isDragging
+    };
+}

package/dist/components/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjG;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtF;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsDD;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,OAAO,EACP,SAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjG;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtF;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,OAAO,EACP,SAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}