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

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

@@ -8,6 +8,7 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { ImageDisplay } from '../primitives/ImageDisplay';
+import { ActionButtons } from '../primitives/ActionButtons';
 const cardStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -29,18 +30,31 @@ const imgStyle = {
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-export function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', }) {
+export 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, "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, ...(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, ...style },
+        className: clsx('seekora-item-card', isHorizontal && 'seekora-item-card--horizontal', className),
+        style: {
+            ...cardStyle,
+            ...(isHorizontal ? { flexDirection: 'row' } : {}),
+            ...style,
+        },
         'data-position': position,
         onClick: onSelect,
         onMouseDown: onSelect ? (e) => { e.preventDefault(); onSelect(); } : undefined,

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

@@ -1,11 +1,13 @@
 /**
  * ProductCard – one product tile (primitive)
  *
- * Minimal layout: image (via ImageDisplay when imageVariant set), title, price.
- * onClick calls context selectProduct. Overridable via className/style.
+ * Without displayConfig: renders the original minimal layout (image, title, price).
+ * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
  */
 import React from 'react';
+import type { ActionButton } from '../primitives/ActionButtons';
 import type { ProductItem } from '@seekora-ai/ui-sdk-types';
+import type { ProductDisplayConfig } from '../suggestions/types';
 export type ProductCardImageVariant = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
 export interface ProductCardProps {
     product: ProductItem;
@@ -16,6 +18,28 @@ export interface ProductCardProps {
     className?: string;
     style?: React.CSSProperties;
     imageVariant?: ProductCardImageVariant;
+    /** Product display configuration for layout variants */
+    displayConfig?: ProductDisplayConfig;
+    /** Callback when a variant swatch is hovered (e.g., to swap card image) */
+    onVariantHover?: (optionName: string, value: string) => void;
+    /** Callback when a variant swatch is clicked (e.g., to swap card image permanently) */
+    onVariantClick?: (optionName: string, value: string) => void;
+    /** Currently selected variant values (e.g., { Color: 'Black', Size: 'M' }) */
+    selectedVariants?: Record<string, string>;
+    /** Render as link when true and product.url exists */
+    asLink?: boolean;
+    /** Action buttons (add to cart, wishlist, etc.) */
+    actionButtons?: ActionButton[];
+    /** Action buttons position */
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    /** Show action button labels */
+    showActionLabels?: boolean;
+    /** Enable image zoom functionality */
+    enableImageZoom?: boolean;
+    /** Image zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' (hover + click) */
+    imageZoomMode?: 'hover' | 'lens' | 'click' | 'both';
+    /** Image zoom magnification level (2 = 200%, 3 = 300%) */
+    imageZoomLevel?: number;
 }
-export declare function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant, }: ProductCardProps): React.JSX.Element;
+export declare function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: ProductCardProps): React.JSX.Element;
 //# sourceMappingURL=ProductCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAuB,GACxB,EAAE,gBAAgB,qBAqClB"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAA2C,MAAM,0BAA0B,CAAC;AACrG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAWjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,wDAAwD;IACxD,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAuB,EACvB,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,qBAA2C,EAC3C,gBAAwB,EACxB,eAAuB,EACvB,aAAsB,EACtB,cAAoB,GACrB,EAAE,gBAAgB,qBAuLlB"}

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

@@ -1,12 +1,14 @@
 /**
  * ProductCard – one product tile (primitive)
  *
- * Minimal layout: image (via ImageDisplay when imageVariant set), title, price.
- * onClick calls context selectProduct. Overridable via className/style.
+ * Without displayConfig: renders the original minimal layout (image, title, price).
+ * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { ImageDisplay } from '../primitives/ImageDisplay';
+import { extractBadges, getPriceRange, findVariantBySelections } from '../suggestions/utils';
+import { MinimalLayout, StandardLayout, DetailedLayout, CompactLayout, HorizontalLayout, } from './ProductCardLayouts';
 const cardStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -26,21 +28,126 @@ const imgStyle = {
     borderRadius: 4,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-export 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) => {
+export 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 },
-        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));
+        React.createElement(LayoutComponent, { ...layoutProps })));
 }

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

@@ -0,0 +1,44 @@
+/**
+ * ProductCardLayouts – internal layout sub-components for ProductCard
+ *
+ * Not exported from the package. Each layout renders the same product data
+ * with different visual emphasis.
+ */
+import React from 'react';
+import type { ActionButton } from '../primitives/ActionButtons';
+import type { ProductItem, ProductBadge, PriceRange, ProductOption, ProductVariant } from '@seekora-ai/ui-sdk-types';
+import type { ProductDisplayConfig } from '../suggestions/types';
+export interface LayoutProps {
+    product: ProductItem;
+    images: string[];
+    title: string;
+    price: number | null;
+    comparePrice: number | null;
+    brand: string | null;
+    badges: ProductBadge[];
+    priceRange: PriceRange | null;
+    options: ProductOption[];
+    variants: ProductVariant[];
+    displayConfig: ProductDisplayConfig;
+    imageVariant: 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+    onVariantHover?: (optionName: string, value: string) => void;
+    onVariantClick?: (optionName: string, value: string) => void;
+    selectedVariants?: Record<string, string>;
+    actionButtons?: ActionButton[];
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    showActionLabels?: boolean;
+    enableImageZoom?: boolean;
+    imageZoomMode?: 'hover' | 'lens' | 'click' | 'both';
+    imageZoomLevel?: number;
+}
+/** minimal: image, title, price (current default behavior) */
+export declare function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }: LayoutProps): React.JSX.Element;
+/** standard: image, badges, brand, title, price + compare price, color swatches */
+export declare function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: LayoutProps): React.JSX.Element;
+/** detailed: image, badges, brand, title, price + compare + discount, rating, all swatches, stock */
+export declare function DetailedLayout({ images, title, price, comparePrice, brand, badges, priceRange, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: LayoutProps): React.JSX.Element;
+/** compact: smaller image, 1-line title, price */
+export declare function CompactLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }: LayoutProps): React.JSX.Element;
+/** horizontal: image left + content right (title, brand, price, swatches) */
+export declare function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: LayoutProps): React.JSX.Element;
+//# sourceMappingURL=ProductCardLayouts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardLayouts.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCardLayouts.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,105 @@
+/**
+ * ProductCardLayouts – internal layout sub-components for ProductCard
+ *
+ * Not exported from the package. Each layout renders the same product data
+ * with different visual emphasis.
+ */
+import React from 'react';
+import { ImageDisplay } from '../primitives/ImageDisplay';
+import { PriceDisplay } from '../primitives/PriceDisplay';
+import { BadgeList } from '../primitives/BadgeList';
+import { RatingDisplay } from '../primitives/RatingDisplay';
+import { VariantSwatches } from '../primitives/VariantSwatches';
+import { ActionButtons } from '../primitives/ActionButtons';
+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) */
+export 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 */
+export 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 */
+export 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 */
+export 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) */
+export 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" })))));
+}

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

@@ -4,6 +4,7 @@
  * Uses trendingProducts or active tab products; each click calls context selectProduct.
  */
 import React from 'react';
+import type { ProductDisplayConfig } from '../suggestions/types';
 export interface ProductGridProps {
     maxItems?: number;
     /** 'trending' | tab id for filtered tab products */
@@ -12,6 +13,10 @@ export interface ProductGridProps {
     className?: string;
     style?: React.CSSProperties;
     gridClassName?: string;
+    /** Product display configuration passed through to each ProductCard */
+    displayConfig?: ProductDisplayConfig;
+    /** Callback when a variant swatch is hovered on a card */
+    onVariantHover?: (optionName: string, value: string) => void;
 }
-export declare function ProductGrid({ maxItems, source, columns, className, style, gridClassName, }: ProductGridProps): React.JSX.Element | null;
+export declare function ProductGrid({ maxItems, source, columns, className, style, gridClassName, displayConfig, onVariantHover, }: ProductGridProps): React.JSX.Element | null;
 //# sourceMappingURL=ProductGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductGrid.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductGrid.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAY,EACZ,MAAmB,EACnB,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,GACd,EAAE,gBAAgB,4BAiDlB"}
+{"version":3,"file":"ProductGrid.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductGrid.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9D;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAY,EACZ,MAAmB,EACnB,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,EACb,aAAa,EACb,cAAc,GACf,EAAE,gBAAgB,4BAmDlB"}

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

@@ -7,7 +7,7 @@ import React, { useMemo } from 'react';
 import { useSuggestionsContext } from './SuggestionsContext';
 import { ProductCard } from './ProductCard';
 import { clsx } from 'clsx';
-export function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, }) {
+export 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')
@@ -31,6 +31,6 @@ export function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, cl
             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) }));
+            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 }));
         }))));
 }

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

@@ -12,6 +12,13 @@ export interface SuggestionListProps {
     className?: string;
     style?: React.CSSProperties;
     listClassName?: string;
+    /**
+     * When true, show a loading state when fetching and no previous suggestions exist.
+     * When false (default), show previous results until new results render; no loading screen.
+     */
+    showLoadingState?: boolean;
+    /** Custom render for loading state (only when showLoadingState is true and loading with no items). */
+    renderLoading?: () => React.ReactNode;
     /**
      * When true (default), suggestion text with <mark>...</mark> is rendered
      * with those segments highlighted. When false, plain text is shown.
@@ -22,5 +29,5 @@ export interface SuggestionListProps {
     highlightMarkupOptions?: HighlightMarkupOptions;
     renderItem?: (suggestion: import('@seekora-ai/ui-sdk-types').SuggestionItem, index: number, isActive: boolean, onSelect: () => void) => React.ReactNode;
 }
-export declare function SuggestionList({ maxItems, className, style, listClassName, enableHighlightMarkup, highlightMarkupOptions, renderItem, }: SuggestionListProps): React.JSX.Element | null;
+export declare function SuggestionList({ maxItems, className, style, listClassName, showLoadingState, renderLoading, enableHighlightMarkup, highlightMarkupOptions, renderItem, }: SuggestionListProps): React.JSX.Element | null;
 //# sourceMappingURL=SuggestionList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestionList.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionList.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mGAAmG;IACnG,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,UAAU,CAAC,EAAE,CACX,UAAU,EAAE,OAAO,0BAA0B,EAAE,cAAc,EAC7D,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,KACjB,KAAK,CAAC,SAAS,CAAC;CACtB;AAOD,wBAAgB,cAAc,CAAC,EAC7B,QAAa,EACb,SAAS,EACT,KAAK,EACL,aAAa,EACb,qBAA4B,EAC5B,sBAAsB,EACtB,UAAU,GACX,EAAE,mBAAmB,4BAiDrB"}
+{"version":3,"file":"SuggestionList.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionList.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sGAAsG;IACtG,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mGAAmG;IACnG,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,UAAU,CAAC,EAAE,CACX,UAAU,EAAE,OAAO,0BAA0B,EAAE,cAAc,EAC7D,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,KACjB,KAAK,CAAC,SAAS,CAAC;CACtB;AAOD,wBAAgB,cAAc,CAAC,EAC7B,QAAa,EACb,SAAS,EACT,KAAK,EACL,aAAa,EACb,gBAAwB,EACxB,aAAa,EACb,qBAA4B,EAC5B,sBAAsB,EACtB,UAAU,GACX,EAAE,mBAAmB,4BAwDrB"}

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

@@ -8,21 +8,24 @@
 import React from 'react';
 import { useSuggestionsContext } from './SuggestionsContext';
 import { SuggestionItem } from './SuggestionItem';
-import { SuggestionsLoading } from './SuggestionsLoading';
 import { clsx } from 'clsx';
 const listStyle = {
     margin: 0,
     padding: '4px 0',
 };
-export function SuggestionList({ maxItems = 10, className, style, listClassName, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
+export function SuggestionList({ maxItems = 10, className, style, listClassName, showLoadingState = false, renderLoading, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
     const { suggestions, activeIndex, loading, selectSuggestion, getAllNavigableItems, } = useSuggestionsContext();
     const items = suggestions.slice(0, maxItems);
     const navigableItems = getAllNavigableItems();
     const suggestionStartIndex = navigableItems.findIndex((n) => n.type === 'suggestion');
     const activeIsInSuggestions = suggestionStartIndex >= 0 && activeIndex >= suggestionStartIndex && activeIndex < suggestionStartIndex + items.length;
-    if (loading) {
-        return React.createElement(SuggestionsLoading, { className: className, style: style });
+    // When loading with no previous results, show loading only if showLoadingState (default: don't show loading screen)
+    if (loading && items.length === 0 && showLoadingState) {
+        if (renderLoading)
+            return React.createElement(React.Fragment, null, renderLoading());
+        return (React.createElement("div", { className: clsx('seekora-suggestions-loading', className), style: { padding: 16, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875rem', ...style } }, "Loading..."));
     }
+    // When loading with previous results, show previous results (no loading UI)
     if (items.length === 0)
         return null;
     return (React.createElement("div", { className: clsx('seekora-suggestions-list', className), style: style },

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

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

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

@@ -15,7 +15,6 @@ import { SuggestionList } from './SuggestionList';
 import { CategoriesTabs } from './CategoriesTabs';
 import { ProductGrid } from './ProductGrid';
 import { TrendingList } from './TrendingList';
-import { SuggestionsLoading } from './SuggestionsLoading';
 import { SuggestionsError } from './SuggestionsError';
 export function SuggestionsDropdownComposition({ showRecentSearches = true, showTrending = true, showTabs = true, showProducts = true, placeholder, ...providerProps }) {
     return (React.createElement(SuggestionsProvider, { ...providerProps },
@@ -23,7 +22,6 @@ export function SuggestionsDropdownComposition({ showRecentSearches = true, show
             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,

package/dist/docsearch/components/Results.d.ts

@@ -14,10 +14,12 @@ interface ResultsProps {
     scrollSelectionIntoViewRef?: React.MutableRefObject<boolean>;
     query: string;
     isLoading: boolean;
+    /** Show loading state when fetching and no previous hits (default false: show previous results until new render) */
+    showLoadingState?: boolean;
     error: string | null;
     translations?: DocSearchTranslations;
     sources?: SearchSource[];
 }
-export declare function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, error, translations, sources: _sources, }: ResultsProps): React.JSX.Element;
+export declare function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, showLoadingState, error, translations, sources: _sources, }: ResultsProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=Results.d.ts.map

package/dist/docsearch/components/Results.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../src/docsearch/components/Results.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEvG,UAAU,WAAW;IACnB,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,CAAC,YAAY,GAAG,mBAAmB,CAAC,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,mBAAmB,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,4GAA4G;IAC5G,0BAA0B,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;CAC1B;AAuGD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,WAAW,EACX,aAAa,EACb,QAAQ,EACR,OAAO,EACP,0BAA0B,EAC1B,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAiB,EACjB,OAAO,EAAE,QAAa,GACvB,EAAE,YAAY,qBAsGd"}
+{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../src/docsearch/components/Results.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEvG,UAAU,WAAW;IACnB,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,CAAC,YAAY,GAAG,mBAAmB,CAAC,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,GAAG,mBAAmB,KAAK,IAAI,CAAC;IAC5D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,4GAA4G;IAC5G,0BAA0B,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,oHAAoH;IACpH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;CAC1B;AAuGD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,WAAW,EACX,aAAa,EACb,QAAQ,EACR,OAAO,EACP,0BAA0B,EAC1B,KAAK,EACL,SAAS,EACT,gBAAwB,EACxB,KAAK,EACL,YAAiB,EACjB,OAAO,EAAE,QAAa,GACvB,EAAE,YAAY,qBA0Gd"}