@harborclient/sdk 0.6.3 → 0.6.6

package/dist/components/RowActionsMenu/index.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { useEffect, useRef } from '@harborclient/sdk/react';
+import { useCallback, useEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { resolveMenuTypeahead, resolveTabListKeyAction } from '../utils.js';
+const TYPEAHEAD_TIMEOUT_MS = 500;
 /**
  * Tailwind classes for a single menu item button.
  *
@@ -19,7 +21,79 @@ function menuItemClass(variant) {
  */
 export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
     const isOpen = openMenuId === menuId;
+    const menuElementId = `${menuId}-menu`;
     const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const typeaheadBuffer = useRef('');
+    const typeaheadTimer = useRef(null);
+    const wasOpenRef = useRef(isOpen);
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    const flatItems = useMemo(() => groups.flat(), [groups]);
+    const itemLabels = useMemo(() => flatItems.map((item) => item.label), [flatItems]);
+    /**
+     * Clears the accumulated typeahead buffer.
+     */
+    const clearTypeahead = useCallback(() => {
+        typeaheadBuffer.current = '';
+        if (typeaheadTimer.current != null) {
+            window.clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = null;
+        }
+    }, []);
+    /**
+     * Closes the menu and returns focus to the trigger button.
+     */
+    const closeMenu = useCallback(() => {
+        clearTypeahead();
+        onOpenChange(null);
+        requestAnimationFrame(() => {
+            triggerRef.current?.focus();
+        });
+    }, [clearTypeahead, onOpenChange]);
+    /**
+     * Focuses a menu item by index and updates roving tabindex state.
+     *
+     * @param index - Flat index of the menu item to focus.
+     */
+    const focusItem = useCallback((index) => {
+        setFocusedIndex(index);
+        requestAnimationFrame(() => {
+            itemRefs.current[index]?.focus();
+        });
+    }, []);
+    /**
+     * Opens the menu and focuses the first or last item.
+     *
+     * @param focusLast - When true, focus the last item instead of the first.
+     */
+    const openMenu = useCallback((focusLast = false) => {
+        if (flatItems.length === 0)
+            return;
+        setFocusedIndex(focusLast ? flatItems.length - 1 : 0);
+        onOpenChange(menuId);
+    }, [flatItems.length, menuId, onOpenChange]);
+    /**
+     * Moves focus into the menu after it opens and item refs are mounted.
+     */
+    useEffect(() => {
+        if (isOpen && !wasOpenRef.current) {
+            requestAnimationFrame(() => {
+                itemRefs.current[focusedIndex]?.focus();
+            });
+        }
+        wasOpenRef.current = isOpen;
+    }, [focusedIndex, isOpen]);
+    /**
+     * Resets item refs when the menu closes.
+     */
+    useEffect(() => {
+        if (!isOpen) {
+            itemRefs.current = [];
+            setFocusedIndex(0);
+            clearTypeahead();
+        }
+    }, [clearTypeahead, isOpen]);
     /**
      * Closes the menu on outside click or Escape while it is open.
      */
@@ -28,12 +102,13 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
             return;
         const handleMouseDown = (e) => {
             if (rootRef.current && !rootRef.current.contains(e.target)) {
-                onOpenChange(null);
+                closeMenu();
             }
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
-                onOpenChange(null);
+                e.preventDefault();
+                closeMenu();
             }
         };
         document.addEventListener('mousedown', handleMouseDown);
@@ -42,13 +117,77 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
             document.removeEventListener('mousedown', handleMouseDown);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [isOpen, onOpenChange]);
-    return (_jsxs("div", { ref: rootRef, className: "relative shrink-0", children: [_jsx(Button, { type: "button", variant: "icon", className: isOpen ? 'opacity-100' : undefined, title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, onClick: (e) => {
+    }, [closeMenu, isOpen]);
+    /**
+     * Handles keyboard interaction on the menu trigger when closed.
+     *
+     * @param event - Keyboard event from the trigger button.
+     */
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openMenu(false);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            openMenu(true);
+        }
+    };
+    /**
+     * Handles keyboard navigation within the open menu.
+     *
+     * @param event - Keyboard event from the menu container.
+     */
+    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();
+            clearTypeahead();
+            focusItem(arrowIndex);
+            return;
+        }
+        const typeahead = resolveMenuTypeahead(itemLabels, focusedIndex, event.key, typeaheadBuffer.current);
+        if (typeahead) {
+            event.preventDefault();
+            typeaheadBuffer.current = typeahead.buffer;
+            if (typeaheadTimer.current != null) {
+                window.clearTimeout(typeaheadTimer.current);
+            }
+            typeaheadTimer.current = window.setTimeout(() => {
+                typeaheadBuffer.current = '';
+                typeaheadTimer.current = null;
+            }, TYPEAHEAD_TIMEOUT_MS);
+            focusItem(typeahead.index);
+        }
+    };
+    return (_jsxs("div", { ref: rootRef, className: "relative shrink-0", children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
                     e.stopPropagation();
-                    onOpenChange(isOpen ? null : menuId);
-                }, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { role: "menu", className: "absolute right-0 top-full z-10 mt-0.5 min-w-[120px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", children: groups.map((group, groupIndex) => (_jsx("div", { role: "group", className: groupIndex > 0 ? 'border-t border-separator' : undefined, children: group.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: menuItemClass(item.variant), onClick: (e) => {
-                            e.stopPropagation();
-                            onOpenChange(null);
-                            item.onSelect();
-                        }, children: item.label }, item.label))) }, groupIndex))) }))] }));
+                    if (isOpen) {
+                        closeMenu();
+                    }
+                    else {
+                        openMenu(false);
+                    }
+                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "absolute right-0 top-full z-10 mt-0.5 min-w-[120px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
+                    let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
+                    return (_jsx("div", { className: groupIndex > 0 ? 'border-t border-separator' : undefined, children: group.map((item) => {
+                            const itemIndex = flatIndex++;
+                            return (_jsx("button", { ref: (el) => {
+                                    itemRefs.current[itemIndex] = el;
+                                }, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: menuItemClass(item.variant), onClick: (e) => {
+                                    e.stopPropagation();
+                                    closeMenu();
+                                    item.onSelect();
+                                }, children: item.label }, item.label));
+                        }) }, groupIndex));
+                }) }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+BD,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACV,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkBpC;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA8GxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+BD,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACV,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkBpC;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA+GxB"}

package/dist/components/SegmentedTabs/index.js

@@ -91,7 +91,7 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
         });
     }, [visibleTabs, value, onChange]);
     const isRadiogroup = pattern === 'radiogroup';
-    return (_jsx("div", { className: groupClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
+    return (_jsx("div", { className: groupClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, ...(!isRadiogroup ? { 'aria-orientation': 'horizontal' } : {}), onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
             const selected = value === tab.value;
             const tabClassName = `${segment(selected)}${fullWidth ? ' flex-1' : ''}`;
             return (_jsx("button", { ref: (element) => {
@@ -105,7 +105,7 @@ export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp,
                         role: 'tab',
                         id: getTabId(tab.value),
                         'aria-selected': selected,
-                        'aria-controls': getPanelId(tab.value)
+                        ...(context ? { 'aria-controls': getPanelId(tab.value) } : {})
                     }), children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [tab.label, tab.indicator && _jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent", "aria-hidden": true })] }) }, tab.value));
         }) }));
 }

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

@@ -0,0 +1,22 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Sidebar navigation rendered in the left column.
+     */
+    sidebar: ReactNode;
+    /**
+     * Scrollable main content rendered in the right column.
+     */
+    children: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the outer flex column wrapper.
+     */
+    className?: string;
+}
+/**
+ * Two-pane layout shell: a fixed sidebar column and a scrollable content area
+ * with standard page padding.
+ */
+export declare function SidebarLayout({ sidebar, children, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAalF"}

package/dist/components/SidebarLayout/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Two-pane layout shell: a fixed sidebar column and a scrollable content area
+ * with standard page padding.
+ */
+export function SidebarLayout({ sidebar, children, className }) {
+    const outer = className
+        ? `flex min-h-0 flex-1 flex-col ${className}`
+        : 'flex min-h-0 flex-1 flex-col';
+    return (_jsx("div", { className: outer, children: _jsxs("div", { className: "flex min-h-0 flex-1", children: [sidebar, _jsx("div", { className: "flex-1 overflow-y-auto p-6", children: children })] }) }));
+}

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

@@ -14,7 +14,7 @@ interface Props {
     title?: string;
 }
 /**
- * Hover-reveal close control for document-style tabs in the request editor and AI chat.
+ * Close control for document-style tabs in the request editor and AI chat.
  *
  * @param ariaLabel - Accessible name describing which tab closes.
  * @param onClick - Click handler; callers should stop propagation when needed.

package/dist/components/TabCloseButton/index.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FaIcon } from '../FaIcon/index.js';
 /**
- * Hover-reveal close control for document-style tabs in the request editor and AI chat.
+ * Close control for document-style tabs in the request editor and AI chat.
  *
  * @param ariaLabel - Accessible name describing which tab closes.
  * @param onClick - Click handler; callers should stop propagation when needed.
  * @param title - Optional native tooltip text.
  */
 export function TabCloseButton({ ariaLabel, onClick, title = 'Close tab' }) {
-    return (_jsx("button", { type: "button", className: "inline-flex aspect-square shrink-0 cursor-pointer items-center justify-center self-stretch rounded-md border-none bg-transparent text-[14px] text-muted opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100 focus-visible:opacity-100 hover:bg-selection hover:text-text app-no-drag", title: title, "aria-label": ariaLabel, onClick: onClick, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
+    return (_jsx("button", { type: "button", className: "inline-flex aspect-square shrink-0 cursor-pointer items-center justify-center self-stretch rounded-md border-none bg-transparent text-[14px] text-muted hover:bg-selection hover:text-text focus-visible:bg-selection focus-visible:text-text app-no-drag", title: title, "aria-label": ariaLabel, onClick: onClick, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }));
 }

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

@@ -0,0 +1,103 @@
+import type { HTMLAttributes, JSX, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+/**
+ * Layout preset for {@link Table} and its subcomponents.
+ */
+export type TableVariant = 'bordered' | 'loose';
+/**
+ * Default header cell classes for bordered editor tables.
+ */
+export declare const tableHeadClass = "border-r border-b border-separator p-3 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0";
+/**
+ * Default body cell classes for bordered editor tables.
+ */
+export declare const tableCellClass = "border-r border-b border-separator p-3 last:border-r-0";
+/**
+ * Header cell classes for loose tables with separate cell spacing.
+ */
+export declare const tableHeadClassLoose = "pb-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted";
+/**
+ * Body cell classes for loose tables with separate cell spacing.
+ */
+export declare const tableCellClassLoose = "";
+interface TableProps {
+    /**
+     * Table header and body sections.
+     */
+    children: ReactNode;
+    /**
+     * Layout preset for the table shell and cell styling.
+     */
+    variant?: TableVariant;
+    /**
+     * Additional Tailwind classes merged onto the outer wrapper or table element.
+     */
+    className?: string;
+}
+/**
+ * Table shell for editable row layouts.
+ *
+ * @param children - {@link TableHeader} and {@link TableBody} sections.
+ * @param variant - Bordered collapsed layout or loose separate-cell spacing.
+ * @param className - Extra classes on the wrapper (bordered) or table element (loose).
+ */
+export declare function Table({ children, variant, className }: TableProps): JSX.Element;
+interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Header or body row content.
+     */
+    children: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the section element.
+     */
+    className?: string;
+}
+/**
+ * Table header section wrapper.
+ *
+ * @param children - Header row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after any section preset.
+ */
+export declare function TableHeader({ children, className, ...rest }: TableSectionProps): JSX.Element;
+/**
+ * Table body section wrapper.
+ *
+ * @param children - Body row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function TableBody({ children, className, ...rest }: TableSectionProps): JSX.Element;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Header cell content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional Tailwind classes merged after the header cell preset.
+     */
+    className?: string;
+}
+/**
+ * Header cell with table styling for the active variant.
+ *
+ * @param children - Header label content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function TableHead({ children, className, scope, ...rest }: TableHeadProps): JSX.Element;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Body cell content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional Tailwind classes merged after the body cell preset.
+     */
+    className?: string;
+}
+/**
+ * Body cell with table styling for the active variant.
+ *
+ * @param children - Cell content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function TableCell({ children, className, ...rest }: TableCellProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,cAAc,gIACoG,CAAC;AAEhI;;GAEG;AACH,eAAO,MAAM,cAAc,2DAA2D,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,mBAAmB,8EAC6C,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAuBtC,UAAU,UAAU;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,OAAoB,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAwB5F;AAED,UAAU,iBAAkB,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAM5F;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAU1F;AAED,UAAU,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,KAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAU9B;AAED,UAAU,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAUvF"}

package/dist/components/Table/index.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { createContext, createElement, useContext } from '@harborclient/sdk/react';
+/**
+ * Default header cell classes for bordered editor tables.
+ */
+export const tableHeadClass = 'border-r border-b border-separator p-3 text-left text-[14px] font-medium uppercase tracking-wide text-muted last:border-r-0';
+/**
+ * Default body cell classes for bordered editor tables.
+ */
+export const tableCellClass = 'border-r border-b border-separator p-3 last:border-r-0';
+/**
+ * Header cell classes for loose tables with separate cell spacing.
+ */
+export const tableHeadClassLoose = 'pb-1 text-left text-[14px] font-medium uppercase tracking-wide text-muted';
+/**
+ * Body cell classes for loose tables with separate cell spacing.
+ */
+export const tableCellClassLoose = '';
+const TableVariantContext = createContext('bordered');
+/**
+ * Returns preset classes merged with optional overrides.
+ *
+ * @param base - Variant preset classes.
+ * @param className - Additional classes appended after the preset.
+ */
+function mergeClasses(base, className) {
+    if (base && className) {
+        return `${base} ${className}`;
+    }
+    if (base) {
+        return base;
+    }
+    if (className) {
+        return className;
+    }
+    return undefined;
+}
+/**
+ * Table shell for editable row layouts.
+ *
+ * @param children - {@link TableHeader} and {@link TableBody} sections.
+ * @param variant - Bordered collapsed layout or loose separate-cell spacing.
+ * @param className - Extra classes on the wrapper (bordered) or table element (loose).
+ */
+export function Table({ children, variant = 'bordered', className }) {
+    if (variant === 'loose') {
+        const tableBase = 'w-full border-separate border-spacing-x-1.5 border-spacing-y-1.5';
+        const tableClasses = className ? `${tableBase} ${className}` : tableBase;
+        return createElement(TableVariantContext.Provider, { value: variant }, createElement('table', { className: tableClasses }, children));
+    }
+    const wrapperBase = 'overflow-hidden rounded-md border border-separator';
+    const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
+    return createElement(TableVariantContext.Provider, { value: variant }, createElement('div', { className: wrapperClasses }, createElement('table', { className: 'w-full border-collapse' }, children)));
+}
+/**
+ * Table header section wrapper.
+ *
+ * @param children - Header row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after any section preset.
+ */
+export function TableHeader({ children, className, ...rest }) {
+    return (_jsx("thead", { className: className, ...rest, children: children }));
+}
+/**
+ * Table body section wrapper.
+ *
+ * @param children - Body row elements, typically native `tr` nodes.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function TableBody({ children, className, ...rest }) {
+    const variant = useContext(TableVariantContext);
+    const base = variant === 'bordered' ? '[&_tr:last-child_td]:border-b-0' : '';
+    const classes = mergeClasses(base, className);
+    return (_jsx("tbody", { className: classes, ...rest, children: children }));
+}
+/**
+ * Header cell with table styling for the active variant.
+ *
+ * @param children - Header label content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function TableHead({ children, className, scope = 'col', ...rest }) {
+    const variant = useContext(TableVariantContext);
+    const base = variant === 'loose' ? tableHeadClassLoose : tableHeadClass;
+    const classes = mergeClasses(base, className);
+    return (_jsx("th", { scope: scope, className: classes, ...rest, children: children }));
+}
+/**
+ * Body cell with table styling for the active variant.
+ *
+ * @param children - Cell content.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function TableCell({ children, className, ...rest }) {
+    const variant = useContext(TableVariantContext);
+    const base = variant === 'loose' ? tableCellClassLoose : tableCellClass;
+    const classes = mergeClasses(base, className);
+    return (_jsx("td", { className: classes, ...rest, children: children }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAgB/C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EAClC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiKrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAkB/C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EAClC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0PrB"}

package/dist/components/VariableInput/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
-import { getDynamicVariableDescription, resolveVariable, tokenizeVariables } from '../../variables/index.js';
+import { useEffect, useId, useMemo, useRef, useState } from '@harborclient/sdk/react';
+import { getDynamicVariableDescription, getVariableTokenAtOffset, getVariableTooltipContent, resolveVariable, tokenizeVariables } from '../../variables/index.js';
 import { Input } from '../forms/index.js';
 /**
  * Text input that highlights {{variable}} tokens and shows resolved values on hover.
@@ -14,6 +14,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
     const spanRefs = useRef(new Map());
     const hideTimer = useRef(null);
     const [tooltip, setTooltip] = useState(null);
+    const tooltipId = useId();
     /**
      * Splits the input value into plain text and {{variable}} token spans for highlighting.
      */
@@ -48,6 +49,53 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             backdrop.scrollLeft = input.scrollLeft;
         }
     };
+    /**
+     * Shows a tooltip for a variable token at the given screen position.
+     *
+     * @param key - Variable name from the token.
+     * @param top - Top coordinate for tooltip placement.
+     * @param left - Horizontal center coordinate for tooltip placement.
+     */
+    const showTooltipForKey = (key, top, left) => {
+        setTooltip({
+            key,
+            value: resolveVariable(key, variables),
+            dynamicDescription: getDynamicVariableDescription(key),
+            top,
+            left
+        });
+    };
+    /**
+     * Updates the tooltip based on the current text caret position.
+     */
+    const updateTooltipFromCaret = () => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        const offset = input.selectionStart ?? 0;
+        const match = getVariableTokenAtOffset(value, offset);
+        if (!match) {
+            setTooltip(null);
+            return;
+        }
+        let tokenIndex = -1;
+        let position = 0;
+        for (const [index, token] of tokens.entries()) {
+            if (token.key && position === match.start) {
+                tokenIndex = index;
+                break;
+            }
+            position += token.text.length;
+        }
+        const span = tokenIndex >= 0 ? spanRefs.current.get(tokenIndex) : undefined;
+        if (span) {
+            const rect = span.getBoundingClientRect();
+            showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2);
+            return;
+        }
+        const rect = input.getBoundingClientRect();
+        showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2);
+    };
     /**
      * Shows a tooltip when the pointer is over a variable token span.
      *
@@ -66,24 +114,50 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
                 e.clientX <= rect.right &&
                 e.clientY >= rect.top &&
                 e.clientY <= rect.bottom) {
-                setTooltip({
-                    key: token.key,
-                    value: resolveVariable(token.key, variables),
-                    dynamicDescription: getDynamicVariableDescription(token.key),
-                    top: rect.top,
-                    left: rect.left + rect.width / 2
-                });
+                showTooltipForKey(token.key, rect.top, rect.left + rect.width / 2);
                 return;
             }
         }
         setTooltip(null);
     };
+    /**
+     * Handles keyboard events on the input, including tooltip dismissal.
+     *
+     * @param event - Keyboard event from the input.
+     */
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && tooltip) {
+            event.preventDefault();
+            setTooltip(null);
+            return;
+        }
+        onKeyDown?.(event);
+    };
+    /**
+     * Updates the tooltip after keyboard navigation moves the caret.
+     *
+     * @param event - Keyboard event from the input.
+     */
+    const handleKeyUp = (event) => {
+        if (event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'ArrowDown' ||
+            event.key === 'Home' ||
+            event.key === 'End') {
+            updateTooltipFromCaret();
+        }
+    };
+    const tooltipContent = tooltip ? getVariableTooltipContent(tooltip.key, variables) : null;
     return (_jsxs("div", { className: wrapperClassName ? `relative min-w-0 ${wrapperClassName}` : 'relative min-w-0 flex-1', children: [_jsx("div", { ref: backdropRef, "aria-hidden": true, className: "pointer-events-none absolute inset-0 overflow-hidden whitespace-nowrap px-2 py-1.5 text-[14px] text-inherit", children: value ? (tokens.map((token, index) => token.key ? (_jsx("span", { ref: (el) => {
                         if (el)
                             spanRefs.current.set(index, el);
                         else
                             spanRefs.current.delete(index);
-                    }, className: "text-[#32D2E2]", children: token.text }, index)) : (_jsx("span", { children: token.text }, index)))) : (_jsx("span", { className: "text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: `relative w-full min-w-0 border-none bg-transparent px-2 py-1.5 text-[14px] text-transparent caret-text focus-visible:shadow-none ${className}`, type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), onKeyDown: onKeyDown, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), tooltip && (_jsxs("div", { className: "pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-1.5 rounded-md border border-separator bg-surface px-3 py-2 text-[14px] text-text shadow-md", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: () => setTooltip(null), children: [tooltip.value !== undefined ? (tooltip.value) : tooltip.dynamicDescription ? (_jsxs("span", { className: "text-muted", children: ["Dynamic: ", tooltip.dynamicDescription] })) : (_jsx("span", { className: "text-muted", children: "Not defined" })), onEditVariable && (_jsx("button", { type: "button", className: "self-start text-[14px] text-accent hover:underline app-no-drag", onClick: () => {
+                    }, className: "text-[#32D2E2]", children: token.text }, index)) : (_jsx("span", { children: token.text }, index)))) : (_jsx("span", { className: "text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip ? tooltipId : undefined, className: `relative w-full min-w-0 border-none bg-transparent px-2 py-1.5 text-[14px] text-transparent caret-text focus-visible:shadow-none ${className}`, type: "text", placeholder: placeholder, value: value, onChange: (e) => {
+                    onChange(e.target.value);
+                    queueMicrotask(updateTooltipFromCaret);
+                }, onFocus: updateTooltipFromCaret, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-1.5 rounded-md border border-separator bg-surface px-3 py-2 text-[14px] text-text shadow-md", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: () => setTooltip(null), children: [_jsx("span", { className: tooltipContent.muted ? 'text-muted' : undefined, children: tooltipContent.text }), onEditVariable && (_jsx("button", { type: "button", className: "self-start text-[14px] text-accent hover:underline app-no-drag", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
                             onEditVariable();
                             setTooltip(null);
                         }, children: "Edit value" }))] }))] }));

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":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAa/C,UAAU,KAAK;IACb;;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;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkHtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY/C,UAAU,KAAK;IACb;;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;CACtB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmHtF"}