@harborclient/sdk 1.0.67 → 1.0.68

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

@@ -24,7 +24,8 @@ interface Props extends Omit<ComponentPropsWithoutRef<'button'>, 'aria-label' |
     title?: string;
     /**
      * Active-state background treatment. Use `"selection"` to match sidebar
-     * toolbar icon toggles; defaults to `"surface"` for the action menu icon.
+     * toolbar icon toggles (`bg-sidebar-section`); defaults to `"surface"` for
+     * the action menu icon.
      */
     activeStyle?: ActiveStyle;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3D;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAE3C,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAwBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,EACL,WAAuB,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAE3C,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAuBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,EACL,WAAuB,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqBrB"}

package/dist/components/FooterIcon/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { FaIcon } from '../FaIcon/index.js';
+import { footerIconButtonSizeClass } from '../footerBarUtils.js';
 import { cn } from '../utils.js';
-const footerIconBase = 'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-none app-no-drag';
+const footerIconBase = `inline-flex ${footerIconButtonSizeClass} shrink-0 cursor-pointer items-center justify-center rounded-md border-none app-no-drag`;
 /**
  * Square icon toggle styles for footer sidebar buttons.
  *
@@ -12,7 +13,7 @@ const footerIconBase = 'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center
 function footerIconButton(active, activeStyle) {
     if (activeStyle === 'selection') {
         return active
-            ? `${footerIconBase} bg-selection text-text`
+            ? `${footerIconBase} bg-sidebar-section text-text`
             : `${footerIconBase} bg-transparent text-text hover:bg-selection focus-visible:bg-selection focus-visible:text-text`;
     }
     return active

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

@@ -0,0 +1,20 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Tab row content to measure and collapse horizontally.
+     */
+    children: ReactNode;
+    /**
+     * Called after the close width transition finishes.
+     */
+    onComplete: () => void;
+}
+/**
+ * Horizontally collapses a tab row with a quick width and opacity "zap out".
+ *
+ * Keeps children mounted until the width transition reaches zero so siblings
+ * do not reflow until the animation completes.
+ */
+export declare function ClosingTabShell({ children, onComplete }: Props): JSX.Element | null;
+export {};
+//# sourceMappingURL=ClosingTabShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClosingTabShell.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/ClosingTabShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAsD,MAAM,OAAO,CAAC;AAEhG,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AA+HD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA0CnF"}

package/dist/components/TabBar/ClosingTabShell.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from '@harborclient/sdk/react';
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @returns True when the OS requests minimized animation.
+ */
+function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Manages width collapse state for a single closing tab shell.
+ *
+ * @param onComplete - Invoked after the close animation finishes.
+ * @returns State and handlers for the animated shell.
+ */
+function useClosingTabShell(onComplete) {
+    const innerRef = useRef(null);
+    const completedRef = useRef(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const [contentWidth, setContentWidth] = useState(0);
+    const [transitionEnabled, setTransitionEnabled] = useState(false);
+    const [reducedMotion, setReducedMotion] = useState(prefersReducedMotion);
+    /**
+     * Subscribes to OS reduced-motion preference changes.
+     */
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        /**
+         * Updates reduced-motion state when the OS preference changes.
+         */
+        const handleChange = () => {
+            setReducedMotion(mediaQuery.matches);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+    /**
+     * Measures the tab row so the outer shell can animate from its natural width to zero.
+     */
+    useLayoutEffect(() => {
+        if (!innerRef.current) {
+            return;
+        }
+        const element = innerRef.current;
+        /**
+         * Writes the latest measured width from layout or resize observation.
+         *
+         * @param width - Measured inner width in pixels.
+         */
+        const applyWidth = (width) => {
+            if (width > 0) {
+                setContentWidth(width);
+            }
+        };
+        const observer = new ResizeObserver(([entry]) => {
+            applyWidth(entry.contentRect.width);
+        });
+        observer.observe(element);
+        applyWidth(element.getBoundingClientRect().width);
+        return () => observer.disconnect();
+    }, []);
+    /**
+     * Starts the collapse animation after the first paint, or completes immediately
+     * when reduced motion is enabled.
+     */
+    useEffect(() => {
+        if (reducedMotion) {
+            onComplete();
+            return;
+        }
+        if (contentWidth <= 0) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            setTransitionEnabled(true);
+            requestAnimationFrame(() => {
+                setCollapsed(true);
+            });
+        });
+    }, [contentWidth, onComplete, reducedMotion]);
+    /**
+     * Finishes the exit animation once the width transition completes.
+     */
+    const handleTransitionEnd = useCallback((event) => {
+        if (event.propertyName !== 'width' || completedRef.current) {
+            return;
+        }
+        completedRef.current = true;
+        onComplete();
+    }, [onComplete]);
+    return {
+        collapsed,
+        contentWidth,
+        innerRef,
+        reducedMotion,
+        transitionEnabled,
+        handleTransitionEnd
+    };
+}
+/**
+ * Horizontally collapses a tab row with a quick width and opacity "zap out".
+ *
+ * Keeps children mounted until the width transition reaches zero so siblings
+ * do not reflow until the animation completes.
+ */
+export function ClosingTabShell({ children, onComplete }) {
+    const { collapsed, contentWidth, innerRef, reducedMotion, transitionEnabled, handleTransitionEnd } = useClosingTabShell(onComplete);
+    if (reducedMotion) {
+        return null;
+    }
+    const outerClassName = [
+        'flex shrink-0 overflow-hidden',
+        transitionEnabled
+            ? 'transition-[width] duration-150 ease-in motion-reduce:transition-none'
+            : 'transition-none'
+    ].join(' ');
+    const innerClassName = [
+        'flex shrink-0',
+        transitionEnabled
+            ? 'transition-[opacity,transform] duration-150 ease-in origin-right motion-reduce:transition-none'
+            : 'transition-none',
+        collapsed ? 'scale-x-95 opacity-0' : 'scale-x-100 opacity-100'
+    ].join(' ');
+    return (_jsx("div", { className: outerClassName, style: { width: collapsed ? 0 : contentWidth }, onTransitionEnd: handleTransitionEnd, "aria-hidden": true, inert: true, children: _jsx("div", { ref: innerRef, className: innerClassName, children: children }) }));
+}

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

@@ -0,0 +1,58 @@
+import type { JSX, MouseEvent } from 'react';
+import type { TabBarItem, TabBarSortableCursor } from './types.js';
+interface Props<TId extends string | number> {
+    /**
+     * Tab row data to render.
+     */
+    item: TabBarItem<TId>;
+    /**
+     * Tab order index for the tab label; all tabs stay in sequential Tab order.
+     */
+    tabIndex: number;
+    /**
+     * Stable dnd-kit sortable id for this tab row.
+     */
+    sortableId: string;
+    /**
+     * When true, drag reordering is disabled for this tab.
+     */
+    sortableDisabled?: boolean;
+    /**
+     * When true, renders a non-interactive snapshot for the close animation.
+     */
+    exiting?: boolean;
+    /**
+     * Prefix for tab element ids (for example `request-tab-`).
+     */
+    tabIdPrefix: string;
+    /**
+     * Prefix for linked tab panel ids (for example `request-tabpanel-`).
+     */
+    panelIdPrefix: string;
+    /**
+     * Maximum width class for the tab shell.
+     */
+    maxTabWidthClass?: string;
+    /**
+     * Cursor style when sortable drag is enabled.
+     */
+    sortableCursor?: TabBarSortableCursor;
+    /**
+     * Called when the user selects this tab.
+     */
+    onSelect: (id: TId) => void;
+    /**
+     * Called when the user closes this tab.
+     */
+    onClose: (id: TId) => void;
+    /**
+     * Called when the user opens the tab context menu.
+     */
+    onContextMenu?: (id: TId, event: MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * Single document-style tab row with close button and optional drag reordering.
+ */
+export declare function TabBarShell<TId extends string | number>({ item, tabIndex, sortableId, sortableDisabled, exiting, tabIdPrefix, panelIdPrefix, maxTabWidthClass, sortableCursor, onSelect, onClose, onContextMenu }: Props<TId>): JSX.Element;
+export {};
+//# sourceMappingURL=TabBarShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarShell.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabBarShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAGnE,UAAU,KAAK,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACzC;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC;;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,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACtE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAwB,EACxB,OAAe,EACf,WAAW,EACX,aAAa,EACb,gBAAkC,EAClC,cAA0B,EAC1B,QAAQ,EACR,OAAO,EACP,aAAa,EACd,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,OAAO,CA4E1B"}

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,32 @@
+import type { JSX } from 'react';
+import type { MenuItem } from '../RowActionsMenu/index.js';
+interface Position {
+    /**
+     * Viewport X coordinate where the menu was opened.
+     */
+    x: number;
+    /**
+     * Viewport Y coordinate where the menu was opened.
+     */
+    y: number;
+}
+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: Position;
+    /**
+     * 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;AAI3D,UAAU,QAAQ;IAChB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgCD;;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,133 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
+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`;
+}
+/**
+ * Clamps a menu position so the panel stays fully inside the viewport.
+ *
+ * @param position - Requested top-left coordinates.
+ * @param size - Measured menu width and height.
+ */
+function clampMenuPosition(position, size) {
+    const margin = 8;
+    const maxX = Math.max(margin, window.innerWidth - size.width - margin);
+    const maxY = Math.max(margin, window.innerHeight - size.height - margin);
+    return {
+        x: Math.min(Math.max(position.x, margin), maxX),
+        y: Math.min(Math.max(position.y, margin), maxY)
+    };
+}
+/**
+ * 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"}