@harborclient/sdk 1.0.67 → 1.0.69

package/dist/components/TabBar/TabBarShell.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { TabCloseButton } from '../TabCloseButton/index.js';
+import { tabItem } from '../classes.js';
+import { cn } from '../utils.js';
+import { useSortableTabItem } from './useSortableTabItem.js';
+/**
+ * Single document-style tab row with close button and optional drag reordering.
+ */
+export function TabBarShell({ item, tabIndex, sortableId, sortableDisabled = false, exiting = false, tabIdPrefix, panelIdPrefix, maxTabWidthClass = 'max-w-[220px]', sortableCursor = 'pointer', onSelect, onClose, onContextMenu }) {
+    /**
+     * Activates this tab when the user presses Enter or Space on the tab control.
+     *
+     * @param event - Keyboard event from the tab element.
+     */
+    const handleTabKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onSelect(item.id);
+        }
+    };
+    const { setNodeRef, listeners, style } = useSortableTabItem(sortableId, sortableDisabled || exiting);
+    const showActive = exiting ? false : item.active || Boolean(item.highlighted);
+    const cursorClass = exiting || sortableDisabled
+        ? 'cursor-pointer'
+        : sortableCursor === 'grab'
+            ? 'cursor-grab active:cursor-grabbing'
+            : 'cursor-pointer';
+    return (_jsxs("div", { ref: exiting ? undefined : setNodeRef, style: exiting ? undefined : style, role: "tab", id: exiting ? undefined : `${tabIdPrefix}${String(item.id)}`, "aria-controls": exiting ? undefined : `${panelIdPrefix}${String(item.id)}`, "aria-selected": item.active, "aria-label": item.accessibleName, title: item.title, tabIndex: exiting ? -1 : tabIndex, className: cn('group -mb-1 flex min-h-12 shrink-0 items-stretch gap-2.5 self-stretch rounded-t-lg border border-b-2 px-4', maxTabWidthClass, exiting ? 'pointer-events-none' : cursorClass, tabItem(showActive)), onClick: exiting ? undefined : () => onSelect(item.id), onContextMenu: exiting
+            ? undefined
+            : (event) => {
+                event.preventDefault();
+                onContextMenu?.(item.id, event);
+            }, onKeyDown: exiting ? undefined : handleTabKeyDown, ...(sortableDisabled || exiting ? {} : listeners), children: [_jsx("span", { className: "app-no-drag flex min-w-0 flex-1 items-center gap-1.5 py-2 text-inherit", children: item.content }), !exiting && (_jsx("span", { className: "app-no-drag flex shrink-0 items-center self-center", onPointerDown: (event) => event.stopPropagation(), children: _jsx(TabCloseButton, { ariaLabel: item.closeAccessibleName, title: item.closeAccessibleName, tabIndex: 0, onClick: (event) => {
+                        event.stopPropagation();
+                        onClose(item.id);
+                    } }) }))] }));
+}

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

@@ -0,0 +1,23 @@
+import type { JSX } from 'react';
+import type { MenuItem } from '../RowActionsMenu/index.js';
+import { type MenuPosition } from '../menuPosition.js';
+interface Props {
+    /**
+     * Grouped menu entries. Each inner array is one visual group separated by a divider.
+     */
+    groups: MenuItem[][];
+    /**
+     * Cursor position used to anchor the menu panel.
+     */
+    position: MenuPosition;
+    /**
+     * Called when the menu should close without selecting an item.
+     */
+    onClose: () => void;
+}
+/**
+ * Cursor-positioned context menu for tab bars, rendered in a portal at the click point.
+ */
+export declare function TabContextMenu({ groups, position, onClose }: Props): JSX.Element | null;
+export {};
+//# sourceMappingURL=TabContextMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabContextMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,oBAAoB,CAAC;AAI1E,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkJvF"}

package/dist/components/TabBar/TabContextMenu.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
+import { clampMenuPosition } from '../menuPosition.js';
+import { portalToBody } from '../portalToBody.js';
+import { cn, resolveTabListKeyAction } from '../utils.js';
+/**
+ * Tailwind classes for a single menu item button.
+ *
+ * @param variant - Visual variant for default or destructive actions.
+ */
+function menuItemClass(variant) {
+    const base = 'block w-full cursor-pointer border-none bg-transparent px-3.5 py-1.5 text-left text-[16px] app-no-drag';
+    return variant === 'danger'
+        ? `${base} text-text hover:bg-danger/15 hover:text-danger`
+        : `${base} text-text hover:bg-selection`;
+}
+/**
+ * Cursor-positioned context menu for tab bars, rendered in a portal at the click point.
+ */
+export function TabContextMenu({ groups, position, onClose }) {
+    const menuRef = useRef(null);
+    const itemRefs = useRef([]);
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    const [clampedPosition, setClampedPosition] = useState(position);
+    const flatItems = useMemo(() => groups.flat(), [groups]);
+    /**
+     * Closes the menu and notifies the parent.
+     */
+    const closeMenu = useCallback(() => {
+        onClose();
+    }, [onClose]);
+    /**
+     * Focuses a menu item by index and updates roving tabindex state.
+     *
+     * @param index - Flat index into `flatItems`.
+     */
+    const focusItem = useCallback((index) => {
+        setFocusedIndex(index);
+        requestAnimationFrame(() => {
+            itemRefs.current[index]?.focus();
+        });
+    }, []);
+    /**
+     * Re-clamps the menu after mount and focuses the first item once dimensions are known.
+     */
+    useLayoutEffect(() => {
+        const menu = menuRef.current;
+        if (!menu) {
+            return;
+        }
+        const rect = menu.getBoundingClientRect();
+        setClampedPosition(clampMenuPosition(position, {
+            width: rect.width,
+            height: rect.height
+        }));
+        itemRefs.current[0]?.focus();
+    }, [position, groups]);
+    /**
+     * Closes the menu on outside click or Escape while it is open.
+     */
+    useEffect(() => {
+        const handleMouseDown = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                closeMenu();
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                closeMenu();
+            }
+        };
+        document.addEventListener('mousedown', handleMouseDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [closeMenu]);
+    /**
+     * Handles keyboard navigation within the open menu.
+     *
+     * @param event - Keyboard event from the menu panel.
+     */
+    const handleMenuKeyDown = (event) => {
+        if (flatItems.length === 0) {
+            return;
+        }
+        if (event.key === 'Tab') {
+            closeMenu();
+            return;
+        }
+        const arrowIndex = resolveTabListKeyAction(event.key, focusedIndex, flatItems.length);
+        if (arrowIndex !== null) {
+            event.preventDefault();
+            focusItem(arrowIndex);
+        }
+    };
+    if (flatItems.length === 0) {
+        return null;
+    }
+    return portalToBody(_jsx("div", { ref: menuRef, role: "menu", "aria-label": "Tab actions", className: "hc-tab-context-menu app-no-drag fixed z-50 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md", style: { left: clampedPosition.x, top: clampedPosition.y }, onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
+            let flatIndex = groups
+                .slice(0, groupIndex)
+                .reduce((count, groupItems) => count + groupItems.length, 0);
+            return (_jsx("div", { className: groupIndex > 0
+                    ? 'hc-tab-context-menu-group border-t border-separator'
+                    : 'hc-tab-context-menu-group', children: group.map((item) => {
+                    const itemIndex = flatIndex++;
+                    return (_jsx("button", { ref: (element) => {
+                            itemRefs.current[itemIndex] = element;
+                        }, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: cn('hc-tab-context-menu-item', menuItemClass(item.variant)), onClick: (event) => {
+                            event.stopPropagation();
+                            closeMenu();
+                            item.onSelect?.();
+                        }, children: item.label }, item.label));
+                }) }, groupIndex));
+        }) }));
+}

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

@@ -0,0 +1,26 @@
+import type { JSX } from 'react';
+interface Props {
+    /**
+     * Accessible name for the new-tab control.
+     */
+    ariaLabel: string;
+    /**
+     * Native tooltip text for the new-tab control.
+     */
+    title: string;
+    /**
+     * When true, renders a tab-height slot for wrapped tab lists; otherwise uses
+     * the compact circular control for horizontal scroll mode.
+     */
+    wrapped: boolean;
+    /**
+     * Called when the user opens a new tab or chat.
+     */
+    onClick: () => void;
+}
+/**
+ * New-tab "+" control shared by request editor and AI chat tab bars.
+ */
+export declare function TabNewButton({ ariaLabel, title, wrapped, onClick }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=TabNewButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabNewButton.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabNewButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiCvF"}

package/dist/components/TabBar/TabNewButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FaIcon } from '../FaIcon/index.js';
+import { tabItem } from '../classes.js';
+import { cn } from '../utils.js';
+/**
+ * New-tab "+" control shared by request editor and AI chat tab bars.
+ */
+export function TabNewButton({ ariaLabel, title, wrapped, onClick }) {
+    if (wrapped) {
+        return (_jsx("div", { className: "flex shrink-0", children: _jsx("button", { type: "button", className: cn('app-no-drag -mb-1 inline-flex min-h-12 shrink-0 cursor-pointer items-center justify-center self-end rounded-t-lg border border-b-2 px-3 text-[14px]', tabItem(false)), title: title, "aria-label": ariaLabel, onClick: onClick, children: _jsx(FaIcon, { icon: faPlus, className: "h-3.5 w-3.5" }) }) }));
+    }
+    return (_jsx("div", { className: "-mb-1 flex shrink-0 items-end px-1", children: _jsx("button", { type: "button", className: "hc-tab-new-button app-no-drag mb-2.5 inline-flex shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text", title: title, "aria-label": ariaLabel, onClick: onClick, children: _jsx(FaIcon, { icon: faPlus, className: "h-3.5 w-3.5" }) }) }));
+}

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

@@ -0,0 +1,92 @@
+import type { JSX, ReactNode } from 'react';
+import type { MenuItem } from '../RowActionsMenu/index.js';
+import type { TabBarItem, TabBarNewTab, TabBarSortableCursor } from './types.js';
+interface Props<TId extends string | number> {
+    /**
+     * Open tabs to render in display order.
+     */
+    tabs: TabBarItem<TId>[];
+    /**
+     * ID of the currently active tab.
+     */
+    activeId: TId;
+    /**
+     * When true, tabs wrap to multiple rows; otherwise they scroll horizontally.
+     */
+    wrap: boolean;
+    /**
+     * Accessible name for the tab list.
+     */
+    ariaLabel: string;
+    /**
+     * Prefix for tab element ids (for example `request-tab-`).
+     */
+    tabIdPrefix: string;
+    /**
+     * Prefix for linked tab panel ids (for example `request-tabpanel-`).
+     */
+    panelIdPrefix: string;
+    /**
+     * Prefix for dnd-kit sortable ids. Defaults to `${tabIdPrefix}sort:`.
+     */
+    sortablePrefix?: string;
+    /**
+     * Configuration for the new-tab control.
+     */
+    newTab: TabBarNewTab;
+    /**
+     * Called when the user selects a tab.
+     */
+    onSelect: (id: TId) => void;
+    /**
+     * Called when the user closes a tab.
+     */
+    onClose: (id: TId) => void;
+    /**
+     * Persists a new tab order after drag-and-drop reordering.
+     */
+    onReorder: (orderedIds: TId[]) => void;
+    /**
+     * Builds grouped context menu entries when a tab is right-clicked.
+     */
+    buildContextMenuGroups?: (targetId: TId, orderedIds: TId[]) => MenuItem[][];
+    /**
+     * When ArrowDown is pressed on a focused tab, returns true if focus moved into
+     * the linked panel (for example request editor content).
+     */
+    onArrowDownIntoPanel?: (id: TId) => boolean;
+    /**
+     * Focuses the tab control for keyboard navigation and focus restoration.
+     */
+    onFocusTab?: (id: TId) => void;
+    /**
+     * Wraps the tab row for horizontal scrolling. Defaults to overflow-x-auto.
+     */
+    renderScrollContainer?: (row: ReactNode) => ReactNode;
+    /**
+     * Maximum width class applied to each tab shell.
+     */
+    maxTabWidthClass?: string;
+    /**
+     * Cursor style when sortable drag is enabled.
+     */
+    sortableCursor?: TabBarSortableCursor;
+    /**
+     * Additional classes for the outer tab bar container.
+     */
+    className?: string;
+}
+/**
+ * Document-style tab bar with drag reorder, keyboard navigation, close animation,
+ * optional context menu, and a new-tab control.
+ */
+export declare function TabBar<TId extends string | number>({ tabs, activeId, wrap, ariaLabel, tabIdPrefix, panelIdPrefix, sortablePrefix, newTab, onSelect, onClose, onReorder, buildContextMenuGroups, onArrowDownIntoPanel, onFocusTab, renderScrollContainer, maxTabWidthClass, sortableCursor, className }: Props<TId>): JSX.Element;
+export type { TabBarItem, TabBarNewTab, TabBarSortableCursor } from './types.js';
+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, type ExitingTabItem } from './useExitingTabItems.js';
+export { buildTabCloseMenuGroups, tabIdsToCloseOthers, tabIdsToCloseToTheRight } from './tabCloseMenuHelpers.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAkB,GAAG,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACvF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAM3D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAgCjF,UAAU,KAAK,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACzC;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;IAExB;;OAEG;IACH,QAAQ,EAAE,GAAG,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE5B;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE3B;;OAEG;IACH,SAAS,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,EAAE,CAAC;IAE5E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,SAAS,CAAC;IAEtD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqDD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EAClD,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,oBAAoB,EACpB,UAAU,EACV,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACV,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,OAAO,CAqT1B;AAED,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,0BAA0B,CAAC"}

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);
+}