@harborclient/sdk 1.3.4 → 1.3.5

package/dist/components/FloatingDialog/index.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from '@harborclient/sdk/react';
+import { cn } from '../utils.js';
+import { FLOATING_DIALOG_DEFAULT_LEFT, FLOATING_DIALOG_DEFAULT_TOP, FLOATING_DIALOG_VIEWPORT_MARGIN_PX, isFloatingDialogFullyOnScreen } from './floatingDialogPosition.js';
+/**
+ * Clamps a proposed size into min/max and remaining viewport space.
+ *
+ * @param width - Proposed width.
+ * @param height - Proposed height.
+ * @param left - Current panel left.
+ * @param top - Current panel top.
+ * @param minWidth - Minimum width.
+ * @param minHeight - Minimum height.
+ * @param maxWidth - Optional max width cap.
+ * @param maxHeight - Optional max height cap.
+ * @returns Clamped size.
+ */
+function clampFloatingDialogSize(width, height, left, top, minWidth, minHeight, maxWidth, maxHeight) {
+    const margin = FLOATING_DIALOG_VIEWPORT_MARGIN_PX;
+    const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : width;
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : height;
+    const roomWidth = Math.max(minWidth, viewportWidth - left - margin);
+    const roomHeight = Math.max(minHeight, viewportHeight - top - margin);
+    const widthCap = maxWidth != null ? Math.min(maxWidth, roomWidth) : roomWidth;
+    const heightCap = maxHeight != null ? Math.min(maxHeight, roomHeight) : roomHeight;
+    return {
+        width: Math.min(Math.max(width, minWidth), widthCap),
+        height: Math.min(Math.max(height, minHeight), heightCap)
+    };
+}
+/**
+ * Non-blocking, draggable dialog panel with no modal mask.
+ *
+ * Clicks pass through to the UI behind the panel. Drag by the handle region.
+ * When `initialWidth` and `initialHeight` are provided, a southeast resize
+ * handle appears (pointer + arrow-key accessible). Parents persist geometry via
+ * `onPositionChange` / `onSizeChange`. If the panel would open or remain
+ * off-screen after a window resize, it relocates to the default corner.
+ *
+ * @param props - Dialog labelling, geometry, and content props.
+ * @returns Floating dialog element.
+ */
+export function FloatingDialog({ label, labelledBy, onClose, disableEscape = false, className, bodyClassName, initialLeft = FLOATING_DIALOG_DEFAULT_LEFT, initialTop = FLOATING_DIALOG_DEFAULT_TOP, onPositionChange, initialWidth, initialHeight, minWidth = 240, minHeight = 120, maxWidth, maxHeight, onSizeChange, dragHandle, children }) {
+    const resizable = initialWidth != null && initialHeight != null;
+    const panelRef = useRef(null);
+    const [position, setPosition] = useState({
+        left: initialLeft,
+        top: initialTop
+    });
+    const [size, setSize] = useState(() => resizable
+        ? clampFloatingDialogSize(initialWidth, initialHeight, initialLeft, initialTop, minWidth, minHeight, maxWidth, maxHeight)
+        : null);
+    const positionRef = useRef(position);
+    const sizeRef = useRef(size);
+    const onPositionChangeRef = useRef(onPositionChange);
+    const onSizeChangeRef = useRef(onSizeChange);
+    const dragStateRef = useRef(null);
+    const resizeStateRef = useRef(null);
+    /**
+     * Keeps the latest position available to resize handlers without rebinding.
+     */
+    useEffect(() => {
+        positionRef.current = position;
+    }, [position]);
+    /**
+     * Keeps the latest size available to relocate / resize handlers.
+     */
+    useEffect(() => {
+        sizeRef.current = size;
+    }, [size]);
+    /**
+     * Keeps the latest position-change callback available to layout/resize handlers.
+     */
+    useEffect(() => {
+        onPositionChangeRef.current = onPositionChange;
+    }, [onPositionChange]);
+    /**
+     * Keeps the latest size-change callback available to resize handlers.
+     */
+    useEffect(() => {
+        onSizeChangeRef.current = onSizeChange;
+    }, [onSizeChange]);
+    /**
+     * Moves the panel to the default corner when it would sit outside the viewport.
+     */
+    const relocateToCornerIfOffScreen = useCallback(() => {
+        const panel = panelRef.current;
+        if (panel == null) {
+            return;
+        }
+        const measured = sizeRef.current ?? {
+            width: panel.offsetWidth,
+            height: panel.offsetHeight
+        };
+        const current = positionRef.current;
+        if (isFloatingDialogFullyOnScreen(current, measured)) {
+            return;
+        }
+        const corner = {
+            left: FLOATING_DIALOG_DEFAULT_LEFT,
+            top: FLOATING_DIALOG_DEFAULT_TOP
+        };
+        positionRef.current = corner;
+        setPosition(corner);
+        onPositionChangeRef.current?.(corner);
+    }, []);
+    /**
+     * After first paint and whenever the window resizes, relocates only when off-screen.
+     */
+    useLayoutEffect(() => {
+        relocateToCornerIfOffScreen();
+        window.addEventListener('resize', relocateToCornerIfOffScreen);
+        return () => window.removeEventListener('resize', relocateToCornerIfOffScreen);
+    }, [relocateToCornerIfOffScreen]);
+    /**
+     * Closes the dialog when Escape is pressed unless disabled.
+     */
+    useEffect(() => {
+        if (disableEscape) {
+            return;
+        }
+        /**
+         * Dismisses the floating dialog on Escape.
+         *
+         * @param event - Keyboard event.
+         */
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [disableEscape, onClose]);
+    /**
+     * Begins a pointer drag from the header handle.
+     *
+     * @param event - Pointer down event on the drag handle.
+     */
+    const handlePointerDown = useCallback((event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragStateRef.current = {
+            pointerId: event.pointerId,
+            originX: event.clientX,
+            originY: event.clientY,
+            startLeft: position.left,
+            startTop: position.top
+        };
+    }, [position.left, position.top]);
+    /**
+     * Updates panel position while dragging.
+     *
+     * @param event - Pointer move event.
+     */
+    const handlePointerMove = useCallback((event) => {
+        const drag = dragStateRef.current;
+        if (drag == null || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        const next = {
+            left: Math.max(FLOATING_DIALOG_VIEWPORT_MARGIN_PX, drag.startLeft + (event.clientX - drag.originX)),
+            top: Math.max(FLOATING_DIALOG_VIEWPORT_MARGIN_PX, drag.startTop + (event.clientY - drag.originY))
+        };
+        positionRef.current = next;
+        setPosition(next);
+    }, []);
+    /**
+     * Ends an active pointer drag and notifies the parent of the final position.
+     *
+     * @param event - Pointer up/cancel event.
+     */
+    const handlePointerUp = useCallback((event) => {
+        const drag = dragStateRef.current;
+        if (drag == null || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        dragStateRef.current = null;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        onPositionChangeRef.current?.(positionRef.current);
+    }, []);
+    /**
+     * Begins a southeast resize from the resize handle.
+     *
+     * @param event - Pointer down on the resize handle.
+     */
+    const handleResizePointerDown = useCallback((event) => {
+        if (!resizable || size == null || event.button !== 0) {
+            return;
+        }
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        resizeStateRef.current = {
+            pointerId: event.pointerId,
+            originX: event.clientX,
+            originY: event.clientY,
+            startWidth: size.width,
+            startHeight: size.height
+        };
+    }, [resizable, size]);
+    /**
+     * Updates panel size while resizing from the SE handle.
+     *
+     * @param event - Pointer move on the resize handle.
+     */
+    const handleResizePointerMove = useCallback((event) => {
+        const resize = resizeStateRef.current;
+        if (resize == null || resize.pointerId !== event.pointerId) {
+            return;
+        }
+        const next = clampFloatingDialogSize(resize.startWidth + (event.clientX - resize.originX), resize.startHeight + (event.clientY - resize.originY), positionRef.current.left, positionRef.current.top, minWidth, minHeight, maxWidth, maxHeight);
+        sizeRef.current = next;
+        setSize(next);
+    }, [maxHeight, maxWidth, minHeight, minWidth]);
+    /**
+     * Ends an active resize and notifies the parent of the final size.
+     *
+     * @param event - Pointer up/cancel on the resize handle.
+     */
+    const handleResizePointerUp = useCallback((event) => {
+        const resize = resizeStateRef.current;
+        if (resize == null || resize.pointerId !== event.pointerId) {
+            return;
+        }
+        resizeStateRef.current = null;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        if (sizeRef.current != null) {
+            onSizeChangeRef.current?.(sizeRef.current);
+        }
+    }, []);
+    /**
+     * Adjusts size with arrow keys when the resize handle is focused.
+     *
+     * @param event - Keyboard event on the resize handle.
+     */
+    const handleResizeKeyDown = useCallback((event) => {
+        if (size == null) {
+            return;
+        }
+        const step = event.shiftKey ? 24 : 8;
+        let deltaW = 0;
+        let deltaH = 0;
+        if (event.key === 'ArrowRight') {
+            deltaW = step;
+        }
+        else if (event.key === 'ArrowLeft') {
+            deltaW = -step;
+        }
+        else if (event.key === 'ArrowDown') {
+            deltaH = step;
+        }
+        else if (event.key === 'ArrowUp') {
+            deltaH = -step;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        const next = clampFloatingDialogSize(size.width + deltaW, size.height + deltaH, positionRef.current.left, positionRef.current.top, minWidth, minHeight, maxWidth, maxHeight);
+        sizeRef.current = next;
+        setSize(next);
+        onSizeChangeRef.current?.(next);
+    }, [maxHeight, maxWidth, minHeight, minWidth, size]);
+    return (_jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "false", "aria-label": labelledBy ? undefined : label, "aria-labelledby": labelledBy, className: cn('hc-floating-dialog fixed z-[60] flex min-w-[240px] flex-col overflow-hidden rounded-lg border border-separator bg-surface shadow-xl', className), style: {
+            left: position.left,
+            top: position.top,
+            ...(size != null ? { width: size.width, height: size.height } : {})
+        }, children: [_jsx("div", { className: "hc-floating-dialog-handle shrink-0 cursor-grab touch-none active:cursor-grabbing", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: dragHandle }), _jsx("div", { className: cn('hc-floating-dialog-body min-h-0 flex-1 overflow-auto p-3', bodyClassName), children: children }), resizable ? (_jsx("button", { type: "button", "aria-label": "Resize dialog", className: "absolute right-0 bottom-0 h-4 w-4 cursor-se-resize border-0 bg-transparent p-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent", onPointerDown: handleResizePointerDown, onPointerMove: handleResizePointerMove, onPointerUp: handleResizePointerUp, onPointerCancel: handleResizePointerUp, onKeyDown: handleResizeKeyDown, children: _jsx("span", { className: "pointer-events-none absolute right-1 bottom-1 h-2 w-2 border-r-2 border-b-2 border-muted", "aria-hidden": true }) })) : null] }));
+}

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

@@ -20,7 +20,8 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
 }
 /**
  * Full-bleed page header with a bordered bottom edge, title block on the left,
- * and optional action controls on the right.
+ * and optional action controls on the right. Sticks to the top of its nearest
+ * scroll ancestor so title and actions stay visible while page content scrolls.
  */
 export declare function PageHeader({ title, description, icon, children, className, ...props }: Props): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}

package/dist/components/PageHeader/index.js

@@ -3,8 +3,9 @@ import { FaIcon } from '../FaIcon/index.js';
 import { cn } from '../utils.js';
 /**
  * Full-bleed page header with a bordered bottom edge, title block on the left,
- * and optional action controls on the right.
+ * and optional action controls on the right. Sticks to the top of its nearest
+ * scroll ancestor so title and actions stay visible while page content scrolls.
  */
 export function PageHeader({ title, description, icon, children, className, ...props }) {
-    return (_jsxs("div", { ...props, className: cn('hc-page-header -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 py-4', className), children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[22px] leading-[1.15] font-bold tracking-[-0.01em] text-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-4 w-4 shrink-0 text-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 leading-6 text-muted", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : null] }));
+    return (_jsxs("div", { ...props, className: cn('hc-page-header sticky top-0 z-10 -mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator bg-surface px-6 py-4', className), children: [_jsxs("div", { className: "hc-page-header-content min-w-0 flex-1", children: [_jsxs("h2", { className: "hc-page-header-title m-0 flex items-center gap-2 text-[22px] leading-[1.15] font-bold tracking-[-0.01em] text-text", children: [icon ? (_jsx(FaIcon, { icon: icon, className: "hc-page-header-title-icon h-4 w-4 shrink-0 text-muted", "aria-hidden": true })) : null, title] }), description ? (_jsx("p", { className: "hc-page-header-description m-0 mt-1 leading-6 text-muted", children: description })) : null] }), children ? (_jsx("div", { className: "hc-page-header-actions flex flex-wrap items-center gap-2", children: children })) : null] }));
 }

package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts

@@ -1,3 +1,4 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import type { JSX, MouseEvent, ReactNode } from 'react';
 import { type SidebarItemSortableConfig } from './SidebarItem.js';
 interface Props {
@@ -21,13 +22,46 @@ interface Props {
      * Whether this row should use selected/highlighted row styling.
      */
     selected?: boolean;
+    /**
+     * Whether this environment has nested child environments.
+     */
+    hasChildren?: boolean;
+    /**
+     * Whether the child environment list is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Id of the child region controlled by this row (`SidebarTreeGroup` id).
+     */
+    childrenId?: string;
+    /**
+     * Nesting depth for indentation (`0` = root, no extra indent).
+     */
+    level?: number;
+    /**
+     * Total siblings at this level (tree a11y).
+     */
+    setSize?: number;
+    /**
+     * 1-based position among siblings at this level (tree a11y).
+     */
+    posInSet?: number;
+    /**
+     * Toggles child environment expand/collapse when {@link hasChildren} is true.
+     */
+    onToggleExpand?: () => void;
+    /**
+     * Icons for expand/collapse chevrons when {@link hasChildren} is true.
+     */
+    expandIcon?: IconDefinition;
+    collapseIcon?: IconDefinition;
     /**
      * dnd-kit sortable configuration for environment reordering.
      */
     sortable?: SidebarItemSortableConfig;
     /**
-     * Accessible label for the listbox option. When omitted, the name is derived
-     * from visible row content (name, variable summary).
+     * Accessible label for the listbox option or tree item. When omitted, the name
+     * is derived from visible row content (name, variable summary).
      */
     ariaLabel?: string;
     /**
@@ -64,15 +98,19 @@ interface Props {
      */
     dataSidebarEnvironmentId?: string | number;
     /**
-     * HTML element for the row container. Use `li` inside {@link SidebarListbox}.
+     * HTML element for the row container. Use `li` inside {@link SidebarListbox}
+     * or {@link SidebarTree}.
      */
     as?: 'div' | 'li';
 }
 /**
  * Renders an environment row in the Collections sidebar Environments section.
  *
+ * Flat list rows use listbox option semantics. Nested tree rows (when `level` is
+ * set) use treeitem semantics with optional expand/collapse chevrons.
+ *
  * The accessible name is derived from visible row content (name, variable summary).
  */
-export declare function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as }: Props): JSX.Element;
+export declare function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected, hasChildren, expanded, childrenId, level, setSize, posInSet, onToggleExpand, expandIcon, collapseIcon, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarEnvironmentItem.d.ts.map

package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarEnvironmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarEnvironmentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAI/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3C;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwDrB"}
+{"version":3,"file":"SidebarEnvironmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarEnvironmentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAU/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3C;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAOD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmGrB"}

package/dist/components/SidebarItem/SidebarEnvironmentItem.js

@@ -1,14 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { FaIcon } from '../FaIcon/index.js';
 import { SidebarItem } from './SidebarItem.js';
 import { SidebarMarkerDot } from './SidebarMarkerDot.js';
-import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
+import { SIDEBAR_CHEVRON_BUTTON_CLASS, SIDEBAR_CHEVRON_ICON_CLASS, SIDEBAR_CHEVRON_LABEL_OFFSET_CLASS, SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
+import { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
+/**
+ * Nesting indent step matching Tailwind `ml-4` (1rem) per depth level.
+ */
+const ENVIRONMENT_LEVEL_INDENT_PX = 16;
 /**
  * Renders an environment row in the Collections sidebar Environments section.
  *
+ * Flat list rows use listbox option semantics. Nested tree rows (when `level` is
+ * set) use treeitem semantics with optional expand/collapse chevrons.
+ *
  * The accessible name is derived from visible row content (name, variable summary).
  */
-export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected = false, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as = 'li' }) {
-    const useListboxOption = as === 'li';
+export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selected = false, hasChildren = false, expanded = false, childrenId, level, setSize, posInSet, onToggleExpand, expandIcon, collapseIcon, sortable, ariaLabel, ariaSelected, ariaCurrent, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as = 'li' }) {
+    const useTreeItem = as === 'li' && level != null;
+    const useListboxOption = as === 'li' && !useTreeItem;
+    const showChevron = hasChildren && expandIcon != null && collapseIcon != null && onToggleExpand != null;
+    const indentPx = (level ?? 0) * ENVIRONMENT_LEVEL_INDENT_PX;
     /**
      * Opens environment settings when Enter is pressed on the name area.
      */
@@ -20,6 +32,8 @@ export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selec
         event.stopPropagation();
         onEnter();
     };
+    const chevronLabel = expanded ? `Collapse environment "${name}"` : `Expand environment "${name}"`;
+    const labelOffsetClass = useTreeItem ? SIDEBAR_CHEVRON_LABEL_OFFSET_CLASS : '';
     return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
             ? {
                 ariaLabel,
@@ -29,7 +43,22 @@ export function SidebarEnvironmentItem({ name, variableSummary, markerDot, selec
                 onDoubleClick,
                 onKeyDown: onEnter != null ? handleKeyDown : undefined
             }
-            : undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, ...(dataSidebarEnvironmentId != null
+            : undefined, treeItem: useTreeItem
+            ? {
+                ariaLabel,
+                expanded: hasChildren ? expanded : undefined,
+                controlsId: hasChildren ? childrenId : undefined,
+                level: (level ?? 0) + 1,
+                setSize,
+                posInSet,
+                onClick,
+                onDoubleClick,
+                onKeyDown: onEnter != null ? handleKeyDown : undefined
+            }
+            : undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, style: indentPx > 0 ? { paddingLeft: indentPx } : undefined, ...(dataSidebarEnvironmentId != null
                 ? { 'data-sidebar-environment-id': String(dataSidebarEnvironmentId) }
-                : {}), children: [_jsxs("span", { className: "inline-flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: name }), markerDot != null ? (_jsx(SidebarMarkerDot, { marker: markerDot.marker, visible: markerDot.visible, label: markerDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: variableSummary })] }) }));
+                : {}), children: [showChevron ? (_jsx("button", { type: "button", className: SIDEBAR_CHEVRON_BUTTON_CLASS, onClick: (event) => {
+                        event.stopPropagation();
+                        onToggleExpand();
+                    }, onPointerDown: stopSortableDragPointerDown, tabIndex: -1, "aria-label": chevronLabel, children: _jsx(FaIcon, { icon: expanded ? collapseIcon : expandIcon, className: SIDEBAR_CHEVRON_ICON_CLASS }) })) : useTreeItem ? (_jsx("span", { className: "inline-flex h-4 w-4 shrink-0", "aria-hidden": true })) : null, _jsxs("span", { className: `inline-flex min-w-0 flex-1 items-center gap-1.5 ${labelOffsetClass}`, children: [_jsx("span", { className: "min-w-0 truncate", children: name }), markerDot != null ? (_jsx(SidebarMarkerDot, { marker: markerDot.marker, visible: markerDot.visible, label: markerDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: variableSummary })] }) }));
 }

package/dist/components/SidebarItem/SidebarWorkspaceItem.d.ts

@@ -38,6 +38,14 @@ interface Props {
      * Called when the primary row area is activated.
      */
     onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Called when the primary row area is double-clicked.
+     */
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Called when Enter is pressed on the primary row area.
+     */
+    onEnter?: () => void;
     /**
      * Trailing actions slot, typically a row actions menu.
      */
@@ -50,6 +58,6 @@ interface Props {
 /**
  * Renders a workspace row in the Collections sidebar Workspaces section.
  */
-export declare function SidebarWorkspaceItem({ name, summary, icon, markerDot, selected, sortable, onContextMenu, onClick, actions, as }: Props): JSX.Element;
+export declare function SidebarWorkspaceItem({ name, summary, icon, markerDot, selected, sortable, onContextMenu, onClick, onDoubleClick, onEnter, actions, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarWorkspaceItem.d.ts.map

package/dist/components/SidebarItem/SidebarWorkspaceItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarWorkspaceItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarWorkspaceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAI/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCrB"}
+{"version":3,"file":"SidebarWorkspaceItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarWorkspaceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAI/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAClC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiDrB"}

package/dist/components/SidebarItem/SidebarWorkspaceItem.js

@@ -6,11 +6,24 @@ import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 /**
  * Renders a workspace row in the Collections sidebar Workspaces section.
  */
-export function SidebarWorkspaceItem({ name, summary, icon, markerDot, selected = false, sortable, onContextMenu, onClick, actions, as = 'li' }) {
+export function SidebarWorkspaceItem({ name, summary, icon, markerDot, selected = false, sortable, onContextMenu, onClick, onDoubleClick, onEnter, actions, as = 'li' }) {
     const useListboxOption = as === 'li';
+    /**
+     * Opens workspace settings when Enter is pressed on the row.
+     */
+    const handleKeyDown = (event) => {
+        if (event.key !== 'Enter' || onEnter == null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onEnter();
+    };
     return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
             ? {
-                onClick
+                onClick,
+                onDoubleClick,
+                onKeyDown: onEnter != null ? handleKeyDown : undefined
             }
             : undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} gap-2 rounded-md px-2 py-1`, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), _jsxs("span", { className: "inline-flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: name }), markerDot != null ? (_jsx(SidebarMarkerDot, { marker: markerDot.marker, visible: markerDot.visible, label: markerDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: summary })] }) }));
 }

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

@@ -17,6 +17,9 @@ interface Props {
 }
 /**
  * Cursor-positioned context menu for tab bars, rendered in a portal at the click point.
+ *
+ * @param props - Menu groups, cursor anchor, and close handler.
+ * @returns Portal menu panel, or null when there are no items.
  */
 export declare function TabContextMenu({ groups, position, onClose }: Props): JSX.Element | null;
 export {};

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

@@ -1 +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"}
+{"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;AAU1E,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;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoKvF"}

package/dist/components/TabBar/TabContextMenu.js

@@ -2,20 +2,13 @@ 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 { findAdjacentEnabledIndex, findEdgeEnabledIndex, isMenuItemEnabled, menuItemClass } from '../rowActionsMenuHelpers.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 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.
+ *
+ * @param props - Menu groups, cursor anchor, and close handler.
+ * @returns Portal menu panel, or null when there are no items.
  */
 export function TabContextMenu({ groups, position, onClose }) {
     const menuRef = useRef(null);
@@ -41,7 +34,7 @@ export function TabContextMenu({ groups, position, onClose }) {
         });
     }, []);
     /**
-     * Re-clamps the menu after mount and focuses the first item once dimensions are known.
+     * Re-clamps the menu after mount and focuses the first enabled item once dimensions are known.
      */
     useLayoutEffect(() => {
         const menu = menuRef.current;
@@ -53,8 +46,11 @@ export function TabContextMenu({ groups, position, onClose }) {
             width: rect.width,
             height: rect.height
         }));
-        itemRefs.current[0]?.focus();
-    }, [position, groups]);
+        const firstEnabled = findEdgeEnabledIndex(flatItems, false);
+        if (firstEnabled != null) {
+            focusItem(firstEnabled);
+        }
+    }, [position, groups, flatItems, focusItem]);
     /**
      * Closes the menu on outside click or Escape while it is open.
      */
@@ -90,6 +86,15 @@ export function TabContextMenu({ groups, position, onClose }) {
             closeMenu();
             return;
         }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const direction = event.key === 'ArrowDown' ? 1 : -1;
+            const next = findAdjacentEnabledIndex(flatItems, focusedIndex, direction);
+            if (next != null) {
+                event.preventDefault();
+                focusItem(next);
+            }
+            return;
+        }
         const arrowIndex = resolveTabListKeyAction(event.key, focusedIndex, flatItems.length);
         if (arrowIndex !== null) {
             event.preventDefault();
@@ -99,7 +104,7 @@ export function TabContextMenu({ groups, position, onClose }) {
     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) => {
+    return portalToBody(_jsx("div", { ref: menuRef, role: "menu", "aria-label": "Tab actions", className: "hc-tab-context-menu app-no-drag fixed z-[70] 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);
@@ -107,10 +112,14 @@ export function TabContextMenu({ groups, position, onClose }) {
                     ? 'hc-tab-context-menu-group border-t border-separator'
                     : 'hc-tab-context-menu-group', children: group.map((item) => {
                     const itemIndex = flatIndex++;
+                    const disabled = !isMenuItemEnabled(item);
                     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) => {
+                        }, type: "button", role: "menuitem", disabled: disabled, tabIndex: itemIndex === focusedIndex && !disabled ? 0 : -1, className: cn('hc-tab-context-menu-item', menuItemClass(item.variant, disabled)), onClick: (event) => {
                             event.stopPropagation();
+                            if (disabled) {
+                                return;
+                            }
                             closeMenu();
                             item.onSelect?.();
                         }, children: item.label }, item.label));

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

@@ -19,7 +19,7 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onCh
     focusKey?: string;
 }
 /**
- * Editable table for key/value/default/share variable rows.
+ * Editable table for key/value/default/share variable rows with an enable toggle.
  */
 export declare function VariableTable({ variables, onChange, description, focusKey, className, ...props }: Props): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,GAAG,EAAqB,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACpF;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4JrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,GAAG,EAAqB,MAAM,OAAO,CAAC;AACnF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAkB/C,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACpF;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4KrB"}