@harborclient/sdk 1.1.10 → 1.1.12

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

@@ -0,0 +1,56 @@
+import { type JSX } from 'react';
+/**
+ * One non-editable breadcrumb segment rendered before the trailing editable item.
+ */
+export interface BreadcrumbSegment {
+    /**
+     * Visible label for the segment.
+     */
+    label: string;
+    /**
+     * Optional stable key; falls back to the segment index when omitted.
+     */
+    id?: string;
+    /**
+     * When set, the segment renders as a navigable button.
+     */
+    onClick?: () => void;
+}
+interface Props {
+    /**
+     * Leading, non-editable crumbs (collection, folder, and so on).
+     */
+    segments: BreadcrumbSegment[];
+    /**
+     * Current value of the trailing, inline-editable segment.
+     */
+    value: string;
+    /**
+     * Placeholder shown when the editable value is empty.
+     */
+    placeholder?: string;
+    /**
+     * Accessible name for the editable trailing segment input.
+     */
+    editableLabel?: string;
+    /**
+     * Called when the editable trailing segment changes.
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Additional classes merged onto the outer breadcrumb bar.
+     */
+    className?: string;
+    /**
+     * When true, applies negative horizontal and top margins so the bar sits
+     * flush against the edges of a parent with `p-3` padding.
+     */
+    flush?: boolean;
+}
+/**
+ * Full-width breadcrumb bar with interlocking arrow-shaped segments. Leading
+ * segments are optionally clickable; the trailing segment is inline-editable.
+ */
+export declare function Breadcrumb({ segments, value, placeholder, editableLabel, onValueChange, className, flush }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EAQT,MAAM,OAAO,CAAC;AAOf;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAyOD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,aAAsB,EACtB,aAAa,EACb,SAAS,EACT,KAAa,EACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2DrB"}

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { Input } from '../forms/index.js';
+import { cn } from '../utils.js';
+/** Pixel width of the chevron notch shared between interlocking segments. */
+const CHEVRON_PX = 9;
+/**
+ * Returns a CSS clip-path polygon for the given segment shape.
+ *
+ * @param shape - Which segment position to clip for.
+ * @returns Clip-path polygon string for inline style use.
+ */
+function clipPathForShape(shape) {
+    switch (shape) {
+        case 'first':
+            return `polygon(0 0, calc(100% - ${CHEVRON_PX}px) 0, 100% 50%, calc(100% - ${CHEVRON_PX}px) 100%, 0 100%)`;
+        case 'middle':
+            return `polygon(0 0, calc(100% - ${CHEVRON_PX}px) 0, 100% 50%, calc(100% - ${CHEVRON_PX}px) 100%, 0 100%, ${CHEVRON_PX}px 50%)`;
+        case 'last':
+            return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${CHEVRON_PX}px 50%)`;
+        case 'only':
+        default:
+            return 'none';
+    }
+}
+/**
+ * Renders the arrow-shaped background shell shared by crumb and editable segments.
+ */
+function SegmentShell({ shape, grow = false, className, children }) {
+    const hasChevron = shape !== 'only';
+    const clipPath = clipPathForShape(shape);
+    const needsLeadingInset = shape !== 'first' && shape !== 'only';
+    return (_jsx("div", { className: cn('hc-breadcrumb-segment relative flex min-h-[30px] min-w-0 items-center bg-sidebar py-2', grow ? 'min-w-[6rem] flex-1' : 'max-w-[45%] shrink-0', hasChevron && shape !== 'last' && '-mr-[6px]', !needsLeadingInset && 'pl-3', 'pr-3', className), style: {
+            ...(clipPath !== 'none' ? { clipPath } : {}),
+            ...(needsLeadingInset ? { paddingLeft: `${CHEVRON_PX + 8}px` } : {})
+        }, children: _jsx("div", { className: "min-w-0 truncate", children: children }) }));
+}
+/**
+ * Renders one leading, non-editable breadcrumb segment.
+ */
+function CrumbSegment({ segment, shape }) {
+    const contentClass = cn('block w-full truncate border-none bg-transparent p-0 text-left', segment.onClick && 'cursor-pointer hover:text-text focus-visible:text-text');
+    /**
+     * Stops click propagation so breadcrumb navigation does not trigger edit mode.
+     *
+     * @param event - Mouse event from a breadcrumb segment control.
+     */
+    const handleClick = (event) => {
+        event.stopPropagation();
+        segment.onClick?.();
+    };
+    return (_jsx(SegmentShell, { shape: shape, children: segment.onClick ? (_jsx("button", { type: "button", className: cn(contentClass, 'app-no-drag focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent'), onClick: handleClick, children: segment.label })) : (_jsx("span", { className: contentClass, children: segment.label })) }));
+}
+/**
+ * Renders the trailing breadcrumb segment with click-to-edit behavior.
+ */
+function EditableSegment({ value, placeholder, editableLabel, editing, shape, inputRef, onStartEditing, onStopEditing, onValueChange }) {
+    return (_jsx(SegmentShell, { shape: shape, grow: true, children: editing ? (_jsx(Input, { ref: inputRef, variant: "plain", "aria-label": editableLabel, className: "app-no-drag w-full min-w-0 border-none bg-transparent p-0 font-semibold text-text outline-none", type: "text", value: value, onChange: (event) => onValueChange(event.target.value), onBlur: onStopEditing, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === 'Escape') {
+                    event.preventDefault();
+                    onStopEditing();
+                }
+            } })) : (_jsx("button", { type: "button", "aria-current": "page", "aria-label": editableLabel, className: "app-no-drag flex w-full min-w-0 cursor-text items-center border-none bg-transparent p-0 text-left font-semibold text-text hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent", onClick: onStartEditing, children: _jsx("span", { className: "min-w-0 truncate", children: value ? value : _jsx("span", { className: "font-normal text-muted", children: placeholder }) }) })) }));
+}
+/**
+ * Full-width breadcrumb bar with interlocking arrow-shaped segments. Leading
+ * segments are optionally clickable; the trailing segment is inline-editable.
+ */
+export function Breadcrumb({ segments, value, placeholder = '', editableLabel = 'Name', onValueChange, className, flush = false }) {
+    const [editing, setEditing] = useState(false);
+    const inputRef = useRef(null);
+    const navId = useId();
+    /**
+     * Focuses and selects the trailing input when inline edit mode opens.
+     */
+    useEffect(() => {
+        if (editing) {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+    }, [editing]);
+    /**
+     * Resolves the clip-path shape for a leading segment at the given index.
+     *
+     * @param index - Zero-based index within the leading segments array.
+     * @returns Shape token used by the segment shell.
+     */
+    const leadingShape = (index) => {
+        if (segments.length === 1)
+            return 'first';
+        if (index === 0)
+            return 'first';
+        return 'middle';
+    };
+    const editableShape = segments.length === 0 ? 'only' : 'last';
+    return (_jsxs("nav", { id: navId, "aria-label": "Breadcrumb", className: cn('hc-breadcrumb flex min-w-0 items-stretch', flush ? '-mx-3 -mt-3 w-[calc(100%+1.5rem)]' : 'w-full', className), children: [segments.map((segment, index) => (_jsx(CrumbSegment, { segment: segment, shape: leadingShape(index) }, segment.id ?? `${segment.label}-${index}`))), _jsx(EditableSegment, { value: value, placeholder: placeholder, editableLabel: editableLabel, editing: editing, shape: editableShape, inputRef: inputRef, onStartEditing: () => setEditing(true), onStopEditing: () => setEditing(false), onValueChange: onValueChange })] }));
+}

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,wBAAwB,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAqBnE,MAAM,WAAW,KAAM,SAAQ,IAAI,CACjC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAC9F;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;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;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;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,EACjC,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgVrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAwBnE,MAAM,WAAW,KAAM,SAAQ,IAAI,CACjC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAC9F;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;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;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;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,EACjC,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4lBrB"}

package/dist/components/VariableInput/index.js

@@ -6,6 +6,7 @@ import { useAutocomplete } from '../Autocomplete/useAutocomplete.js';
 import { Button } from '../Button/index.js';
 import { VariableTooltipValue } from '../VariableTooltip/index.js';
 import { Input } from '../forms/index.js';
+import { getFocusableElements } from '../useDialogFocus.js';
 import { cn } from '../utils.js';
 /** Delay after the pointer stops moving before a hover tooltip is shown. */
 const TOOLTIP_SHOW_DELAY_MS = 500;
@@ -19,12 +20,21 @@ const TOOLTIP_HIDE_DELAY_MS = 400;
  */
 export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source, ...props }) {
     const safeValue = value ?? '';
+    const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const backdropRef = useRef(null);
-    const spanRefs = useRef(new Map());
+    const tokenButtonRefs = useRef(new Map());
+    const tooltipRef = useRef(null);
     const hideTimer = useRef(null);
     const showTimer = useRef(null);
+    const suppressReopen = useRef(false);
+    const pendingEnterFocus = useRef(false);
+    const tooltipEntered = useRef(false);
+    const tooltipSourceRef = useRef(null);
+    const activeTokenIndexRef = useRef(null);
     const [tooltip, setTooltip] = useState(null);
+    const [tooltipSource, setTooltipSource] = useState(null);
+    const [activeTokenIndex, setActiveTokenIndex] = useState(null);
     const tooltipId = useId();
     const { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
         source,
@@ -36,6 +46,13 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * Splits the input value into plain text and {{variable}} token spans for highlighting.
      */
     const tokens = useMemo(() => tokenizeVariables(safeValue), [safeValue]);
+    /**
+     * Keeps tooltip refs aligned with React state for timer and document handlers.
+     */
+    useEffect(() => {
+        tooltipSourceRef.current = tooltipSource;
+        activeTokenIndexRef.current = activeTokenIndex;
+    }, [tooltipSource, activeTokenIndex]);
     /**
      * Clears any pending tooltip hide timer.
      */
@@ -45,12 +62,55 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             hideTimer.current = null;
         }
     };
+    /**
+     * Clears tooltip state regardless of source.
+     */
+    const dismissTooltip = () => {
+        pendingEnterFocus.current = false;
+        tooltipEntered.current = false;
+        setTooltip(null);
+        setTooltipSource(null);
+        setActiveTokenIndex(null);
+    };
+    /**
+     * Clears tooltip state and optionally refocuses the triggering token.
+     *
+     * @param refocusToken - When true, moves focus back to the active token without reopening.
+     */
+    const dismissFocusTooltip = (refocusToken = false) => {
+        const index = activeTokenIndexRef.current;
+        dismissTooltip();
+        if (refocusToken && index != null) {
+            suppressReopen.current = true;
+            tokenButtonRefs.current.get(index)?.focus();
+        }
+    };
+    /**
+     * Moves focus to the first control inside the open focus tooltip.
+     */
+    const focusFirstTooltipControl = () => {
+        const tooltipEl = tooltipRef.current;
+        if (!tooltipEl) {
+            return;
+        }
+        getFocusableElements(tooltipEl)[0]?.focus();
+        tooltipEntered.current = true;
+    };
     /**
      * Hides the tooltip after a short grace period so the pointer can reach it.
      */
     const scheduleHide = () => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         cancelHide();
-        hideTimer.current = window.setTimeout(() => setTooltip(null), TOOLTIP_HIDE_DELAY_MS);
+        hideTimer.current = window.setTimeout(() => {
+            hideTimer.current = null;
+            if (tooltipSourceRef.current === 'focus') {
+                return;
+            }
+            dismissTooltip();
+        }, TOOLTIP_HIDE_DELAY_MS);
     };
     /**
      * Clears any pending tooltip show timer.
@@ -64,7 +124,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
     /**
      * Shows a tooltip for a variable token at the given screen position.
      */
-    const showTooltipForKey = (key, top, left) => {
+    const showTooltipForKey = (key, top, left, source, tokenIndex = null) => {
         setTooltip({
             key,
             value: resolveVariable(key, variables),
@@ -72,6 +132,8 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             top,
             left
         });
+        setTooltipSource(source);
+        setActiveTokenIndex(tokenIndex);
     };
     /**
      * Shows the tooltip once the pointer has stopped moving for {@link TOOLTIP_SHOW_DELAY_MS}.
@@ -84,7 +146,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         cancelShow();
         showTimer.current = window.setTimeout(() => {
             showTimer.current = null;
-            showTooltipForKey(key, top, left);
+            showTooltipForKey(key, top, left, 'hover', null);
         }, TOOLTIP_SHOW_DELAY_MS);
     };
     /**
@@ -94,6 +156,65 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         cancelHide();
         cancelShow();
     }, []);
+    /**
+     * Traps Tab within the tooltip controls once focus has entered the tooltip.
+     *
+     * While focus is still on the token (tooltip open but not entered), Tab is left
+     * alone so it moves naturally between variable tokens; only pressing Enter moves
+     * focus into the tooltip and engages this trap.
+     */
+    useEffect(() => {
+        if (tooltipSource !== 'focus' || activeTokenIndex == null || !tooltip) {
+            return;
+        }
+        /**
+         * Cycles Tab and Shift+Tab within the tooltip controls while focus is inside it.
+         *
+         * @param event - Document keydown event.
+         */
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                dismissFocusTooltip(true);
+                return;
+            }
+            if (event.key !== 'Tab' || !tooltipEntered.current) {
+                return;
+            }
+            const tooltipEl = tooltipRef.current;
+            if (!tooltipEl) {
+                return;
+            }
+            const controls = getFocusableElements(tooltipEl);
+            if (controls.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            event.preventDefault();
+            const active = document.activeElement;
+            const index = active ? controls.indexOf(active) : -1;
+            if (index === -1) {
+                controls[0].focus();
+                return;
+            }
+            const nextIndex = event.shiftKey
+                ? (index - 1 + controls.length) % controls.length
+                : (index + 1) % controls.length;
+            controls[nextIndex]?.focus();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [tooltipSource, activeTokenIndex, tooltip]);
+    /**
+     * Moves focus into the tooltip after Enter opens it.
+     */
+    useEffect(() => {
+        if (!pendingEnterFocus.current || tooltipSource !== 'focus' || !tooltip) {
+            return;
+        }
+        pendingEnterFocus.current = false;
+        focusFirstTooltipControl();
+    }, [tooltip, tooltipSource]);
     /**
      * Keeps the colored backdrop aligned with horizontal scroll in the input.
      */
@@ -108,13 +229,22 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * Updates the tooltip based on the current text caret position.
      */
     const updateTooltipFromCaret = () => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         const input = inputRef.current;
         if (!input)
             return;
-        const offset = input.selectionStart ?? 0;
+        const selectionStart = input.selectionStart ?? 0;
+        const selectionEnd = input.selectionEnd ?? 0;
+        if (selectionStart !== selectionEnd) {
+            dismissTooltip();
+            return;
+        }
+        const offset = selectionStart;
         const match = getVariableTokenAtOffset(safeValue, offset);
         if (!match) {
-            setTooltip(null);
+            dismissTooltip();
             return;
         }
         let tokenIndex = -1;
@@ -126,27 +256,77 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             }
             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);
+        const tokenButton = tokenIndex >= 0 ? tokenButtonRefs.current.get(tokenIndex) : undefined;
+        if (tokenButton) {
+            const rect = tokenButton.getBoundingClientRect();
+            showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2, 'hover', null);
             return;
         }
         const rect = input.getBoundingClientRect();
-        showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2);
+        showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2, 'hover', null);
+    };
+    /**
+     * Opens a focus-trapped tooltip for a keyboard-focused variable token.
+     *
+     * @param index - Token index within the rendered token list.
+     * @param key - Variable name from the {{key}} token.
+     * @param button - Focused token button element.
+     */
+    const handleTokenFocus = (index, key, button) => {
+        if (suppressReopen.current) {
+            suppressReopen.current = false;
+            return;
+        }
+        cancelHide();
+        cancelShow();
+        tooltipEntered.current = false;
+        const rect = button.getBoundingClientRect();
+        showTooltipForKey(key, rect.top, rect.left + rect.width / 2, 'focus', index);
+    };
+    /**
+     * Handles keyboard interaction on a variable token button.
+     */
+    const handleTokenKeyDown = (event, index, key) => {
+        if (event.key === 'Escape' && tooltipSource === 'focus' && activeTokenIndex != null) {
+            event.preventDefault();
+            event.stopPropagation();
+            dismissFocusTooltip(false);
+            return;
+        }
+        if (event.key !== 'Enter') {
+            return;
+        }
+        event.preventDefault();
+        if (tooltipSource === 'focus' && activeTokenIndex === index && tooltipRef.current) {
+            focusFirstTooltipControl();
+            return;
+        }
+        pendingEnterFocus.current = true;
+        const button = tokenButtonRefs.current.get(index);
+        if (!button) {
+            pendingEnterFocus.current = false;
+            return;
+        }
+        cancelHide();
+        cancelShow();
+        const rect = button.getBoundingClientRect();
+        showTooltipForKey(key, rect.top, rect.left + rect.width / 2, 'focus', index);
     };
     /**
      * Shows a tooltip when the pointer rests over a variable token span.
      */
     const handleMouseMove = (e) => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         cancelHide();
         for (const [index, token] of tokens.entries()) {
             if (!token.key)
                 continue;
-            const span = spanRefs.current.get(index);
-            if (!span)
+            const tokenButton = tokenButtonRefs.current.get(index);
+            if (!tokenButton)
                 continue;
-            const rect = span.getBoundingClientRect();
+            const rect = tokenButton.getBoundingClientRect();
             if (e.clientX >= rect.left &&
                 e.clientX <= rect.right &&
                 e.clientY >= rect.top &&
@@ -162,9 +342,28 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * Cancels a pending show and hides the tooltip when the pointer leaves the input.
      */
     const handleMouseLeave = () => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         cancelShow();
         scheduleHide();
     };
+    /**
+     * Closes any open tooltip when focus leaves the field.
+     */
+    const handleWrapperBlur = () => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (!wrapper.contains(document.activeElement)) {
+                cancelHide();
+                cancelShow();
+                dismissTooltip();
+            }
+        });
+    };
     /**
      * Handles keyboard events on the input, including tooltip dismissal.
      */
@@ -172,9 +371,9 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         if (onInputKeyDown(event)) {
             return;
         }
-        if (event.key === 'Escape' && tooltip) {
+        if (event.key === 'Escape' && tooltip && tooltipSource !== 'focus') {
             event.preventDefault();
-            setTooltip(null);
+            dismissTooltip();
             return;
         }
         onKeyDown?.(event);
@@ -193,21 +392,36 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         }
     };
     const tooltipContent = tooltip ? getVariableTooltipContent(tooltip.key, variables) : null;
-    return (_jsxs("div", { ...props, className: cn('hc-variable-input relative min-w-0', wrapperClassName ?? 'flex-1'), children: [_jsx("div", { ref: backdropRef, "aria-hidden": true, className: "hc-variable-input-backdrop pointer-events-none absolute inset-0 overflow-hidden px-2.5 py-1.5 whitespace-nowrap text-inherit", children: safeValue ? (tokens.map((token, index) => token.key ? (_jsx("span", { ref: (el) => {
+    const focusTooltipOpen = tooltipSource === 'focus' && tooltip != null;
+    return (_jsxs("div", { ...props, ref: wrapperRef, className: cn('hc-variable-input relative min-w-0', wrapperClassName ?? 'flex-1'), onBlurCapture: handleWrapperBlur, children: [_jsx("div", { ref: backdropRef, className: "hc-variable-input-backdrop pointer-events-none absolute inset-0 overflow-hidden px-2.5 py-1.5 whitespace-nowrap text-inherit", children: safeValue ? (tokens.map((token, index) => token.key ? (_jsx("button", { type: "button", ref: (el) => {
                         if (el)
-                            spanRefs.current.set(index, el);
+                            tokenButtonRefs.current.set(index, el);
                         else
-                            spanRefs.current.delete(index);
-                    }, className: "hc-variable-input-token hc-variable-input-token-variable text-[#32D2E2]", children: token.text }, index)) : (_jsx("span", { className: "hc-variable-input-token", children: token.text }, index)))) : (_jsx("span", { className: "hc-variable-input-placeholder text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? autocompleteOpen : undefined, "aria-controls": source && autocompleteOpen ? listboxId : undefined, "aria-activedescendant": source && autocompleteOpen && autocompleteActiveIndex >= 0
+                            tokenButtonRefs.current.delete(index);
+                    }, tabIndex: 0, "aria-label": `Variable ${token.key}`, "aria-expanded": focusTooltipOpen && activeTokenIndex === index ? true : undefined, "aria-describedby": focusTooltipOpen && activeTokenIndex === index ? tooltipId : undefined, className: cn('hc-variable-input-token hc-variable-input-token-variable font-inherit inline border-none bg-transparent p-0 text-[#32D2E2] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent'), onFocus: (event) => handleTokenFocus(index, token.key, event.currentTarget), onKeyDown: (event) => handleTokenKeyDown(event, index, token.key), children: token.text }, `${index}-${token.text}`)) : (_jsx("span", { "aria-hidden": true, className: "hc-variable-input-token", children: token.text }, `${index}-${token.text}`)))) : (_jsx("span", { "aria-hidden": true, className: "hc-variable-input-placeholder text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? autocompleteOpen : undefined, "aria-controls": source && autocompleteOpen ? listboxId : undefined, "aria-activedescendant": source && autocompleteOpen && autocompleteActiveIndex >= 0
                     ? `${listboxId}-option-${autocompleteActiveIndex}`
-                    : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip ? tooltipId : undefined, className: cn('hc-variable-input-field relative w-full min-w-0 border-none bg-transparent px-2.5 py-1.5 text-transparent caret-text focus-visible:shadow-none', className), type: "text", placeholder: placeholder, value: safeValue, onChange: (e) => {
+                    : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip && tooltipSource !== 'focus' ? tooltipId : undefined, className: cn('hc-variable-input-field relative w-full min-w-0 border-none bg-transparent px-2.5 py-1.5 text-transparent caret-text focus-visible:shadow-none', className), type: "text", placeholder: placeholder, value: safeValue, onChange: (e) => {
                     onChange(e.target.value);
                     queueMicrotask(updateTooltipFromCaret);
                 }, onFocus: () => {
+                    if (tooltipSourceRef.current === 'focus') {
+                        dismissTooltip();
+                    }
                     openAutocomplete();
-                    updateTooltipFromCaret();
-                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-text shadow-md after:pointer-events-auto after:absolute after:right-0 after:-bottom-2 after:left-0 after:h-2 after:content-['']", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(VariableTooltipValue, { value: tooltipContent.text, variableKey: tooltip.key, muted: tooltipContent.muted }), onEditVariable && (_jsx(Button, { variant: "secondary", className: "hc-variable-input-tooltip-edit self-start", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
+                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { ref: tooltipRef, id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-text shadow-md after:pointer-events-auto after:absolute after:right-0 after:-bottom-2 after:left-0 after:h-2 after:content-['']", style: { position: 'fixed', top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(VariableTooltipValue, { value: tooltipContent.text, variableKey: tooltip.key, muted: tooltipContent.muted, onClose: () => {
+                            if (tooltipSource === 'focus') {
+                                dismissFocusTooltip(true);
+                            }
+                            else {
+                                dismissTooltip();
+                            }
+                        } }), onEditVariable && (_jsx(Button, { variant: "secondary", className: "hc-variable-input-tooltip-edit self-start", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
                             onEditVariable(tooltip.key);
-                            setTooltip(null);
+                            if (tooltipSource === 'focus') {
+                                dismissFocusTooltip(true);
+                            }
+                            else {
+                                dismissTooltip();
+                            }
                         }, children: "Edit value" }))] }))] }));
 }

package/dist/components/VariableTooltip/VariableTooltipValue.d.ts

@@ -12,10 +12,14 @@ interface Props {
      * When true, styles the value as muted placeholder text.
      */
     muted?: boolean;
+    /**
+     * When provided, renders a close control to the right of the copy button.
+     */
+    onClose?: () => void;
 }
 /**
- * Readonly resolved-value field with a copy control for variable tooltips.
+ * Readonly resolved-value field with copy and optional close controls for variable tooltips.
  */
-export declare function VariableTooltipValue({ value, variableKey, muted }: Props): JSX.Element;
+export declare function VariableTooltipValue({ value, variableKey, muted, onClose }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=VariableTooltipValue.d.ts.map

package/dist/components/VariableTooltip/VariableTooltipValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableTooltipValue.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTooltip/VariableTooltipValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCtF"}
+{"version":3,"file":"VariableTooltipValue.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTooltip/VariableTooltipValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgD/F"}

package/dist/components/VariableTooltip/VariableTooltipValue.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { faCircleCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { faCircleCheck, faCopy, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
 import { Input } from '../forms/index.js';
 import { cn } from '../utils.js';
 /**
- * Readonly resolved-value field with a copy control for variable tooltips.
+ * Readonly resolved-value field with copy and optional close controls for variable tooltips.
  */
-export function VariableTooltipValue({ value, variableKey, muted }) {
+export function VariableTooltipValue({ value, variableKey, muted, onClose }) {
     const [copied, setCopied] = useState(false);
     /**
      * Copies the resolved value to the clipboard and briefly confirms success in the icon.
@@ -21,5 +21,7 @@ export function VariableTooltipValue({ value, variableKey, muted }) {
     };
     return (_jsxs("div", { className: "hc-variable-tooltip-value-row flex items-center gap-1.5", children: [_jsx(Input, { readOnly: true, value: value, "aria-label": `Resolved value for ${variableKey}`, className: cn('min-w-0 flex-1', muted && 'text-muted') }), _jsx(Button, { type: "button", variant: "icon", "aria-label": copied ? `Copied value for ${variableKey}` : `Copy value for ${variableKey}`, onMouseDown: (event) => {
                     event.preventDefault();
-                }, onClick: handleCopy, children: _jsx(FaIcon, { icon: copied ? faCircleCheck : faCopy, className: "h-4 w-4" }) })] }));
+                }, onClick: handleCopy, children: _jsx(FaIcon, { icon: copied ? faCircleCheck : faCopy, className: "h-4 w-4" }) }), onClose && (_jsx(Button, { type: "button", variant: "icon", className: "hc-variable-tooltip-close", "aria-label": `Close tooltip for ${variableKey}`, onMouseDown: (event) => {
+                    event.preventDefault();
+                }, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) }))] }));
 }

package/dist/components/index.d.ts

@@ -10,6 +10,8 @@ export type { Props as BusyIndicatorProps } from './BusyIndicator/index.js';
 export { BackButton } from './BackButton/index.js';
 export { Badge } from './Badge/index.js';
 export type { BadgeVariant } from './Badge/index.js';
+export { Breadcrumb } from './Breadcrumb/index.js';
+export type { BreadcrumbSegment } from './Breadcrumb/index.js';
 export { Button } from './Button/index.js';
 export { CodeEditor, CODE_EDITOR_THEME_OPTIONS } from './CodeEditor/index.js';
 export { CodeEditorConfigProvider, useCodeEditorConfig, DEFAULT_CODE_EDITOR_CONFIG } from './CodeEditor/config.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -7,6 +7,7 @@ export { DEFAULT_CUSTOM_SWATCHES_STORAGE_KEY, loadCustomSwatches, padCustomSwatc
 export { BusyIndicator } from './BusyIndicator/index.js';
 export { BackButton } from './BackButton/index.js';
 export { Badge } from './Badge/index.js';
+export { Breadcrumb } from './Breadcrumb/index.js';
 export { Button } from './Button/index.js';
 export { CodeEditor, CODE_EDITOR_THEME_OPTIONS } from './CodeEditor/index.js';
 export { CodeEditorConfigProvider, useCodeEditorConfig, DEFAULT_CODE_EDITOR_CONFIG } from './CodeEditor/config.js';

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

@@ -1 +1 @@
-{"version":3,"file":"useDialogFocus.d.ts","sourceRoot":"","sources":["../../src/components/useDialogFocus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8DvC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAU1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CA8D5E"}
+{"version":3,"file":"useDialogFocus.d.ts","sourceRoot":"","sources":["../../src/components/useDialogFocus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuFvC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CA8D5E"}

package/dist/components/useDialogFocus.js

@@ -53,6 +53,27 @@ function unlockOverlaySiblings(siblings) {
         setInertLocked(sibling, false);
     }
 }
+/**
+ * Returns whether a focusable element is visible enough to receive keyboard focus.
+ *
+ * @param element - Candidate focusable element.
+ */
+function isFocusableVisible(element) {
+    if (element.closest('[aria-hidden="true"]')) {
+        return false;
+    }
+    if (element.offsetParent !== null || getComputedStyle(element).position === 'fixed') {
+        return true;
+    }
+    let parent = element.parentElement;
+    while (parent) {
+        if (getComputedStyle(parent).position === 'fixed') {
+            return true;
+        }
+        parent = parent.parentElement;
+    }
+    return false;
+}
 /**
  * Returns visible, enabled focusable descendants of a container, excluding
  * elements inside `aria-hidden` subtrees.
@@ -62,14 +83,7 @@ function unlockOverlaySiblings(siblings) {
  */
 export function getFocusableElements(container) {
     const candidates = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-    return candidates.filter((element) => {
-        if (element.closest('[aria-hidden="true"]'))
-            return false;
-        if (element.offsetParent === null && getComputedStyle(element).position !== 'fixed') {
-            return false;
-        }
-        return true;
-    });
+    return candidates.filter(isFocusableVisible);
 }
 /**
  * Traps keyboard focus within a dialog panel, inerts background siblings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborclient/sdk",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "TypeScript SDK for HarborClient development.",
   "keywords": [
     "harborclient",