@seekora-ai/ui-sdk-react 0.2.16 → 0.2.18

package/dist/src/index.js

@@ -6802,7 +6802,7 @@ 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 = true, // CHANGED: Enable facets by default
+    const { client, query, enabled = true, prefetch = false, 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([]);
@@ -6975,17 +6975,41 @@ function useQuerySuggestionsEnhanced(options) {
         onSuggestionsLoaded,
         onError,
     ]);
+    // Prefetch: fire initial empty-query fetch once client is ready (before dropdown opens)
+    const prefetchedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!prefetch || prefetchedRef.current)
+            return;
+        if (minQueryLength > 0)
+            return;
+        if (!client?.getSuggestions)
+            return;
+        prefetchedRef.current = true;
+        fetchSuggestions('');
+    }, [prefetch, client, minQueryLength, fetchSuggestions]);
     // Debounced fetch effect
     React.useEffect(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
         }
         if (!enabled || query.length < minQueryLength) {
+            // Don't clear prefetched data when dropdown is closed
+            if (prefetch && prefetchedRef.current && query === '') {
+                // Keep prefetched data intact
+                setLoading(false);
+                setError(null);
+                return;
+            }
             setSuggestions([]);
+            setDropdownRecommendations(null);
             setLoading(false);
             setError(null);
             return;
         }
+        // When dropdown opens with empty query and we already have prefetched data, skip re-fetch
+        if (prefetch && prefetchedRef.current && query === '') {
+            return;
+        }
         setLoading(true);
         debounceTimerRef.current = setTimeout(() => {
             fetchSuggestions(query);
@@ -6995,7 +7019,7 @@ function useQuerySuggestionsEnhanced(options) {
                 clearTimeout(debounceTimerRef.current);
             }
         };
-    }, [query, enabled, minQueryLength, debounceMs, fetchSuggestions]);
+    }, [query, enabled, prefetch, minQueryLength, debounceMs, fetchSuggestions]);
     // Recent search management
     const addRecentSearch = React.useCallback((searchQuery, resultsCount) => {
         if (!enableRecentSearches || !searchQuery.trim())
@@ -9030,10 +9054,28 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
     const [isOpen, setIsOpenState] = React.useState(false);
     const [activeIndex, setActiveIndex] = React.useState(-1);
     const [activeTabId, setActiveTabId] = React.useState('');
+    const [prefetchedProducts, setPrefetchedProducts] = React.useState([]);
+    // Prefetch product results on mount so they're available instantly when dropdown opens
+    const prefetchedProductsRef = React.useRef(false);
+    React.useEffect(() => {
+        if (prefetchedProductsRef.current || !client?.search)
+            return;
+        prefetchedProductsRef.current = true;
+        client.search('*', { per_page: 12, page: 1 })
+            .then((res) => {
+            const data = res?.data;
+            const items = data?.results || data?.data || res?.results || res?.hits || [];
+            if (Array.isArray(items) && items.length > 0) {
+                setPrefetchedProducts(items);
+            }
+        })
+            .catch(() => { });
+    }, [client]);
     const suggestionsData = useQuerySuggestionsEnhanced({
         client,
         query,
         enabled: isOpen,
+        prefetch: minQueryLength === 0,
         minQueryLength,
         debounceMs,
         maxSuggestions,
@@ -9051,7 +9093,22 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         trackClicks: true,
         trackImpressions: true,
     });
-    const { suggestions, recentSearches, trendingSearches, trendingProducts, filteredTabs: filteredTabsData, loading, error, hasContent, getAllNavigableItems, addRecentSearch, } = suggestionsData;
+    const { suggestions, recentSearches, trendingSearches, trendingProducts, filteredTabs: filteredTabsData, loading, error, hasContent, getAllNavigableItems, addRecentSearch, clearRecentSearches, } = suggestionsData;
+    // Wrap getAllNavigableItems to include prefetchedProducts when trendingProducts is empty
+    const getAllNavigableItemsWithPrefetched = React.useCallback(() => {
+        const items = getAllNavigableItems();
+        // If there are already product items in the list, return as-is
+        if (items.some(i => i.type === 'product'))
+            return items;
+        // Otherwise append prefetchedProducts as navigable product items
+        if (prefetchedProducts.length > 0) {
+            let idx = items.length;
+            prefetchedProducts.forEach(product => {
+                items.push({ type: 'product', index: idx++, data: product });
+            });
+        }
+        return items;
+    }, [getAllNavigableItems, prefetchedProducts]);
     const onSearchRef = React.useRef(onSearch);
     const onSuggestionSelectRef = React.useRef(onSuggestionSelect);
     const onProductClickRef = React.useRef(onProductClick);
@@ -9129,19 +9186,19 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         onSearchRef.current?.(trimmed);
     }, [analytics, addRecentSearch, close]);
     const navigateNext = React.useCallback(() => {
-        const items = getAllNavigableItems();
+        const items = getAllNavigableItemsWithPrefetched();
         if (items.length === 0)
             return;
         setActiveIndex((i) => (i < items.length - 1 ? i + 1 : 0));
-    }, [getAllNavigableItems]);
+    }, [getAllNavigableItemsWithPrefetched]);
     const navigatePrev = React.useCallback(() => {
-        const items = getAllNavigableItems();
+        const items = getAllNavigableItemsWithPrefetched();
         if (items.length === 0)
             return;
         setActiveIndex((i) => (i <= 0 ? items.length - 1 : i - 1));
-    }, [getAllNavigableItems]);
+    }, [getAllNavigableItemsWithPrefetched]);
     const selectActive = React.useCallback(() => {
-        const items = getAllNavigableItems();
+        const items = getAllNavigableItemsWithPrefetched();
         if (activeIndex < 0 || activeIndex >= items.length) {
             submitSearch(query);
             return;
@@ -9163,7 +9220,7 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
             default:
                 submitSearch(query);
         }
-    }, [activeIndex, getAllNavigableItems, query, submitSearch, selectSuggestion, selectProduct, selectRecentSearch, selectTrendingSearch]);
+    }, [activeIndex, getAllNavigableItemsWithPrefetched, query, submitSearch, selectSuggestion, selectProduct, selectRecentSearch, selectTrendingSearch]);
     // Impression when open and content changes
     React.useEffect(() => {
         if (!isOpen || !hasContent || !query)
@@ -9186,19 +9243,21 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         recentSearches,
         trendingSearches,
         trendingProducts,
+        prefetchedProducts,
         filteredTabs: filteredTabsData,
         activeTabId,
         setActiveTabId,
         loading,
         error,
         hasContent,
-        getAllNavigableItems,
+        getAllNavigableItems: getAllNavigableItemsWithPrefetched,
         selectSuggestion,
         selectProduct,
         selectRecentSearch,
         selectTrendingSearch,
         setActiveTab,
         submitSearch,
+        clearRecentSearches,
         close,
         navigateNext,
         navigatePrev,
@@ -9214,19 +9273,21 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         recentSearches,
         trendingSearches,
         trendingProducts,
+        prefetchedProducts,
         filteredTabsData,
         activeTabId,
         setActiveTabId,
         loading,
         error,
         hasContent,
-        getAllNavigableItems,
+        getAllNavigableItemsWithPrefetched,
         selectSuggestion,
         selectProduct,
         selectRecentSearch,
         selectTrendingSearch,
         setActiveTab,
         submitSearch,
+        clearRecentSearches,
         close,
         navigateNext,
         navigatePrev,
@@ -9317,14 +9378,14 @@ function SearchInput({ placeholder = 'Powered by Seekora', autoFocus = false, sh
     }, [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,
+            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'inherit', opacity: 0.5 } }, 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: 8,
                     border: 'none',
                     background: 'transparent',
                     cursor: 'pointer',
-                    color: 'var(--seekora-text-secondary, #6b7280)',
+                    color: 'inherit', opacity: 0.5,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -9475,7 +9536,7 @@ const defaultItemStyle = {
     fontSize: 'inherit',
     fontFamily: 'inherit',
     backgroundColor: 'transparent',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'inherit',
     transition: 'background-color 120ms ease',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -9492,14 +9553,14 @@ function SuggestionItem({ suggestion, index, isActive, onSelect, className, styl
     const showHighlight = isActive || isHovered;
     return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', isHovered && 'seekora-suggestions-item--hover', className), style: {
             ...defaultItemStyle,
-            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
             ...style,
         }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), 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));
+        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count", style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, suggestion.count)) : null));
 }
 
 /**
@@ -10185,7 +10246,7 @@ const imgStyle$1 = {
     aspectRatio: 'var(--seekora-card-aspect-ratio, 1)',
     objectFit: 'cover',
     borderRadius: BORDER_RADIUS$3.sm,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
     display: 'block',
     overflow: 'hidden',
 };
@@ -10211,7 +10272,7 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
     // Hover style
     const cardHoverStyle = isHovered
         ? {
-            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, #f9fafb))',
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
             boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
         }
         : {};
@@ -10220,7 +10281,7 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
         actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle$1, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, height: imageHeight, flexShrink: 0 } : {}) }, "aria-hidden": true }));
     const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: textGap, flex: 1, minWidth: 0 } : undefined },
         React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isHorizontal ? 2 : 3, WebkitBoxOrient: 'vertical' } }, String(title)),
-        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: descriptionFontSize, color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: descriptionFontSize, color: 'inherit', opacity: 0.6, lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
         actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" }))));
     const content = isHorizontal ? (React.createElement("div", { style: { display: 'flex', gap: horizontalGap, alignItems: 'flex-start' } },
         imageBlock,
@@ -11215,7 +11276,7 @@ const imgPlaceholderStyle = {
     aspectRatio: '1',
     objectFit: 'cover',
     borderRadius: BORDER_RADIUS$1.sm,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
 };
 function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
     const ar = aspectRatio
@@ -11235,7 +11296,7 @@ function MinimalLayout({ images, title, price, product, imageVariant, displayCon
     return (React.createElement(React.Fragment, null,
         React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
         React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
-        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'var(--seekora-text-secondary, #6b7280)' } },
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'inherit', opacity: 0.6 } },
             product.currency ?? '$',
             price.toFixed(2)))));
 }
@@ -11255,7 +11316,7 @@ function StandardLayout({ images, title, price, comparePrice, brand, badges, opt
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap } },
-            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'inherit', opacity: 0.6, textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
             React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
             React.createElement("div", { className: "seekora-product-card__price" },
                 React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: priceFontSize } })),
@@ -11274,7 +11335,7 @@ function DetailedLayout({ images, title, price, comparePrice, brand, badges, pri
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
-            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'inherit', opacity: 0.6, textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
             React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
             cfg.showRating !== false && product.rating != null && (React.createElement(RatingDisplay, { rating: product.rating, reviewCount: product.reviewCount, variant: "compact", size: "small", showNumeric: false, showReviewCount: true, className: "seekora-product-card__rating" })),
             React.createElement("div", { className: "seekora-product-card__price" }, cfg.showPriceRange && priceRange ? (React.createElement(PriceDisplay, { priceRange: priceRange, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, style: { fontSize: '0.875rem' } })) : (React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } }))),
@@ -11296,7 +11357,7 @@ function CompactLayout({ images, title, price, product, imageVariant, displayCon
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
             } }, title),
-        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price", style: { fontSize: '0.8125rem', color: 'inherit', opacity: 0.6 } },
             product.currency ?? '$',
             price.toFixed(2)))));
 }
@@ -11320,7 +11381,7 @@ function HorizontalLayout({ images, title, price, comparePrice, brand, badges, o
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 1 })),
             actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap, flex: 1, minWidth: 0 } },
-            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, brand)),
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, brand)),
             React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isMobile ? 3 : 2, WebkitBoxOrient: 'vertical' } }, title),
             React.createElement("div", { className: "seekora-product-card__price" },
                 React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: priceFontSize } })),
@@ -11356,7 +11417,7 @@ const imgStyle = {
     aspectRatio: '1',
     objectFit: 'cover',
     borderRadius: BORDER_RADIUS.sm,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
 };
 function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'inline', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
     // Find selected variant if selections are provided
@@ -11405,7 +11466,7 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
     const [isHovered, setIsHovered] = React.useState(false);
     const cardHoverStyle = isHovered
         ? {
-            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, #f9fafb))',
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
             boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
         }
         : {};
@@ -11419,7 +11480,7 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
             }, "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", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel })) : (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)' } },
+            price != null && !Number.isNaN(price) ? (React.createElement("span", { className: "seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'inherit', opacity: 0.6 } },
                 product.currency ?? '$',
                 price.toFixed(2))) : null));
     }
@@ -11555,7 +11616,7 @@ function CategoriesTabs({ className, style, tabClassName }) {
                 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)',
+                color: isActive ? 'var(--seekora-primary, #3b82f6)' : 'inherit',
                 cursor: 'pointer',
                 fontSize: '0.875rem',
                 fontWeight: isActive ? 600 : 400,
@@ -11579,7 +11640,7 @@ const itemStyle$1 = {
     fontSize: 'inherit',
     fontFamily: 'inherit',
     backgroundColor: 'transparent',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'inherit',
     transition: 'background-color 120ms ease',
 };
 function RecentSearchItem({ search, onSelect }) {
@@ -11587,7 +11648,7 @@ function RecentSearchItem({ search, onSelect }) {
     return (React.createElement("li", null,
         React.createElement("button", { type: "button", className: clsx('seekora-suggestions-recent-item', isHovered && 'seekora-suggestions-recent-item--hover'), style: {
                 ...itemStyle$1,
-                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
             }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
                 e.preventDefault();
                 onSelect();
@@ -11599,7 +11660,7 @@ function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style,
     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,
+        title ? (React.createElement("div", { className: "seekora-suggestions-recent-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, title)) : null,
         React.createElement("ul", { className: clsx('seekora-suggestions-recent-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((search, i) => {
             const onSelect = () => selectRecentSearch(search);
             if (renderItem) {
@@ -11623,7 +11684,7 @@ const itemStyle = {
     fontSize: 'inherit',
     fontFamily: 'inherit',
     backgroundColor: 'transparent',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'inherit',
     transition: 'background-color 120ms ease',
 };
 function TrendingItem({ trending, onSelect }) {
@@ -11631,13 +11692,13 @@ function TrendingItem({ trending, onSelect }) {
     return (React.createElement("li", null,
         React.createElement("button", { type: "button", className: clsx('seekora-suggestions-trending-item', isHovered && 'seekora-suggestions-trending-item--hover'), style: {
                 ...itemStyle,
-                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
             }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
                 e.preventDefault();
                 onSelect();
             } },
             trending.query,
-            trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875em' } }, trending.count)) : null)));
+            trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, trending.count)) : null)));
 }
 function TrendingList({ title = 'Trending', maxItems = 8, className, style, listClassName, renderItem, }) {
     const { trendingSearches, selectTrendingSearch } = useSuggestionsContext();
@@ -11645,7 +11706,7 @@ function TrendingList({ title = 'Trending', maxItems = 8, className, style, list
     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,
+        title ? (React.createElement("div", { className: "seekora-suggestions-trending-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, title)) : null,
         React.createElement("ul", { className: clsx('seekora-suggestions-trending-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((trending, i) => {
             const onSelect = () => selectTrendingSearch(trending, i);
             if (renderItem) {
@@ -16642,6 +16703,15 @@ function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSe
             }))))))));
 }
 
+function SeekoraLogo() {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 563 636", width: "20", height: "22", "aria-hidden": "true" },
+        React.createElement("path", { fill: "#03d1ff", d: "M243.44,231.23l-99.23,98.52-9.41,9.41c-14.83,14.83-38.57,13.17-51.4-1.5-2.39-2.73-4.39-5.89-5.89-9.49-.05-.16-.13-.32-.18-.47-1.55-3.68-2.95-7.41-4.29-11.2-7.39-21.24-11.33-44.04-11.25-67.81h.24c-.05-.6-.05-1.24-.08-1.87-.08-2.13-.11-4.29-.11-6.44,0-126.81,102.78-229.59,229.6-229.59,30.84,0,60.29,6.07,87.16,17.14-10.18,10.36-15.22,25.4-12.23,40.7,1.42,7.05,4.39,13.41,8.55,18.75,1.26,1.68,2.68,3.26,4.18,4.73-.58-.34-1.16-.68-1.76-1-25.29-14.62-54.64-22.95-85.9-22.95-95.13,0-172.22,77.12-172.22,172.22,0,1.95.03,3.87.11,5.78v.05c.39,11.94,2,23.59,4.73,34.79l.82-.82,23.14-23.16,47.14-47.14,20.09-20.06c11.31-11.31,27.69-15.57,42.99-11.2.05.03.13.03.18.05.24.05.45.11.68.18,9.47,2.87,17.46,8.73,22.95,16.49,3.6,5.02,6.15,10.83,7.39,17.06l5.94,30.21,1.5,7.57.11.63,1.97-2.05,69.62-72.57,15.28-15.93,33.68-35.15,5.47-5.68,11.31-11.78,23.32-24.32,4.23-4.39,7.94-8.28-6.07,1.18-12.46,2.45-2.18.42-16.36,3.23-.03.03-18.64,3.68c-11.86,2.34-23.4-5.39-25.77-17.25-2.08-10.52,3.73-20.75,13.33-24.64,1.26-.5,2.58-.89,3.97-1.16l45.54-8.99,34.44-6.81,14.99-2.92,23.06-4.58c.58-.11,1.16-.21,1.71-.26.5-.05,1-.11,1.5-.13,1-.05,2-.03,3,.05,4.47.39,8.78,2.18,12.3,5.18,3.76,3.21,6.28,7.52,7.26,12.25.13.68.24,1.37.31,2.05.11,1.05.13,2.1.11,3.16l-1.05,28.08-.66,18.64-.24,6.68-2.26,62.63-.03,1.1c-.39,11.83-10.12,21.14-21.9,21.14-.26,0-.53-.03-.79-.03-5.13-.18-9.75-2.1-13.36-5.15-4.97-4.18-8.05-10.54-7.76-17.54l.11-2.76.42-11.86.58-16.33.58-16.3-235.99,252.7-24.03-127.37Z" }),
+        React.createElement("path", { fill: "#4d66fe", d: "M11.11,572.49c-1.27-6.46.68-13.13,5.22-17.89l105.47-110.63,15.28-15.93,33.68-35.15,5.47-5.68,34.63-36.1,8.23-8.57,11.91,57.94.63,1.42h0c10.78,4,22.09,6.94,33.76,8.73v57.87c-27.58-3.1-53.69-11.12-77.43-23.14L21.34,623.95l-10.23-51.46Z" }),
+        React.createElement("path", { fill: "#4d66fe", d: "M325.32,330.56v136.38c-10.31,1.44-20.85,2.17-31.56,2.17-1.56,0-3.13,0-4.69-.08v-101.86l36.25-36.61Z" }),
+        React.createElement("polygon", { fill: "#4d66fe", points: "381.47 451.71 381.47 385.94 381.55 270.05 345.17 308.07 345.17 463.34 381.47 451.71" }),
+        React.createElement("polygon", { fill: "#4d66fe", points: "437.61 418.26 437.65 321.78 437.69 213.67 401.32 251.68 401.32 442.32 437.61 418.26" }),
+        React.createElement("path", { fill: "#4d66fe", d: "M493.87,157.13l-.08,108.11v86.38c-9.91,17.8-22.14,34.13-36.29,48.56v-205l36.37-38.05Z" })));
+}
 function Footer({ translations = {} }) {
     return (React.createElement("footer", { className: "seekora-docsearch-footer" },
         React.createElement("div", { className: "seekora-docsearch-footer-commands" },
@@ -16662,7 +16732,8 @@ function Footer({ translations = {} }) {
         React.createElement("div", { className: "seekora-docsearch-footer-logo" },
             React.createElement("span", { className: "seekora-docsearch-footer-logo-text" }, translations.searchByText || 'Search by'),
             React.createElement("a", { href: "https://seekora.ai", target: "_blank", rel: "noopener noreferrer", className: "seekora-docsearch-footer-logo-link" },
-                React.createElement("span", { className: "seekora-docsearch-logo", style: { fontFamily: 'system-ui', fontSize: 14, fontWeight: 600 } }, "Seekora")))));
+                React.createElement(SeekoraLogo, null),
+                React.createElement("span", { className: "seekora-docsearch-logo", style: { fontWeight: 600 } }, "Seekora")))));
 }
 
 function useKeyboard(options) {
@@ -16806,18 +16877,31 @@ function useDocSearch(options) {
     const abortControllersRef = React.useRef(new Map());
     const debounceTimerRef = React.useRef(null);
     const defaultTransform = (data, sourceId) => {
-        const items = data.data?.suggestions || data.data?.results || data.suggestions || data.results || data.hits || [];
-        return items.map((item) => ({
-            url: item.url || item.route || '',
-            title: item.title?.replace?.(/<\/?mark>/g, '') || item.title || '',
-            content: item.content?.replace?.(/<\/?mark>/g, '')?.substring?.(0, 100) || item.description || '',
-            description: item.description || item.content?.substring?.(0, 100) || '',
-            category: item.category || item.hierarchy?.lvl0 || '',
-            hierarchy: item.hierarchy,
-            route: item.route,
-            parentTitle: item.parent_title || item.parentTitle,
-            _source: sourceId,
-        }));
+        const items = data.data?.suggestions || data.data?.results || data.data?.hits || data.suggestions || data.results || data.hits || [];
+        return items.map((item) => {
+            const doc = item.document || item;
+            // Build hierarchy from nested object or flat dot-notation keys
+            const hierarchy = doc.hierarchy || {
+                lvl0: doc['hierarchy.lvl0'],
+                lvl1: doc['hierarchy.lvl1'],
+                lvl2: doc['hierarchy.lvl2'],
+                lvl3: doc['hierarchy.lvl3'],
+                lvl4: doc['hierarchy.lvl4'],
+                lvl5: doc['hierarchy.lvl5'],
+            };
+            return {
+                url: doc.url || doc.route || item.url || '',
+                title: (doc.title || '').replace?.(/<\/?mark>/g, '') || '',
+                content: (doc.content || doc.description || '').replace?.(/<\/?mark>/g, '')?.substring?.(0, 100) || '',
+                description: doc.description || doc.content?.substring?.(0, 100) || '',
+                category: doc.category || hierarchy?.lvl0 || '',
+                hierarchy,
+                route: doc.route,
+                parentTitle: doc.parent_title || doc.parentTitle,
+                anchor: doc.anchor || item.anchor,
+                _source: sourceId,
+            };
+        });
     };
     const transformPublicSearchResults = React.useCallback((data, sourceId) => {
         const results = data?.data?.results || [];