@seekora-ai/ui-sdk-react 0.2.5 → 0.2.8

package/dist/src/index.js

@@ -4536,15 +4536,16 @@ function parseHighlight(highlighted) {
         .replace(/__\/ais-highlight__/g, '</mark>');
 }
 function transformProduct(raw) {
+    const meta = raw.metadata || {};
     return {
         id: raw.id || raw.objectID,
         objectID: raw.objectID || raw.id,
-        title: raw.title || raw.name || raw.productName,
-        name: raw.name || raw.title,
-        image: raw.image || raw.imageUrl || raw.metadata?.image,
-        price: raw.price || raw.sellPrice || raw.metadata?.sellPrice,
-        currency: raw.currency || raw.metadata?.currency || '',
-        url: raw.url || raw.productId || raw.metadata?.url,
+        title: raw.title || raw.name || raw.productName || meta.name || meta.productName || '',
+        name: raw.name || raw.title || meta.name || meta.productName || '',
+        image: raw.image || raw.imageUrl || meta.image || meta.image_url || meta.images?.[0] || '',
+        price: raw.price ?? raw.sellPrice ?? meta.sellPrice ?? meta.price,
+        currency: raw.currency || meta.currency || '',
+        url: raw.url || raw.productId || meta.url || meta.productId || '',
         clicks: raw.clicks,
         conversions: raw.conversions,
         revenue: raw.revenue,
@@ -4594,7 +4595,10 @@ function useQuerySuggestionsEnhanced(options) {
     }, [enableRecentSearches, recentSearchesKey, maxRecentSearches]);
     // Fetch suggestions
     const fetchSuggestions = React.useCallback(async (searchQuery) => {
-        if (!client || !searchQuery.trim()) {
+        if (!client)
+            return;
+        // When minQueryLength is 0, allow empty query so overlay can show default/trending recommendations on open
+        if (!searchQuery.trim() && minQueryLength > 0) {
             setSuggestions([]);
             setDropdownRecommendations(null);
             return;
@@ -4629,12 +4633,17 @@ function useQuerySuggestionsEnhanced(options) {
             setSuggestions(transformedSuggestions);
             // Extract dropdown recommendations from extensions
             const extensions = (response.extensions || {});
+            const rawResults = response.results;
+            const secondResultHits = Array.isArray(rawResults?.[1]?.hits) ? rawResults[1].hits : [];
+            // Multi-index response: results[0]=suggestions, results[1]=product hits; expose results[1].hits as product_hits for fallback when extensions have no products
+            const productHits = secondResultHits.length > 0 ? secondResultHits.map((h) => transformProduct(h)) : [];
             const recommendations = {
                 trending_searches: Array.isArray(extensions.trending_searches) ? extensions.trending_searches : [],
                 top_searches: Array.isArray(extensions.top_searches) ? extensions.top_searches : [],
                 related_searches: Array.isArray(extensions.related_searches) ? extensions.related_searches : [],
                 trending_products: Array.isArray(extensions.trending_products) ? extensions.trending_products.map(transformProduct) : [],
                 item_recommendations: Array.isArray(extensions.item_recommendations) ? extensions.item_recommendations.map(transformProduct) : [],
+                product_hits: productHits.length > 0 ? productHits : undefined,
                 popular_brands: Array.isArray(extensions.popular_brands) ? extensions.popular_brands : [],
                 filtered_tabs: Array.isArray(extensions.filtered_tabs) ? extensions.filtered_tabs.map(transformFilteredTab) : [],
                 processing_time_ms: typeof extensions.processing_time_ms === 'number' ? extensions.processing_time_ms : undefined,
@@ -4694,6 +4703,7 @@ function useQuerySuggestionsEnhanced(options) {
         }
     }, [
         client,
+        minQueryLength,
         maxSuggestions,
         includeDropdownRecommendations,
         includeCategories,
@@ -4770,7 +4780,19 @@ function useQuerySuggestionsEnhanced(options) {
     const relatedSearches = dropdownRecommendations?.related_searches || [];
     const popularBrands = dropdownRecommendations?.popular_brands || [];
     const filteredTabsResult = dropdownRecommendations?.filtered_tabs || [];
-    const trendingProducts = dropdownRecommendations?.trending_products || [];
+    // Use trending_products, then item_recommendations, then first filtered_tab's products, then results[1].hits (product_hits) so grid shows for any API shape
+    const trendingProducts = React.useMemo(() => {
+        const fromTrending = dropdownRecommendations?.trending_products;
+        if (fromTrending && fromTrending.length > 0)
+            return fromTrending;
+        const fromItemRecs = dropdownRecommendations?.item_recommendations;
+        if (fromItemRecs && fromItemRecs.length > 0)
+            return fromItemRecs;
+        const firstTab = dropdownRecommendations?.filtered_tabs?.[0];
+        if (firstTab?.products && firstTab.products.length > 0)
+            return firstTab.products;
+        return dropdownRecommendations?.product_hits ?? [];
+    }, [dropdownRecommendations?.trending_products, dropdownRecommendations?.item_recommendations, dropdownRecommendations?.filtered_tabs, dropdownRecommendations?.product_hits]);
     const hasContent = React.useMemo(() => {
         return (suggestions.length > 0 ||
             recentSearches.length > 0 ||
@@ -4858,7 +4880,7 @@ function useQuerySuggestionsEnhanced(options) {
 // ============================================================================
 // Styles
 // ============================================================================
-const defaultStyles = {
+const defaultStyles$1 = {
     container: {
         backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
         border: '1px solid var(--seekora-border-color, #e5e7eb)',
@@ -5112,7 +5134,7 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
             return text;
         }
         const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
-        return parts.map((part, i) => part.toLowerCase() === searchQuery.toLowerCase() ? (React.createElement("mark", { key: i, className: classNames.suggestionItemHighlight, style: defaultStyles.highlight }, part)) : part);
+        return parts.map((part, i) => part.toLowerCase() === searchQuery.toLowerCase() ? (React.createElement("mark", { key: i, className: classNames.suggestionItemHighlight, style: defaultStyles$1.highlight }, part)) : part);
     }, [highlight.enabled, classNames.suggestionItemHighlight]);
     // Parse highlighted query from API
     const parseHighlightedQuery = React.useCallback((suggestion) => {
@@ -5128,30 +5150,30 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
             return renderSuggestion(suggestion, index, isActive, (text) => highlightText(text, query));
         }
         return (React.createElement("div", { style: {
-                ...defaultStyles.suggestionItem,
-                ...(isActive ? defaultStyles.suggestionItemActive : {}),
+                ...defaultStyles$1.suggestionItem,
+                ...(isActive ? defaultStyles$1.suggestionItemActive : {}),
             } },
-            React.createElement(SearchIcon$9, { style: defaultStyles.recentIcon }),
-            React.createElement("span", { style: defaultStyles.suggestionQuery }, parseHighlightedQuery(suggestion)),
-            showCounts && suggestion.count !== undefined && (React.createElement("span", { style: defaultStyles.suggestionCount }, suggestion.count.toLocaleString()))));
+            React.createElement(SearchIcon$9, { style: defaultStyles$1.recentIcon }),
+            React.createElement("span", { style: defaultStyles$1.suggestionQuery }, parseHighlightedQuery(suggestion)),
+            showCounts && suggestion.count !== undefined && (React.createElement("span", { style: defaultStyles$1.suggestionCount }, suggestion.count.toLocaleString()))));
     };
     const renderRecentSearchItem = (search, index, isActive) => {
         if (renderRecentSearch) {
             return renderRecentSearch(search, index, isActive);
         }
         return (React.createElement("div", { style: {
-                ...defaultStyles.suggestionItem,
-                ...(isActive ? defaultStyles.suggestionItemActive : {}),
+                ...defaultStyles$1.suggestionItem,
+                ...(isActive ? defaultStyles$1.suggestionItemActive : {}),
             } },
-            React.createElement(ClockIcon$6, { style: defaultStyles.recentIcon }),
-            React.createElement("span", { style: defaultStyles.suggestionQuery }, search.query),
+            React.createElement(ClockIcon$6, { style: defaultStyles$1.recentIcon }),
+            React.createElement("span", { style: defaultStyles$1.suggestionQuery }, search.query),
             React.createElement("button", { type: "button", onClick: (e) => {
                     e.stopPropagation();
                     removeRecentSearch(search.query);
                     onRecentSearchRemove?.(search);
                 }, style: {
-                    ...defaultStyles.removeButton,
-                    ...(isActive ? defaultStyles.removeButtonVisible : {}),
+                    ...defaultStyles$1.removeButton,
+                    ...(isActive ? defaultStyles$1.removeButtonVisible : {}),
                 }, "aria-label": `Remove ${search.query} from recent searches` },
                 React.createElement(CloseIcon$1, null))));
     };
@@ -5175,24 +5197,24 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
             position,
             width,
             zIndex,
-            ...defaultStyles.container,
+            ...defaultStyles$1.container,
             ...animationStyle,
             ...style,
         } },
-        loading && showLoading && (React.createElement("div", { className: classNames.loadingState, style: defaultStyles.loadingState }, renderLoading ? renderLoading() : (React.createElement(React.Fragment, null,
+        loading && showLoading && (React.createElement("div", { className: classNames.loadingState, style: defaultStyles$1.loadingState }, renderLoading ? renderLoading() : (React.createElement(React.Fragment, null,
             React.createElement(LoadingSpinner, null),
             React.createElement("span", null, "Searching..."))))),
         !loading && showRecent && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.recentSearches) },
-            React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles.sectionTitle }, "Recent Searches"),
+            React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles$1.sectionTitle }, "Recent Searches"),
             recentSearches.slice(0, maxRecentSearches).map((search, index) => {
                 const isActive = activeIndex === index;
                 return (React.createElement("div", { key: `recent-${search.query}-${index}`, role: "option", "aria-selected": isActive, className: clsx(classNames.recentItem, isActive && classNames.suggestionItemActive), onClick: () => {
                         onRecentSearchClick?.(search);
                     }, onMouseEnter: () => setActiveIndex(index) }, renderRecentSearchItem(search, index, isActive)));
             }))),
-        !loading && showRecent && showSuggestions && (React.createElement("div", { style: defaultStyles.divider })),
+        !loading && showRecent && showSuggestions && (React.createElement("div", { style: defaultStyles$1.divider })),
         !loading && showSuggestions && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.suggestionsList) },
-            query.length > 0 && (React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles.sectionTitle }, "Suggestions")),
+            query.length > 0 && (React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles$1.sectionTitle }, "Suggestions")),
             suggestions.map((suggestion, index) => {
                 const itemIndex = showRecent ? recentSearches.length + index : index;
                 const isActive = activeIndex === itemIndex;
@@ -5201,19 +5223,19 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
                         addRecentSearch(suggestion.query, suggestion.count);
                     }, onMouseEnter: () => setActiveIndex(itemIndex) }, renderSuggestionItem(suggestion, index, isActive)));
             }))),
-        showEmpty && (React.createElement("div", { className: classNames.emptyState, style: defaultStyles.emptyState }, renderEmpty ? renderEmpty() : (React.createElement(React.Fragment, null,
+        showEmpty && (React.createElement("div", { className: classNames.emptyState, style: defaultStyles$1.emptyState }, renderEmpty ? renderEmpty() : (React.createElement(React.Fragment, null,
             React.createElement(SearchIcon$9, { style: { width: 24, height: 24, marginBottom: 8, opacity: 0.5 } }),
             React.createElement("span", null,
                 "No suggestions found for \"",
                 query,
                 "\""))))),
-        footer || (keyboardNav.enabled && allItems.length > 0) ? (React.createElement("div", { className: classNames.footer, style: defaultStyles.footer }, footer || (React.createElement("div", { style: defaultStyles.keyboardHint },
-            React.createElement("span", { style: defaultStyles.keyboardKey }, "\u2191"),
-            React.createElement("span", { style: defaultStyles.keyboardKey }, "\u2193"),
+        footer || (keyboardNav.enabled && allItems.length > 0) ? (React.createElement("div", { className: classNames.footer, style: defaultStyles$1.footer }, footer || (React.createElement("div", { style: defaultStyles$1.keyboardHint },
+            React.createElement("span", { style: defaultStyles$1.keyboardKey }, "\u2191"),
+            React.createElement("span", { style: defaultStyles$1.keyboardKey }, "\u2193"),
             React.createElement("span", null, "to navigate"),
-            React.createElement("span", { style: defaultStyles.keyboardKey }, "\u21B5"),
+            React.createElement("span", { style: defaultStyles$1.keyboardKey }, "\u21B5"),
             React.createElement("span", null, "to select"),
-            React.createElement("span", { style: defaultStyles.keyboardKey }, "esc"),
+            React.createElement("span", { style: defaultStyles$1.keyboardKey }, "esc"),
             React.createElement("span", null, "to close"))))) : null,
         React.createElement("style", null, `
         @keyframes spin {
@@ -6214,12 +6236,12 @@ const FederatedDropdown = React.forwardRef(function FederatedDropdown(props, ref
 /**
  * Suggestions Analytics Hook
  *
- * Provides analytics tracking for query suggestions components:
- * - Suggestion clicks/selections
- * - Suggestion impressions
- * - Product clicks from dropdown
- * - Category/brand clicks
- * - Search submissions from suggestions
+ * Provides analytics tracking for query suggestions components using
+ * Analytics V3 event structure and schema/fields (event_name, event_ts,
+ * correlation_id/search_id via context, and V3 top-level fields such as
+ * original_query, position, section, clicked_item_id, click_type, tab_id,
+ * suggestions_count, etc.). All events are sent via client.trackEvent(payload, context)
+ * so the SDK can attach correlation_id, search_id, event_ts, orgcode, xstoreid.
  */
 // ============================================================================
 // Event Names
@@ -6518,13 +6540,13 @@ const styles = {
 // ============================================================================
 const SearchIcon$6 = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: styles.searchIcon },
     React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" })));
-const ClearIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: 16, height: 16 } },
+const ClearIcon$1 = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: 16, height: 16 } },
     React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
 // ============================================================================
 // Component
 // ============================================================================
 const SearchBarWithSuggestions = React.forwardRef(function SearchBarWithSuggestions(props, ref) {
-    const { variant = 'classic', placeholder = 'Search...', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
+    const { variant = 'classic', placeholder = 'Search...', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, maxProducts = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
     const { client } = useSearchContext();
     const inputRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
@@ -6683,7 +6705,7 @@ const SearchBarWithSuggestions = React.forwardRef(function SearchBarWithSuggesti
             case 'rich':
                 return (React.createElement(RichQuerySuggestions, { ref: dropdownRef, ...commonProps, includeDropdownRecommendations: includeDropdownRecommendations, includeCategories: true, width: dropdownWidth || '100%', maxHeight: dropdownMaxHeight || '480px' }));
             case 'federated':
-                return (React.createElement(FederatedDropdown, { ref: dropdownRef, ...commonProps, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px', includeFacets: includeFacets, includeCategories: includeCategories, includeDropdownRecommendations: includeDropdownRecommendations }));
+                return (React.createElement(FederatedDropdown, { ref: dropdownRef, ...commonProps, maxProducts: maxProducts, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px', includeFacets: includeFacets, includeCategories: includeCategories, includeDropdownRecommendations: includeDropdownRecommendations }));
             case 'compact':
                 return (React.createElement(QuerySuggestionsDropdown, { ref: dropdownRef, ...commonProps, maxSuggestions: 5, showCounts: false, width: dropdownWidth || '100%' }));
             case 'classic':
@@ -6700,11 +6722,1056 @@ const SearchBarWithSuggestions = React.forwardRef(function SearchBarWithSuggesti
                 React.createElement(SearchIcon$6, null),
                 React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleQueryChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: classNames.input, style: { ...styles.input, ...inputStyle } }),
                 showClearButton && query && (React.createElement("button", { type: "button", onClick: handleClear, className: classNames.clearButton, style: styles.clearButton, "aria-label": "Clear search" },
-                    React.createElement(ClearIcon, null))),
+                    React.createElement(ClearIcon$1, null))),
                 showSearchButton && (React.createElement("button", { type: "submit", className: classNames.button, style: styles.searchButton }, searchButtonText)))),
         React.createElement("div", { className: classNames.dropdown }, renderDropdown())));
 });
 
+/**
+ * Suggestions Context
+ *
+ * Type definitions and React context for composable suggestions primitives.
+ * Consuming components use useSuggestionsContext() for state and actions.
+ */
+const SuggestionsContext = React.createContext(null);
+function useSuggestionsContext() {
+    const context = React.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;
+}
+
+/**
+ * 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.
+ */
+function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, maxSuggestions = 10, includeDropdownRecommendations = true, filteredTabs, enableAnalytics = true, analyticsTags, onSearch, onSuggestionSelect, onProductClick, }) {
+    const { client } = useSearchContext();
+    const [query, setQueryState] = React.useState('');
+    const [isOpen, setIsOpenState] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const [activeTabId, setActiveTabId] = React.useState('');
+    const suggestionsData = useQuerySuggestionsEnhanced({
+        client,
+        query,
+        enabled: isOpen,
+        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, } = suggestionsData;
+    const onSearchRef = React.useRef(onSearch);
+    const onSuggestionSelectRef = React.useRef(onSuggestionSelect);
+    const onProductClickRef = React.useRef(onProductClick);
+    onSearchRef.current = onSearch;
+    onSuggestionSelectRef.current = onSuggestionSelect;
+    onProductClickRef.current = onProductClick;
+    const setQuery = React.useCallback((q) => {
+        setQueryState(q);
+        setActiveIndex(-1);
+    }, []);
+    const close = React.useCallback(() => {
+        analytics.trackDropdownClose(query);
+        setIsOpenState(false);
+        setActiveIndex(-1);
+    }, [analytics, query]);
+    const setIsOpen = React.useCallback((open) => {
+        if (open) {
+            setIsOpenState(true);
+            analytics.trackDropdownOpen(query);
+        }
+        else {
+            close();
+        }
+    }, [analytics, query, close]);
+    const selectSuggestion = React.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 = React.useCallback((product, position, section, tabId) => {
+        analytics.trackProductClick({
+            product,
+            position,
+            section: section ?? 'products',
+            tabId,
+            query,
+        });
+        close();
+        onProductClickRef.current?.(product);
+    }, [analytics, query, close]);
+    const selectRecentSearch = React.useCallback((search) => {
+        analytics.trackRecentSearchClick(search);
+        setQuery(search.query);
+        close();
+        onSearchRef.current?.(search.query);
+        analytics.trackSearchSubmit(search.query, false);
+    }, [analytics, close]);
+    const selectTrendingSearch = React.useCallback((trending, position) => {
+        analytics.trackTrendingClick(trending, position);
+        setQuery(trending.query);
+        close();
+        onSearchRef.current?.(trending.query);
+        analytics.trackSearchSubmit(trending.query, false);
+    }, [analytics, close]);
+    const setActiveTab = React.useCallback((tab) => {
+        setActiveTabId(tab.id);
+        analytics.trackTabSelect(tab, query);
+    }, [analytics, query]);
+    const submitSearch = React.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 = React.useCallback(() => {
+        const items = getAllNavigableItems();
+        if (items.length === 0)
+            return;
+        setActiveIndex((i) => (i < items.length - 1 ? i + 1 : 0));
+    }, [getAllNavigableItems]);
+    const navigatePrev = React.useCallback(() => {
+        const items = getAllNavigableItems();
+        if (items.length === 0)
+            return;
+        setActiveIndex((i) => (i <= 0 ? items.length - 1 : i - 1));
+    }, [getAllNavigableItems]);
+    const selectActive = React.useCallback(() => {
+        const items = getAllNavigableItems();
+        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, getAllNavigableItems, query, submitSearch, selectSuggestion, selectProduct, selectRecentSearch, selectTrendingSearch]);
+    // Impression when open and content changes
+    React.useEffect(() => {
+        if (!isOpen || !hasContent || !query)
+            return;
+        analytics.trackImpression({
+            suggestions,
+            products: trendingProducts,
+            query,
+            timestamp: Date.now(),
+        });
+    }, [isOpen, hasContent, query, suggestions, trendingProducts, analytics]);
+    const value = React.useMemo(() => ({
+        query,
+        setQuery,
+        isOpen,
+        setIsOpen,
+        activeIndex,
+        setActiveIndex,
+        suggestions,
+        recentSearches,
+        trendingSearches,
+        trendingProducts,
+        filteredTabs: filteredTabsData,
+        activeTabId,
+        setActiveTabId,
+        loading,
+        error,
+        hasContent,
+        getAllNavigableItems,
+        selectSuggestion,
+        selectProduct,
+        selectRecentSearch,
+        selectTrendingSearch,
+        setActiveTab,
+        submitSearch,
+        close,
+        navigateNext,
+        navigatePrev,
+        selectActive,
+    }), [
+        query,
+        setQuery,
+        isOpen,
+        setIsOpen,
+        activeIndex,
+        setActiveIndex,
+        suggestions,
+        recentSearches,
+        trendingSearches,
+        trendingProducts,
+        filteredTabsData,
+        activeTabId,
+        setActiveTabId,
+        loading,
+        error,
+        hasContent,
+        getAllNavigableItems,
+        selectSuggestion,
+        selectProduct,
+        selectRecentSearch,
+        selectTrendingSearch,
+        setActiveTab,
+        submitSearch,
+        close,
+        navigateNext,
+        navigatePrev,
+        selectActive,
+    ]);
+    return (React.createElement(SuggestionsContext.Provider, { value: value }, children));
+}
+
+/**
+ * SearchInput – suggestion-scoped search input (primitive)
+ *
+ * Single input bound to suggestions context: query, setQuery, focus opens dropdown,
+ * keydown ArrowUp/Down/Enter/Escape delegates to context. Overridable via className/style.
+ */
+const defaultStyles = {
+    position: 'relative',
+    width: '100%',
+};
+const inputWrapperStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '8px 12px',
+    border: '1px solid var(--seekora-border-color, #e5e7eb)',
+    borderRadius: 'var(--seekora-border-radius, 6px)',
+    backgroundColor: 'var(--seekora-bg-surface, #fff)',
+    transition: 'border-color 150ms ease, box-shadow 150ms ease',
+};
+const inputStyles = {
+    flex: 1,
+    minWidth: 0,
+    padding: '8px 0',
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    fontSize: 'inherit',
+    color: 'var(--seekora-text-primary, #111827)',
+    fontFamily: 'inherit',
+};
+function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
+    const { query, setQuery, isOpen, setIsOpen, navigateNext, navigatePrev, selectActive, close, } = useSuggestionsContext();
+    const inputRef = React.useRef(null);
+    const handleFocus = React.useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const handleBlur = React.useCallback(() => {
+        if (!closeOnBlur)
+            return;
+        setTimeout(() => close(), 200);
+    }, [close, closeOnBlur]);
+    const handleChange = React.useCallback((e) => {
+        setQuery(e.target.value);
+    }, [setQuery]);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            navigateNext();
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            navigatePrev();
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            selectActive();
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+            inputRef.current?.blur();
+            return;
+        }
+    }, [navigateNext, navigatePrev, selectActive, close]);
+    const handleClear = React.useCallback(() => {
+        setQuery('');
+        inputRef.current?.focus();
+    }, [setQuery]);
+    return (React.createElement("div", { className: clsx('seekora-suggestions-search-input-wrapper', className), style: { ...defaultStyles, ...style } },
+        React.createElement("div", { className: "seekora-suggestions-input-wrapper", style: inputWrapperStyles },
+            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'var(--seekora-text-secondary, #6b7280)' } }, leftIcon)) : null,
+            React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx('seekora-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
+            showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
+                    padding: 4,
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    color: 'var(--seekora-text-secondary, #6b7280)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                } },
+                React.createElement(ClearIcon, null))) : null)));
+}
+function ClearIcon() {
+    return (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": true },
+        React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
+}
+
+/**
+ * DropdownPanel – floating panel for suggestions (primitive)
+ *
+ * Shows when isOpen; handles click-outside and Escape to close. Children = any composition
+ * of SuggestionList, ProductGrid, etc. Position and z-index configurable.
+ */
+function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = 1000, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
+    const { isOpen, close } = useSuggestionsContext();
+    const panelRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!closeOnEscape || !isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [closeOnEscape, isOpen, close]);
+    const handleClickOutside = React.useCallback((e) => {
+        if (!closeOnClickOutside || !panelRef.current)
+            return;
+        const target = e.target;
+        if (!panelRef.current.contains(target))
+            close();
+    }, [closeOnClickOutside, close]);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, handleClickOutside]);
+    if (!isOpen)
+        return null;
+    const panelStyle = {
+        position,
+        top,
+        left,
+        right,
+        width,
+        maxHeight,
+        zIndex,
+        overflow: 'auto',
+        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: 'var(--seekora-border-radius, 6px)',
+        boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05))',
+        marginTop: 4,
+    };
+    return (React.createElement("div", { ref: panelRef, role: "listbox", className: clsx('seekora-suggestions-dropdown-panel', className), style: { ...panelStyle, ...style } }, children));
+}
+
+/**
+ * SuggestionItem – single text suggestion row (primitive)
+ *
+ * Highlights when isActive; onClick calls context selectSuggestion. Overridable via className/style.
+ */
+const defaultItemStyle = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    listStyle: 'none',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'var(--seekora-text-primary, #111827)',
+    transition: 'background-color 120ms ease',
+};
+function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, renderHighlight, }) {
+    const displayText = suggestion.highlightedQuery ?? suggestion.query;
+    const content = renderHighlight ? renderHighlight(displayText) : displayText;
+    return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', className), style: {
+            ...defaultItemStyle,
+            ...(isActive ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+            ...style,
+        }, onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect();
+        } },
+        content,
+        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count", style: { marginLeft: 8, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875em' } }, suggestion.count)) : null));
+}
+
+/**
+ * SuggestionsLoading – loading indicator (primitive)
+ */
+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));
+}
+
+/**
+ * SuggestionList – container for text suggestions (primitive)
+ *
+ * Renders list of SuggestionItem from context; uses activeIndex for highlight. Optional renderItem.
+ */
+const listStyle = {
+    margin: 0,
+    padding: '4px 0',
+};
+function SuggestionList({ maxItems = 10, className, style, listClassName, 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;
+    if (loading) {
+        return React.createElement(SuggestionsLoading, { className: className, style: style });
+    }
+    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 }));
+        }))));
+}
+
+/**
+ * ImageDisplay – configurable multi-image display (primitive)
+ *
+ * Variants: single, carousel, hover, thumbStrip, thumbList. Use in ItemCard,
+ * ProductCard, ProductGallery. Overridable via className/style.
+ */
+const imgBaseStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: 4,
+    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+};
+function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, }) {
+    const [index, setIndex] = React.useState(0);
+    const [hovering, setHovering] = React.useState(false);
+    const safeImages = Array.isArray(images) ? images.filter(Boolean) : [];
+    const current = safeImages[index] ?? safeImages[0];
+    if (safeImages.length === 0) {
+        return React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-placeholder', className), style: { ...imgBaseStyle, ...style }, "aria-hidden": true });
+    }
+    if (variant === 'single') {
+        return (React.createElement("img", { src: safeImages[0], alt: alt, className: clsx('seekora-img-display', 'seekora-img-single', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" }));
+    }
+    if (variant === 'hover') {
+        const showSecond = safeImages.length > 1 && hovering;
+        const src = showSecond ? safeImages[1] : safeImages[0];
+        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-hover', className), style: { position: 'relative', ...style }, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false) },
+            React.createElement("img", { src: src, alt: alt, className: "seekora-img-hover-img", style: imgBaseStyle, loading: "lazy" })));
+    }
+    if (variant === 'carousel') {
+        const go = (delta) => {
+            setIndex((i) => {
+                const next = i + delta;
+                if (next < 0)
+                    return safeImages.length - 1;
+                if (next >= safeImages.length)
+                    return 0;
+                return next;
+            });
+        };
+        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
+            React.createElement("img", { src: current, alt: alt, className: "seekora-img-carousel-main", style: imgBaseStyle, loading: "lazy" }),
+            safeImages.length > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: () => go(-1) }),
+                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: () => go(1) })))));
+    }
+    if (variant === 'thumbStrip' || variant === 'thumbList') {
+        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: 8, ...style } },
+            React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: imgBaseStyle, loading: "lazy" }),
+            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: 48, height: 48, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: () => setIndex(i) },
+                React.createElement("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })))))));
+    }
+    return React.createElement("img", { src: current, alt: alt, className: clsx('seekora-img-display', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" });
+}
+function arrowStyle(left) {
+    return {
+        position: 'absolute',
+        top: '50%',
+        [left ? 'left' : 'right']: 8,
+        transform: 'translateY(-50%)',
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        border: '1px solid var(--seekora-border-color)',
+        backgroundColor: 'var(--seekora-bg-surface)',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+}
+
+/**
+ * ItemCard – generic item tile (primitive)
+ *
+ * Domain-agnostic: works for docs, articles, products, or any hit with id, title,
+ * optional description, image, url. Overridable via className/style. Use for
+ * search results, section blocks, or any list; for e-commerce products use ProductCard.
+ */
+const cardStyle$1 = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 8,
+    cursor: 'pointer',
+    border: 'none',
+    borderRadius: 'var(--seekora-border-radius, 6px)',
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    transition: 'background-color 120ms ease',
+};
+const imgStyle$1 = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: 4,
+    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+};
+function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', }) {
+    const images = item.images?.length ? item.images : item.image ?? item.imageUrl ? [String(item.image ?? item.imageUrl)] : [];
+    const title = item.title ?? item.primaryText ?? '';
+    const description = item.description ?? item.secondaryText;
+    const href = item.url;
+    const content = (React.createElement(React.Fragment, null,
+        images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" })) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: imgStyle$1, "aria-hidden": true })),
+        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, String(title)),
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3 } }, String(description))) : null));
+    const commonProps = {
+        className: clsx('seekora-item-card', className),
+        style: { ...cardStyle$1, ...style },
+        'data-position': position,
+        onClick: onSelect,
+        onMouseDown: onSelect ? (e) => { e.preventDefault(); onSelect(); } : undefined,
+    };
+    if (asLink && href) {
+        return (React.createElement("a", { href: href, ...commonProps, "data-item-id": item.id }, content));
+    }
+    return (React.createElement("button", { type: "button", ...commonProps, "data-item-id": item.id }, content));
+}
+
+/**
+ * ItemGrid – generic grid of items (primitive)
+ *
+ * Domain-agnostic: accepts any items[] and onItemClick. Renders ItemCard by default
+ * or custom renderItem. Use for search hits, section blocks, docs, articles; for
+ * product-only lists use ProductGrid.
+ */
+const defaultGridStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(var(--seekora-grid-cols, 4), minmax(0, 1fr))',
+    gap: 12,
+    padding: 12,
+};
+function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl) {
+    return {
+        id: getItemId(item),
+        title: getItemTitle(item),
+        image: getItemImage?.(item),
+        description: getItemDescription?.(item),
+        url: getItemUrl?.(item),
+        ...(typeof item === 'object' && item !== null ? item : {}),
+    };
+}
+function ItemGrid({ items, onItemClick, getItemId = (i) => i.id, getItemTitle = (i) => i.title, getItemImage = (i) => i.image, getItemDescription = (i) => i.description, getItemUrl = (i) => i.url, renderItem, maxItems = 24, columns = 4, className, style, gridClassName, }) {
+    const slice = items.slice(0, maxItems);
+    if (slice.length === 0)
+        return null;
+    const gridStyle = {
+        ...defaultGridStyle,
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    };
+    return (React.createElement("div", { className: clsx('seekora-item-grid', className), style: style },
+        React.createElement("div", { className: clsx('seekora-item-grid-inner', gridClassName), style: gridStyle }, slice.map((item, i) => {
+            if (renderItem)
+                return React.createElement(React.Fragment, { key: getItemId(item) }, renderItem(item, i));
+            const generic = toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl);
+            return (React.createElement(ItemCard, { key: generic.id, item: generic, position: i, onSelect: onItemClick ? () => onItemClick(item, i) : undefined }));
+        }))));
+}
+
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Minimal layout: image (via ImageDisplay when imageVariant set), title, price.
+ * onClick calls context selectProduct. Overridable via className/style.
+ */
+const cardStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 8,
+    cursor: 'pointer',
+    border: 'none',
+    borderRadius: 'var(--seekora-border-radius, 6px)',
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+    transition: 'background-color 120ms ease',
+};
+const imgStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: 4,
+    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+};
+function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', }) {
+    const images = product.images?.length
+        ? product.images
+        : product.image ?? product.imageUrl
+            ? [String(product.image ?? product.imageUrl)]
+            : [];
+    const title = product.title ?? product.name ?? '';
+    const price = product.price != null ? (typeof product.price === 'number' ? product.price : Number(product.price)) : null;
+    return (React.createElement("button", { type: "button", className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect();
+        }, "data-position": position, "data-section": section, "data-tab-id": tabId },
+        images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: title, className: "seekora-suggestions-product-card-image" })) : (React.createElement("div", { className: "seekora-suggestions-product-card-placeholder", style: imgStyle, "aria-hidden": true })),
+        React.createElement("span", { className: "seekora-suggestions-product-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+        price != null && !Number.isNaN(price) ? (React.createElement("span", { className: "seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
+            product.currency ?? '$',
+            price.toFixed(2))) : null));
+}
+
+/**
+ * ProductGrid – grid of product cards from context (primitive)
+ *
+ * Uses trendingProducts or active tab products; each click calls context selectProduct.
+ */
+function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, }) {
+    const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
+    const products = React.useMemo(() => {
+        if (source === 'trending')
+            return trendingProducts;
+        const tab = filteredTabs.find((t) => t.id === (source === 'tab' ? activeTabId : source));
+        return tab?.products ?? [];
+    }, [source, activeTabId, trendingProducts, filteredTabs]);
+    const items = products.slice(0, maxItems);
+    const navigableItems = getAllNavigableItems();
+    const productStartIndex = navigableItems.findIndex((n) => n.type === 'product');
+    if (items.length === 0)
+        return null;
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: 12,
+        padding: 12,
+    };
+    return (React.createElement("div", { className: clsx('seekora-suggestions-product-grid', className), style: style },
+        React.createElement("div", { className: clsx('seekora-suggestions-product-grid-inner', gridClassName), style: gridStyle }, items.map((product, i) => {
+            const globalIndex = productStartIndex >= 0 ? productStartIndex + i : i;
+            const section = source === 'trending' ? 'products' : 'filtered_tab';
+            const tabId = source !== 'trending' ? (source === 'tab' ? activeTabId : source) : undefined;
+            return (React.createElement(ProductCard, { key: product.id ?? product.objectID ?? i, product: product, position: globalIndex, section: section, tabId: tabId, onSelect: () => selectProduct(product, globalIndex, section, tabId) }));
+        }))));
+}
+
+/**
+ * CategoriesTabs – horizontal tabs (e.g. filtered tabs) (primitive)
+ *
+ * Active tab from context; on select updates context and tracks analytics.
+ */
+function CategoriesTabs({ className, style, tabClassName }) {
+    const { filteredTabs, activeTabId, setActiveTab } = useSuggestionsContext();
+    if (filteredTabs.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-categories-tabs', className), style: {
+            display: 'flex',
+            gap: 4,
+            padding: '8px 12px',
+            borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
+            overflowX: 'auto',
+            ...style,
+        }, role: "tablist" }, filteredTabs.map((tab) => {
+        const isActive = activeTabId === tab.id;
+        return (React.createElement("button", { key: tab.id, type: "button", role: "tab", "aria-selected": isActive, className: clsx('seekora-suggestions-tab', isActive && 'seekora-suggestions-tab--active', tabClassName), style: {
+                padding: '8px 12px',
+                border: 'none',
+                borderRadius: 'var(--seekora-border-radius, 6px)',
+                backgroundColor: isActive ? 'var(--seekora-primary-light, rgba(59, 130, 246, 0.1))' : 'transparent',
+                color: isActive ? 'var(--seekora-primary, #3b82f6)' : 'var(--seekora-text-primary, #111827)',
+                cursor: 'pointer',
+                fontSize: '0.875rem',
+                fontWeight: isActive ? 600 : 400,
+                whiteSpace: 'nowrap',
+                transition: 'background-color 120ms ease',
+            }, onClick: () => setActiveTab(tab) }, tab.label));
+    })));
+}
+
+/**
+ * RecentSearchesList – list of recent queries (primitive)
+ *
+ * Reads recentSearches from context; each click calls selectRecentSearch. Optional title/render.
+ */
+const itemStyle$1 = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'var(--seekora-text-primary, #111827)',
+    transition: 'background-color 120ms ease',
+};
+function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style, listClassName, renderItem, }) {
+    const { recentSearches, query, selectRecentSearch } = useSuggestionsContext();
+    const items = recentSearches.slice(0, maxItems);
+    if (items.length === 0)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-suggestions-recent-list', className), style: style },
+        title ? (React.createElement("div", { className: "seekora-suggestions-recent-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, title)) : null,
+        React.createElement("ul", { className: clsx('seekora-suggestions-recent-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((search, i) => {
+            const onSelect = () => selectRecentSearch(search);
+            if (renderItem) {
+                return React.createElement("li", { key: `${search.query}-${search.timestamp}` }, renderItem(search, i, onSelect));
+            }
+            return (React.createElement("li", { key: `${search.query}-${search.timestamp}` },
+                React.createElement("button", { type: "button", className: "seekora-suggestions-recent-item", style: itemStyle$1, onMouseDown: (e) => {
+                        e.preventDefault();
+                        onSelect();
+                    } }, search.query)));
+        }))));
+}
+
+/**
+ * TrendingList – list of trending searches (primitive)
+ *
+ * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
+ */
+const itemStyle = {
+    padding: '10px 12px',
+    cursor: 'pointer',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    backgroundColor: 'transparent',
+    color: 'var(--seekora-text-primary, #111827)',
+    transition: 'background-color 120ms ease',
+};
+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: 'var(--seekora-text-secondary, #6b7280)', 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("li", { key: `${trending.query}-${i}` },
+                React.createElement("button", { type: "button", className: "seekora-suggestions-trending-item", style: itemStyle, onMouseDown: (e) => {
+                        e.preventDefault();
+                        onSelect();
+                    } },
+                    trending.query,
+                    trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875em' } }, trending.count)) : null)));
+        }))));
+}
+
+/**
+ * SuggestionsError – error message (primitive)
+ */
+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));
+}
+
+/**
+ * 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.
+ */
+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),
+                React.createElement(SuggestionsLoading, 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))));
+}
+
+/**
+ * SectionSearchContext – preset query/filter section state
+ *
+ * For menus, sidebar, front-page blocks. Independent of main search state.
+ */
+const SectionSearchContext = React.createContext(null);
+function useSectionSearchContext() {
+    const context = React.useContext(SectionSearchContext);
+    if (!context) {
+        const error = new Error('useSectionSearchContext must be used within a SectionSearchProvider');
+        log.error('SectionSearchContext: not available', { error: error.message });
+        throw error;
+    }
+    return context;
+}
+
+/**
+ * SectionSearchProvider – preset query + filter section
+ *
+ * Runs client.search(query, { refinements, hitsPerPage, sortBy }) on mount and when
+ * query/filters change. Does not use global SearchStateManager. Use for menus,
+ * sidebar, front-page blocks (e.g. "New arrivals", "On sale").
+ */
+function extractItems(response) {
+    if (!response)
+        return [];
+    if (Array.isArray(response.results))
+        return response.results;
+    if (Array.isArray(response.hits))
+        return response.hits;
+    const data = response.data;
+    if (data && Array.isArray(data.results))
+        return data.results;
+    if (data && Array.isArray(data.data))
+        return data.data;
+    return [];
+}
+function extractTotal(response) {
+    if (!response)
+        return 0;
+    const n = response.totalResults ?? response.total ?? response.total_results;
+    if (typeof n === 'number')
+        return n;
+    const data = response.data;
+    if (data?.total_results != null)
+        return Number(data.total_results);
+    if (data?.data?.total_results != null)
+        return Number(data.data.total_results);
+    return 0;
+}
+function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, }) {
+    const { client } = useSearchContext();
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [totalCount, setTotalCount] = React.useState(0);
+    React.useEffect(() => {
+        if (!enabled || !client?.search) {
+            setItems([]);
+            setLoading(false);
+            setError(null);
+            setTotalCount(0);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        const options = {
+            per_page: maxItems,
+            page: 1,
+        };
+        if (sortBy)
+            options.sort_by = sortBy;
+        if (refinements.length > 0) {
+            options.filter_by = refinements.map((r) => `${r.field}:${r.value}`).join(',');
+        }
+        client
+            .search(query, options)
+            .then((response) => {
+            if (cancelled)
+                return;
+            setItems(extractItems(response));
+            setTotalCount(extractTotal(response));
+            setLoading(false);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setError(err instanceof Error ? err : new Error(String(err)));
+            setItems([]);
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, enabled, query, maxItems, sortBy, refinements]);
+    const trackClick = React.useCallback((item, position) => {
+        if (!client?.trackEvent)
+            return;
+        const id = item?.id ?? item?.objectID;
+        client.trackEvent({
+            event_name: 'section_result_click',
+            clicked_item_id: id,
+            position,
+            section: sectionId,
+            metadata: { section_id: sectionId },
+        }, undefined);
+    }, [client, sectionId]);
+    const value = React.useMemo(() => ({
+        items,
+        loading,
+        error,
+        totalCount,
+        sectionId,
+        trackClick,
+    }), [items, loading, error, totalCount, sectionId, trackClick]);
+    return React.createElement(SectionSearchContext.Provider, { value: value }, children);
+}
+
+/**
+ * SectionLoading – loading state for section (primitive)
+ */
+function SectionLoading({ className, style, text = 'Loading...' }) {
+    const { loading } = useSectionSearchContext();
+    if (!loading)
+        return null;
+    return (React.createElement("div", { className: className, style: { padding: 16, color: 'var(--seekora-text-secondary)', fontSize: '0.875rem', ...style } }, text));
+}
+
+/**
+ * SectionError – error state for section (primitive)
+ */
+function SectionError({ className, style, render }) {
+    const { error } = useSectionSearchContext();
+    if (!error)
+        return null;
+    if (render)
+        return React.createElement(React.Fragment, null, render(error));
+    return (React.createElement("div", { className: className, style: { padding: 16, color: 'var(--seekora-error,#dc2626)', fontSize: '0.875rem', ...style } }, error.message));
+}
+
+/**
+ * SectionItemGrid – generic grid of items from SectionSearchProvider (primitive)
+ */
+function SectionItemGrid({ columns = 4, maxItems = 12, className, style, getItemId = (i) => i.id ?? String(i?.objectID ?? ''), getItemTitle = (i) => i.title ?? i?.title ?? '', getItemImage = (i) => i.image ?? i?.image, getItemDescription = (i) => i.description ?? i?.description, getItemUrl = (i) => i.url ?? i?.url, renderItem, }) {
+    const { items, loading, error, trackClick } = useSectionSearchContext();
+    if (loading)
+        return React.createElement(SectionLoading, { className: className, style: style });
+    if (error)
+        return React.createElement(SectionError, { className: className, style: style });
+    return (React.createElement(ItemGrid, { items: items, maxItems: maxItems, columns: columns, className: className, style: style, getItemId: getItemId, getItemTitle: getItemTitle, getItemImage: getItemImage, getItemDescription: getItemDescription, getItemUrl: getItemUrl, renderItem: renderItem, onItemClick: (item, index) => trackClick(item, index) }));
+}
+
+/**
+ * ProductGallery – product detail image gallery (primitive)
+ *
+ * Uses ImageDisplay with configurable variant (carousel, thumbStrip, etc.).
+ * For use on individual product page.
+ */
+function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, }) {
+    return (React.createElement("div", { className: clsx('seekora-product-gallery', className), style: style },
+        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs })));
+}
+
+/**
+ * ProductInfo – product detail block (primitive)
+ *
+ * Title, description, price, optional variant selector and CTA. Minimal layout;
+ * override with className/style. For use on individual product page.
+ */
+function ProductInfo({ title, description, price, currency = '$', renderVariantSelector, renderCTA, className, style, }) {
+    const priceNum = price != null ? (typeof price === 'number' ? price : parseFloat(String(price))) : null;
+    return (React.createElement("div", { className: clsx('seekora-product-info', className), style: { display: 'flex', flexDirection: 'column', gap: 12, ...style } },
+        React.createElement("h1", { className: "seekora-product-info-title", style: { fontSize: '1.25rem', fontWeight: 600, margin: 0 } }, title),
+        priceNum != null && !Number.isNaN(priceNum) ? (React.createElement("span", { className: "seekora-product-info-price", style: { fontSize: '1.125rem', fontWeight: 600 } },
+            currency,
+            priceNum.toFixed(2))) : null,
+        description ? (React.createElement("p", { className: "seekora-product-info-description", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary)', margin: 0, lineHeight: 1.5 } }, description)) : null,
+        renderVariantSelector?.(),
+        renderCTA?.()));
+}
+
+/**
+ * ProductRecommendations – related / frequently bought (primitive)
+ *
+ * Renders a section of recommended items (generic ItemGrid or product list).
+ * Pass items and onItemClick; or wrap SectionSearchProvider with preset query for "related".
+ * For use on individual product page.
+ */
+function ProductRecommendations({ title = 'You may also like', items, onItemClick, maxItems = 6, columns = 3, className, style, renderItem, }) {
+    if (!items?.length)
+        return null;
+    return (React.createElement("div", { className: clsx('seekora-product-recommendations', className), style: style },
+        React.createElement("h2", { className: "seekora-product-recommendations-title", style: { fontSize: '1rem', fontWeight: 600, marginBottom: 12 } }, title),
+        React.createElement(ItemGrid, { items: items, maxItems: maxItems, columns: columns, onItemClick: onItemClick, renderItem: renderItem })));
+}
+
 /**
  * Utility functions for Query Suggestions components
  */
@@ -13300,10 +14367,12 @@ function updateSuggestionsStyles(theme) {
 
 exports.AmazonDropdown = AmazonDropdown;
 exports.Breadcrumb = Breadcrumb;
+exports.CategoriesTabs = CategoriesTabs;
 exports.ClearRefinements = ClearRefinements;
 exports.CurrentRefinements = CurrentRefinements;
 exports.DocSearch = DocSearch;
 exports.DocSearchButton = DocSearchButton;
+exports.DropdownPanel = DropdownPanel;
 exports.Facets = Facets;
 exports.FederatedDropdown = FederatedDropdown;
 exports.Fingerprint = Fingerprint;
@@ -13312,33 +14381,54 @@ exports.GoogleDropdown = GoogleDropdown;
 exports.HierarchicalMenu = HierarchicalMenu;
 exports.Highlight = Highlight$1;
 exports.HitsPerPage = HitsPerPage;
+exports.ImageDisplay = ImageDisplay;
 exports.InfiniteHits = InfiniteHits;
+exports.ItemCard = ItemCard;
+exports.ItemGrid = ItemGrid;
 exports.MinimalDropdown = MinimalDropdown;
 exports.MobileFilters = MobileFilters;
 exports.MobileFiltersButton = MobileFiltersButton;
 exports.MobileSheetDropdown = MobileSheetDropdown;
 exports.Pagination = Pagination;
 exports.PinterestDropdown = PinterestDropdown;
+exports.ProductCard = ProductCard;
+exports.ProductGallery = ProductGallery;
+exports.ProductGrid = ProductGrid;
+exports.ProductInfo = ProductInfo;
+exports.ProductRecommendations = ProductRecommendations;
 exports.QuerySuggestions = QuerySuggestions;
 exports.QuerySuggestionsDropdown = QuerySuggestionsDropdown;
 exports.RangeInput = RangeInput;
 exports.RangeSlider = RangeSlider;
+exports.RecentSearchesList = RecentSearchesList;
 exports.RecentlyViewed = RecentlyViewed;
 exports.RelatedProducts = RelatedProducts;
 exports.RichQuerySuggestions = RichQuerySuggestions;
 exports.SearchBar = SearchBar;
 exports.SearchBarWithSuggestions = SearchBarWithSuggestions;
+exports.SearchInput = SearchInput;
 exports.SearchLayout = SearchLayout;
 exports.SearchProvider = SearchProvider;
 exports.SearchResults = SearchResults;
+exports.SectionError = SectionError;
+exports.SectionItemGrid = SectionItemGrid;
+exports.SectionLoading = SectionLoading;
+exports.SectionSearchProvider = SectionSearchProvider;
 exports.ShopifyDropdown = ShopifyDropdown;
 exports.Snippet = Snippet;
 exports.SortBy = SortBy;
 exports.SpotlightDropdown = SpotlightDropdown;
 exports.Stats = Stats;
 exports.SuggestionDropdownVariants = SuggestionDropdownVariants;
+exports.SuggestionItem = SuggestionItem;
+exports.SuggestionList = SuggestionList;
 exports.SuggestionSearchBar = SuggestionSearchBar;
+exports.SuggestionsDropdownComposition = SuggestionsDropdownComposition;
+exports.SuggestionsError = SuggestionsError;
+exports.SuggestionsLoading = SuggestionsLoading;
+exports.SuggestionsProvider = SuggestionsProvider;
 exports.TrendingItems = TrendingItems;
+exports.TrendingList = TrendingList;
 exports.addRecentSearch = addRecentSearch;
 exports.addToRecentlyViewed = addToRecentlyViewed;
 exports.brandPresets = brandPresets;
@@ -13384,7 +14474,9 @@ exports.useQuerySuggestionsEnhanced = useQuerySuggestionsEnhanced;
 exports.useResponsive = useResponsive;
 exports.useSearchContext = useSearchContext;
 exports.useSearchState = useSearchState;
+exports.useSectionSearchContext = useSectionSearchContext;
 exports.useSeekoraSearch = useSeekoraSearch;
 exports.useSmartSuggestions = useSmartSuggestions;
 exports.useSuggestionsAnalytics = useSuggestionsAnalytics;
+exports.useSuggestionsContext = useSuggestionsContext;
 //# sourceMappingURL=index.js.map