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

package/dist/src/index.esm.js

@@ -6261,8 +6261,7 @@ const EVENTS = {
     TRENDING_CLICK: 'suggestions.trending_click',
     SEARCH_SUBMIT: 'suggestions.search_submit',
     DROPDOWN_OPEN: 'suggestions.dropdown_open',
-    DROPDOWN_CLOSE: 'suggestions.dropdown_close',
-};
+    DROPDOWN_CLOSE: 'suggestions.dropdown_close'};
 // ============================================================================
 // Hook Implementation
 // ============================================================================
@@ -7232,6 +7231,362 @@ function SuggestionList({ maxItems = 10, className, style, listClassName, enable
         }))));
 }
 
+/**
+ * ImageZoom – zoom on hover and click (Amazon-style magnifier + lightbox)
+ *
+ * Supports three zoom modes:
+ * - hover: Magnified view in a separate panel on the right (Amazon style)
+ * - lens: Magnifying glass that follows cursor
+ * - click: Full-screen lightbox modal
+ */
+function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, style, showZoomIndicator = true, lensSize = 150, zoomPanelSize = { width: 400, height: 400 }, images, currentIndex = 0, }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+    const [lightboxIndex, setLightboxIndex] = useState(currentIndex);
+    const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [touchStart, setTouchStart] = useState(null);
+    const [touchEnd, setTouchEnd] = useState(null);
+    const imageRef = useRef(null);
+    const containerRef = useRef(null);
+    const allImages = images && images.length > 0 ? images : [src];
+    const hasMultipleImages = allImages.length > 1;
+    // Minimum swipe distance (in px) to trigger navigation
+    const minSwipeDistance = 50;
+    const supportsHover = mode === 'hover' || mode === 'both';
+    const supportsClick = mode === 'click' || mode === 'both';
+    const supportsLens = mode === 'lens';
+    const handleMouseMove = useCallback((e) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        setCursorPos({ x, y });
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        setIsHovering(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovering(false);
+    }, []);
+    const handleClick = useCallback((e) => {
+        if (supportsClick) {
+            e?.stopPropagation();
+            setLightboxIndex(currentIndex);
+            setIsLightboxOpen(true);
+        }
+    }, [supportsClick, currentIndex]);
+    const closeLightbox = useCallback((e) => {
+        e?.stopPropagation();
+        setIsLightboxOpen(false);
+    }, []);
+    const goToNext = useCallback(() => {
+        setLightboxIndex((i) => (i + 1) % allImages.length);
+    }, [allImages.length]);
+    const goToPrev = useCallback(() => {
+        setLightboxIndex((i) => (i - 1 + allImages.length) % allImages.length);
+    }, [allImages.length]);
+    // Touch event handlers for swipe
+    const handleTouchStart = useCallback((e) => {
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientX);
+    }, []);
+    const handleTouchMove = useCallback((e) => {
+        setTouchEnd(e.targetTouches[0].clientX);
+    }, []);
+    const handleTouchEnd = useCallback(() => {
+        if (!touchStart || !touchEnd)
+            return;
+        const distance = touchStart - touchEnd;
+        const isLeftSwipe = distance > minSwipeDistance;
+        const isRightSwipe = distance < -minSwipeDistance;
+        if (isLeftSwipe) {
+            goToNext();
+        }
+        else if (isRightSwipe) {
+            goToPrev();
+        }
+    }, [touchStart, touchEnd, minSwipeDistance, goToNext, goToPrev]);
+    // Close lightbox on Escape key, navigate with arrow keys
+    useEffect(() => {
+        if (!isLightboxOpen)
+            return;
+        const handleKeyboard = (e) => {
+            if (e.key === 'Escape')
+                closeLightbox();
+            if (hasMultipleImages) {
+                if (e.key === 'ArrowRight')
+                    goToNext();
+                if (e.key === 'ArrowLeft')
+                    goToPrev();
+            }
+        };
+        window.addEventListener('keydown', handleKeyboard);
+        return () => window.removeEventListener('keydown', handleKeyboard);
+    }, [isLightboxOpen, closeLightbox, hasMultipleImages, goToNext, goToPrev]);
+    const containerStyle = {
+        position: 'relative',
+        display: 'inline-block',
+        cursor: supportsClick ? 'zoom-in' : supportsHover || supportsLens ? 'crosshair' : 'default',
+        overflow: 'hidden',
+        ...style,
+    };
+    const imageStyle = {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block',
+    };
+    // Calculate zoom panel background position (Amazon-style)
+    const getZoomPanelStyle = () => {
+        if (!containerRef.current || !imageLoaded)
+            return { display: 'none' };
+        const rect = containerRef.current.getBoundingClientRect();
+        const bgPosX = (cursorPos.x / rect.width) * 100;
+        const bgPosY = (cursorPos.y / rect.height) * 100;
+        return {
+            position: 'fixed', // Changed from absolute to fixed for better positioning
+            top: rect.top,
+            left: rect.right + 16, // 16px gap from the image
+            width: zoomPanelSize.width,
+            height: zoomPanelSize.height,
+            backgroundImage: `url(${src})`,
+            backgroundSize: `${zoomLevel * 100}%`,
+            backgroundPosition: `${bgPosX}% ${bgPosY}%`,
+            backgroundRepeat: 'no-repeat',
+            border: '2px solid var(--seekora-border-color, #e5e7eb)',
+            borderRadius: 8,
+            boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
+            backgroundColor: '#fff',
+            pointerEvents: 'none',
+            zIndex: 9998,
+        };
+    };
+    // Calculate lens position and zoom
+    const getLensStyle = () => {
+        if (!containerRef.current)
+            return { display: 'none' };
+        return {
+            position: 'absolute',
+            width: lensSize,
+            height: lensSize,
+            left: cursorPos.x - lensSize / 2,
+            top: cursorPos.y - lensSize / 2,
+            border: '2px solid rgba(255,255,255,0.8)',
+            borderRadius: '50%',
+            boxShadow: '0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.3)',
+            pointerEvents: 'none',
+            overflow: 'hidden',
+            zIndex: 100,
+        };
+    };
+    const getLensImageStyle = () => {
+        if (!containerRef.current || !imageRef.current)
+            return {};
+        const rect = containerRef.current.getBoundingClientRect();
+        imageRef.current.getBoundingClientRect();
+        return {
+            position: 'absolute',
+            width: rect.width * zoomLevel,
+            height: rect.height * zoomLevel,
+            left: -(cursorPos.x * zoomLevel - lensSize / 2),
+            top: -(cursorPos.y * zoomLevel - lensSize / 2),
+            objectFit: 'cover',
+        };
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: containerRef, className: clsx('seekora-image-zoom', className), style: containerStyle, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick },
+            React.createElement("img", { ref: imageRef, src: src, alt: alt, style: imageStyle, onLoad: () => setImageLoaded(true) }),
+            showZoomIndicator && supportsClick && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 8,
+                    right: 8,
+                    width: 32,
+                    height: 32,
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(0,0,0,0.6)',
+                    color: '#fff',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '1.25rem',
+                    pointerEvents: 'none',
+                    opacity: isHovering ? 1 : 0.7,
+                    transition: 'opacity 150ms',
+                } }, "\uD83D\uDD0D")),
+            supportsLens && isHovering && imageLoaded && (React.createElement("div", { style: getLensStyle() },
+                React.createElement("img", { src: src, alt: "", style: getLensImageStyle() }))),
+            supportsHover && isHovering && imageLoaded && containerRef.current && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    left: cursorPos.x - 75,
+                    top: cursorPos.y - 75,
+                    width: 150,
+                    height: 150,
+                    border: '2px solid rgba(0,0,0,0.3)',
+                    backgroundColor: 'rgba(255,255,255,0.1)',
+                    pointerEvents: 'none',
+                    zIndex: 50,
+                } })),
+            supportsHover && isHovering && imageLoaded && (React.createElement("div", { style: getZoomPanelStyle() }))),
+        isLightboxOpen && (React.createElement("div", { className: "seekora-image-zoom-lightbox", style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: 'rgba(0,0,0,0.95)',
+                zIndex: 9999,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'zoom-out',
+                padding: 20,
+            }, onClick: closeLightbox, onTouchStart: hasMultipleImages ? handleTouchStart : undefined, onTouchMove: hasMultipleImages ? handleTouchMove : undefined, onTouchEnd: hasMultipleImages ? handleTouchEnd : undefined },
+            React.createElement("button", { type: "button", "aria-label": "Close zoom", style: {
+                    position: 'absolute',
+                    top: 20,
+                    right: 20,
+                    width: 44,
+                    height: 44,
+                    borderRadius: '50%',
+                    border: 'none',
+                    backgroundColor: 'rgba(255,255,255,0.2)',
+                    color: '#fff',
+                    fontSize: '1.5rem',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'background-color 150ms',
+                    zIndex: 10001,
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    closeLightbox();
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                } }, "\u2715"),
+            hasMultipleImages && (React.createElement(React.Fragment, null,
+                React.createElement("button", { type: "button", "aria-label": "Previous image", style: {
+                        position: 'absolute',
+                        left: 20,
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: 56,
+                        height: 56,
+                        borderRadius: '50%',
+                        border: 'none',
+                        backgroundColor: 'rgba(255,255,255,0.2)',
+                        color: '#fff',
+                        fontSize: '2rem',
+                        fontWeight: 'bold',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        transition: 'background-color 150ms',
+                        zIndex: 10001,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        goToPrev();
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                    } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next image", style: {
+                        position: 'absolute',
+                        right: 20,
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        width: 56,
+                        height: 56,
+                        borderRadius: '50%',
+                        border: 'none',
+                        backgroundColor: 'rgba(255,255,255,0.2)',
+                        color: '#fff',
+                        fontSize: '2rem',
+                        fontWeight: 'bold',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        transition: 'background-color 150ms',
+                        zIndex: 10001,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        goToNext();
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.3)';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+                    } }, "\u203A"))),
+            React.createElement("img", { src: allImages[lightboxIndex], alt: alt, style: {
+                    maxWidth: '90%',
+                    maxHeight: '90%',
+                    objectFit: 'contain',
+                    borderRadius: 4,
+                    cursor: 'default',
+                }, onClick: (e) => e.stopPropagation() }),
+            hasMultipleImages && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    bottom: 20,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 12,
+                }, onClick: (e) => e.stopPropagation() },
+                React.createElement("div", { style: { display: 'flex', gap: 8, overflowX: 'auto', maxWidth: '80vw', padding: '8px 0' } }, allImages.map((img, i) => (React.createElement("button", { key: i, type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        setLightboxIndex(i);
+                    }, style: {
+                        width: 60,
+                        height: 60,
+                        padding: 0,
+                        border: i === lightboxIndex ? '3px solid #fff' : '2px solid rgba(255,255,255,0.3)',
+                        borderRadius: 4,
+                        overflow: 'hidden',
+                        cursor: 'pointer',
+                        opacity: i === lightboxIndex ? 1 : 0.6,
+                        transition: 'all 150ms ease',
+                        flexShrink: 0,
+                        background: 'none',
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.opacity = '1';
+                    }, onMouseLeave: (e) => {
+                        if (i !== lightboxIndex)
+                            e.currentTarget.style.opacity = '0.6';
+                    } },
+                    React.createElement("img", { src: img, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } }))))),
+                React.createElement("div", { style: {
+                        color: 'rgba(255,255,255,0.9)',
+                        fontSize: '0.875rem',
+                        textAlign: 'center',
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        padding: '4px 12px',
+                        borderRadius: 12,
+                    } },
+                    lightboxIndex + 1,
+                    " / ",
+                    allImages.length))),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 20,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: '0.875rem',
+                    textAlign: 'center',
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    padding: '8px 16px',
+                    borderRadius: 12,
+                } }, hasMultipleImages ? 'Use arrow keys or click thumbnails to navigate • ESC to close' : 'Click outside or press ESC to close')))));
+}
+
 /**
  * ImageDisplay – configurable multi-image display (primitive)
  *
@@ -7245,7 +7600,7 @@ const imgBaseStyle = {
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, }) {
+function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, enableZoom = false, zoomMode = 'both', zoomLevel = 2.5, showDots = true, }) {
     const [index, setIndex] = useState(0);
     const [hovering, setHovering] = useState(false);
     const safeImages = Array.isArray(images) ? images.filter(Boolean) : [];
@@ -7254,13 +7609,21 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
         return React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-placeholder', className), style: { ...imgBaseStyle, ...style }, "aria-hidden": true });
     }
     if (variant === 'single') {
+        if (enableZoom) {
+            return (React.createElement(ImageZoom, { src: safeImages[0], alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: 0, className: clsx('seekora-img-display', 'seekora-img-single', className), style: { ...imgBaseStyle, ...style } }));
+        }
         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];
+        const hoverImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        if (enableZoom) {
+            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(ImageZoom, { src: src, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: showSecond ? 1 : 0, className: "seekora-img-hover-img", style: hoverImgStyle })));
+        }
         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" })));
+            React.createElement("img", { src: src, alt: alt, className: "seekora-img-hover-img", style: hoverImgStyle, loading: "lazy" })));
     }
     if (variant === 'carousel') {
         const go = (delta) => {
@@ -7273,16 +7636,41 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
                 return next;
             });
         };
+        const carouselImgStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-carousel-main", style: carouselImgStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-carousel-main", style: carouselImgStyle, loading: "lazy" }));
         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" }),
+            mainImage,
             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) })))));
+                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,1)'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.9)'; } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => e.stopPropagation(), onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,1)'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.9)'; } }, "\u203A"),
+                showDots && (React.createElement("div", { className: "seekora-img-carousel-dots", style: {
+                        position: 'absolute',
+                        bottom: 8,
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        display: 'flex',
+                        gap: 6,
+                        padding: '6px 12px',
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        borderRadius: 12,
+                        zIndex: 10,
+                    } }, safeImages.map((_, i) => (React.createElement("button", { key: i, type: "button", "aria-label": `Go to image ${i + 1}`, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); }, onClick: (e) => { e.stopPropagation(); setIndex(i); }, style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        border: 'none',
+                        padding: 0,
+                        backgroundColor: i === index ? '#fff' : 'rgba(255,255,255,0.5)',
+                        cursor: 'pointer',
+                        transition: 'all 150ms ease',
+                    } })))))))));
     }
     if (variant === 'thumbStrip' || variant === 'thumbList') {
+        const thumbMainStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
+        const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-thumb-main", style: thumbMainStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: thumbMainStyle, loading: "lazy" }));
         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) },
+            mainImage,
+            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: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => e.stopPropagation() },
                 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" });
@@ -7296,13 +7684,96 @@ function arrowStyle(left) {
         width: 32,
         height: 32,
         borderRadius: '50%',
-        border: '1px solid var(--seekora-border-color)',
-        backgroundColor: 'var(--seekora-bg-surface)',
+        border: 'none',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        color: '#111',
+        fontSize: '1.25rem',
+        fontWeight: 'bold',
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+        zIndex: 10,
+        transition: 'all 150ms ease',
+    };
+}
+
+/**
+ * ActionButtons – card action buttons (add to cart, wishlist, buy now, quick view)
+ *
+ * Renders a set of action buttons for product cards. Can be positioned absolutely
+ * over the image (on hover) or inline below the card content.
+ */
+const DEFAULT_ICONS = {
+    addToCart: '🛒',
+    wishlist: '♡',
+    buyNow: '⚡',
+    quickView: '👁',
+    compare: '⚖',
+};
+const DEFAULT_LABELS = {
+    addToCart: 'Add to Cart',
+    wishlist: 'Wishlist',
+    buyNow: 'Buy Now',
+    quickView: 'Quick View',
+    compare: 'Compare',
+};
+const BUTTON_SIZES = {
+    small: { width: 28, height: 28, fontSize: '0.75rem', iconSize: '1rem' },
+    medium: { width: 36, height: 36, fontSize: '0.875rem', iconSize: '1.25rem' },
+    large: { width: 44, height: 44, fontSize: '1rem', iconSize: '1.5rem' },
+};
+function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', showLabels = false, size = 'medium', className, style, }) {
+    const sizeConfig = BUTTON_SIZES[size];
+    const isOverlay = position !== 'inline';
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: layout === 'vertical' ? 'column' : 'row',
+        gap: 6,
+        ...(isOverlay ? {
+            position: 'absolute',
+            ...(position === 'top-right' ? { top: 8, right: 8 } : {}),
+            ...(position === 'bottom-center' ? { bottom: 8, left: '50%', transform: 'translateX(-50%)' } : {}),
+        } : {}),
+        ...style,
+    };
+    const buttonBaseStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        padding: showLabels ? '0 12px' : 0,
+        width: showLabels ? 'auto' : sizeConfig.width,
+        height: sizeConfig.height,
+        fontSize: sizeConfig.fontSize,
+        fontWeight: 500,
+        border: 'none',
+        borderRadius: 6,
+        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        color: 'var(--seekora-text, #111827)',
+        cursor: 'pointer',
+        transition: 'all 150ms ease',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    };
+    const handleClick = (btn, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (btn.onClick && !btn.disabled && !btn.loading) {
+            btn.onClick(e);
+        }
     };
+    return (React.createElement("div", { className: clsx('seekora-action-buttons', `seekora-action-buttons--${layout}`, className), style: containerStyle }, buttons.map((btn, i) => {
+        const icon = btn.icon ?? DEFAULT_ICONS[btn.type];
+        const label = btn.label ?? DEFAULT_LABELS[btn.type];
+        return (React.createElement("button", { key: i, type: "button", className: clsx('seekora-action-button', `seekora-action-button--${btn.type}`, btn.disabled && 'seekora-action-button--disabled', btn.loading && 'seekora-action-button--loading'), style: {
+                ...buttonBaseStyle,
+                opacity: btn.disabled ? 0.5 : 1,
+                cursor: btn.disabled ? 'not-allowed' : 'pointer',
+            }, onClick: (e) => handleClick(btn, e), disabled: btn.disabled, "aria-label": label, title: label }, btn.loading ? (React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, "\u23F3")) : (React.createElement(React.Fragment, null,
+            React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, icon),
+            showLabels && React.createElement("span", null, label)))));
+    })));
 }
 
 /**
@@ -7333,18 +7804,31 @@ const imgStyle$1 = {
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', }) {
+function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', layout = 'vertical', actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, }) {
     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 })),
+    const isHorizontal = layout === 'horizontal';
+    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', ...(isHorizontal ? { width: 80, flexShrink: 0 } : {}) } },
+        React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" }),
+        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 ? { width: 80, height: 80, flexShrink: 0 } : {}) }, "aria-hidden": true }));
+    const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 0 } : undefined },
         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));
+        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,
+        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: 12, alignItems: 'flex-start' } },
+        imageBlock,
+        textBlock)) : (React.createElement(React.Fragment, null,
+        imageBlock,
+        textBlock));
     const commonProps = {
-        className: clsx('seekora-item-card', className),
-        style: { ...cardStyle$1, ...style },
+        className: clsx('seekora-item-card', isHorizontal && 'seekora-item-card--horizontal', className),
+        style: {
+            ...cardStyle$1,
+            ...(isHorizontal ? { flexDirection: 'row' } : {}),
+            ...style,
+        },
         'data-position': position,
         onClick: onSelect,
         onMouseDown: onSelect ? (e) => { e.preventDefault(); onSelect(); } : undefined,
@@ -7396,563 +7880,259 @@ function ItemGrid({ items, onItemClick, getItemId = (i) => i.id, getItemTitle =
 }
 
 /**
- * ProductCard – one product tile (primitive)
- *
- * Minimal layout: image (via ImageDisplay when imageVariant set), title, price.
- * onClick calls context selectProduct. Overridable via className/style.
+ * Utility functions for Query Suggestions components
  */
-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',
+// ============================================================================
+// Field Extraction
+// ============================================================================
+/**
+ * Get nested value from object using dot notation
+ * @example getNestedValue({ a: { b: 'value' } }, 'a.b') => 'value'
+ */
+const getNestedValue = (obj, path) => {
+    if (!obj || !path)
+        return undefined;
+    return path.split('.').reduce((current, key) => {
+        if (current === null || current === undefined)
+            return undefined;
+        return current[key];
+    }, obj);
 };
-const imgStyle = {
-    width: '100%',
-    aspectRatio: '1',
-    objectFit: 'cover',
-    borderRadius: 4,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+/**
+ * Extract suggestion fields from raw data
+ */
+const extractSuggestion = (item, mapping = { query: 'query' }) => {
+    return {
+        query: getNestedValue(item, mapping.query) ?? '',
+        count: mapping.count ? getNestedValue(item, mapping.count) : undefined,
+        id: mapping.id ? getNestedValue(item, mapping.id) : item?.objectID || item?.id,
+        categories: mapping.categories ? getNestedValue(item, mapping.categories) : undefined,
+        highlighted: mapping.highlighted ? getNestedValue(item, mapping.highlighted) : undefined,
+        _raw: item,
+    };
 };
-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.
+ * Extract product fields from raw data
  */
-function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, }) {
-    const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
-    const products = 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,
+const extractProduct = (item, mapping = { id: 'id', title: 'title' }) => {
+    return {
+        id: getNestedValue(item, mapping.id) ?? item?.objectID ?? item?.id,
+        title: getNestedValue(item, mapping.title) ?? '',
+        image: mapping.image ? getNestedValue(item, mapping.image) : undefined,
+        price: mapping.price ? getNestedValue(item, mapping.price) : undefined,
+        comparePrice: mapping.comparePrice ? getNestedValue(item, mapping.comparePrice) : undefined,
+        url: mapping.url ? getNestedValue(item, mapping.url) : undefined,
+        brand: mapping.brand ? getNestedValue(item, mapping.brand) : undefined,
+        category: mapping.category ? getNestedValue(item, mapping.category) : undefined,
+        rating: mapping.rating ? getNestedValue(item, mapping.rating) : undefined,
+        reviewCount: mapping.reviewCount ? getNestedValue(item, mapping.reviewCount) : undefined,
+        discount: mapping.discount ? getNestedValue(item, mapping.discount) : undefined,
+        inStock: mapping.inStock ? getNestedValue(item, mapping.inStock) : undefined,
+        currency: mapping.currency ? getNestedValue(item, mapping.currency) : undefined,
+        images: mapping.images ? getNestedValue(item, mapping.images) : item?.images,
+        originalPrice: mapping.originalPrice ? getNestedValue(item, mapping.originalPrice) : (item?.original_price ?? item?.compare_at_price),
+        available: mapping.available ? getNestedValue(item, mapping.available) : item?.available,
+        options: mapping.options ? getNestedValue(item, mapping.options) : item?.options,
+        variants: mapping.variants ? getNestedValue(item, mapping.variants) : item?.variants,
+        tags: mapping.tags ? getNestedValue(item, mapping.tags) : item?.tags,
+        _raw: item,
     };
-    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.
+ * Extract category fields from raw data
  */
-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));
-    })));
-}
-
+const extractCategory = (item, mapping = { id: 'id', label: 'label' }) => {
+    return {
+        id: getNestedValue(item, mapping.id) ?? item?.id,
+        label: getNestedValue(item, mapping.label) ?? '',
+        count: mapping.count ? getNestedValue(item, mapping.count) : undefined,
+        icon: mapping.icon ? getNestedValue(item, mapping.icon) : undefined,
+        image: mapping.image ? getNestedValue(item, mapping.image) : undefined,
+        _raw: item,
+    };
+};
 /**
- * RecentSearchesList – list of recent queries (primitive)
- *
- * Reads recentSearches from context; each click calls selectRecentSearch. Optional title/render.
+ * Extract brand fields from raw data
  */
-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',
+const extractBrand = (item, mapping = { name: 'name' }) => {
+    return {
+        id: mapping.id ? getNestedValue(item, mapping.id) : item?.id,
+        name: getNestedValue(item, mapping.name) ?? '',
+        logo: mapping.logo ? getNestedValue(item, mapping.logo) : undefined,
+        count: mapping.count ? getNestedValue(item, mapping.count) : undefined,
+        _raw: item,
+    };
 };
-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)));
-        }))));
-}
-
+// ============================================================================
+// Formatting
+// ============================================================================
 /**
- * TrendingList – list of trending searches (primitive)
- *
- * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
+ * Format price with currency
  */
-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',
+const formatPrice = (value, config = {}) => {
+    if (value === undefined || value === null)
+        return '';
+    const { currency = '$', currencyPosition = 'before', priceDecimals = 2 } = config;
+    const num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
+        return String(value);
+    const formatted = num.toLocaleString(undefined, {
+        minimumFractionDigits: priceDecimals,
+        maximumFractionDigits: priceDecimals,
+    });
+    return currencyPosition === 'before'
+        ? `${currency}${formatted}`
+        : `${formatted}${currency}`;
 };
-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)
+ * Calculate discount percentage
  */
-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));
-}
-
+const calculateDiscount = (price, comparePrice) => {
+    if (!price || !comparePrice || comparePrice <= price)
+        return undefined;
+    return Math.round(((comparePrice - price) / comparePrice) * 100);
+};
+// ============================================================================
+// Text Processing
+// ============================================================================
 /**
- * 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.
+ * Escape HTML special characters
  */
-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))));
-}
-
+const escapeHtml = (text) => {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;',
+    };
+    return text.replace(/[&<>"']/g, (char) => map[char]);
+};
 /**
- * SectionSearchContext – preset query/filter section state
- *
- * For menus, sidebar, front-page blocks. Independent of main search state.
+ * Highlight matching text in a string
  */
-const SectionSearchContext = createContext(null);
-function useSectionSearchContext() {
-    const context = 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;
-}
-
+const highlightText = (text, query, options = {}) => {
+    if (!query || !text)
+        return escapeHtml(text);
+    const { tag = 'mark', className = '', style } = options;
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const styleAttr = style
+        ? ` style="${Object.entries(style).map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}:${v}`).join(';')}"`
+        : '';
+    const classAttr = className ? ` class="${className}"` : '';
+    return escapeHtml(text).replace(new RegExp(`(${escapeHtml(escapedQuery)})`, 'gi'), `<${tag}${classAttr}${styleAttr}>$1</${tag}>`);
+};
+// ============================================================================
+// Variant Utilities
+// ============================================================================
 /**
- * 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").
+ * Extract badges from product tags (Shopify convention: "badge:new", "badge:limited")
+ * and auto-generate sale/soldOut badges from product data.
  */
-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] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [totalCount, setTotalCount] = useState(0);
-    useEffect(() => {
-        if (!enabled || !client?.search) {
-            setItems([]);
-            setLoading(false);
-            setError(null);
-            setTotalCount(0);
-            return;
+const extractBadges = (tags, product) => {
+    const badges = [];
+    // Extract from tags (Shopify convention)
+    if (tags) {
+        for (const tag of tags) {
+            const lower = tag.toLowerCase().trim();
+            if (lower.startsWith('badge:') || lower.startsWith('badge: ')) {
+                const text = tag.slice(tag.indexOf(':') + 1).trim();
+                if (text) {
+                    badges.push({ text, type: 'custom' });
+                }
+            }
+            else if (lower === 'new' || lower === 'new arrival') {
+                badges.push({ text: 'New', type: 'new' });
+            }
+            else if (lower === 'limited' || lower === 'limited edition') {
+                badges.push({ text: 'Limited', type: 'limited' });
+            }
         }
-        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(',');
+    }
+    // Auto-generate sale badge
+    if (product) {
+        const comparePrice = product.original_price ?? product.compare_at_price;
+        if (comparePrice && product.price && comparePrice > product.price) {
+            const discount = Math.round(((comparePrice - product.price) / comparePrice) * 100);
+            badges.push({ text: `${discount}% Off`, type: 'sale' });
         }
-        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 = 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 = useMemo(() => ({
-        items,
-        loading,
-        error,
-        totalCount,
-        sectionId,
-        trackClick,
-    }), [items, loading, error, totalCount, sectionId, trackClick]);
-    return React.createElement(SectionSearchContext.Provider, { value: value }, children);
-}
-
+    }
+    // Auto-generate sold out badge
+    if (product && product.available === false) {
+        badges.push({ text: 'Sold Out', type: 'soldOut' });
+    }
+    return badges;
+};
 /**
- * SectionLoading – loading state for section (primitive)
+ * Compute min/max price from variants. Returns null if all variants have the same price.
  */
-function SectionLoading({ className, style, text = 'Loading...' }) {
-    const { loading } = useSectionSearchContext();
-    if (!loading)
+const getPriceRange = (variants) => {
+    if (!variants || variants.length === 0)
         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)
+    const prices = variants
+        .map((v) => v.price)
+        .filter((p) => p != null && !isNaN(p));
+    if (prices.length === 0)
         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)
+    const min = Math.min(...prices);
+    const max = Math.max(...prices);
+    if (min === max)
         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
- */
-// ============================================================================
-// Field Extraction
-// ============================================================================
-/**
- * Get nested value from object using dot notation
- * @example getNestedValue({ a: { b: 'value' } }, 'a.b') => 'value'
- */
-const getNestedValue = (obj, path) => {
-    if (!obj || !path)
-        return undefined;
-    return path.split('.').reduce((current, key) => {
-        if (current === null || current === undefined)
-            return undefined;
-        return current[key];
-    }, obj);
-};
-/**
- * Extract suggestion fields from raw data
- */
-const extractSuggestion = (item, mapping = { query: 'query' }) => {
-    return {
-        query: getNestedValue(item, mapping.query) ?? '',
-        count: mapping.count ? getNestedValue(item, mapping.count) : undefined,
-        id: mapping.id ? getNestedValue(item, mapping.id) : item?.objectID || item?.id,
-        categories: mapping.categories ? getNestedValue(item, mapping.categories) : undefined,
-        highlighted: mapping.highlighted ? getNestedValue(item, mapping.highlighted) : undefined,
-        _raw: item,
-    };
-};
-/**
- * Extract product fields from raw data
- */
-const extractProduct = (item, mapping = { id: 'id', title: 'title' }) => {
-    return {
-        id: getNestedValue(item, mapping.id) ?? item?.objectID ?? item?.id,
-        title: getNestedValue(item, mapping.title) ?? '',
-        image: mapping.image ? getNestedValue(item, mapping.image) : undefined,
-        price: mapping.price ? getNestedValue(item, mapping.price) : undefined,
-        comparePrice: mapping.comparePrice ? getNestedValue(item, mapping.comparePrice) : undefined,
-        url: mapping.url ? getNestedValue(item, mapping.url) : undefined,
-        brand: mapping.brand ? getNestedValue(item, mapping.brand) : undefined,
-        category: mapping.category ? getNestedValue(item, mapping.category) : undefined,
-        rating: mapping.rating ? getNestedValue(item, mapping.rating) : undefined,
-        reviewCount: mapping.reviewCount ? getNestedValue(item, mapping.reviewCount) : undefined,
-        discount: mapping.discount ? getNestedValue(item, mapping.discount) : undefined,
-        inStock: mapping.inStock ? getNestedValue(item, mapping.inStock) : undefined,
-        currency: mapping.currency ? getNestedValue(item, mapping.currency) : undefined,
-        _raw: item,
-    };
-};
-/**
- * Extract category fields from raw data
- */
-const extractCategory = (item, mapping = { id: 'id', label: 'label' }) => {
-    return {
-        id: getNestedValue(item, mapping.id) ?? item?.id,
-        label: getNestedValue(item, mapping.label) ?? '',
-        count: mapping.count ? getNestedValue(item, mapping.count) : undefined,
-        icon: mapping.icon ? getNestedValue(item, mapping.icon) : undefined,
-        image: mapping.image ? getNestedValue(item, mapping.image) : undefined,
-        _raw: item,
-    };
+    return { min, max };
 };
 /**
- * Extract brand fields from raw data
+ * Format a price range like "$54.00 - $72.00"
  */
-const extractBrand = (item, mapping = { name: 'name' }) => {
-    return {
-        id: mapping.id ? getNestedValue(item, mapping.id) : item?.id,
-        name: getNestedValue(item, mapping.name) ?? '',
-        logo: mapping.logo ? getNestedValue(item, mapping.logo) : undefined,
-        count: mapping.count ? getNestedValue(item, mapping.count) : undefined,
-        _raw: item,
-    };
+const formatPriceRange = (range, config = {}) => {
+    return `${formatPrice(range.min, config)} - ${formatPrice(range.max, config)}`;
 };
-// ============================================================================
-// Formatting
-// ============================================================================
 /**
- * Format price with currency
+ * Given current selections, return which values for an option are still available
+ * based on variant availability.
  */
-const formatPrice = (value, config = {}) => {
-    if (value === undefined || value === null)
-        return '';
-    const { currency = '$', currencyPosition = 'before', priceDecimals = 2 } = config;
-    const num = typeof value === 'string' ? parseFloat(value) : value;
-    if (isNaN(num))
-        return String(value);
-    const formatted = num.toLocaleString(undefined, {
-        minimumFractionDigits: priceDecimals,
-        maximumFractionDigits: priceDecimals,
+const getAvailableValuesForOption = (optionName, options, variants, selections) => {
+    const option = options.find((o) => o.name === optionName);
+    if (!option)
+        return [];
+    const optionIndex = options.indexOf(option);
+    const optionKey = `option${optionIndex + 1}`;
+    return option.values.map((value) => {
+        // Check if any variant with this value and current other selections is available
+        const available = variants.some((variant) => {
+            if (variant[optionKey] !== value)
+                return false;
+            if (variant.available === false)
+                return false;
+            // Check other selections match
+            for (const [selName, selValue] of Object.entries(selections)) {
+                if (selName === optionName)
+                    continue;
+                const selOption = options.find((o) => o.name === selName);
+                if (!selOption)
+                    continue;
+                const selIdx = options.indexOf(selOption);
+                const selKey = `option${selIdx + 1}`;
+                if (variant[selKey] !== selValue)
+                    return false;
+            }
+            return true;
+        });
+        return { value, available };
     });
-    return currencyPosition === 'before'
-        ? `${currency}${formatted}`
-        : `${formatted}${currency}`;
-};
-/**
- * Calculate discount percentage
- */
-const calculateDiscount = (price, comparePrice) => {
-    if (!price || !comparePrice || comparePrice <= price)
-        return undefined;
-    return Math.round(((comparePrice - price) / comparePrice) * 100);
-};
-// ============================================================================
-// Text Processing
-// ============================================================================
-/**
- * Escape HTML special characters
- */
-const escapeHtml = (text) => {
-    const map = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#39;',
-    };
-    return text.replace(/[&<>"']/g, (char) => map[char]);
 };
 /**
- * Highlight matching text in a string
+ * Find the exact variant matching all selected options.
  */
-const highlightText = (text, query, options = {}) => {
-    if (!query || !text)
-        return escapeHtml(text);
-    const { tag = 'mark', className = '', style } = options;
-    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const styleAttr = style
-        ? ` style="${Object.entries(style).map(([k, v]) => `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}:${v}`).join(';')}"`
-        : '';
-    const classAttr = className ? ` class="${className}"` : '';
-    return escapeHtml(text).replace(new RegExp(`(${escapeHtml(escapedQuery)})`, 'gi'), `<${tag}${classAttr}${styleAttr}>$1</${tag}>`);
+const findVariantBySelections = (options, variants, selections) => {
+    return variants.find((variant) => {
+        return options.every((option, idx) => {
+            const key = `option${idx + 1}`;
+            const selected = selections[option.name];
+            if (!selected)
+                return true; // not yet selected
+            return variant[key] === selected;
+        });
+    }) ?? null;
 };
 // ============================================================================
 // Theme & Styling
@@ -8111,80 +8291,1409 @@ class SuggestionsCache {
             this.cache.delete(key);
             return null;
         }
-        return entry.data;
-    }
-    /**
-     * Store data in cache
-     */
-    set(key, data, ttlMs) {
-        // Evict oldest entries if at max size
-        if (this.cache.size >= this.maxSize) {
-            const oldestKey = this.cache.keys().next().value;
-            if (oldestKey)
-                this.cache.delete(oldestKey);
+        return entry.data;
+    }
+    /**
+     * Store data in cache
+     */
+    set(key, data, ttlMs) {
+        // Evict oldest entries if at max size
+        if (this.cache.size >= this.maxSize) {
+            const oldestKey = this.cache.keys().next().value;
+            if (oldestKey)
+                this.cache.delete(oldestKey);
+        }
+        this.cache.set(key, {
+            data,
+            timestamp: Date.now(),
+            ttl: ttlMs ?? this.defaultTtl,
+        });
+    }
+    /**
+     * Check if key exists and is valid
+     */
+    has(key) {
+        return this.get(key) !== null;
+    }
+    /**
+     * Clear all cached entries
+     */
+    clear() {
+        this.cache.clear();
+    }
+    /**
+     * Clear expired entries
+     */
+    cleanup() {
+        const now = Date.now();
+        for (const [key, entry] of this.cache.entries()) {
+            if (now - entry.timestamp > entry.ttl) {
+                this.cache.delete(key);
+            }
+        }
+    }
+    /**
+     * Get cache statistics
+     */
+    getStats() {
+        return {
+            size: this.cache.size,
+            maxSize: this.maxSize,
+        };
+    }
+}
+// Global cache instance for suggestions (shared across components)
+let globalSuggestionsCache = null;
+/**
+ * Get the global suggestions cache instance
+ */
+const getSuggestionsCache = (options) => {
+    if (!globalSuggestionsCache) {
+        globalSuggestionsCache = new SuggestionsCache(options);
+    }
+    return globalSuggestionsCache;
+};
+/**
+ * Create a new cache instance (for isolated caching per component)
+ */
+const createSuggestionsCache = (options) => {
+    return new SuggestionsCache(options);
+};
+/**
+ * Clear the global cache
+ */
+const clearSuggestionsCache = () => {
+    globalSuggestionsCache?.clear();
+};
+
+/**
+ * PriceDisplay – reusable price display primitive
+ *
+ * Handles single price, compare price with strikethrough, discount percentage,
+ * and price range display.
+ */
+const formatNum = (value, currency, position, decimals) => {
+    const formatted = value.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    });
+    return position === 'before' ? `${currency}${formatted}` : `${formatted}${currency}`;
+};
+function PriceDisplay({ price, comparePrice, priceRange, currency = '$', currencyPosition = 'before', priceDecimals = 2, showDiscount = true, className, style, }) {
+    const fmt = (v) => formatNum(v, currency, currencyPosition, priceDecimals);
+    // Price range mode
+    if (priceRange) {
+        return (React.createElement("span", { className: clsx('seekora-price-display', 'seekora-price-range', className), style: style },
+            fmt(priceRange.min),
+            " \u2013 ",
+            fmt(priceRange.max)));
+    }
+    if (price == null)
+        return null;
+    const hasCompare = comparePrice != null && comparePrice > price;
+    const discount = hasCompare ? Math.round(((comparePrice - price) / comparePrice) * 100) : 0;
+    return (React.createElement("span", { className: clsx('seekora-price-display', className), style: { display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', ...style } },
+        React.createElement("span", { className: "seekora-price-current", style: { fontWeight: 600 } }, fmt(price)),
+        hasCompare && (React.createElement("span", { className: "seekora-price-compare", style: {
+                textDecoration: 'line-through',
+                color: 'var(--seekora-text-secondary, #6b7280)',
+                fontSize: '0.875em',
+            } }, fmt(comparePrice))),
+        hasCompare && showDiscount && discount > 0 && (React.createElement("span", { className: "seekora-price-discount", style: {
+                color: 'var(--seekora-error, #ef4444)',
+                fontSize: '0.8125em',
+                fontWeight: 600,
+            } },
+            "-",
+            discount,
+            "%"))));
+}
+
+/**
+ * BadgeList – renders product badges (sale, new, sold out, custom)
+ */
+const positionStyles = {
+    'top-left': { position: 'absolute', top: 6, left: 6 },
+    'top-right': { position: 'absolute', top: 6, right: 6 },
+    'bottom-left': { position: 'absolute', bottom: 6, left: 6 },
+    'bottom-right': { position: 'absolute', bottom: 6, right: 6 },
+    inline: {},
+};
+const typeColors = {
+    sale: { bg: '#ef4444', text: '#fff' },
+    new: { bg: '#3b82f6', text: '#fff' },
+    soldOut: { bg: '#6b7280', text: '#fff' },
+    limited: { bg: '#f59e0b', text: '#fff' },
+    custom: { bg: '#111827', text: '#fff' },
+};
+function BadgeList({ badges, maxBadges, position = 'top-left', className, style, }) {
+    if (!badges || badges.length === 0)
+        return null;
+    const visible = maxBadges ? badges.slice(0, maxBadges) : badges;
+    return (React.createElement("div", { className: clsx('seekora-badge-list', className), style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 4,
+            zIndex: 1,
+            ...positionStyles[position],
+            ...style,
+        } }, visible.map((badge, i) => {
+        const colors = typeColors[badge.type ?? 'custom'];
+        return (React.createElement("span", { key: `${badge.text}-${i}`, className: clsx('seekora-badge', badge.type && `seekora-badge--${badge.type === 'soldOut' ? 'sold-out' : badge.type}`), style: {
+                display: 'inline-block',
+                padding: '2px 8px',
+                borderRadius: 4,
+                fontSize: '0.6875rem',
+                fontWeight: 600,
+                lineHeight: 1.4,
+                backgroundColor: badge.color ?? colors.bg,
+                color: badge.textColor ?? colors.text,
+                whiteSpace: 'nowrap',
+            } }, badge.text));
+    })));
+}
+
+/**
+ * RatingDisplay – star rating display with review count
+ *
+ * Supports multiple variants: stars-only, compact, full, inline.
+ * Can be read-only (display) or interactive (for reviews).
+ */
+const sizeMap = {
+    small: 14,
+    medium: 18,
+    large: 24,
+};
+const fontSizeMap = {
+    small: '0.75rem',
+    medium: '0.875rem',
+    large: '1rem',
+};
+function StarIcon({ filled, half, size, color, emptyColor, interactive, onHover, onClick, }) {
+    if (half) {
+        return (React.createElement("span", { className: clsx('seekora-rating-star', 'seekora-rating-star--half', interactive && 'seekora-rating-star--interactive'), style: {
+                position: 'relative',
+                display: 'inline-block',
+                width: size,
+                height: size,
+                cursor: interactive ? 'pointer' : 'default',
+            }, onMouseEnter: onHover, onClick: onClick },
+            React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { position: 'absolute', top: 0, left: 0 } },
+                React.createElement("defs", null,
+                    React.createElement("linearGradient", { id: "half-fill" },
+                        React.createElement("stop", { offset: "50%", stopColor: color }),
+                        React.createElement("stop", { offset: "50%", stopColor: emptyColor }))),
+                React.createElement("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z", fill: "url(#half-fill)", stroke: color, strokeWidth: "1" }))));
+    }
+    return (React.createElement("span", { className: clsx('seekora-rating-star', filled ? 'seekora-rating-star--filled' : 'seekora-rating-star--empty', interactive && 'seekora-rating-star--interactive'), style: {
+            display: 'inline-block',
+            width: size,
+            height: size,
+            cursor: interactive ? 'pointer' : 'default',
+        }, onMouseEnter: onHover, onClick: onClick },
+        React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: filled ? color : 'none', xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z", stroke: filled ? color : emptyColor, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))));
+}
+function RatingDisplay({ rating, reviewCount, variant = 'compact', size = 'medium', maxRating = 5, showNumeric = false, showHalfStars = true, interactive = false, onRatingChange, starColor = '#f59e0b', emptyStarColor = '#d1d5db', textColor = 'var(--seekora-text-secondary, #6b7280)', showReviewCount = true, reviewCountFormat, className, style, }) {
+    const [hoverRating, setHoverRating] = useState(null);
+    const clampedRating = Math.max(0, Math.min(maxRating, rating));
+    const displayRating = interactive && hoverRating !== null ? hoverRating : clampedRating;
+    const starSize = sizeMap[size];
+    const fontSize = fontSizeMap[size];
+    const formatReviewCount = (count) => {
+        if (reviewCountFormat)
+            return reviewCountFormat(count);
+        if (count >= 1000000)
+            return `${(count / 1000000).toFixed(1)}M`;
+        if (count >= 1000)
+            return `${(count / 1000).toFixed(1)}K`;
+        return count.toString();
+    };
+    const renderStars = () => {
+        const stars = [];
+        for (let i = 1; i <= maxRating; i++) {
+            const filled = i <= Math.floor(displayRating);
+            const half = showHalfStars && i === Math.ceil(displayRating) && displayRating % 1 >= 0.25 && displayRating % 1 < 0.75;
+            stars.push(React.createElement(StarIcon, { key: i, filled: filled, half: half, size: starSize, color: starColor, emptyColor: emptyStarColor, interactive: interactive, onHover: interactive ? () => setHoverRating(i) : undefined, onClick: interactive
+                    ? () => {
+                        setHoverRating(null);
+                        onRatingChange?.(i);
+                    }
+                    : undefined }));
+        }
+        return stars;
+    };
+    const handleMouseLeave = () => {
+        if (interactive) {
+            setHoverRating(null);
+        }
+    };
+    if (variant === 'stars-only') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--stars-only', className), style: { display: 'inline-flex', alignItems: 'center', gap: 2, ...style }, onMouseLeave: handleMouseLeave }, renderStars()));
+    }
+    if (variant === 'compact') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--compact', className), style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize, ...style }, onMouseLeave: handleMouseLeave },
+            React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
+            showNumeric && (React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: textColor } }, clampedRating.toFixed(1))),
+            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-count", style: { color: textColor } },
+                "(",
+                formatReviewCount(reviewCount),
+                ")"))));
+    }
+    if (variant === 'full') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--full', className), style: { display: 'flex', flexDirection: 'column', gap: 4, fontSize, ...style }, onMouseLeave: handleMouseLeave },
+            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
+                React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: 'var(--seekora-text-primary, #111827)' } }, clampedRating.toFixed(1)),
+                React.createElement("span", { className: "seekora-rating-max", style: { color: textColor } },
+                    "/ ",
+                    maxRating)),
+            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-text", style: { fontSize: '0.875em', color: textColor } },
+                "Based on ",
+                formatReviewCount(reviewCount),
+                " ",
+                reviewCount === 1 ? 'review' : 'reviews'))));
+    }
+    if (variant === 'inline') {
+        return (React.createElement("div", { className: clsx('seekora-rating-display', 'seekora-rating-display--inline', className), style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize, ...style }, onMouseLeave: handleMouseLeave },
+            React.createElement("span", { className: "seekora-rating-numeric", style: { fontWeight: 600, color: 'var(--seekora-text-primary, #111827)' } }, clampedRating.toFixed(1)),
+            React.createElement("div", { style: { display: 'inline-flex', alignItems: 'center', gap: 2 } }, renderStars()),
+            showReviewCount && reviewCount != null && reviewCount > 0 && (React.createElement("span", { className: "seekora-rating-review-count", style: { color: textColor } },
+                "(",
+                formatReviewCount(reviewCount),
+                ")"))));
+    }
+    return null;
+}
+
+/**
+ * VariantSwatches – inline variant indicators for card display
+ *
+ * Shows color dots, size labels, and "+N more" overflow for compact card views.
+ */
+const COLOR_NAMES$1 = {
+    black: '#000', white: '#fff', red: '#ef4444', blue: '#3b82f6',
+    green: '#22c55e', yellow: '#eab308', orange: '#f97316', purple: '#a855f7',
+    pink: '#ec4899', brown: '#92400e', grey: '#6b7280', gray: '#6b7280',
+    navy: '#1e3a5f', beige: '#d4c5a9', cream: '#fffdd0', ivory: '#fffff0',
+    khaki: '#c3b091', olive: '#808000', teal: '#0d9488', coral: '#ff7f50',
+    maroon: '#800000', tan: '#d2b48c', charcoal: '#36454f', burgundy: '#800020',
+    sage: '#9caf88', lavender: '#e6e6fa', mint: '#98fb98', rust: '#b7410e',
+    plum: '#8e4585', slate: '#708090', indigo: '#4b0082', gold: '#ffd700',
+    silver: '#c0c0c0', rose: '#ff007f', mauve: '#e0b0ff', wine: '#722f37',
+    raven: '#0a0a0a', natural: '#f5f0e1', bone: '#e3dac9', sand: '#c2b280',
+};
+const isColorOption$1 = (name) => {
+    const lower = name.toLowerCase();
+    return lower === 'color' || lower === 'colour' || lower === 'colors' || lower === 'colours';
+};
+const resolveColor$1 = (value, colorMap) => {
+    if (colorMap?.[value])
+        return colorMap[value];
+    const lower = value.toLowerCase();
+    if (colorMap?.[lower])
+        return colorMap[lower];
+    return COLOR_NAMES$1[lower] ?? null;
+};
+const getAvailability$1 = (optionName, value, options, variants, selectedValues) => {
+    if (!variants || variants.length === 0)
+        return true;
+    const optionIndex = options.findIndex((o) => o.name === optionName);
+    if (optionIndex === -1)
+        return true;
+    const optionKey = `option${optionIndex + 1}`;
+    return variants.some((variant) => {
+        // Must match the current option value
+        if (variant[optionKey] !== value)
+            return false;
+        // Must be available
+        if (variant.available === false)
+            return false;
+        // Must match all other selected values
+        if (selectedValues) {
+            for (const [selName, selValue] of Object.entries(selectedValues)) {
+                if (selName === optionName)
+                    continue; // Skip current option
+                const selIdx = options.findIndex((o) => o.name === selName);
+                if (selIdx === -1)
+                    continue;
+                const selKey = `option${selIdx + 1}`;
+                if (variant[selKey] !== selValue)
+                    return false;
+            }
+        }
+        return true;
+    });
+};
+function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, selectedValues, variants, showAvailability = true, onSwatchHover, onSwatchClick, className, style, }) {
+    const [expandedOptions, setExpandedOptions] = useState(new Set());
+    if (!options || options.length === 0)
+        return null;
+    const filtered = visibleOptions
+        ? options.filter((o) => visibleOptions.includes(o.name))
+        : options;
+    if (filtered.length === 0)
+        return null;
+    const toggleExpanded = (optionName, e) => {
+        e.stopPropagation();
+        setExpandedOptions((prev) => {
+            const next = new Set(prev);
+            if (next.has(optionName)) {
+                next.delete(optionName);
+            }
+            else {
+                next.add(optionName);
+            }
+            return next;
+        });
+    };
+    return (React.createElement("div", { className: clsx('seekora-variant-swatches', className), style: { display: 'flex', flexDirection: 'column', gap: 4, ...style } }, filtered.map((option) => {
+        const isColor = isColorOption$1(option.name);
+        const isExpanded = expandedOptions.has(option.name);
+        const visible = isExpanded ? option.values : option.values.slice(0, maxValues);
+        const overflow = option.values.length - maxValues;
+        const hasOverflow = overflow > 0;
+        const selectedValue = selectedValues?.[option.name];
+        return (React.createElement("div", { key: option.name, className: "seekora-variant-swatch-group", style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
+            visible.map((value) => {
+                const color = isColor ? resolveColor$1(value, colorMap) : null;
+                const isSelected = selectedValue === value;
+                const isAvailable = showAvailability
+                    ? getAvailability$1(option.name, value, options, variants, selectedValues)
+                    : true;
+                if (color) {
+                    return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--color', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), title: `${value}${!isAvailable ? ' (Unavailable)' : ''}`, style: {
+                            display: 'inline-block',
+                            width: 14,
+                            height: 14,
+                            borderRadius: '50%',
+                            backgroundColor: color,
+                            border: isSelected
+                                ? '2px solid var(--seekora-primary, #111827)'
+                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            outline: isSelected ? '2px solid var(--seekora-primary, #111827)' : 'none',
+                            outlineOffset: 2,
+                            cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
+                            flexShrink: 0,
+                            boxShadow: isSelected ? '0 0 0 1px #fff' : 'none',
+                            opacity: isAvailable ? 1 : 0.3,
+                            position: 'relative',
+                        }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            if (isAvailable) {
+                                onSwatchClick?.(option.name, value);
+                            }
+                        } }, !isAvailable && (React.createElement("span", { style: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '-2px',
+                            right: '-2px',
+                            height: 1,
+                            backgroundColor: '#ef4444',
+                            transform: 'translateY(-50%) rotate(-45deg)',
+                        } }))));
+                }
+                return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--text', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), style: {
+                        display: 'inline-block',
+                        padding: '1px 6px',
+                        fontSize: '0.6875rem',
+                        borderRadius: 3,
+                        border: isSelected
+                            ? '1px solid var(--seekora-primary, #111827)'
+                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                        backgroundColor: isSelected
+                            ? 'var(--seekora-primary, #111827)'
+                            : 'transparent',
+                        color: isSelected
+                            ? '#fff'
+                            : 'var(--seekora-text-secondary, #6b7280)',
+                        cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
+                        whiteSpace: 'nowrap',
+                        fontWeight: isSelected ? 600 : 400,
+                        opacity: isAvailable ? 1 : 0.4,
+                        textDecoration: !isAvailable ? 'line-through' : 'none',
+                    }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        if (isAvailable) {
+                            onSwatchClick?.(option.name, value);
+                        }
+                    } }, value));
+            }),
+            hasOverflow && (React.createElement("button", { type: "button", className: "seekora-variant-swatch--overflow", onClick: (e) => toggleExpanded(option.name, e), style: {
+                    fontSize: '0.6875rem',
+                    color: 'var(--seekora-primary, #2563eb)',
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    textDecoration: 'underline',
+                    fontWeight: 500,
+                } }, isExpanded ? 'Show less' : `+${overflow} more`))));
+    })));
+}
+
+/**
+ * ProductCardLayouts – internal layout sub-components for ProductCard
+ *
+ * Not exported from the package. Each layout renders the same product data
+ * with different visual emphasis.
+ */
+const imgPlaceholderStyle = {
+    width: '100%',
+    aspectRatio: '1',
+    objectFit: 'cover',
+    borderRadius: 4,
+    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+};
+function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
+    const ar = aspectRatio ? aspectRatio.replace(':', '/') : '1';
+    if (images.length > 0) {
+        return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: 4 } },
+            React.createElement(ImageDisplay, { images: images, variant: images.length > 1 ? imageVariant : 'single', alt: title, className: "seekora-suggestions-product-card-image", style: { aspectRatio: ar }, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
+    }
+    return React.createElement("div", { className: "seekora-product-card__image seekora-suggestions-product-card-placeholder", style: { ...imgPlaceholderStyle, aspectRatio: ar }, "aria-hidden": true });
+}
+/** minimal: image, title, price (current default behavior) */
+function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
+    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: '0.875rem', fontWeight: 500 } }, title),
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
+            product.currency ?? '$',
+            price.toFixed(2)))));
+}
+/** standard: image, badges, brand, title, price + compare price, color swatches */
+function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
+    const cfg = displayConfig;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
+            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: 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)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, 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: '0.875rem' } })),
+            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
+            actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+}
+/** detailed: image, badges, brand, title, price + compare + discount, rating, all swatches, stock */
+function DetailedLayout({ images, title, price, comparePrice, brand, badges, priceRange, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
+    const cfg = displayConfig;
+    const available = product.available;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
+            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: 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)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, 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' } }))),
+            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
+            cfg.showStock !== false && available != null && (React.createElement("span", { className: "seekora-product-card__stock", style: {
+                    fontSize: '0.75rem',
+                    color: available ? 'var(--seekora-success, #22c55e)' : 'var(--seekora-error, #ef4444)',
+                } }, available ? 'In Stock' : 'Out of Stock')),
+            actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+}
+/** compact: smaller image, 1-line title, price */
+function CompactLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio ?? '1:1', enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+        React.createElement("span", { className: "seekora-product-card__title", style: {
+                fontSize: '0.8125rem',
+                fontWeight: 500,
+                overflow: 'hidden',
+                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)' } },
+            product.currency ?? '$',
+            price.toFixed(2)))));
+}
+/** horizontal: image left + content right (title, brand, price, swatches) */
+function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
+    const cfg = displayConfig;
+    return (React.createElement("div", { style: { display: 'flex', gap: 12, alignItems: 'flex-start' } },
+        React.createElement("div", { style: { position: 'relative', width: 80, flexShrink: 0 } },
+            React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: "1:1", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
+            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: 4, flex: 1, minWidth: 0 } },
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, brand)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, 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: '0.875rem' } })),
+            cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues ?? 3, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
+            actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
+}
+
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Without displayConfig: renders the original minimal layout (image, title, price).
+ * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
+ */
+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', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
+    // Find selected variant if selections are provided
+    const selectedVariant = useMemo(() => {
+        if (!selectedVariants || !product.options || !product.variants)
+            return null;
+        return findVariantBySelections(product.options, product.variants, selectedVariants);
+    }, [selectedVariants, product.options, product.variants]);
+    // Compute effective display data (use selected variant if available, otherwise product defaults)
+    const effectiveImages = useMemo(() => {
+        // Priority: selected variant image > product images > product image
+        if (selectedVariant?.image)
+            return [selectedVariant.image];
+        if (product.images?.length)
+            return product.images;
+        if (product.image ?? product.imageUrl)
+            return [String(product.image ?? product.imageUrl)];
+        return [];
+    }, [selectedVariant, product]);
+    const effectiveTitle = useMemo(() => {
+        // Show variant title if available (e.g., "T-Shirt - Black / M")
+        if (selectedVariant?.title && selectedVariant.title !== product.title) {
+            return `${product.title ?? product.name ?? ''} - ${selectedVariant.title}`;
+        }
+        return product.title ?? product.name ?? '';
+    }, [selectedVariant, product]);
+    const effectivePrice = useMemo(() => {
+        const variantPrice = selectedVariant?.price;
+        if (variantPrice != null)
+            return typeof variantPrice === 'number' ? variantPrice : Number(variantPrice);
+        const productPrice = product.price;
+        return productPrice != null ? (typeof productPrice === 'number' ? productPrice : Number(productPrice)) : null;
+    }, [selectedVariant, product.price]);
+    const effectiveComparePrice = useMemo(() => {
+        const variantCompare = selectedVariant?.comparePrice;
+        if (variantCompare != null)
+            return typeof variantCompare === 'number' ? variantCompare : Number(variantCompare);
+        const productCompare = product.original_price ?? product.compare_at_price;
+        return productCompare != null ? (typeof productCompare === 'number' ? productCompare : Number(productCompare)) : null;
+    }, [selectedVariant, product]);
+    // Legacy vars for backwards compat
+    const images = effectiveImages;
+    const title = effectiveTitle;
+    const price = effectivePrice;
+    // If no displayConfig, render original minimal layout (backwards compat)
+    if (!displayConfig) {
+        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", 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)' } },
+                product.currency ?? '$',
+                price.toFixed(2))) : null));
+    }
+    // Enhanced layout with displayConfig
+    const layoutStyle = displayConfig.style ?? 'minimal';
+    const comparePrice = effectiveComparePrice;
+    const brand = product.brand ?? null;
+    const options = product.options ?? [];
+    const variants = product.variants ?? [];
+    const badges = useMemo(() => {
+        if (displayConfig.showBadges === false)
+            return [];
+        if (displayConfig.badgeExtractor)
+            return displayConfig.badgeExtractor(product.tags, product);
+        return extractBadges(product.tags, product);
+    }, [displayConfig, product]);
+    const priceRange = useMemo(() => {
+        if (!displayConfig.showPriceRange)
+            return null;
+        return getPriceRange(product.variants);
+    }, [displayConfig.showPriceRange, product.variants]);
+    const layoutProps = {
+        product,
+        images,
+        title,
+        price,
+        comparePrice,
+        brand,
+        badges,
+        priceRange,
+        options,
+        variants,
+        displayConfig,
+        imageVariant,
+        onVariantHover,
+        onVariantClick,
+        selectedVariants,
+        actionButtons,
+        actionButtonsPosition,
+        showActionLabels,
+        enableImageZoom,
+        imageZoomMode,
+        imageZoomLevel,
+    };
+    const layoutMap = {
+        minimal: MinimalLayout,
+        standard: StandardLayout,
+        detailed: DetailedLayout,
+        compact: CompactLayout,
+        horizontal: HorizontalLayout,
+    };
+    const LayoutComponent = layoutMap[layoutStyle] ?? MinimalLayout;
+    const rootClassName = clsx('seekora-product-card', `seekora-product-card--${layoutStyle}`, 'seekora-suggestions-product-card', className);
+    const rootStyle = {
+        ...cardStyle,
+        ...(layoutStyle === 'horizontal' ? { flexDirection: 'row' } : {}),
+        ...style,
+    };
+    if (asLink && product.url) {
+        return (React.createElement("a", { href: product.url, className: rootClassName, style: { ...rootStyle, textDecoration: 'none', color: 'inherit' }, onClick: (e) => {
+                e.preventDefault();
+                onSelect();
+            }, "data-position": position, "data-section": section, "data-tab-id": tabId },
+            React.createElement(LayoutComponent, { ...layoutProps })));
+    }
+    return (React.createElement("button", { type: "button", className: rootClassName, style: rootStyle, onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect();
+        }, "data-position": position, "data-section": section, "data-tab-id": tabId },
+        React.createElement(LayoutComponent, { ...layoutProps })));
+}
+
+/**
+ * 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, displayConfig, onVariantHover, }) {
+    const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
+    const products = 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), displayConfig: displayConfig, onVariantHover: onVariantHover }));
+        }))));
+}
+
+/**
+ * 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))));
+}
+
+/**
+ * VariantSelector – full variant selector for product detail pages
+ *
+ * Three render modes per option:
+ * - swatch: color circles (auto-detected for "Color" option or when colorMap provided)
+ * - button: rectangular buttons (default for most options)
+ * - dropdown: <select> for options with many values
+ */
+const COLOR_NAMES = {
+    black: '#000', white: '#fff', red: '#ef4444', blue: '#3b82f6',
+    green: '#22c55e', yellow: '#eab308', orange: '#f97316', purple: '#a855f7',
+    pink: '#ec4899', brown: '#92400e', grey: '#6b7280', gray: '#6b7280',
+    navy: '#1e3a5f', beige: '#d4c5a9', cream: '#fffdd0', ivory: '#fffff0',
+    teal: '#0d9488', coral: '#ff7f50', maroon: '#800000', charcoal: '#36454f',
+    sage: '#9caf88', lavender: '#e6e6fa', mint: '#98fb98', rust: '#b7410e',
+    plum: '#8e4585', slate: '#708090', indigo: '#4b0082', gold: '#ffd700',
+    silver: '#c0c0c0', rose: '#ff007f', raven: '#0a0a0a', natural: '#f5f0e1',
+    bone: '#e3dac9', sand: '#c2b280', olive: '#808000', khaki: '#c3b091',
+    burgundy: '#800020', wine: '#722f37', mauve: '#e0b0ff', tan: '#d2b48c',
+};
+const isColorOption = (name) => {
+    const lower = name.toLowerCase();
+    return lower === 'color' || lower === 'colour' || lower === 'colors' || lower === 'colours';
+};
+const resolveColor = (value, colorMap) => {
+    if (colorMap?.[value])
+        return colorMap[value];
+    const lower = value.toLowerCase();
+    if (colorMap?.[lower])
+        return colorMap[lower];
+    return COLOR_NAMES[lower] ?? null;
+};
+const getAvailability = (optionName, value, options, variants, selections) => {
+    const optionIndex = options.findIndex((o) => o.name === optionName);
+    if (optionIndex === -1)
+        return true;
+    const optionKey = `option${optionIndex + 1}`;
+    return variants.some((variant) => {
+        if (variant[optionKey] !== value)
+            return false;
+        if (variant.available === false)
+            return false;
+        for (const [selName, selValue] of Object.entries(selections)) {
+            if (selName === optionName)
+                continue;
+            const selIdx = options.findIndex((o) => o.name === selName);
+            if (selIdx === -1)
+                continue;
+            const selKey = `option${selIdx + 1}`;
+            if (variant[selKey] !== selValue)
+                return false;
+        }
+        return true;
+    });
+};
+function VariantSelector({ options, variants, selections, onSelectionChange, optionRenderModes, dropdownThreshold = 8, colorMap, showAvailability = true, selectedVariant: _selectedVariant, className, style, }) {
+    if (!options || options.length === 0)
+        return null;
+    const getRenderMode = (option) => {
+        if (optionRenderModes?.[option.name])
+            return optionRenderModes[option.name];
+        if (isColorOption(option.name))
+            return 'swatch';
+        if (option.values.length > dropdownThreshold)
+            return 'dropdown';
+        return 'button';
+    };
+    return (React.createElement("div", { className: clsx('seekora-variant-selector', className), style: { display: 'flex', flexDirection: 'column', gap: 16, ...style } }, options.map((option) => {
+        const mode = getRenderMode(option);
+        const selected = selections[option.name];
+        return (React.createElement("div", { key: option.name, className: "seekora-variant-option-group" },
+            React.createElement("label", { className: "seekora-variant-option-label", style: {
+                    display: 'block',
+                    fontSize: '0.875rem',
+                    fontWeight: 600,
+                    marginBottom: 8,
+                    color: 'var(--seekora-text-primary, #111827)',
+                } },
+                option.name,
+                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, #6b7280)' } }, selected))),
+            mode === 'dropdown' ? (React.createElement("select", { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (e) => {
+                    e.stopPropagation();
+                    onSelectionChange(option.name, e.target.value);
+                }, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), style: {
+                    padding: '8px 12px',
+                    fontSize: '0.875rem',
+                    borderRadius: 6,
+                    border: '1px solid var(--seekora-border-color, #e5e7eb)',
+                    backgroundColor: 'var(--seekora-bg-surface, #fff)',
+                    color: 'var(--seekora-text-primary, #111827)',
+                    cursor: 'pointer',
+                    minWidth: 120,
+                } },
+                React.createElement("option", { value: "" },
+                    "Select ",
+                    option.name),
+                option.values.map((value) => {
+                    const available = showAvailability
+                        ? getAvailability(option.name, value, options, variants, selections)
+                        : true;
+                    return (React.createElement("option", { key: value, value: value, disabled: !available },
+                        value,
+                        !available ? ' (Unavailable)' : ''));
+                }))) : (React.createElement("div", { className: "seekora-variant-buttons", style: { display: 'flex', flexWrap: 'wrap', gap: 8 } }, option.values.map((value) => {
+                const isActive = selected === value;
+                const available = showAvailability
+                    ? getAvailability(option.name, value, options, variants, selections)
+                    : true;
+                const color = mode === 'swatch' ? resolveColor(value, colorMap) : null;
+                if (mode === 'swatch' && color) {
+                    return (React.createElement("button", { key: value, type: "button", className: clsx('seekora-variant-color-swatch', isActive && 'seekora-variant-button--active', !available && 'seekora-variant-button--unavailable'), title: value, onMouseDown: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            onSelectionChange(option.name, value);
+                        }, disabled: !available, style: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: '50%',
+                            backgroundColor: color,
+                            border: isActive
+                                ? '2px solid var(--seekora-primary, #111827)'
+                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            outline: isActive ? '2px solid var(--seekora-primary, #111827)' : 'none',
+                            outlineOffset: 2,
+                            cursor: available ? 'pointer' : 'not-allowed',
+                            opacity: available ? 1 : 0.4,
+                            position: 'relative',
+                            padding: 0,
+                        }, "aria-label": `${option.name}: ${value}`, "aria-pressed": isActive }));
+                }
+                return (React.createElement("button", { key: value, type: "button", className: clsx('seekora-variant-button', isActive && 'seekora-variant-button--active', !available && 'seekora-variant-button--unavailable'), onMouseDown: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectionChange(option.name, value);
+                    }, disabled: !available, style: {
+                        padding: '6px 16px',
+                        fontSize: '0.875rem',
+                        borderRadius: 6,
+                        border: isActive
+                            ? '2px solid var(--seekora-primary, #111827)'
+                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-primary, #111827)'
+                            : 'var(--seekora-bg-surface, #fff)',
+                        color: isActive
+                            ? '#fff'
+                            : 'var(--seekora-text-primary, #111827)',
+                        cursor: available ? 'pointer' : 'not-allowed',
+                        opacity: available ? 1 : 0.5,
+                        textDecoration: !available ? 'line-through' : 'none',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'all 120ms ease',
+                    }, "aria-label": `${option.name}: ${value}`, "aria-pressed": isActive }, value));
+            })))));
+    })));
+}
+
+/**
+ * withAnalytics – HOC that wraps any React component to inject analytics tracking
+ */
+function withAnalytics(Component, config = {}) {
+    const { trackClick = true, trackImpression = false, clickEventName = 'product.click', getProductFromProps = () => null, getPositionFromProps = () => 0, } = config;
+    const displayName = Component.displayName || Component.name || 'Component';
+    const Wrapped = React.forwardRef((props, ref) => {
+        const { seekoraClient, seekoraContext, ...rest } = props;
+        const containerRef = useRef(null);
+        const impressionTrackedRef = useRef(false);
+        const product = getProductFromProps(rest);
+        const position = getPositionFromProps(rest);
+        const sendEvent = useCallback(async (eventName, metadata) => {
+            if (!seekoraClient)
+                return;
+            try {
+                await seekoraClient.trackEvent?.({
+                    event_name: eventName,
+                    metadata: {
+                        product_id: product?.id || product?.objectID,
+                        product_title: product?.title || product?.name,
+                        product_price: product?.price,
+                        position,
+                        timestamp: Date.now(),
+                        source: 'with_analytics_hoc',
+                        ...metadata,
+                    },
+                }, seekoraContext);
+            }
+            catch (error) {
+                log.warn(`withAnalytics: Failed to track ${eventName}`, { error });
+            }
+        }, [seekoraClient, seekoraContext, product, position]);
+        const handleClick = useCallback(() => {
+            if (!trackClick || !product)
+                return;
+            sendEvent(clickEventName, {});
+            if (seekoraClient?.trackClick && product) {
+                Promise.resolve(seekoraClient.trackClick(product.id || product.objectID || '', position + 1, seekoraContext)).catch(() => { });
+            }
+        }, [trackClick, product, sendEvent, seekoraClient, seekoraContext, position]);
+        // Impression tracking
+        useEffect(() => {
+            if (!trackImpression || !seekoraClient || !containerRef.current || impressionTrackedRef.current)
+                return;
+            if (typeof IntersectionObserver === 'undefined')
+                return;
+            const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting && !impressionTrackedRef.current) {
+                        impressionTrackedRef.current = true;
+                        sendEvent('product.impression', {});
+                        observer.disconnect();
+                    }
+                }
+            }, { threshold: 0.5 });
+            observer.observe(containerRef.current);
+            return () => observer.disconnect();
+        }, [trackImpression, seekoraClient, sendEvent]);
+        return (React.createElement("div", { ref: (node) => {
+                containerRef.current = node;
+                if (typeof ref === 'function')
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, onClick: handleClick, style: { display: 'contents' } },
+            React.createElement(Component, { ...rest })));
+    });
+    Wrapped.displayName = `withAnalytics(${displayName})`;
+    return Wrapped;
+}
+
+/**
+ * AnalyticsProvider – context + delegated event listener for data-seekora-* attribute-based analytics
+ *
+ * Installs a delegated click listener on a container. Any descendant with
+ * data-seekora-track="click"|"add-to-cart" and data-seekora-product-id="..."
+ * automatically fires analytics events without React wiring.
+ */
+const AnalyticsContext = createContext(null);
+const useAnalyticsProvider = () => useContext(AnalyticsContext);
+function AnalyticsProvider({ client, context, children }) {
+    const containerRef = useRef(null);
+    const sendEvent = useCallback(async (eventName, metadata) => {
+        try {
+            await client.trackEvent?.({
+                event_name: eventName,
+                metadata: {
+                    timestamp: Date.now(),
+                    source: 'analytics_provider_delegation',
+                    ...metadata,
+                },
+            }, context);
+            log.verbose(`AnalyticsProvider: ${eventName}`, metadata);
+        }
+        catch (error) {
+            log.warn(`AnalyticsProvider: Failed to track ${eventName}`, { error });
+        }
+    }, [client, context]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            // Walk up from target to find element with data-seekora-track
+            const tracked = target.closest('[data-seekora-track]');
+            if (!tracked)
+                return;
+            const trackType = tracked.getAttribute('data-seekora-track');
+            const productId = tracked.getAttribute('data-seekora-product-id');
+            const position = tracked.getAttribute('data-seekora-position');
+            const section = tracked.getAttribute('data-seekora-section');
+            const variantSku = tracked.getAttribute('data-seekora-variant-sku');
+            const variantOption = tracked.getAttribute('data-seekora-variant-option');
+            const variantValue = tracked.getAttribute('data-seekora-variant-value');
+            const metadata = {};
+            if (productId)
+                metadata.product_id = productId;
+            if (position)
+                metadata.position = parseInt(position, 10);
+            if (section)
+                metadata.section = section;
+            switch (trackType) {
+                case 'click':
+                    sendEvent('product.click', metadata);
+                    if (client?.trackClick && productId) {
+                        const pos = position ? parseInt(position, 10) + 1 : 1;
+                        Promise.resolve(client.trackClick(productId, pos, context)).catch(() => { });
+                    }
+                    break;
+                case 'add-to-cart':
+                    if (variantSku)
+                        metadata.variant_sku = variantSku;
+                    sendEvent('product.add_to_cart', metadata);
+                    break;
+                case 'variant-select':
+                    if (variantOption)
+                        metadata.option_name = variantOption;
+                    if (variantValue)
+                        metadata.option_value = variantValue;
+                    sendEvent('product.variant_select', metadata);
+                    break;
+                default:
+                    // Custom track type — use it as event name
+                    if (trackType) {
+                        sendEvent(trackType, metadata);
+                    }
+                    break;
+            }
+        };
+        container.addEventListener('click', handleClick);
+        return () => container.removeEventListener('click', handleClick);
+    }, [client, context, sendEvent]);
+    return (React.createElement(AnalyticsContext.Provider, { value: { client, context } },
+        React.createElement("div", { ref: containerRef, style: { display: 'contents' } }, children)));
+}
+
+/**
+ * SectionSearchContext – preset query/filter section state
+ *
+ * For menus, sidebar, front-page blocks. Independent of main search state.
+ */
+const SectionSearchContext = createContext(null);
+function useSectionSearchContext() {
+    const context = 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] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [totalCount, setTotalCount] = useState(0);
+    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(',');
         }
-        this.cache.set(key, {
-            data,
-            timestamp: Date.now(),
-            ttl: ttlMs ?? this.defaultTtl,
+        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);
         });
-    }
-    /**
-     * Check if key exists and is valid
-     */
-    has(key) {
-        return this.get(key) !== null;
-    }
-    /**
-     * Clear all cached entries
-     */
-    clear() {
-        this.cache.clear();
-    }
-    /**
-     * Clear expired entries
-     */
-    cleanup() {
-        const now = Date.now();
-        for (const [key, entry] of this.cache.entries()) {
-            if (now - entry.timestamp > entry.ttl) {
-                this.cache.delete(key);
-            }
-        }
-    }
-    /**
-     * Get cache statistics
-     */
-    getStats() {
-        return {
-            size: this.cache.size,
-            maxSize: this.maxSize,
+        return () => {
+            cancelled = true;
         };
-    }
+    }, [client, enabled, query, maxItems, sortBy, refinements]);
+    const trackClick = 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 = useMemo(() => ({
+        items,
+        loading,
+        error,
+        totalCount,
+        sectionId,
+        trackClick,
+    }), [items, loading, error, totalCount, sectionId, trackClick]);
+    return React.createElement(SectionSearchContext.Provider, { value: value }, children);
 }
-// Global cache instance for suggestions (shared across components)
-let globalSuggestionsCache = null;
+
 /**
- * Get the global suggestions cache instance
+ * SectionLoading – loading state for section (primitive)
  */
-const getSuggestionsCache = (options) => {
-    if (!globalSuggestionsCache) {
-        globalSuggestionsCache = new SuggestionsCache(options);
-    }
-    return globalSuggestionsCache;
-};
+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));
+}
+
 /**
- * Create a new cache instance (for isolated caching per component)
+ * SectionError – error state for section (primitive)
  */
-const createSuggestionsCache = (options) => {
-    return new SuggestionsCache(options);
-};
+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));
+}
+
 /**
- * Clear the global cache
+ * SectionItemGrid – generic grid of items from SectionSearchProvider (primitive)
  */
-const clearSuggestionsCache = () => {
-    globalSuggestionsCache?.clear();
-};
+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.
+ *
+ * When options/variants/selections/onSelectionChange are provided and
+ * renderVariantSelector is NOT provided, renders the built-in VariantSelector.
+ * renderVariantSelector still takes priority as an override.
+ */
+function ProductInfo({ title, description, price, currency = '$', comparePrice, brand, available, badges, options, variants, selectedVariant: _selectedVariant, selections, onSelectionChange, renderVariantSelector, renderCTA, className, style, }) {
+    const priceNum = price != null ? (typeof price === 'number' ? price : parseFloat(String(price))) : null;
+    const comparePriceNum = comparePrice != null ? (typeof comparePrice === 'number' ? comparePrice : parseFloat(String(comparePrice))) : null;
+    const showBuiltInVariantSelector = !renderVariantSelector && options && options.length > 0 && variants && selections && onSelectionChange;
+    return (React.createElement("div", { className: clsx('seekora-product-info', className), style: { display: 'flex', flexDirection: 'column', gap: 12, ...style } },
+        badges && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "inline" })),
+        brand && (React.createElement("span", { className: "seekora-product-info-brand", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
+        React.createElement("h1", { className: "seekora-product-info-title", style: { fontSize: '1.25rem', fontWeight: 600, margin: 0 } }, title),
+        (priceNum != null && !Number.isNaN(priceNum)) && (React.createElement("div", { className: "seekora-product-info-price" },
+            React.createElement(PriceDisplay, { price: priceNum, comparePrice: comparePriceNum ?? undefined, currency: currency, style: { fontSize: '1.125rem' } }))),
+        available != null && (React.createElement("span", { className: "seekora-product-info-availability", style: {
+                fontSize: '0.875rem',
+                color: available ? 'var(--seekora-success, #22c55e)' : 'var(--seekora-error, #ef4444)',
+            } }, available ? 'In Stock' : 'Out of Stock')),
+        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 ? renderVariantSelector() : null,
+        showBuiltInVariantSelector && (React.createElement(VariantSelector, { options: options, variants: variants, selections: selections, onSelectionChange: onSelectionChange, showAvailability: true })),
+        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 })));
+}
 
 /**
  * Responsive Utilities and Breakpoints
@@ -13875,6 +15384,164 @@ function formatParsedFilters(filters) {
         .join(', ');
 }
 
+/**
+ * useVariantSelection – manages variant selection state
+ *
+ * Single source of truth for variant interactions on product pages.
+ * Cards display variants passively; product pages use this hook.
+ */
+function useVariantSelection({ options = [], variants = [], initialSelections = {}, onVariantChange, } = {}) {
+    const [selections, setSelections] = useState(initialSelections);
+    const selectedVariant = useMemo(() => findVariantBySelections(options, variants, selections), [options, variants, selections]);
+    const isComplete = useMemo(() => options.length > 0 && options.every((opt) => !!selections[opt.name]), [options, selections]);
+    const availableValues = useMemo(() => {
+        const result = {};
+        for (const option of options) {
+            result[option.name] = getAvailableValuesForOption(option.name, options, variants, selections);
+        }
+        return result;
+    }, [options, variants, selections]);
+    const effectivePrice = selectedVariant?.price ?? null;
+    const effectiveComparePrice = selectedVariant?.comparePrice ?? null;
+    const setSelection = useCallback((optionName, value) => {
+        setSelections((prev) => {
+            const next = { ...prev, [optionName]: value };
+            const variant = findVariantBySelections(options, variants, next);
+            onVariantChange?.(variant, next);
+            return next;
+        });
+    }, [options, variants, onVariantChange]);
+    const resetSelections = useCallback(() => {
+        setSelections({});
+        onVariantChange?.(null, {});
+    }, [onVariantChange]);
+    return {
+        selections,
+        setSelection,
+        resetSelections,
+        selectedVariant,
+        availableValues,
+        isComplete,
+        effectivePrice,
+        effectiveComparePrice,
+    };
+}
+
+/**
+ * useProductAnalytics – analytics event binding hook for custom components
+ *
+ * Returns event handler props ready to spread onto any element, plus imperative
+ * tracking methods. Builds on existing useAnalytics infrastructure.
+ */
+function useProductAnalytics({ client, product, position = 0, section, tabId, query, context, enabled = true, }) {
+    const impressionTrackedRef = useRef(false);
+    const observerRef = useRef(null);
+    const elementRef = useRef(null);
+    const productId = product.id || product.objectID || '';
+    const sendEvent = useCallback(async (eventName, metadata) => {
+        if (!enabled || !client)
+            return;
+        try {
+            await client.trackEvent?.({
+                event_name: eventName,
+                metadata: {
+                    product_id: productId,
+                    product_title: product.title || product.name,
+                    product_price: product.price,
+                    position,
+                    section,
+                    tab_id: tabId,
+                    original_query: query,
+                    timestamp: Date.now(),
+                    source: 'product_analytics',
+                    ...metadata,
+                },
+            }, context);
+            log.verbose(`ProductAnalytics: ${eventName}`, metadata);
+        }
+        catch (error) {
+            log.warn(`Failed to track ${eventName}`, { error });
+        }
+    }, [client, enabled, productId, product, position, section, tabId, query, context]);
+    const trackClick = useCallback(() => {
+        sendEvent('product.click', {});
+        // Also fire via client.trackClick for V3 compat
+        if (client?.trackClick) {
+            Promise.resolve(client.trackClick(productId, position + 1, context)).catch(() => { });
+        }
+    }, [sendEvent, client, productId, position, context]);
+    const trackVariantSelect = useCallback((optionName, value) => {
+        sendEvent('product.variant_select', {
+            option_name: optionName,
+            option_value: value,
+        });
+    }, [sendEvent]);
+    const trackAddToCart = useCallback((variant) => {
+        sendEvent('product.add_to_cart', {
+            variant_id: variant?.id,
+            variant_sku: variant?.sku,
+            variant_title: variant?.title,
+            variant_price: variant?.price,
+        });
+    }, [sendEvent]);
+    const trackCustomEvent = useCallback((eventName, metadata) => {
+        sendEvent(eventName, metadata ?? {});
+    }, [sendEvent]);
+    // Impression tracking via IntersectionObserver
+    const impressionRef = useCallback((node) => {
+        // Cleanup previous observer
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        elementRef.current = node;
+        if (!node || !enabled || impressionTrackedRef.current)
+            return;
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        observerRef.current = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && !impressionTrackedRef.current) {
+                    impressionTrackedRef.current = true;
+                    sendEvent('product.impression', {});
+                    observerRef.current?.disconnect();
+                }
+            }
+        }, { threshold: 0.5 });
+        observerRef.current.observe(node);
+    }, [enabled, sendEvent]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, []);
+    const clickProps = {
+        onClick: () => trackClick(),
+        'data-seekora-product-id': productId,
+        'data-seekora-position': position,
+    };
+    const variantSelectProps = (optionName, value) => ({
+        onClick: () => trackVariantSelect(optionName, value),
+        'data-seekora-variant-option': optionName,
+        'data-seekora-variant-value': value,
+    });
+    const addToCartProps = (variant) => ({
+        onClick: () => trackAddToCart(variant),
+        'data-seekora-action': 'add-to-cart',
+    });
+    return {
+        clickProps,
+        variantSelectProps,
+        addToCartProps,
+        impressionRef,
+        trackClick,
+        trackVariantSelect,
+        trackAddToCart,
+        trackCustomEvent,
+    };
+}
+
 /**
  * Dark Theme
  */
@@ -14414,5 +16081,5 @@ function updateSuggestionsStyles(theme) {
     injectSuggestionsStyles(theme, true);
 }
 
-export { AmazonDropdown, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, DropdownPanel, Facets, FederatedDropdown, Fingerprint, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight$1 as Highlight, HitsPerPage, ImageDisplay, InfiniteHits, ItemCard, ItemGrid, MinimalDropdown, MobileFilters, MobileFiltersButton, MobileSheetDropdown, Pagination, PinterestDropdown, ProductCard, ProductGallery, ProductGrid, ProductInfo, ProductRecommendations, QuerySuggestions, QuerySuggestionsDropdown, RangeInput, RangeSlider, RecentSearchesList, RecentlyViewed, RelatedProducts, RichQuerySuggestions, SearchBar, SearchBarWithSuggestions, SearchInput, SearchLayout, SearchProvider, SearchResults, SectionError, SectionItemGrid, SectionLoading, SectionSearchProvider, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionItem, SuggestionList, SuggestionSearchBar, SuggestionsDropdownComposition, SuggestionsError, SuggestionsLoading, SuggestionsProvider, TrendingItems, TrendingList, addRecentSearch, addToRecentlyViewed, brandPresets, breakpoints, clearRecentSearches, clearSuggestionsCache, createSuggestionsCache, createSuggestionsTheme, createTheme, darkTheme, darkThemeVariables, defaultTheme, extractBrand, extractCategory, extractProduct, extractSuggestion, formatParsedFilters, formatPrice as formatSuggestionPrice, generateSuggestionsStylesheet, getFingerprint, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, mergeThemes, minimalTheme, minimalThemeVariables, parseHighlightMarkup, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useDocSearch, useSeekoraSearch$1 as useDocSearchSeekoraSearch, useInjectResponsiveStyles, useKeyboard, useNaturalLanguageFilters, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSectionSearchContext, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics, useSuggestionsContext };
+export { ActionButtons, AmazonDropdown, AnalyticsProvider, BadgeList, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, DropdownPanel, Facets, FederatedDropdown, Fingerprint, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight$1 as Highlight, HitsPerPage, ImageDisplay, ImageZoom, InfiniteHits, ItemCard, ItemGrid, MinimalDropdown, MobileFilters, MobileFiltersButton, MobileSheetDropdown, Pagination, PinterestDropdown, PriceDisplay, ProductCard, ProductGallery, ProductGrid, ProductInfo, ProductRecommendations, QuerySuggestions, QuerySuggestionsDropdown, RangeInput, RangeSlider, RatingDisplay, RecentSearchesList, RecentlyViewed, RelatedProducts, RichQuerySuggestions, SearchBar, SearchBarWithSuggestions, SearchInput, SearchLayout, SearchProvider, SearchResults, SectionError, SectionItemGrid, SectionLoading, SectionSearchProvider, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionItem, SuggestionList, SuggestionSearchBar, SuggestionsDropdownComposition, SuggestionsError, SuggestionsLoading, SuggestionsProvider, TrendingItems, TrendingList, VariantSelector, VariantSwatches, addRecentSearch, addToRecentlyViewed, brandPresets, breakpoints, clearRecentSearches, clearSuggestionsCache, createSuggestionsCache, createSuggestionsTheme, createTheme, darkTheme, darkThemeVariables, defaultTheme, extractBadges, extractBrand, extractCategory, extractProduct, extractSuggestion, findVariantBySelections, formatParsedFilters, formatPriceRange, formatPrice as formatSuggestionPrice, generateSuggestionsStylesheet, getAvailableValuesForOption, getFingerprint, getPriceRange, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, mergeThemes, minimalTheme, minimalThemeVariables, parseHighlightMarkup, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useAnalyticsProvider, useDocSearch, useSeekoraSearch$1 as useDocSearchSeekoraSearch, useInjectResponsiveStyles, useKeyboard, useNaturalLanguageFilters, useProductAnalytics, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSectionSearchContext, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics, useSuggestionsContext, useVariantSelection, withAnalytics };
 //# sourceMappingURL=index.esm.js.map