@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/components/suggestions-primitives/SuggestionList.js

@@ -0,0 +1,35 @@
+/**
+ * SuggestionList – container for text suggestions (primitive)
+ *
+ * Renders list of SuggestionItem from context; uses activeIndex for highlight.
+ * Optional renderItem. When not using renderItem, enableHighlightMarkup and
+ * highlightMarkupOptions control parsing of <mark>...</mark> in suggestion text.
+ */
+import React from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { SuggestionItem } from './SuggestionItem';
+import { clsx } from 'clsx';
+const listStyle = {
+    margin: 0,
+    padding: '4px 0',
+};
+export function SuggestionList({ maxItems = 10, className, style, listClassName, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
+    const { suggestions, activeIndex, loading, selectSuggestion, getAllNavigableItems, } = useSuggestionsContext();
+    const items = suggestions.slice(0, maxItems);
+    const navigableItems = getAllNavigableItems();
+    const suggestionStartIndex = navigableItems.findIndex((n) => n.type === 'suggestion');
+    const activeIsInSuggestions = suggestionStartIndex >= 0 && activeIndex >= suggestionStartIndex && activeIndex < suggestionStartIndex + items.length;
+    // When loading with previous results, show previous results (no loading UI)
+    if (items.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-list', className), style: style },
+        React.createElement("ul", { className: clsx('seekora-suggestions-list-ul', listClassName), style: listStyle, role: "listbox" }, items.map((suggestion, i) => {
+            const globalIndex = suggestionStartIndex >= 0 ? suggestionStartIndex + i : i;
+            const isActive = activeIsInSuggestions && activeIndex === globalIndex;
+            const onSelect = () => selectSuggestion(suggestion, globalIndex);
+            if (renderItem) {
+                return (React.createElement("li", { key: suggestion.objectID ?? suggestion.query ?? i, role: "option" }, renderItem(suggestion, globalIndex, isActive, onSelect)));
+            }
+            return (React.createElement(SuggestionItem, { key: suggestion.objectID ?? suggestion.query ?? i, suggestion: suggestion, index: globalIndex, isActive: isActive, onSelect: onSelect, enableHighlightMarkup: enableHighlightMarkup, highlightMarkupOptions: highlightMarkupOptions }));
+        }))));
+}

package/dist/components/suggestions-primitives/SuggestionsContext.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Suggestions Context
+ *
+ * Type definitions and React context for composable suggestions primitives.
+ * Consuming components use useSuggestionsContext() for state and actions.
+ */
+import React from 'react';
+import type { SuggestionItem, ProductItem, RecentSearch, TrendingSearch, FilteredTab } from '@seekora-ai/ui-sdk-types';
+import type { NavigableItem } from '../../hooks/useQuerySuggestionsEnhanced';
+export interface SuggestionsContextValue {
+    query: string;
+    setQuery: (query: string) => void;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    activeIndex: number;
+    setActiveIndex: (index: number) => void;
+    suggestions: SuggestionItem[];
+    recentSearches: RecentSearch[];
+    trendingSearches: TrendingSearch[];
+    trendingProducts: ProductItem[];
+    /** Products prefetched on mount via client.search("*") — available before dropdown opens */
+    prefetchedProducts: unknown[];
+    filteredTabs: FilteredTab[];
+    activeTabId: string;
+    setActiveTabId: (id: string) => void;
+    loading: boolean;
+    error: Error | null;
+    hasContent: boolean;
+    getAllNavigableItems: () => NavigableItem[];
+    selectSuggestion: (suggestion: SuggestionItem, position: number) => void;
+    selectProduct: (product: ProductItem, position: number, section?: string, tabId?: string) => void;
+    selectRecentSearch: (search: RecentSearch) => void;
+    selectTrendingSearch: (trending: TrendingSearch, position: number) => void;
+    setActiveTab: (tab: FilteredTab) => void;
+    submitSearch: (query: string, fromSuggestion?: boolean, suggestion?: SuggestionItem) => void;
+    clearRecentSearches: () => void;
+    close: () => void;
+    navigateNext: () => void;
+    navigatePrev: () => void;
+    selectActive: () => void;
+}
+export declare const SuggestionsContext: React.Context<SuggestionsContextValue | null>;
+export declare function useSuggestionsContext(): SuggestionsContextValue;
+//# sourceMappingURL=SuggestionsContext.d.ts.map

package/dist/components/suggestions-primitives/SuggestionsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionsContext.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionsContext.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EACZ,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,WAAW,uBAAuB;IAEtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,YAAY,EAAE,CAAC;IAC/B,gBAAgB,EAAE,cAAc,EAAE,CAAC;IACnC,gBAAgB,EAAE,WAAW,EAAE,CAAC;IAChC,4FAA4F;IAC5F,kBAAkB,EAAE,OAAO,EAAE,CAAC;IAC9B,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,oBAAoB,EAAE,MAAM,aAAa,EAAE,CAAC;IAG5C,gBAAgB,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,aAAa,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClG,kBAAkB,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7F,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAGlB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,+CAAsD,CAAC;AAEtF,wBAAgB,qBAAqB,IAAI,uBAAuB,CAQ/D"}

package/dist/components/suggestions-primitives/SuggestionsContext.js

@@ -0,0 +1,18 @@
+/**
+ * Suggestions Context
+ *
+ * Type definitions and React context for composable suggestions primitives.
+ * Consuming components use useSuggestionsContext() for state and actions.
+ */
+import { createContext, useContext } from 'react';
+import { log } from '@seekora-ai/ui-sdk-core';
+export const SuggestionsContext = createContext(null);
+export function useSuggestionsContext() {
+    const context = useContext(SuggestionsContext);
+    if (!context) {
+        const error = new Error('useSuggestionsContext must be used within a SuggestionsProvider');
+        log.error('SuggestionsContext: not available', { error: error.message });
+        throw error;
+    }
+    return context;
+}

package/dist/components/suggestions-primitives/SuggestionsDropdownComposition.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SuggestionsDropdownComposition – reference composition
+ *
+ * Example layout built from primitives: SearchInput + DropdownPanel containing
+ * RecentSearchesList (when query empty), SuggestionList, CategoriesTabs, ProductGrid, TrendingList.
+ * Wrap with SearchProvider and SuggestionsProvider. Use as reference or replace
+ * with your own arrangement of the same primitives.
+ */
+import React from 'react';
+import type { SuggestionsProviderProps } from './SuggestionsProvider';
+export interface SuggestionsDropdownCompositionProps extends Omit<SuggestionsProviderProps, 'children'> {
+    /** Show recent searches when query is empty */
+    showRecentSearches?: boolean;
+    /** Show trending list */
+    showTrending?: boolean;
+    /** Show categories/filtered tabs */
+    showTabs?: boolean;
+    /** Show product grid */
+    showProducts?: boolean;
+    /** SearchInput placeholder */
+    placeholder?: string;
+}
+export declare function SuggestionsDropdownComposition({ showRecentSearches, showTrending, showTabs, showProducts, placeholder, ...providerProps }: SuggestionsDropdownCompositionProps): React.JSX.Element;
+//# sourceMappingURL=SuggestionsDropdownComposition.d.ts.map

package/dist/components/suggestions-primitives/SuggestionsDropdownComposition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionsDropdownComposition.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionsDropdownComposition.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,MAAM,WAAW,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,UAAU,CAAC;IACrG,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yBAAyB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAyB,EACzB,YAAmB,EACnB,QAAe,EACf,YAAmB,EACnB,WAAW,EACX,GAAG,aAAa,EACjB,EAAE,mCAAmC,qBAgBrC"}

package/dist/components/suggestions-primitives/SuggestionsDropdownComposition.js

@@ -0,0 +1,30 @@
+/**
+ * SuggestionsDropdownComposition – reference composition
+ *
+ * Example layout built from primitives: SearchInput + DropdownPanel containing
+ * RecentSearchesList (when query empty), SuggestionList, CategoriesTabs, ProductGrid, TrendingList.
+ * Wrap with SearchProvider and SuggestionsProvider. Use as reference or replace
+ * with your own arrangement of the same primitives.
+ */
+import React from 'react';
+import { SuggestionsProvider } from './SuggestionsProvider';
+import { SearchInput } from './SearchInput';
+import { DropdownPanel } from './DropdownPanel';
+import { RecentSearchesList } from './RecentSearchesList';
+import { SuggestionList } from './SuggestionList';
+import { CategoriesTabs } from './CategoriesTabs';
+import { ProductGrid } from './ProductGrid';
+import { TrendingList } from './TrendingList';
+import { SuggestionsError } from './SuggestionsError';
+export function SuggestionsDropdownComposition({ showRecentSearches = true, showTrending = true, showTabs = true, showProducts = true, placeholder, ...providerProps }) {
+    return (React.createElement(SuggestionsProvider, { ...providerProps },
+        React.createElement("div", { className: "seekora-suggestions-dropdown-composition", style: { position: 'relative', width: '100%' } },
+            React.createElement(SearchInput, { placeholder: placeholder }),
+            React.createElement(DropdownPanel, null,
+                React.createElement(SuggestionsError, null),
+                showRecentSearches ? React.createElement(RecentSearchesList, null) : null,
+                React.createElement(SuggestionList, null),
+                showTabs ? React.createElement(CategoriesTabs, null) : null,
+                showProducts ? React.createElement(ProductGrid, null) : null,
+                showTrending ? React.createElement(TrendingList, null) : null))));
+}

package/dist/components/suggestions-primitives/SuggestionsError.d.ts

@@ -0,0 +1,11 @@
+/**
+ * SuggestionsError – error message (primitive)
+ */
+import React from 'react';
+export interface SuggestionsErrorProps {
+    className?: string;
+    style?: React.CSSProperties;
+    render?: (error: Error) => React.ReactNode;
+}
+export declare function SuggestionsError({ className, style, render }: SuggestionsErrorProps): React.JSX.Element | null;
+//# sourceMappingURL=SuggestionsError.d.ts.map

package/dist/components/suggestions-primitives/SuggestionsError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionsError.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionsError.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,qBAAqB,4BAmBnF"}

package/dist/components/suggestions-primitives/SuggestionsError.js

@@ -0,0 +1,19 @@
+/**
+ * SuggestionsError – error message (primitive)
+ */
+import React from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+export function SuggestionsError({ className, style, render }) {
+    const { error } = useSuggestionsContext();
+    if (!error)
+        return null;
+    if (render)
+        return React.createElement(React.Fragment, null, render(error));
+    return (React.createElement("div", { className: clsx('seekora-suggestions-error', className), style: {
+            padding: 16,
+            color: 'var(--seekora-error, #dc2626)',
+            fontSize: '0.875rem',
+            ...style,
+        } }, error.message));
+}

package/dist/components/suggestions-primitives/SuggestionsLoading.d.ts

@@ -0,0 +1,11 @@
+/**
+ * SuggestionsLoading – loading indicator (primitive)
+ */
+import React from 'react';
+export interface SuggestionsLoadingProps {
+    className?: string;
+    style?: React.CSSProperties;
+    text?: string;
+}
+export declare function SuggestionsLoading({ className, style, text }: SuggestionsLoadingProps): React.JSX.Element | null;
+//# sourceMappingURL=SuggestionsLoading.d.ts.map

package/dist/components/suggestions-primitives/SuggestionsLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionsLoading.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionsLoading.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAmB,EAAE,EAAE,uBAAuB,4BAiBpG"}

package/dist/components/suggestions-primitives/SuggestionsLoading.js

@@ -0,0 +1,17 @@
+/**
+ * SuggestionsLoading – loading indicator (primitive)
+ */
+import React from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+export function SuggestionsLoading({ className, style, text = 'Loading...' }) {
+    const { loading } = useSuggestionsContext();
+    if (!loading)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-loading', className), style: {
+            padding: 16,
+            color: 'var(--seekora-text-secondary, #6b7280)',
+            fontSize: '0.875rem',
+            ...style,
+        } }, text));
+}

package/dist/components/suggestions-primitives/SuggestionsProvider.d.ts

@@ -0,0 +1,38 @@
+/**
+ * SuggestionsProvider
+ *
+ * Provides suggestions state (query, suggestions, products, recent, trending, tabs),
+ * actions (selectSuggestion, selectProduct, submitSearch, etc.), and keyboard navigation.
+ * Uses useQuerySuggestionsEnhanced and useSuggestionsAnalytics; must be inside SearchProvider.
+ */
+import React from 'react';
+import type { SuggestionItem, ProductItem } from '@seekora-ai/ui-sdk-types';
+export interface SuggestionsProviderProps {
+    children: React.ReactNode;
+    /** Min query length to fetch suggestions */
+    minQueryLength?: number;
+    /** Debounce ms for suggestion fetch */
+    debounceMs?: number;
+    /** Max suggestions */
+    maxSuggestions?: number;
+    /** Include dropdown recommendations (trending, products, etc.) */
+    includeDropdownRecommendations?: boolean;
+    /** Filtered tabs config */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Enable analytics (V3) */
+    enableAnalytics?: boolean;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Callback when user submits search (e.g. navigate to results page) */
+    onSearch?: (query: string) => void;
+    /** Callback when user selects a suggestion */
+    onSuggestionSelect?: (suggestion: SuggestionItem) => void;
+    /** Callback when user clicks a product */
+    onProductClick?: (product: ProductItem) => void;
+}
+export declare function SuggestionsProvider({ children, minQueryLength, debounceMs, maxSuggestions, includeDropdownRecommendations, filteredTabs, enableAnalytics, analyticsTags, onSearch, onSuggestionSelect, onProductClick, }: SuggestionsProviderProps): React.JSX.Element;
+//# sourceMappingURL=SuggestionsProvider.d.ts.map

package/dist/components/suggestions-primitives/SuggestionsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionsProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAA6C,MAAM,0BAA0B,CAAC;AAGvH,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,2BAA2B;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,4BAA4B;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1D,0CAA0C;IAC1C,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,cAAkB,EAClB,UAAgB,EAChB,cAAmB,EACnB,8BAAqC,EACrC,YAAY,EACZ,eAAsB,EACtB,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,cAAc,GACf,EAAE,wBAAwB,qBAoR1B"}

package/dist/components/suggestions-primitives/SuggestionsProvider.js

@@ -0,0 +1,259 @@
+/**
+ * SuggestionsProvider
+ *
+ * Provides suggestions state (query, suggestions, products, recent, trending, tabs),
+ * actions (selectSuggestion, selectProduct, submitSearch, etc.), and keyboard navigation.
+ * Uses useQuerySuggestionsEnhanced and useSuggestionsAnalytics; must be inside SearchProvider.
+ */
+import React, { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
+import { useSearchContext } from '../SearchProvider';
+import { useQuerySuggestionsEnhanced } from '../../hooks/useQuerySuggestionsEnhanced';
+import { useSuggestionsAnalytics } from '../../hooks/useSuggestionsAnalytics';
+import { SuggestionsContext } from './SuggestionsContext';
+export function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, maxSuggestions = 10, includeDropdownRecommendations = true, filteredTabs, enableAnalytics = true, analyticsTags, onSearch, onSuggestionSelect, onProductClick, }) {
+    const { client } = useSearchContext();
+    const [query, setQueryState] = useState('');
+    const [isOpen, setIsOpenState] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [activeTabId, setActiveTabId] = useState('');
+    const [prefetchedProducts, setPrefetchedProducts] = useState([]);
+    // Prefetch product results on mount so they're available instantly when dropdown opens
+    const prefetchedProductsRef = useRef(false);
+    useEffect(() => {
+        if (prefetchedProductsRef.current || !client?.search)
+            return;
+        prefetchedProductsRef.current = true;
+        client.search('*', { per_page: 12, page: 1 })
+            .then((res) => {
+            const data = res?.data;
+            const items = data?.results || data?.data || res?.results || res?.hits || [];
+            if (Array.isArray(items) && items.length > 0) {
+                setPrefetchedProducts(items);
+            }
+        })
+            .catch(() => { });
+    }, [client]);
+    const suggestionsData = useQuerySuggestionsEnhanced({
+        client,
+        query,
+        enabled: isOpen,
+        prefetch: minQueryLength === 0,
+        minQueryLength,
+        debounceMs,
+        maxSuggestions,
+        includeDropdownRecommendations,
+        filteredTabs,
+        includeCategories: true,
+        enableRecentSearches: true,
+        maxRecentSearches: 8,
+        analyticsTags,
+    });
+    const analytics = useSuggestionsAnalytics({
+        client,
+        enabled: enableAnalytics,
+        analyticsTags,
+        trackClicks: true,
+        trackImpressions: true,
+    });
+    const { suggestions, recentSearches, trendingSearches, trendingProducts, filteredTabs: filteredTabsData, loading, error, hasContent, getAllNavigableItems, addRecentSearch, clearRecentSearches, } = suggestionsData;
+    // Wrap getAllNavigableItems to include prefetchedProducts when trendingProducts is empty
+    const getAllNavigableItemsWithPrefetched = useCallback(() => {
+        const items = getAllNavigableItems();
+        // If there are already product items in the list, return as-is
+        if (items.some(i => i.type === 'product'))
+            return items;
+        // Otherwise append prefetchedProducts as navigable product items
+        if (prefetchedProducts.length > 0) {
+            let idx = items.length;
+            prefetchedProducts.forEach(product => {
+                items.push({ type: 'product', index: idx++, data: product });
+            });
+        }
+        return items;
+    }, [getAllNavigableItems, prefetchedProducts]);
+    const onSearchRef = useRef(onSearch);
+    const onSuggestionSelectRef = useRef(onSuggestionSelect);
+    const onProductClickRef = useRef(onProductClick);
+    onSearchRef.current = onSearch;
+    onSuggestionSelectRef.current = onSuggestionSelect;
+    onProductClickRef.current = onProductClick;
+    const setQuery = useCallback((q) => {
+        setQueryState(q);
+        setActiveIndex(-1);
+    }, []);
+    const close = useCallback(() => {
+        analytics.trackDropdownClose(query);
+        setIsOpenState(false);
+        setActiveIndex(-1);
+    }, [analytics, query]);
+    const setIsOpen = useCallback((open) => {
+        if (open) {
+            setIsOpenState(true);
+            analytics.trackDropdownOpen(query);
+        }
+        else {
+            close();
+        }
+    }, [analytics, query, close]);
+    const selectSuggestion = useCallback((suggestion, position) => {
+        analytics.trackSuggestionClick({
+            suggestion,
+            position,
+            query,
+            totalSuggestions: suggestions.length,
+        });
+        setQuery(suggestion.query);
+        onSuggestionSelectRef.current?.(suggestion);
+        analytics.trackSearchSubmit(suggestion.query, true, suggestion);
+        addRecentSearch(suggestion.query);
+        close();
+        onSearchRef.current?.(suggestion.query);
+    }, [analytics, query, suggestions.length, addRecentSearch, close]);
+    const selectProduct = useCallback((product, position, section, tabId) => {
+        analytics.trackProductClick({
+            product,
+            position,
+            section: section ?? 'products',
+            tabId,
+            query,
+        });
+        close();
+        onProductClickRef.current?.(product);
+    }, [analytics, query, close]);
+    const selectRecentSearch = useCallback((search) => {
+        analytics.trackRecentSearchClick(search);
+        setQuery(search.query);
+        close();
+        onSearchRef.current?.(search.query);
+        analytics.trackSearchSubmit(search.query, false);
+    }, [analytics, close]);
+    const selectTrendingSearch = useCallback((trending, position) => {
+        analytics.trackTrendingClick(trending, position);
+        setQuery(trending.query);
+        close();
+        onSearchRef.current?.(trending.query);
+        analytics.trackSearchSubmit(trending.query, false);
+    }, [analytics, close]);
+    const setActiveTab = useCallback((tab) => {
+        setActiveTabId(tab.id);
+        analytics.trackTabSelect(tab, query);
+    }, [analytics, query]);
+    const submitSearch = useCallback((q, fromSuggestion, suggestion) => {
+        const trimmed = q.trim();
+        if (!trimmed)
+            return;
+        analytics.trackSearchSubmit(trimmed, !!fromSuggestion, suggestion);
+        addRecentSearch(trimmed);
+        close();
+        onSearchRef.current?.(trimmed);
+    }, [analytics, addRecentSearch, close]);
+    const navigateNext = useCallback(() => {
+        const items = getAllNavigableItemsWithPrefetched();
+        if (items.length === 0)
+            return;
+        setActiveIndex((i) => (i < items.length - 1 ? i + 1 : 0));
+    }, [getAllNavigableItemsWithPrefetched]);
+    const navigatePrev = useCallback(() => {
+        const items = getAllNavigableItemsWithPrefetched();
+        if (items.length === 0)
+            return;
+        setActiveIndex((i) => (i <= 0 ? items.length - 1 : i - 1));
+    }, [getAllNavigableItemsWithPrefetched]);
+    const selectActive = useCallback(() => {
+        const items = getAllNavigableItemsWithPrefetched();
+        if (activeIndex < 0 || activeIndex >= items.length) {
+            submitSearch(query);
+            return;
+        }
+        const item = items[activeIndex];
+        switch (item.type) {
+            case 'suggestion':
+                selectSuggestion(item.data, item.index);
+                break;
+            case 'product':
+                selectProduct(item.data, item.index, 'products');
+                break;
+            case 'recent':
+                selectRecentSearch(item.data);
+                break;
+            case 'trending':
+                selectTrendingSearch(item.data, item.index);
+                break;
+            default:
+                submitSearch(query);
+        }
+    }, [activeIndex, getAllNavigableItemsWithPrefetched, query, submitSearch, selectSuggestion, selectProduct, selectRecentSearch, selectTrendingSearch]);
+    // Impression when open and content changes
+    useEffect(() => {
+        if (!isOpen || !hasContent || !query)
+            return;
+        analytics.trackImpression({
+            suggestions,
+            products: trendingProducts,
+            query,
+            timestamp: Date.now(),
+        });
+    }, [isOpen, hasContent, query, suggestions, trendingProducts, analytics]);
+    const value = useMemo(() => ({
+        query,
+        setQuery,
+        isOpen,
+        setIsOpen,
+        activeIndex,
+        setActiveIndex,
+        suggestions,
+        recentSearches,
+        trendingSearches,
+        trendingProducts,
+        prefetchedProducts,
+        filteredTabs: filteredTabsData,
+        activeTabId,
+        setActiveTabId,
+        loading,
+        error,
+        hasContent,
+        getAllNavigableItems: getAllNavigableItemsWithPrefetched,
+        selectSuggestion,
+        selectProduct,
+        selectRecentSearch,
+        selectTrendingSearch,
+        setActiveTab,
+        submitSearch,
+        clearRecentSearches,
+        close,
+        navigateNext,
+        navigatePrev,
+        selectActive,
+    }), [
+        query,
+        setQuery,
+        isOpen,
+        setIsOpen,
+        activeIndex,
+        setActiveIndex,
+        suggestions,
+        recentSearches,
+        trendingSearches,
+        trendingProducts,
+        prefetchedProducts,
+        filteredTabsData,
+        activeTabId,
+        setActiveTabId,
+        loading,
+        error,
+        hasContent,
+        getAllNavigableItemsWithPrefetched,
+        selectSuggestion,
+        selectProduct,
+        selectRecentSearch,
+        selectTrendingSearch,
+        setActiveTab,
+        submitSearch,
+        clearRecentSearches,
+        close,
+        navigateNext,
+        navigatePrev,
+        selectActive,
+    ]);
+    return (React.createElement(SuggestionsContext.Provider, { value: value }, children));
+}

package/dist/components/suggestions-primitives/TrendingList.d.ts

@@ -0,0 +1,17 @@
+/**
+ * TrendingList – list of trending searches (primitive)
+ *
+ * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
+ */
+import React from 'react';
+import type { TrendingSearch } from '@seekora-ai/ui-sdk-types';
+export interface TrendingListProps {
+    title?: string;
+    maxItems?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    listClassName?: string;
+    renderItem?: (trending: TrendingSearch, index: number, onSelect: () => void) => React.ReactNode;
+}
+export declare function TrendingList({ title, maxItems, className, style, listClassName, renderItem, }: TrendingListProps): React.JSX.Element | null;
+//# sourceMappingURL=TrendingList.d.ts.map

package/dist/components/suggestions-primitives/TrendingList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendingList.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/TrendingList.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACjG;AA2CD,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,QAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,UAAU,GACX,EAAE,iBAAiB,4BAiCnB"}

package/dist/components/suggestions-primitives/TrendingList.js

@@ -0,0 +1,48 @@
+/**
+ * TrendingList – list of trending searches (primitive)
+ *
+ * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
+ */
+import React from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+import { clsx } from 'clsx';
+const itemStyle = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    transition: 'background-color 120ms ease',
+};
+function TrendingItem({ trending, onSelect }) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    return (React.createElement("li", null,
+        React.createElement("button", { type: "button", className: clsx('seekora-suggestions-trending-item', isHovered && 'seekora-suggestions-trending-item--hover'), style: {
+                ...itemStyle,
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
+                e.preventDefault();
+                onSelect();
+            } },
+            trending.query,
+            trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, trending.count)) : null)));
+}
+export function TrendingList({ title = 'Trending', maxItems = 8, className, style, listClassName, renderItem, }) {
+    const { trendingSearches, selectTrendingSearch } = useSuggestionsContext();
+    const items = trendingSearches.slice(0, maxItems);
+    if (items.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-trending-list', className), style: style },
+        title ? (React.createElement("div", { className: "seekora-suggestions-trending-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, title)) : null,
+        React.createElement("ul", { className: clsx('seekora-suggestions-trending-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((trending, i) => {
+            const onSelect = () => selectTrendingSearch(trending, i);
+            if (renderItem) {
+                return React.createElement("li", { key: `${trending.query}-${i}` }, renderItem(trending, i, onSelect));
+            }
+            return (React.createElement(TrendingItem, { key: `${trending.query}-${i}`, trending: trending, onSelect: onSelect }));
+        }))));
+}

package/dist/components/suggestions-primitives/highlightMarkup.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Parses suggestion text containing <mark>...</mark> and returns React nodes
+ * with the marked segments rendered as styled elements. Safe: inner content
+ * is rendered as text, not HTML.
+ */
+import React from 'react';
+/** Visual highlight styles */
+export type HighlightStyle = 'background' | 'underline' | 'bold' | 'color-only';
+export interface HighlightMarkupOptions {
+    /** Class name for the highlight element. */
+    markClassName?: string;
+    /** Inline style for the highlight element (merged with computed styles). */
+    markStyle?: React.CSSProperties;
+    /** Override background color for highlighted segments */
+    highlightColor?: string;
+    /** Text color for highlighted segments */
+    highlightTextColor?: string;
+    /** Font weight for highlighted segments */
+    highlightFontWeight?: string | number;
+    /** Visual highlight style (default: 'background') */
+    highlightStyle?: HighlightStyle;
+    /** Which HTML element to render for highlights (default: 'mark') */
+    highlightTag?: keyof JSX.IntrinsicElements;
+}
+/**
+ * Converts a string like "lined <mark>blue</mark>" into React nodes with
+ * the marked part rendered as a styled element. When no <mark> tags are
+ * present, returns the string as-is.
+ */
+export declare function parseHighlightMarkup(text: string, options?: HighlightMarkupOptions): React.ReactNode;
+//# sourceMappingURL=highlightMarkup.d.ts.map

package/dist/components/suggestions-primitives/highlightMarkup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightMarkup.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/highlightMarkup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,8BAA8B;AAC9B,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,CAAC;AAEhF,MAAM,WAAW,sBAAsB;IACrC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,qDAAqD;IACrD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAC5C;AA4CD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,KAAK,CAAC,SAAS,CAkCjB"}