@harborclient/sdk 1.0.1 → 1.0.2

package/dist/components/Autocomplete/AutocompleteInput.d.ts

@@ -0,0 +1,23 @@
+import type { InputHTMLAttributes, JSX } from 'react';
+import type { AutocompleteSource } from './types.js';
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    /**
+     * Current input value.
+     */
+    value: string;
+    /**
+     * Called when the value changes.
+     *
+     * @param value - Updated input value.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Optional async source for suggestions and persistence.
+     */
+    source?: AutocompleteSource;
+}
+/**
+ * Text input with optional async autocomplete suggestions.
+ */
+export declare function AutocompleteInput({ value, onChange, source, className, onFocus, onBlur, onKeyDown, ...props }: Props): JSX.Element;
+//# sourceMappingURL=AutocompleteInput.d.ts.map

package/dist/components/Autocomplete/AutocompleteInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC9F;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgErB"}

package/dist/components/Autocomplete/AutocompleteInput.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { Input } from '../forms/index.js';
+import { SuggestionList } from './SuggestionList.js';
+import { useAutocomplete } from './useAutocomplete.js';
+/**
+ * Text input with optional async autocomplete suggestions.
+ */
+export function AutocompleteInput({ value, onChange, source, className, onFocus, onBlur, onKeyDown, ...props }) {
+    const { open, items, activeIndex, anchorRef, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
+        source,
+        value,
+        onSelect: onChange
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { ...props, ref: anchorRef, role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? open : undefined, "aria-controls": source && open ? listboxId : undefined, "aria-activedescendant": source && open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined, className: className, value: value, onChange: (event) => onChange(event.target.value), onFocus: (event) => {
+                    openAutocomplete();
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    closeAutocomplete();
+                    onBlur?.(event);
+                }, onKeyDown: (event) => {
+                    if (onInputKeyDown(event)) {
+                        return;
+                    }
+                    onKeyDown?.(event);
+                } }), source && (_jsx(SuggestionList, { open: open, items: items, activeIndex: activeIndex, anchorRef: anchorRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions }))] }));
+}

package/dist/components/Autocomplete/SuggestionList.d.ts

@@ -0,0 +1,45 @@
+import type { JSX, RefObject } from 'react';
+interface SuggestionListProps {
+    /**
+     * Whether the suggestion popup should render.
+     */
+    open: boolean;
+    /**
+     * Filtered suggestion values.
+     */
+    items: string[];
+    /**
+     * Keyboard-highlighted suggestion index.
+     */
+    activeIndex: number;
+    /**
+     * Anchor input used to position the popup.
+     */
+    anchorRef: RefObject<HTMLElement | null>;
+    /**
+     * Id of the listbox element for aria-controls wiring.
+     */
+    listboxId: string;
+    /**
+     * Called when the user selects a suggestion.
+     *
+     * @param item - Selected suggestion value.
+     */
+    onSelect: (item: string) => void;
+    /**
+     * Called when the active highlight changes via mouse hover.
+     *
+     * @param index - Highlighted suggestion index.
+     */
+    onActiveIndexChange: (index: number) => void;
+    /**
+     * Called when the popup should close (outside click).
+     */
+    onClose: () => void;
+}
+/**
+ * Portaled suggestion list for combobox autocomplete inputs.
+ */
+export declare function SuggestionList({ open, items, activeIndex, anchorRef, listboxId, onSelect, onActiveIndexChange, onClose }: SuggestionListProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=SuggestionList.d.ts.map

package/dist/components/Autocomplete/SuggestionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionList.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/SuggestionList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,mBAAmB;IAC3B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEzC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0BD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,OAAO,EACR,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoF1C"}

package/dist/components/Autocomplete/SuggestionList.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { useEffect, useState } from '@harborclient/sdk/react';
+import { portalToBody } from '../portalToBody.js';
+/**
+ * Computes fixed popup coordinates from the anchor element.
+ *
+ * @param anchor - Anchor element for positioning.
+ */
+function getPopupPosition(anchor) {
+    if (!anchor) {
+        return null;
+    }
+    const rect = anchor.getBoundingClientRect();
+    return {
+        top: rect.bottom + 2,
+        left: rect.left,
+        width: rect.width
+    };
+}
+/**
+ * Portaled suggestion list for combobox autocomplete inputs.
+ */
+export function SuggestionList({ open, items, activeIndex, anchorRef, listboxId, onSelect, onActiveIndexChange, onClose }) {
+    const [position, setPosition] = useState(null);
+    useEffect(() => {
+        if (!open) {
+            setPosition(null);
+            return;
+        }
+        /**
+         * Updates popup position from the anchor rect.
+         */
+        const updatePosition = () => {
+            setPosition(getPopupPosition(anchorRef.current));
+        };
+        updatePosition();
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [anchorRef, open]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        /**
+         * Closes the popup when the user clicks outside the anchor and list.
+         */
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node)) {
+                return;
+            }
+            const anchor = anchorRef.current;
+            const listbox = document.getElementById(listboxId);
+            if (anchor?.contains(target) || listbox?.contains(target)) {
+                return;
+            }
+            onClose();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return () => document.removeEventListener('pointerdown', handlePointerDown);
+    }, [anchorRef, listboxId, onClose, open]);
+    if (!open || items.length === 0 || !position) {
+        return null;
+    }
+    return portalToBody(_jsx("ul", { id: listboxId, role: "listbox", className: "fixed z-50 max-h-48 overflow-y-auto rounded-md border border-separator bg-surface py-1 text-[14px] text-text shadow-md", style: { top: position.top, left: position.left, width: position.width }, children: items.map((item, index) => (_jsx("li", { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": index === activeIndex, className: index === activeIndex
+                ? 'cursor-pointer bg-selection px-2 py-1'
+                : 'cursor-pointer px-2 py-1 hover:bg-selection', onMouseEnter: () => onActiveIndexChange(index), onMouseDown: (event) => event.preventDefault(), onClick: () => onSelect(item), children: item }, item))) }));
+}

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

@@ -0,0 +1,6 @@
+export { AutocompleteInput } from './AutocompleteInput.js';
+export type { Props as AutocompleteInputProps } from './AutocompleteInput.js';
+export { SuggestionList } from './SuggestionList.js';
+export type { AutocompleteSource } from './types.js';
+export { useAutocomplete } from './useAutocomplete.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,KAAK,IAAI,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Autocomplete/index.js

@@ -0,0 +1,3 @@
+export { AutocompleteInput } from './AutocompleteInput.js';
+export { SuggestionList } from './SuggestionList.js';
+export { useAutocomplete } from './useAutocomplete.js';

package/dist/components/Autocomplete/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Async provider for autocomplete suggestions.
+ *
+ * {@link list} returns known values; {@link add} persists a new value when the user
+ * commits text that is not already in the list.
+ */
+export interface AutocompleteSource {
+    /**
+     * Returns all known autocomplete values.
+     */
+    list(): Promise<string[]>;
+    /**
+     * Persists a new autocomplete value for future {@link list} calls.
+     *
+     * @param value - Trimmed value committed by the user.
+     */
+    add(value: string): Promise<void>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Autocomplete/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAE1B;;;;OAIG;IACH,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnC"}

package/dist/components/Autocomplete/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Autocomplete/useAutocomplete.d.ts

@@ -0,0 +1,84 @@
+import type { KeyboardEvent, RefObject } from 'react';
+import type { AutocompleteSource } from './types.js';
+interface UseAutocompleteOptions {
+    /**
+     * Optional async source for suggestions and persistence.
+     */
+    source?: AutocompleteSource;
+    /**
+     * Current input value.
+     */
+    value: string;
+    /**
+     * Called when the user selects a suggestion from the list.
+     *
+     * @param item - Selected suggestion value.
+     */
+    onSelect: (item: string) => void;
+    /**
+     * Optional ref for the anchor input; created internally when omitted.
+     */
+    anchorRef?: RefObject<HTMLInputElement | null>;
+}
+interface UseAutocompleteResult {
+    /**
+     * Whether the suggestion popup is visible.
+     */
+    open: boolean;
+    /**
+     * Filtered suggestion items for the current value.
+     */
+    items: string[];
+    /**
+     * Keyboard-highlighted suggestion index, or -1 when none.
+     */
+    activeIndex: number;
+    /**
+     * Ref attached to the anchor input element.
+     */
+    anchorRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Id for the suggestion listbox element.
+     */
+    listboxId: string;
+    /**
+     * Opens suggestions and loads the source list when needed.
+     */
+    onFocus: () => void;
+    /**
+     * Commits the value and closes suggestions.
+     */
+    onBlur: () => void;
+    /**
+     * Handles keyboard navigation for the suggestion list.
+     *
+     * @returns True when the key was consumed by autocomplete handling.
+     */
+    onInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => boolean;
+    /**
+     * Selects a suggestion and closes the list.
+     *
+     * @param item - Suggestion value to apply.
+     */
+    selectItem: (item: string) => void;
+    /**
+     * Re-evaluates filtered items when the input value changes while open.
+     */
+    refreshItems: () => void;
+    /**
+     * Updates the keyboard-highlighted suggestion index.
+     */
+    setActiveIndex: (index: number) => void;
+    /**
+     * Closes the suggestion list without committing.
+     */
+    closeSuggestions: () => void;
+}
+/**
+ * Headless autocomplete state for combobox inputs.
+ *
+ * @param options - Source, value, and selection callback.
+ */
+export declare function useAutocomplete({ source, value, onSelect, anchorRef: externalAnchorRef }: UseAutocompleteOptions): UseAutocompleteResult;
+export {};
+//# sourceMappingURL=useAutocomplete.d.ts.map

package/dist/components/Autocomplete/useAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/useAutocomplete.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAE5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAChD;AAED,UAAU,qBAAqB;IAC7B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAE9C;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;;;OAIG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC;IAEpE;;;;OAIG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAuBD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,iBAAiB,EAC7B,EAAE,sBAAsB,GAAG,qBAAqB,CAgMhD"}

package/dist/components/Autocomplete/useAutocomplete.js

@@ -0,0 +1,191 @@
+import { useCallback, useEffect, useId, useRef, useState } from '@harborclient/sdk/react';
+/**
+ * Filters cached suggestions by the current input value.
+ *
+ * @param items - Full suggestion list.
+ * @param value - Current input value.
+ */
+function filterItems(items, value) {
+    const trimmed = value.trim();
+    const lower = trimmed.toLowerCase();
+    return items.filter((item) => {
+        if (item.toLowerCase() === lower) {
+            return false;
+        }
+        if (!trimmed) {
+            return true;
+        }
+        return item.toLowerCase().includes(lower);
+    });
+}
+/**
+ * Headless autocomplete state for combobox inputs.
+ *
+ * @param options - Source, value, and selection callback.
+ */
+export function useAutocomplete({ source, value, onSelect, anchorRef: externalAnchorRef }) {
+    const internalAnchorRef = useRef(null);
+    const anchorRef = externalAnchorRef ?? internalAnchorRef;
+    const cacheRef = useRef([]);
+    const loadedRef = useRef(false);
+    const loadPromiseRef = useRef(null);
+    const listboxId = useId();
+    const [open, setOpen] = useState(false);
+    const [items, setItems] = useState([]);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    /**
+     * Loads suggestions from the source when not already cached.
+     */
+    const ensureLoaded = useCallback(async () => {
+        if (!source) {
+            return [];
+        }
+        if (loadedRef.current) {
+            return cacheRef.current;
+        }
+        if (loadPromiseRef.current) {
+            return loadPromiseRef.current;
+        }
+        loadPromiseRef.current = source.list().then((list) => {
+            cacheRef.current = list;
+            loadedRef.current = true;
+            loadPromiseRef.current = null;
+            return list;
+        });
+        return loadPromiseRef.current;
+    }, [source]);
+    /**
+     * Updates filtered items from the cached list.
+     */
+    const refreshItems = useCallback(() => {
+        if (!source) {
+            setItems([]);
+            return;
+        }
+        setItems(filterItems(cacheRef.current, value));
+    }, [source, value]);
+    /**
+     * Persists a new value when it is not already known.
+     */
+    const commit = useCallback(async () => {
+        if (!source) {
+            return;
+        }
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return;
+        }
+        const exists = cacheRef.current.some((item) => item.toLowerCase() === trimmed.toLowerCase());
+        if (exists) {
+            return;
+        }
+        cacheRef.current = [...cacheRef.current, trimmed];
+        try {
+            await source.add(trimmed);
+        }
+        catch {
+            cacheRef.current = cacheRef.current.filter((item) => item !== trimmed);
+        }
+    }, [source, value]);
+    /**
+     * Opens the suggestion list and loads items when a source is configured.
+     */
+    const openSuggestions = useCallback(async () => {
+        if (!source) {
+            return;
+        }
+        await ensureLoaded();
+        const filtered = filterItems(cacheRef.current, value);
+        setItems(filtered);
+        setActiveIndex(filtered.length > 0 ? 0 : -1);
+        setOpen(true);
+    }, [ensureLoaded, source, value]);
+    /**
+     * Closes the suggestion list and resets highlight state.
+     */
+    const closeSuggestions = useCallback(() => {
+        setOpen(false);
+        setActiveIndex(-1);
+    }, []);
+    /**
+     * Applies a suggestion and closes the list without calling add().
+     *
+     * @param item - Selected suggestion value.
+     */
+    const selectItem = useCallback((item) => {
+        onSelect(item);
+        closeSuggestions();
+    }, [closeSuggestions, onSelect]);
+    /**
+     * Opens suggestions when the input receives focus.
+     */
+    const onFocus = useCallback(() => {
+        void openSuggestions();
+    }, [openSuggestions]);
+    /**
+     * Commits new values and closes suggestions on blur.
+     */
+    const onBlur = useCallback(() => {
+        void commit();
+        closeSuggestions();
+    }, [closeSuggestions, commit]);
+    /**
+     * Handles arrow keys, Enter, and Escape for suggestion navigation.
+     */
+    const onInputKeyDown = useCallback((event) => {
+        if (!source || !open) {
+            return false;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (items.length === 0) {
+                return true;
+            }
+            setActiveIndex((index) => (index + 1) % items.length);
+            return true;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (items.length === 0) {
+                return true;
+            }
+            setActiveIndex((index) => (index <= 0 ? items.length - 1 : index - 1));
+            return true;
+        }
+        if (event.key === 'Enter') {
+            if (activeIndex >= 0 && items[activeIndex]) {
+                event.preventDefault();
+                selectItem(items[activeIndex]);
+                return true;
+            }
+            void commit();
+            closeSuggestions();
+            return false;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeSuggestions();
+            return true;
+        }
+        return false;
+    }, [activeIndex, closeSuggestions, commit, items, open, selectItem, source]);
+    useEffect(() => {
+        if (open) {
+            refreshItems();
+        }
+    }, [open, refreshItems, value]);
+    return {
+        open,
+        items,
+        activeIndex,
+        anchorRef,
+        listboxId,
+        onFocus,
+        onBlur,
+        onInputKeyDown,
+        selectItem,
+        refreshItems,
+        setActiveIndex,
+        closeSuggestions
+    };
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAEjB,KAAK,iBAAiB,GAAG,MAAM,GAAG,YAAY,CAAC;AAE/C,KAAK,cAAc,GACf;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5D,KAAK,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,GAAG;IACjG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,SAAS,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,GAAG,cAAc,CAAC,GAC7D,CAAC,SAAS,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAA;CAAE,CAAC,CAAC;AAkB1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,SAAS,EACT,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAG3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,MAAM,GACN,YAAY,CAAC;AAEjB,KAAK,iBAAiB,GAAG,MAAM,GAAG,YAAY,CAAC;AAE/C,KAAK,cAAc,GACf;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE5D,KAAK,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,GAAG;IACjG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,SAAS,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,GAAG,cAAc,CAAC,GAC7D,CAAC,SAAS,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAA;CAAE,CAAC,CAAC;AAc1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,SAAS,EACT,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAG3B"}

package/dist/components/Button/index.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+const BUTTON_BASE = 'inline-flex cursor-pointer items-center rounded-md app-no-drag';
 const VARIANT_CLASSES = {
-    primary: 'inline-flex min-h-[34px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-accent px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
-    secondary: 'inline-flex min-h-[34px] cursor-pointer items-center justify-center rounded-md border border-separator bg-control px-3 py-1 text-[15px] text-text shadow-sm hover:bg-selection disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
-    primaryDanger: 'inline-flex min-h-[34px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-danger px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
-    secondaryDanger: 'inline-flex min-h-[34px] cursor-pointer items-center justify-center rounded-md border border-separator bg-control px-3 py-1 text-[15px] text-danger shadow-sm hover:bg-danger/15 disabled:cursor-not-allowed disabled:opacity-50 app-no-drag',
-    toolbar: 'inline-flex min-h-[34px] cursor-pointer items-center rounded-md border-none bg-transparent px-2 py-1 text-[15px] hover:bg-selection app-no-drag',
-    icon: 'inline-flex size-[30px] shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-muted hover:bg-selection hover:text-text app-no-drag',
-    iconDanger: 'inline-flex size-[30px] shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-muted hover:bg-danger/15 hover:text-danger app-no-drag'
+    primary: `${BUTTON_BASE} min-h-[32px] justify-center border border-transparent bg-accent px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50`,
+    secondary: `${BUTTON_BASE} min-h-[32px] justify-center border border-separator bg-control px-3 py-1 text-[15px] text-text shadow-sm hover:bg-selection disabled:cursor-not-allowed disabled:opacity-50`,
+    primaryDanger: `${BUTTON_BASE} min-h-[32px] justify-center border border-transparent bg-danger px-3 py-1 text-[15px] font-medium text-white shadow-sm hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50`,
+    secondaryDanger: `${BUTTON_BASE} min-h-[32px] justify-center border border-separator bg-control px-3 py-1 text-[15px] text-danger shadow-sm hover:bg-danger/15 disabled:cursor-not-allowed disabled:opacity-50`,
+    toolbar: `${BUTTON_BASE} min-h-[32px] border-none bg-transparent px-2 py-1 text-[15px] hover:bg-selection`,
+    icon: `${BUTTON_BASE} size-[30px] shrink-0 justify-center border-none bg-transparent text-muted hover:bg-selection hover:text-text`,
+    iconDanger: `${BUTTON_BASE} size-[30px] shrink-0 justify-center border-none bg-transparent text-muted hover:bg-danger/15 hover:text-danger`
 };
 /**
  * macOS-style button with shared variant presets for primary actions, secondary

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

@@ -1,5 +1,6 @@
 import type { JSX } from 'react';
 import type { KeyValue, Variable } from '../../types.js';
+import type { AutocompleteSource } from '../Autocomplete/types.js';
 export interface Props {
     /**
      * Editable key-value rows.
@@ -27,9 +28,17 @@ export interface Props {
      * Opens collection settings to edit a hovered variable.
      */
     onEditVariable?: () => void;
+    /**
+     * Optional async source for key column autocomplete suggestions.
+     */
+    keySource?: AutocompleteSource;
+    /**
+     * Optional async source for value column autocomplete suggestions.
+     */
+    valueSource?: AutocompleteSource;
 }
 /**
  * Editable table of key-value rows with enable toggles for headers and params.
  */
-export declare function KeyValueEditor({ rows, onChange, placeholderKey, placeholderValue, variables, onEditVariable }: Props): JSX.Element;
+export declare function KeyValueEditor({ rows, onChange, placeholderKey, placeholderValue, variables, onEditVariable, keySource, valueSource }: Props): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAOzD,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACf,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2FrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAOnE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,cAAsB,EACtB,gBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,SAAS,EACT,WAAW,EACZ,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6FrB"}

package/dist/components/KeyValueEditor/index.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { AutocompleteInput } from '../Autocomplete/index.js';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
-import { Checkbox, Input, fieldFrame } from '../forms/index.js';
+import { Checkbox, fieldFrame } from '../forms/index.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader } from '../Table/index.js';
 import { VariableInput } from '../VariableInput/index.js';
 /**
  * Editable table of key-value rows with enable toggles for headers and params.
  */
-export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeholderValue = 'Value', variables, onEditVariable }) {
+export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeholderValue = 'Value', variables, onEditVariable, keySource, valueSource }) {
     /**
      * Updates a single row by index.
      *
@@ -35,5 +36,5 @@ export function KeyValueEditor({ rows, onChange, placeholderKey = 'Key', placeho
         }
         onChange(rows.filter((_, i) => i !== index));
     };
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx(TableCell, { children: _jsx(Input, { type: "text", className: "w-full", value: row.key, placeholder: placeholderKey, "aria-label": `Key, row ${index + 1}`, onChange: (e) => updateRow(index, { key: e.target.value }) }) }), _jsx(TableCell, { children: _jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, placeholder: placeholderValue, "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable }) }), _jsx(TableCell, { className: "w-7 p-1 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }));
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs("tr", { children: [_jsx(TableHead, { className: "w-6 p-0", children: _jsx("span", { className: "sr-only", children: "Enable" }) }), _jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Value" }), _jsx(TableHead, { className: "w-7 p-0" })] }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: row.enabled, onChange: (e) => updateRow(index, { enabled: e.target.checked }), "aria-label": `Enable row ${index + 1}`, title: "Enable" }) }), _jsx(TableCell, { children: _jsx(AutocompleteInput, { type: "text", className: "w-full", value: row.key, source: keySource, placeholder: placeholderKey, "aria-label": `Key, row ${index + 1}`, onChange: (key) => updateRow(index, { key }) }) }), _jsx(TableCell, { children: _jsx(VariableInput, { wrapperClassName: `${fieldFrame} w-full`, className: "app-no-drag", value: row.value, onChange: (value) => updateRow(index, { value }), variables: variables, source: valueSource, placeholder: placeholderValue, "aria-label": `Value, row ${index + 1}`, onEditVariable: onEditVariable }) }), _jsx(TableCell, { className: "w-7 p-1 text-center", children: _jsx(Button, { type: "button", variant: "iconDanger", onClick: () => removeRow(index), title: "Remove", "aria-label": `Remove row ${index + 1}`, children: _jsx(FaIcon, { icon: faXmark, className: "h-3.5 w-3.5" }) }) })] }, index))) })] }));
 }

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

@@ -1,5 +1,6 @@
 import type { JSX, KeyboardEvent } from 'react';
 import type { Variable } from '../../types.js';
+import type { AutocompleteSource } from '../Autocomplete/types.js';
 export interface Props {
     /**
      * Current input value.
@@ -47,6 +48,10 @@ export interface Props {
      * Id of the element that labels this input when using `aria-labelledby`.
      */
     'aria-labelledby'?: string;
+    /**
+     * Optional async source for value autocomplete suggestions.
+     */
+    source?: AutocompleteSource;
 }
 /**
  * Text input that highlights {{variable}} tokens and shows resolved values on hover.
@@ -54,5 +59,5 @@ export interface Props {
  * Token highlight color (`text-[#32D2E2]`) and the tooltip `app-no-drag` class rely on
  * host styling in HarborClient `styles.css`.
  */
-export declare function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className, wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: Props): JSX.Element;
+export declare function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className, wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source }: Props): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"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;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,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;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,EACP,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0SrB"}

package/dist/components/VariableInput/index.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { getDynamicVariableDescription, getVariableTokenAtOffset, getVariableTooltipContent, resolveVariable, tokenizeVariables } from '../../variables/index.js';
+import { SuggestionList } from '../Autocomplete/SuggestionList.js';
+import { useAutocomplete } from '../Autocomplete/useAutocomplete.js';
 import { Input } from '../forms/index.js';
 /**
  * Text input that highlights {{variable}} tokens and shows resolved values on hover.
@@ -8,13 +10,19 @@ import { Input } from '../forms/index.js';
  * Token highlight color (`text-[#32D2E2]`) and the tooltip `app-no-drag` class rely on
  * host styling in HarborClient `styles.css`.
  */
-export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }) {
+export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source }) {
     const inputRef = useRef(null);
     const backdropRef = useRef(null);
     const spanRefs = useRef(new Map());
     const hideTimer = useRef(null);
     const [tooltip, setTooltip] = useState(null);
     const tooltipId = useId();
+    const { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
+        source,
+        value,
+        onSelect: onChange,
+        anchorRef: inputRef
+    });
     /**
      * Splits the input value into plain text and {{variable}} token spans for highlighting.
      */
@@ -126,6 +134,9 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * @param event - Keyboard event from the input.
      */
     const handleKeyDown = (event) => {
+        if (onInputKeyDown(event)) {
+            return;
+        }
         if (event.key === 'Escape' && tooltip) {
             event.preventDefault();
             setTooltip(null);
@@ -154,10 +165,15 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
                             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, "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) => {
+                    }, 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", 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: `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: () => {
+                }, onFocus: () => {
+                    openAutocomplete();
+                    updateTooltipFromCaret();
+                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: scheduleHide }), 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: "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/index.d.ts

@@ -1,4 +1,5 @@
 export { AsyncListState, ErrorRetry, LoadingMessage } from './AsyncListState/index.js';
+export { AutocompleteInput, SuggestionList, useAutocomplete, type AutocompleteInputProps, type AutocompleteSource } from './Autocomplete/index.js';
 export { BusyIndicator } from './BusyIndicator/index.js';
 export type { Props as BusyIndicatorProps } from './BusyIndicator/index.js';
 export { BackButton } from './BackButton/index.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":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACvF,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EACL,wBAAwB,EACxB,mBAAmB,EACnB,0BAA0B,EAC3B,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7E,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EACL,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,+BAA+B,EAC/B,qBAAqB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAChG,YAAY,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrE,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export { AsyncListState, ErrorRetry, LoadingMessage } from './AsyncListState/index.js';
+export { AutocompleteInput, SuggestionList, useAutocomplete } from './Autocomplete/index.js';
 export { BusyIndicator } from './BusyIndicator/index.js';
 export { BackButton } from './BackButton/index.js';
 export { Badge } from './Badge/index.js';

package/dist/runtime/hcBridge.js

@@ -1,6 +1,3 @@
-/** @type {number} */
-let nextRequestId = 1;
-
 /** @type {Map<number, { resolve: (value: unknown) => void; reject: (reason?: unknown) => void }>} */
 const pendingRequests = new Map();
 

package/package.json

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