@seekora-ai/ui-sdk-react 0.2.12 → 0.2.13

package/dist/src/index.js

@@ -1513,7 +1513,7 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
  *
  * Interactive search input component with query suggestions support
  */
-const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, renderSuggestion, renderLoading, }) => {
+const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, showLoadingState = false, renderSuggestion, renderLoading, }) => {
     const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
     const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
     const [isFocused, setIsFocused] = React.useState(false);
@@ -1646,13 +1646,9 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
     const defaultRenderLoading = () => (React.createElement("div", { style: { padding: theme.spacing.medium, textAlign: 'center' } }, "Loading suggestions..."));
     const searchBarTheme = customTheme || {};
     const isLoading = suggestionsLoading || searchLoading;
-    // Only show suggestions list if:
-    // 1. Input is focused
-    // 2. Suggestions are enabled
-    // 3. Query is long enough
-    // 4. AND (we have suggestions to show OR we're currently loading suggestions)
+    // Show list when we have suggestions (including previous while loading) or when loading and showLoadingState
     const hasSuggestions = displayedSuggestions.length > 0;
-    const showSuggestionsList = isFocused && showSuggestions && query.length >= minQueryLength && (hasSuggestions || isLoading);
+    const showSuggestionsList = isFocused && showSuggestions && query.length >= minQueryLength && (hasSuggestions || (isLoading && showLoadingState));
     // Get processing time from results
     const res = results;
     const processingTime = res?.processingTimeMS
@@ -1703,8 +1699,8 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
                 overflowY: 'auto',
                 zIndex: 1000,
             } },
-            isLoading && (renderLoading ? renderLoading() : defaultRenderLoading()),
-            !isLoading && displayedSuggestions.length > 0 && (React.createElement(React.Fragment, null, displayedSuggestions.map((suggestion, index) => {
+            isLoading && displayedSuggestions.length === 0 && showLoadingState && (renderLoading ? renderLoading() : defaultRenderLoading()),
+            displayedSuggestions.length > 0 && (React.createElement(React.Fragment, null, displayedSuggestions.map((suggestion, index) => {
                 const isSelected = index === selectedIndex;
                 const renderFn = renderSuggestion || defaultRenderSuggestion;
                 return (React.createElement("div", { key: index, className: clsx(searchBarTheme.suggestionItem, isSelected && searchBarTheme.suggestionItemActive), onClick: () => handleSuggestionSelect(suggestion.query), onMouseEnter: () => setSelectedIndex(index), style: {
@@ -1746,7 +1742,7 @@ const formatPrice$1 = (value, currency = '₹') => {
     }
     return String(value);
 };
-const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, }) => {
+const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, showLoadingState = false, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, }) => {
     const { theme, client, enableAnalytics } = useSearchContext();
     const { results: stateResults, loading: stateLoading, error: stateError, currentPage, itemsPerPage: stateItemsPerPage } = useSearchState();
     const searchResultsTheme = customTheme || {};
@@ -2113,10 +2109,12 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
         hasError: !!error,
         isLoading: loading,
     });
-    if (loading) {
+    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
+    if (loading && resultItems.length === 0 && showLoadingState) {
         log.verbose('SearchResults: Rendering loading state');
         return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
     }
+    // When loading with previous results, fall through and render them (no loading screen)
     if (error) {
         log.error('SearchResults: Rendering error state', {
             error: error.message,
@@ -3088,7 +3086,7 @@ const HitsPerPage = ({ items, onHitsPerPageChange, renderSelect, className, styl
  * Displays search results with infinite scroll or "Show More" button
  * Accumulates results as user loads more pages
  */
-const InfiniteHits = ({ renderHit, renderEmpty, renderLoading, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', loadingLabel = 'Loading...', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
+const InfiniteHits = ({ renderHit, renderEmpty, showInitialLoading = false, renderLoading, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', loadingLabel = 'Loading...', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
     const { theme, stateManager } = useSearchContext();
     const { results, loading, currentPage, setPage } = useSearchState();
     const infiniteHitsTheme = customTheme || {};
@@ -3243,10 +3241,13 @@ const InfiniteHits = ({ renderHit, renderEmpty, renderLoading, renderShowMore, s
             cursor: isLastPage || isLoadingMore ? 'not-allowed' : 'pointer',
             transition: theme.transitions?.fast || '150ms ease-in-out',
         } }, isLoadingMore ? loadingLabel : isLastPage ? 'No more results' : showMoreLabel));
-    // Initial loading state
-    if (loading && accumulatedHits.length === 0) {
+    // Initial loading state (only when showInitialLoading: default no loading screen)
+    if (loading && accumulatedHits.length === 0 && showInitialLoading) {
         return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
     }
+    if (loading && accumulatedHits.length === 0) {
+        return React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style });
+    }
     // Empty state
     if (!loading && accumulatedHits.length === 0) {
         return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
@@ -4128,36 +4129,40 @@ const MobileFiltersButton = ({ onClick, text = 'Filters', showCount = true, clas
  * - FrequentlyBoughtTogether: Bundle recommendations
  * - RecentlyViewed: User's recently viewed items
  */
-const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = false, title = 'Related Products', maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = false, showLoadingState = false, title = 'Related Products', maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
     const { theme } = useSearchContext();
     const recommendationTheme = customTheme || {};
     // If items are provided, use them directly
     const items = itemsProp?.slice(0, maxItems) || [];
     const loading = loadingProp;
-    if (loading) {
+    if (loading && items.length === 0 && showLoadingState) {
         return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
             React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading related products...")));
     }
+    if (loading && items.length === 0)
+        return null;
     if (items.length === 0) {
         return null;
     }
     return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
 };
-const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, title = 'Trending Now', maxItems = 8, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, showLoadingState = false, title = 'Trending Now', maxItems = 8, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
     const { theme } = useSearchContext();
     const recommendationTheme = customTheme || {};
     const items = itemsProp?.slice(0, maxItems) || [];
     const loading = loadingProp;
-    if (loading) {
+    if (loading && items.length === 0 && showLoadingState) {
         return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
             React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading trending items...")));
     }
+    if (loading && items.length === 0)
+        return null;
     if (items.length === 0) {
         return null;
     }
     return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
 };
-const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadingProp = false, title = 'Frequently Bought Together', maxItems = 4, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', showAddAllButton = true, onAddAll, }) => {
+const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadingProp = false, showLoadingState = false, title = 'Frequently Bought Together', maxItems = 4, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', showAddAllButton = true, onAddAll, }) => {
     const { theme } = useSearchContext();
     const recommendationTheme = customTheme || {};
     const items = itemsProp?.slice(0, maxItems) || [];
@@ -4170,10 +4175,12 @@ const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadin
             return sum + price;
         }, 0);
     }, [items]);
-    if (loading) {
+    if (loading && items.length === 0 && showLoadingState) {
         return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
             React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading recommendations...")));
     }
+    if (loading && items.length === 0)
+        return null;
     if (items.length === 0) {
         return null;
     }
@@ -4392,7 +4399,7 @@ function getLoadingStyle(theme) {
  *
  * Standalone component for displaying query suggestions
  */
-const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, renderLoading, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
+const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, showLoadingState = false, renderLoading, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
     const { client, theme } = useSearchContext();
     const [selectedIndex, setSelectedIndex] = React.useState(-1);
     const { suggestions, loading, error } = useQuerySuggestions({
@@ -4429,7 +4436,8 @@ const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, m
     if (query.length < minQueryLength) {
         return null;
     }
-    if (loading) {
+    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
+    if (loading && displayedSuggestions.length === 0 && showLoadingState) {
         return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
             showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
                     fontSize: theme.typography.fontSize.large,
@@ -4439,7 +4447,7 @@ const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, m
                 } }, title)),
             renderLoading ? renderLoading() : defaultRenderLoading()));
     }
-    if (error || displayedSuggestions.length === 0) {
+    if (error || (!loading && displayedSuggestions.length === 0)) {
         return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
             showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
                     fontSize: theme.typography.fontSize.large,
@@ -4567,7 +4575,8 @@ function transformFilteredTab(raw) {
 // Main Hook
 // ============================================================================
 function useQuerySuggestionsEnhanced(options) {
-    const { client, query, enabled = true, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, includeFacets = false, maxCategories = 3, maxFacets = 5, filteredTabs, minPopularity, timeRange, disableTypoTolerance, analyticsTags, enableRecentSearches = true, maxRecentSearches = MAX_RECENT_SEARCHES_DEFAULT, recentSearchesKey = RECENT_SEARCHES_DEFAULT_KEY, onSuggestionsLoaded, onError, } = options;
+    const { client, query, enabled = true, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, includeFacets = true, // CHANGED: Enable facets by default
+    maxCategories = 3, maxFacets = 5, filteredTabs, minPopularity, timeRange, disableTypoTolerance, analyticsTags, enableRecentSearches = true, maxRecentSearches = MAX_RECENT_SEARCHES_DEFAULT, recentSearchesKey = RECENT_SEARCHES_DEFAULT_KEY, onSuggestionsLoaded, onError, } = options;
     // State
     const [suggestions, setSuggestions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
@@ -5023,7 +5032,7 @@ const LoadingSpinner = ({ style }) => (React.createElement("svg", { style: { ani
 // Component
 // ============================================================================
 const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropdown(props, ref) {
-    const { query, isOpen = true, maxSuggestions = 8, minQueryLength = 1, debounceMs = 200, showRecentSearches = true, maxRecentSearches = 5, showCounts = true, showLoading = true, showEmptyState = true, highlight = { enabled: true, preTag: '<mark>', postTag: '</mark>' }, keyboardNav = { enabled: true }, animation = { enabled: true, duration: 150, entrance: 'fade' }, classNames = {}, style, renderSuggestion, renderRecentSearch, renderLoading, renderEmpty, footer, position = 'absolute', width = '100%', zIndex = 1000, closeOnClickOutside = true, closeOnEscape = true, ariaLabel = 'Search suggestions', onSuggestionSelect, onRecentSearchClick, onRecentSearchRemove, onOpen, onClose, onNavigate, } = props;
+    const { query, isOpen = true, maxSuggestions = 8, minQueryLength = 1, debounceMs = 200, showRecentSearches = true, maxRecentSearches = 5, showCounts = true, showLoading = false, showEmptyState = true, highlight = { enabled: true, preTag: '<mark>', postTag: '</mark>' }, keyboardNav = { enabled: true }, animation = { enabled: true, duration: 150, entrance: 'fade' }, classNames = {}, style, renderSuggestion, renderRecentSearch, renderLoading, renderEmpty, footer, position = 'absolute', width = '100%', zIndex = 1000, closeOnClickOutside = true, closeOnEscape = true, ariaLabel = 'Search suggestions', onSuggestionSelect, onRecentSearchClick, onRecentSearchRemove, onOpen, onClose, onNavigate, } = props;
     const { client, theme } = useSearchContext();
     const containerRef = React.useRef(null);
     const [activeIndex, setActiveIndex] = React.useState(-1);
@@ -5208,7 +5217,7 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
         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) },
+        showRecent && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.recentSearches) },
             React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles$1.sectionTitle }, "Recent Searches"),
             recentSearches.slice(0, maxRecentSearches).map((search, index) => {
                 const isActive = activeIndex === index;
@@ -5216,8 +5225,8 @@ const QuerySuggestionsDropdown = React.forwardRef(function QuerySuggestionsDropd
                         onRecentSearchClick?.(search);
                     }, onMouseEnter: () => setActiveIndex(index) }, renderRecentSearchItem(search, index, isActive)));
             }))),
-        !loading && showRecent && showSuggestions && (React.createElement("div", { style: defaultStyles$1.divider })),
-        !loading && showSuggestions && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.suggestionsList) },
+        showRecent && showSuggestions && (React.createElement("div", { style: defaultStyles$1.divider })),
+        showSuggestions && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.suggestionsList) },
             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;
@@ -5479,7 +5488,7 @@ const CloseIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill
 // Component
 // ============================================================================
 const RichQuerySuggestions = React.forwardRef(function RichQuerySuggestions(props, ref) {
-    const { query, isOpen = true, sections = DEFAULT_SECTIONS, maxSuggestionsPerSection = 8, minQueryLength = 0, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, maxCategories = 3, showCounts = true, showCategoryCounts = true, showSectionHeaders = true, classNames = {}, style, renderSuggestion, renderCategory, renderTrendingItem, renderRecentItem, header, footer, width = '100%', maxHeight = '480px', zIndex = 1000, ariaLabel = 'Search suggestions', analyticsTags, onSuggestionSelect, onCategoryClick, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
+    const { query, isOpen = true, sections = DEFAULT_SECTIONS, maxSuggestionsPerSection = 8, minQueryLength = 0, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, maxCategories = 3, showCounts = true, showCategoryCounts = true, showSectionHeaders = true, classNames = {}, style, renderSuggestion, renderCategory, renderTrendingItem, renderRecentItem, header, footer, width = '100%', maxHeight = '480px', zIndex = 1000, ariaLabel = 'Search suggestions', analyticsTags, onSuggestionSelect, onCategoryClick, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, showLoadingOverlay = false, renderLoading, } = props;
     const { client } = useSearchContext();
     const containerRef = React.useRef(null);
     const [activeIndex, setActiveIndex] = React.useState(-1);
@@ -5698,8 +5707,7 @@ const RichQuerySuggestions = React.forwardRef(function RichQuerySuggestions(prop
         } },
         header && React.createElement("div", { style: styles$2.header }, header),
         React.createElement("div", { style: { ...styles$2.content, maxHeight } },
-            loading && (React.createElement("div", { style: styles$2.loadingOverlay },
-                React.createElement("span", null, "Loading..."))),
+            loading && showLoadingOverlay && (React.createElement("div", { style: styles$2.loadingOverlay }, renderLoading ? renderLoading() : React.createElement("span", null, "Loading..."))),
             enabledSections.map((section, index) => {
                 let content = null;
                 switch (section.id) {
@@ -7184,21 +7192,6 @@ function SuggestionItem({ suggestion, index, isActive, onSelect, className, styl
         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)
  *
@@ -7210,15 +7203,19 @@ const listStyle = {
     margin: 0,
     padding: '4px 0',
 };
-function SuggestionList({ maxItems = 10, className, style, listClassName, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
+function SuggestionList({ maxItems = 10, className, style, listClassName, showLoadingState = false, renderLoading, 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;
-    if (loading) {
-        return React.createElement(SuggestionsLoading, { className: className, style: style });
+    // When loading with no previous results, show loading only if showLoadingState (default: don't show loading screen)
+    if (loading && items.length === 0 && showLoadingState) {
+        if (renderLoading)
+            return React.createElement(React.Fragment, null, renderLoading());
+        return (React.createElement("div", { className: clsx('seekora-suggestions-loading', className), style: { padding: 16, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875rem', ...style } }, "Loading..."));
     }
+    // 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 },
@@ -9130,6 +9127,21 @@ function TrendingList({ title = 'Trending', maxItems = 8, className, style, list
         }))));
 }
 
+/**
+ * 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));
+}
+
 /**
  * SuggestionsError – error message (primitive)
  */
@@ -9161,7 +9173,6 @@ function SuggestionsDropdownComposition({ showRecentSearches = true, showTrendin
             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,
@@ -9632,12 +9643,13 @@ function SectionError({ className, style, render }) {
 /**
  * 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, }) {
+function SectionItemGrid({ columns = 4, maxItems = 12, className, style, showLoadingState = false, 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)
+    if (loading && items.length === 0 && showLoadingState)
         return React.createElement(SectionLoading, { className: className, style: style });
     if (error)
         return React.createElement(SectionError, { className: className, style: style });
+    // When loading with previous items, show them (no loading screen)
     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) }));
 }
 
@@ -10374,7 +10386,7 @@ const RatingStars = ({ rating, count }) => {
             ")"))));
 };
 const AmazonDropdown = React.forwardRef(function AmazonDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], recentSearches = [], trendingSearches = [], filteredTabs = [], activeTab = 'all', suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showDepartments = true, currentDepartment, departments = [], showPrime = false, width = '700px', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onRecentClick, onRecentRemove, onRecentClearAll, onViewAll, onClose, header, footer, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], recentSearches = [], trendingSearches = [], filteredTabs = [], activeTab = 'all', suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showDepartments = true, currentDepartment, departments = [], showPrime = false, width = '700px', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onRecentClick, onRecentRemove, onRecentClearAll, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -10471,7 +10483,7 @@ const AmazonDropdown = React.forwardRef(function AmazonDropdown(props, ref) {
           }
         `),
         header,
-        loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
+        (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
             React.createElement("div", { style: styles.spinner }),
             React.createElement("span", null, "Searching...")))) : (React.createElement(React.Fragment, null,
             filteredTabs.length > 0 && (React.createElement("div", { style: {
@@ -10805,7 +10817,7 @@ const TrendingIcon$2 = () => (React.createElement("svg", { width: "20", height:
 const ArrowIcon$1 = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", width: "20", height: "20" },
     React.createElement("path", { d: "M9 5l-4 4 4 4", stroke: "currentColor", strokeWidth: "2", fill: "none", transform: "rotate(-90 12 12)" })));
 const GoogleDropdown = React.forwardRef(function GoogleDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, theme = {}, showFeelingLucky = true, feelingLuckyText = "I'm Feeling Lucky", showRemoveRecent = true, showVoiceSearch = false, showTrendingIndicator = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onRecentClick, onRecentRemove, onVoiceSearch, onFeelingLucky, onClose, onSearchSubmit, header, footer, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, theme = {}, showFeelingLucky = true, feelingLuckyText = "I'm Feeling Lucky", showRemoveRecent = true, showVoiceSearch = false, showTrendingIndicator = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onRecentClick, onRecentRemove, onVoiceSearch, onFeelingLucky, onClose, onSearchSubmit, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -10924,7 +10936,7 @@ const GoogleDropdown = React.forwardRef(function GoogleDropdown(props, ref) {
           }
         `),
         header,
-        loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
+        (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
             React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
             React.createElement("ul", { style: styles.list },
                 showRecent && (React.createElement(React.Fragment, null,
@@ -11259,7 +11271,7 @@ const ImageIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill
     React.createElement("polyline", { points: "21 15 16 10 5 21" })));
 const PinterestDropdown = React.forwardRef(function PinterestDropdown(props, ref) {
     const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showSaveButton = true, activeCategory: initialActiveCategory, activeTab, // From BaseDropdownProps
-    showPriceOverlay = true, gridColumns = 4, width = '800px', maxHeight = '600px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onSaveProduct, onViewAll, onClose, header, footer, renderLoading, renderEmpty, } = props;
+    showPriceOverlay = true, gridColumns = 4, width = '800px', maxHeight = '600px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onSaveProduct, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -11353,7 +11365,7 @@ const PinterestDropdown = React.forwardRef(function PinterestDropdown(props, ref
                         "(",
                         cat.count,
                         ")"))))))))),
-        React.createElement("div", { style: { ...styles.content, maxHeight } }, loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
+        React.createElement("div", { style: { ...styles.content, maxHeight } }, (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
             React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
             processedSuggestions.length > 0 && (React.createElement("div", { style: styles.suggestionsRow }, processedSuggestions.slice(0, 8).map((s, idx) => (React.createElement("button", { key: s.id || idx, "data-index": idx, style: mergeStyles(styles.suggestionPill, activeIndex === idx ? styles.suggestionPillActive : undefined, hoveredSuggestion === idx && activeIndex !== idx ? styles.suggestionPillHover : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => {
                     setHoveredSuggestion(idx);
@@ -11697,7 +11709,7 @@ const ShoppingIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", f
 const ClockIcon$1 = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" },
     React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
 const SpotlightDropdown = React.forwardRef(function SpotlightDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showPreview = true, asOverlay = true, placeholder = 'Search...', showShortcuts = true, actions = [], width = '680px', maxHeight = '500px', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showPreview = true, asOverlay = true, placeholder = 'Search...', showShortcuts = true, actions = [], width = '680px', maxHeight = '500px', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -11851,7 +11863,7 @@ const SpotlightDropdown = React.forwardRef(function SpotlightDropdown(props, ref
                 React.createElement("span", { style: styles.kbd }, "K")))),
         header,
         React.createElement("div", { style: styles.content },
-            React.createElement("div", { ref: listRef, style: { ...styles.resultsColumn, maxHeight } }, loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
+            React.createElement("div", { ref: listRef, style: { ...styles.resultsColumn, maxHeight } }, (loading && allItems.length === 0 && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
                 React.createElement("div", { style: styles.spinner })))) : allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
                 "No results for \"",
                 query,
@@ -12250,7 +12262,7 @@ const SearchIcon$1 = () => (React.createElement("svg", { width: "18", height: "1
 const ArrowIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor" },
     React.createElement("path", { fillRule: "evenodd", d: "M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z", clipRule: "evenodd" })));
 const ShopifyDropdown = React.forwardRef(function ShopifyDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showHeroProduct = true, showCollections = true, showAddToCart = true, addToCartText = 'Quick Add', showComparePrice = true, width = '100%', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onAddToCart, onViewAll, onClose, header, footer, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showHeroProduct = true, showCollections = true, showAddToCart = true, addToCartText = 'Quick Add', showComparePrice = true, width = '100%', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onAddToCart, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -12322,7 +12334,7 @@ const ShopifyDropdown = React.forwardRef(function ShopifyDropdown(props, ref) {
           }
         `),
         header,
-        loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
+        (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
             React.createElement("div", { style: styles.spinner })))) : (React.createElement("div", { style: styles.layout },
             React.createElement("div", { style: styles.leftPanel },
                 React.createElement("div", { style: styles.section },
@@ -12657,7 +12669,7 @@ const ChevronIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fi
 const ArrowUpIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "20", height: "20" },
     React.createElement("path", { d: "M7 17l5-5-5-5M13 17l5-5-5-5" })));
 const MobileSheetDropdown = React.forwardRef(function MobileSheetDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showSearchInput = true, showCancel = true, cancelText = 'Cancel', showDragHandle = true, swipeToDismiss = true, footerButtonText = 'Search', showFooterButton = true, width = '100%', maxHeight = '85vh', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onRecentClearAll, onSearchSubmit, onClose, header, footer, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showSearchInput = true, showCancel = true, cancelText = 'Cancel', showDragHandle = true, swipeToDismiss = true, footerButtonText = 'Search', showFooterButton = true, width = '100%', maxHeight = '85vh', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onRecentClearAll, onSearchSubmit, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     const styles = React.useMemo(() => createStyles$2(), []);
@@ -12799,7 +12811,7 @@ const MobileSheetDropdown = React.forwardRef(function MobileSheetDropdown(props,
                             }
                         }, style: styles.searchInput, autoFocus: true })),
                 showCancel && (React.createElement("button", { style: styles.cancelBtn, onClick: onClose }, cancelText)))))),
-            React.createElement("div", { style: styles.content }, loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
+            React.createElement("div", { style: styles.content }, (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
                 React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
                 showRecent && (React.createElement("div", { style: styles.section },
                     React.createElement("div", { style: styles.sectionHeader },
@@ -13035,7 +13047,7 @@ const createStyles$1 = () => ({
     },
 });
 const MinimalDropdown = React.forwardRef(function MinimalDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showIndices = false, showTypeLabels = false, showSectionDividers = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showIndices = false, showTypeLabels = false, showSectionDividers = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -13121,7 +13133,7 @@ const MinimalDropdown = React.forwardRef(function MinimalDropdown(props, ref) {
           }
         `),
         header,
-        React.createElement("div", { ref: listRef, style: { maxHeight, overflowY: 'auto' } }, loading ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading }, "Loading..."))) : allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty }, query ? `No results for "${query}"` : 'Start typing to search'))) : (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: listRef, style: { maxHeight, overflowY: 'auto' } }, (loading && allItems.length === 0 && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading }, "Loading..."))) : allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty }, query ? `No results for "${query}"` : 'Start typing to search'))) : (React.createElement(React.Fragment, null,
             showRecent && (React.createElement(React.Fragment, null,
                 showSectionDividers && (React.createElement("div", { style: styles.divider }, "Recent")),
                 recentQueries.map((q, idx) => {
@@ -13456,6 +13468,7 @@ const SuggestionSearchBar = React.forwardRef(function SuggestionSearchBar(props,
                 include_dropdown_product_list: includeDropdownProductList,
                 include_filtered_tabs: includeFilteredTabs,
                 include_categories: includeCategories,
+                include_facets: true, // Enable facet-based suggestions
                 filtered_tabs: filteredTabs,
                 analytics_tags: analyticsTags,
                 returnFullResponse: true, // Required to get tabs and products
@@ -14137,7 +14150,7 @@ function getHitKey(hit, index) {
         return hit.objectID;
     return `suggestion-${hit.url}-${index}`;
 }
-function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, error, translations = {}, sources: _sources = [], }) {
+function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, showLoadingState = false, error, translations = {}, sources: _sources = [], }) {
     const listRef = React.useRef(null);
     React.useEffect(() => {
         if (!listRef.current || hits.length === 0)
@@ -14171,7 +14184,7 @@ function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSe
         return (React.createElement("div", { className: "seekora-docsearch-empty" },
             React.createElement("p", { className: "seekora-docsearch-empty-text" }, translations.searchPlaceholder || 'Type to start searching...')));
     }
-    if (isLoading && hits.length === 0) {
+    if (isLoading && hits.length === 0 && showLoadingState) {
         return (React.createElement("div", { className: "seekora-docsearch-loading" },
             React.createElement("div", { className: "seekora-docsearch-loading-spinner" },
                 React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" },
@@ -14179,6 +14192,10 @@ function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSe
                         React.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" })))),
             React.createElement("p", { className: "seekora-docsearch-loading-text" }, translations.loadingText || 'Searching...')));
     }
+    if (isLoading && hits.length === 0) {
+        return React.createElement("div", { className: "seekora-docsearch-empty" });
+    }
+    // When loading with previous hits, fall through and show them (no loading screen)
     if (error) {
         return (React.createElement("div", { className: "seekora-docsearch-error" },
             React.createElement("p", { className: "seekora-docsearch-error-text" }, translations.errorText || error)));