@harborclient/sdk 1.0.2 → 1.0.4

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

@@ -1 +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"}
+{"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,CAkErB"}

package/dist/components/Autocomplete/AutocompleteInput.js

@@ -6,12 +6,13 @@ import { useAutocomplete } from './useAutocomplete.js';
  * Text input with optional async autocomplete suggestions.
  */
 export function AutocompleteInput({ value, onChange, source, className, onFocus, onBlur, onKeyDown, ...props }) {
+    const safeValue = value ?? '';
     const { open, items, activeIndex, anchorRef, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
         source,
-        value,
+        value: safeValue,
         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) => {
+    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: safeValue, onChange: (event) => onChange(event.target.value), onFocus: (event) => {
                     openAutocomplete();
                     onFocus?.(event);
                 }, onBlur: (event) => {

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

@@ -74,6 +74,13 @@ interface UseAutocompleteResult {
      */
     closeSuggestions: () => void;
 }
+/**
+ * Filters cached suggestions by the current input value.
+ *
+ * @param items - Full suggestion list.
+ * @param value - Current input value.
+ */
+export declare function filterAutocompleteItems(items: string[], value: string | null | undefined): string[];
 /**
  * Headless autocomplete state for combobox inputs.
  *

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

@@ -1 +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"}
+{"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;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,MAAM,EAAE,EACf,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC/B,MAAM,EAAE,CAaV;AAcD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,iBAAiB,EAC7B,EAAE,sBAAsB,GAAG,qBAAqB,CAqOhD"}

package/dist/components/Autocomplete/useAutocomplete.js

@@ -5,8 +5,8 @@ import { useCallback, useEffect, useId, useRef, useState } from '@harborclient/s
  * @param items - Full suggestion list.
  * @param value - Current input value.
  */
-function filterItems(items, value) {
-    const trimmed = value.trim();
+export function filterAutocompleteItems(items, value) {
+    const trimmed = (value ?? '').trim();
     const lower = trimmed.toLowerCase();
     return items.filter((item) => {
         if (item.toLowerCase() === lower) {
@@ -18,6 +18,17 @@ function filterItems(items, value) {
         return item.toLowerCase().includes(lower);
     });
 }
+/**
+ * Normalizes a source list response to a string array.
+ *
+ * @param list - Raw value returned from {@link AutocompleteSource.list}.
+ */
+function normalizeSourceList(list) {
+    if (!Array.isArray(list)) {
+        return [];
+    }
+    return list.filter((item) => typeof item === 'string');
+}
 /**
  * Headless autocomplete state for combobox inputs.
  *
@@ -29,10 +40,22 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
     const cacheRef = useRef([]);
     const loadedRef = useRef(false);
     const loadPromiseRef = useRef(null);
+    const mountedRef = useRef(true);
     const listboxId = useId();
+    const safeValue = value ?? '';
     const [open, setOpen] = useState(false);
     const [items, setItems] = useState([]);
     const [activeIndex, setActiveIndex] = useState(-1);
+    /**
+     * Clears the mounted flag when the hook unmounts so async work cannot set state.
+     */
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            loadPromiseRef.current = null;
+        };
+    }, []);
     /**
      * Loads suggestions from the source when not already cached.
      */
@@ -46,11 +69,20 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
         if (loadPromiseRef.current) {
             return loadPromiseRef.current;
         }
-        loadPromiseRef.current = source.list().then((list) => {
-            cacheRef.current = list;
+        loadPromiseRef.current = source
+            .list()
+            .then((list) => {
+            const normalized = normalizeSourceList(list);
+            cacheRef.current = normalized;
+            loadedRef.current = true;
+            loadPromiseRef.current = null;
+            return normalized;
+        })
+            .catch(() => {
+            cacheRef.current = [];
             loadedRef.current = true;
             loadPromiseRef.current = null;
-            return list;
+            return [];
         });
         return loadPromiseRef.current;
     }, [source]);
@@ -59,11 +91,16 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
      */
     const refreshItems = useCallback(() => {
         if (!source) {
-            setItems([]);
+            if (mountedRef.current) {
+                setItems([]);
+            }
             return;
         }
-        setItems(filterItems(cacheRef.current, value));
-    }, [source, value]);
+        if (!mountedRef.current) {
+            return;
+        }
+        setItems(filterAutocompleteItems(cacheRef.current, safeValue));
+    }, [source, safeValue]);
     /**
      * Persists a new value when it is not already known.
      */
@@ -71,7 +108,7 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
         if (!source) {
             return;
         }
-        const trimmed = value.trim();
+        const trimmed = safeValue.trim();
         if (!trimmed) {
             return;
         }
@@ -86,7 +123,7 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
         catch {
             cacheRef.current = cacheRef.current.filter((item) => item !== trimmed);
         }
-    }, [source, value]);
+    }, [source, safeValue]);
     /**
      * Opens the suggestion list and loads items when a source is configured.
      */
@@ -95,15 +132,21 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
             return;
         }
         await ensureLoaded();
-        const filtered = filterItems(cacheRef.current, value);
+        if (!mountedRef.current) {
+            return;
+        }
+        const filtered = filterAutocompleteItems(cacheRef.current, safeValue);
         setItems(filtered);
         setActiveIndex(filtered.length > 0 ? 0 : -1);
         setOpen(true);
-    }, [ensureLoaded, source, value]);
+    }, [ensureLoaded, source, safeValue]);
     /**
      * Closes the suggestion list and resets highlight state.
      */
     const closeSuggestions = useCallback(() => {
+        if (!mountedRef.current) {
+            return;
+        }
         setOpen(false);
         setActiveIndex(-1);
     }, []);
@@ -169,11 +212,14 @@ export function useAutocomplete({ source, value, onSelect, anchorRef: externalAn
         }
         return false;
     }, [activeIndex, closeSuggestions, commit, items, open, selectItem, source]);
+    /**
+     * Re-filters suggestions when the input value changes while the list is open.
+     */
     useEffect(() => {
         if (open) {
             refreshItems();
         }
-    }, [open, refreshItems, value]);
+    }, [open, refreshItems, safeValue]);
     return {
         open,
         items,

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;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"}
+{"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,CA2GrB"}

package/dist/components/KeyValueEditor/index.js

@@ -36,5 +36,18 @@ 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(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))) })] }));
+    /**
+     * Normalizes a key-value row so editors never receive undefined fields.
+     *
+     * @param row - Raw row from host state or imports.
+     */
+    const normalizeRow = (row) => ({
+        key: row.key ?? '',
+        value: row.value ?? '',
+        enabled: row.enabled ?? true
+    });
+    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) => {
+                    const normalizedRow = normalizeRow(row);
+                    return (_jsxs("tr", { children: [_jsx(TableCell, { className: "w-6 p-1 text-center", children: _jsx(Checkbox, { className: "app-no-drag", checked: normalizedRow.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: normalizedRow.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: normalizedRow.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/PageHeader/index.js

@@ -6,7 +6,7 @@ import { FaIcon } from '../FaIcon/index.js';
  */
 export function PageHeader({ title, description, icon, children, className }) {
     const wrapperClassName = className
-        ? `-mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 pb-6 ${className}`
-        : '-mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator px-6 pb-6';
+        ? `-mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator p-4 ${className}`
+        : '-mx-6 mb-4 flex flex-wrap items-center gap-2 border-b border-separator p-4';
     return (_jsxs("div", { className: wrapperClassName, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("h2", { className: "m-0 flex items-center gap-2 text-[17px] font-semibold text-text", children: [icon ? _jsx(FaIcon, { icon: icon, className: "h-4 w-4 shrink-0 text-muted", "aria-hidden": true }) : null, title] }), description ? _jsx("p", { className: "m-0 mt-1 text-[14px] text-muted", children: description }) : null] }), children ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: children }) : null] }));
 }

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;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"}
+{"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,CA2SrB"}

package/dist/components/VariableInput/index.js

@@ -11,6 +11,7 @@ import { Input } from '../forms/index.js';
  * host styling in HarborClient `styles.css`.
  */
 export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source }) {
+    const safeValue = value ?? '';
     const inputRef = useRef(null);
     const backdropRef = useRef(null);
     const spanRefs = useRef(new Map());
@@ -19,14 +20,14 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
     const tooltipId = useId();
     const { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
         source,
-        value,
+        value: safeValue,
         onSelect: onChange,
         anchorRef: inputRef
     });
     /**
      * Splits the input value into plain text and {{variable}} token spans for highlighting.
      */
-    const tokens = useMemo(() => tokenizeVariables(value), [value]);
+    const tokens = useMemo(() => tokenizeVariables(safeValue), [safeValue]);
     /**
      * Clears any pending tooltip hide timer.
      */
@@ -81,7 +82,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         if (!input)
             return;
         const offset = input.selectionStart ?? 0;
-        const match = getVariableTokenAtOffset(value, offset);
+        const match = getVariableTokenAtOffset(safeValue, offset);
         if (!match) {
             setTooltip(null);
             return;
@@ -160,14 +161,14 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         }
     };
     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) => {
+    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: safeValue ? (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", 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) => {
+                    : 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: safeValue, onChange: (e) => {
                     onChange(e.target.value);
                     queueMicrotask(updateTooltipFromCaret);
                 }, onFocus: () => {

package/package.json

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