@harborclient/sdk 1.0.66 → 1.0.68

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

@@ -3,11 +3,11 @@ interface Props extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'a
     /**
      * Whether the associated slide-up panel is currently open.
      */
-    active: boolean;
+    active?: boolean;
     /**
      * Panel element id referenced by `aria-controls`.
      */
-    controlsId: string;
+    controlsId?: string;
     /**
      * Button label and optional count badge content.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,QAAQ,CAAC,EAClC,UAAU,GAAG,eAAe,GAAG,eAAe,CAC/C;IACC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAarB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,QAAQ,CAAC,EAClC,UAAU,GAAG,eAAe,GAAG,eAAe,CAC/C;IACC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAc,EACd,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAarB"}

package/dist/components/FooterButton/index.js

@@ -12,6 +12,6 @@ function footerSegment(active) {
  * Text segment toggle button for the window footer bar, used to open and close
  * slide-up panels such as Console and Variables.
  */
-export function FooterButton({ active, onClick, controlsId, children, className, ...props }) {
+export function FooterButton({ active = false, onClick, controlsId, children, className, ...props }) {
     return (_jsx("button", { ...props, type: "button", className: cn('hc-footer-button', footerSegment(active), className), onClick: onClick, "aria-expanded": active, "aria-controls": controlsId, children: children }));
 }

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/FooterPanel/index.d.ts

@@ -0,0 +1,50 @@
+import React, { type JSX } from 'react';
+interface Props {
+    id: string;
+    /**
+     * The title of the panel.
+     */
+    title?: React.ReactNode;
+    /**
+     * Displayed next to the title in smaller muted text.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Displayed under the title.
+     */
+    description?: React.ReactNode;
+    /**
+     * Buttons to display in the footer.
+     */
+    buttons?: React.ReactNode[];
+    /**
+     * The label for the close button.
+     */
+    closeLabel: string;
+    /**
+     * The memory storage key.
+     */
+    storageKey: string;
+    /**
+     * Whether the panel is visible (slides up when true).
+     */
+    open: boolean;
+    /**
+     * Closes the variables panel.
+     */
+    onClose: () => void;
+    /**
+     * The contents of the panel.
+     */
+    children: React.ReactNode;
+    /**
+     * When true, does not render children while the panel is closed.
+     */
+    unmountWhenClosed?: boolean;
+}
+/**
+ * Resizable panel that slides up from the footer.
+ */
+export declare function FooterPanel({ id, title, badge, description, closeLabel, storageKey, buttons, open, onClose, children, unmountWhenClosed }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FooterPanel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAKxC,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAE5B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,iBAAyB,EAC1B,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6CrB"}

package/dist/components/FooterPanel/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FaIcon } from '../FaIcon/index.js';
+import { Resizable } from '../index';
+import { cn } from '../utils.js';
+/**
+ * Resizable panel that slides up from the footer.
+ */
+export function FooterPanel({ id, title, badge, description, closeLabel, storageKey, buttons, open, onClose, children, unmountWhenClosed = false }) {
+    const closeButton = (_jsx("button", { type: "button", title: "Close", className: cn('hc-footer-panel-close cursor-pointer'), onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
+    return (_jsxs(Resizable, { id: id, open: open, onClose: onClose, closeLabel: closeLabel, storageKey: storageKey, unmountWhenClosed: unmountWhenClosed, showCloseButton: false, headerless: true, children: [_jsxs("div", { className: "hc-footer-panel flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 text-[16px] font-medium text-text", children: [title, badge && (_jsx("span", { className: "hc-footer-panel-badge text-[16px] font-normal text-muted", children: badge }))] }), description && _jsx("span", { className: "truncate text-[16px] text-muted", children: description })] }), _jsxs("div", { className: "flex gap-2", children: [buttons, closeButton] })] }), _jsx("div", { className: "hc-footer-panel-body min-h-0 flex-1 overflow-auto", children: children })] }));
+}

package/dist/components/Resizable/Resizable.d.ts

@@ -32,6 +32,10 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'
      * When true, does not render children while the panel is closed.
      */
     unmountWhenClosed?: boolean;
+    /**
+     * Whether or not to show the close button.
+     */
+    showCloseButton?: boolean;
     /**
      * Panel body content.
      */
@@ -43,6 +47,6 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'id'
  * Encapsulates resize handle wiring, height persistence, open/close animation,
  * and close affordance shared by Console, Variables, and plugin footer panels.
  */
-export declare function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless, unmountWhenClosed, children, className, ...props }: Props): JSX.Element;
+export declare function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless, unmountWhenClosed, showCloseButton, children, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=Resizable.d.ts.map

package/dist/components/Resizable/Resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/Resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAatE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC;IACxF;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAU,EACV,KAAK,EACL,UAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqFrB"}
+{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/Resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAatE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC;IACxF;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,UAAU,EACV,UAAU,EACV,KAAK,EACL,UAAkB,EAClB,iBAAyB,EACzB,eAAsB,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuFrB"}

package/dist/components/Resizable/Resizable.js

@@ -12,7 +12,7 @@ import { useResizable } from './useResizable.js';
  * Encapsulates resize handle wiring, height persistence, open/close animation,
  * and close affordance shared by Console, Variables, and plugin footer panels.
  */
-export function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless = false, unmountWhenClosed = false, children, className, ...props }) {
+export function Resizable({ id, open, onClose, closeLabel, storageKey, title, headerless = false, unmountWhenClosed = false, showCloseButton = true, children, className, ...props }) {
     const containerRef = useRef(null);
     /**
      * Keeps max-size measurement stable across re-renders so useResizable
@@ -29,5 +29,5 @@ export function Resizable({ id, open, onClose, closeLabel, storageKey, title, he
     });
     const closeButton = (_jsx("button", { type: "button", className: cn('hc-resizable-close', footerPanelCloseButtonClassName), onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
     const body = unmountWhenClosed && !open ? null : children;
-    return (_jsxs("div", { ref: containerRef, ...props, id: id, className: cn('hc-resizable', footerPanelClassName(open), className), style: { height }, role: "region", "aria-label": `${closeLabel} panel`, "aria-hidden": !open, inert: !open || undefined, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "hc-resizable-headerless relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx("button", { type: "button", className: cn('hc-resizable-headerless-close absolute top-2 right-2 z-10', footerPanelCloseButtonClassName), onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "hc-resizable-body flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hc-resizable-header flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "hc-resizable-header-title min-w-0 flex-1", children: title }), closeButton] }), body] }))] }));
+    return (_jsxs("div", { ref: containerRef, ...props, id: id, className: cn('hc-resizable', footerPanelClassName(open), className), style: { height }, role: "region", "aria-label": `${closeLabel} panel`, "aria-hidden": !open, inert: !open || undefined, children: [_jsx(ResizeHandle, { orientation: "horizontal", value: height, min: panelMinSize, max: panelMaxSize, onResizeStart: onResizeStart, onKeyboardResize: onKeyboardResize, ariaLabel: `Resize ${closeLabel} panel` }), headerless ? (_jsxs("div", { className: "hc-resizable-headerless relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [showCloseButton && (_jsx("button", { type: "button", className: cn('hc-resizable-headerless-close absolute top-2 right-2 z-10', footerPanelCloseButtonClassName), onClick: onClose, "aria-label": `Close ${closeLabel}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) })), _jsx("div", { className: "hc-resizable-body flex min-h-0 flex-1 flex-col", children: body })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hc-resizable-header flex shrink-0 items-center justify-between border-b border-separator px-3 py-2", children: [_jsx("div", { className: "hc-resizable-header-title min-w-0 flex-1", children: title }), showCloseButton && closeButton] }), body] }))] }));
 }

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"}