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

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

@@ -11,17 +11,25 @@ import { BadgeList } from '../primitives/BadgeList';
 import { RatingDisplay } from '../primitives/RatingDisplay';
 import { VariantSwatches } from '../primitives/VariantSwatches';
 import { ActionButtons } from '../primitives/ActionButtons';
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
 const imgPlaceholderStyle = {
     width: '100%',
     aspectRatio: '1',
     objectFit: 'cover',
-    borderRadius: 4,
+    borderRadius: BORDER_RADIUS.sm,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
 function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
-    const ar = aspectRatio ? aspectRatio.replace(':', '/') : '1';
+    const ar = aspectRatio
+        ? (aspectRatio.includes(':') ? aspectRatio.replace(':', '/') : aspectRatio)
+        : '1';
     if (images.length > 0) {
-        return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: 4 } },
+        return (React.createElement("div", { className: "seekora-product-card__image", style: { position: 'relative', overflow: 'hidden', borderRadius: BORDER_RADIUS.sm } },
             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 });
@@ -30,7 +38,7 @@ function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoom
 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),
+        React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, 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)))));
@@ -38,31 +46,35 @@ export function MinimalLayout({ images, title, price, product, imageVariant, dis
 /** 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;
+    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
+    const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     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" }))),
+            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
             cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, 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" })))));
+            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (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;
+    // Normalize position: 'overlay-*' positions render over image, everything else renders inline
+    const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     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" }))),
+            actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
         React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
             cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
             cfg.showRating !== false && product.rating != null && (React.createElement(RatingDisplay, { rating: product.rating, reviewCount: product.reviewCount, variant: "compact", size: "small", showNumeric: false, showReviewCount: true, className: "seekora-product-card__rating" })),
             React.createElement("div", { className: "seekora-product-card__price" }, cfg.showPriceRange && priceRange ? (React.createElement(PriceDisplay, { priceRange: priceRange, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, style: { fontSize: '0.875rem' } })) : (React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } }))),
             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 })),
@@ -70,7 +82,7 @@ export function DetailedLayout({ images, title, price, comparePrice, brand, badg
                     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" })))));
+            actionButtons && actionButtons.length > 0 && !isOverlayPosition && (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 }) {
@@ -91,13 +103,13 @@ export function CompactLayout({ images, title, price, product, imageVariant, dis
 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("div", { style: { position: 'relative', minWidth: 80, flexBasis: '25%', maxWidth: 120, 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("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, 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 })),

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,wBAAgB,WAAW,CAAC,EAC1B,WAAyB,EACzB,SAAiB,EACjB,eAAsB,EACtB,WAAkB,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,cAAc,EACd,UAAU,EACV,SAAoB,GACrB,EAAE,gBAAgB,qBA+GlB"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyBnD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0FAA0F;IAC1F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,wBAAgB,WAAW,CAAC,EAC1B,WAAyB,EACzB,SAAiB,EACjB,eAAsB,EACtB,WAAkB,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,cAAc,EACd,UAAU,EACV,SAAoB,GACrB,EAAE,gBAAgB,qBA+GlB"}

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

@@ -7,6 +7,24 @@
 import React, { useRef, useCallback } from 'react';
 import { useSuggestionsContext } from './SuggestionsContext';
 import { clsx } from 'clsx';
+const SPACING = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+};
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
 const defaultStyles = {
     position: 'relative',
     width: '100%',
@@ -14,22 +32,23 @@ const defaultStyles = {
 const inputWrapperStyles = {
     display: 'flex',
     alignItems: 'center',
-    gap: '8px',
-    padding: '8px 12px',
-    border: '1px solid var(--seekora-border-color, #e5e7eb)',
-    borderRadius: 'var(--seekora-border-radius, 6px)',
-    backgroundColor: 'var(--seekora-bg-surface, #fff)',
-    transition: 'border-color 150ms ease, box-shadow 150ms ease',
+    gap: `${SPACING.sm}px`,
+    padding: `${SPACING.sm}px ${SPACING.md}px`,
+    border: '1px solid var(--seekora-border-color, rgba(0,0,0,0.1))',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
+    backgroundColor: 'var(--seekora-bg-surface, transparent)',
+    transition: `border-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
+    boxSizing: 'border-box',
 };
 const inputStyles = {
     flex: 1,
     minWidth: 0,
-    padding: '8px 0',
+    padding: `${SPACING.sm}px 0`,
     border: 'none',
     outline: 'none',
     backgroundColor: 'transparent',
     fontSize: 'inherit',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'var(--seekora-text-primary, inherit)',
     fontFamily: 'inherit',
 };
 export function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
@@ -78,7 +97,7 @@ export function SearchInput({ placeholder = 'Search...', autoFocus = false, show
             leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'var(--seekora-text-secondary, #6b7280)' } }, leftIcon)) : null,
             React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx('seekora-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
             showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
-                    padding: 4,
+                    padding: 8,
                     border: 'none',
                     background: 'transparent',
                     cursor: 'pointer',

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestionItem.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2FAA2F;IAC3F,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,8FAA8F;IAC9F,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAgBD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,qBAA4B,EAC5B,sBAAsB,EACtB,eAAe,GAChB,EAAE,mBAAmB,qBAoCrB"}
+{"version":3,"file":"SuggestionItem.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/SuggestionItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAErF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2FAA2F;IAC3F,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,8FAA8F;IAC9F,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrD;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,qBAA4B,EAC5B,sBAAsB,EACtB,eAAe,GAChB,EAAE,mBAAmB,qBAoCrB"}

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

@@ -21,6 +21,9 @@ const defaultItemStyle = {
     backgroundColor: 'transparent',
     color: 'var(--seekora-text-primary, #111827)',
     transition: 'background-color 120ms ease',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 export function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
     const displayText = suggestion.highlightedQuery ?? suggestion.query;

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

@@ -1,18 +1,30 @@
 /**
  * Parses suggestion text containing <mark>...</mark> and returns React nodes
- * with the marked segments rendered as <mark> elements. Safe: inner content
+ * with the marked segments rendered as styled elements. Safe: inner content
  * is rendered as text, not HTML.
  */
 import React from 'react';
+/** Visual highlight styles */
+export type HighlightStyle = 'background' | 'underline' | 'bold' | 'color-only';
 export interface HighlightMarkupOptions {
-    /** Class name for the <mark> element. */
+    /** Class name for the highlight element. */
     markClassName?: string;
-    /** Inline style for the <mark> element. */
+    /** Inline style for the highlight element (merged with computed styles). */
     markStyle?: React.CSSProperties;
+    /** Override background color for highlighted segments */
+    highlightColor?: string;
+    /** Text color for highlighted segments */
+    highlightTextColor?: string;
+    /** Font weight for highlighted segments */
+    highlightFontWeight?: string | number;
+    /** Visual highlight style (default: 'background') */
+    highlightStyle?: HighlightStyle;
+    /** Which HTML element to render for highlights (default: 'mark') */
+    highlightTag?: keyof JSX.IntrinsicElements;
 }
 /**
  * Converts a string like "lined <mark>blue</mark>" into React nodes with
- * the marked part rendered as a <mark> element. When no <mark> tags are
+ * the marked part rendered as a styled element. When no <mark> tags are
  * present, returns the string as-is.
  */
 export declare function parseHighlightMarkup(text: string, options?: HighlightMarkupOptions): React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"highlightMarkup.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/highlightMarkup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AASD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,KAAK,CAAC,SAAS,CAyBjB"}
+{"version":3,"file":"highlightMarkup.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/highlightMarkup.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,8BAA8B;AAC9B,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,CAAC;AAEhF,MAAM,WAAW,sBAAsB;IACrC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,qDAAqD;IACrD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAC5C;AA4CD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,KAAK,CAAC,SAAS,CAkCjB"}

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

@@ -1,6 +1,6 @@
 /**
  * Parses suggestion text containing <mark>...</mark> and returns React nodes
- * with the marked segments rendered as <mark> elements. Safe: inner content
+ * with the marked segments rendered as styled elements. Safe: inner content
  * is rendered as text, not HTML.
  */
 import React from 'react';
@@ -10,9 +10,40 @@ const defaultMarkStyle = {
     borderRadius: '2px',
     padding: '0 2px',
 };
+/** Compute styles based on highlight options */
+function computeHighlightStyles(options) {
+    const style = options.highlightStyle || 'background';
+    const base = {};
+    switch (style) {
+        case 'background':
+            base.backgroundColor = options.highlightColor || 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.4))';
+            base.borderRadius = '2px';
+            base.padding = '0 2px';
+            break;
+        case 'underline':
+            base.textDecoration = 'underline';
+            base.textDecorationColor = options.highlightColor || 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.8))';
+            base.textUnderlineOffset = '2px';
+            break;
+        case 'bold':
+            // Only bold, no background
+            break;
+        case 'color-only':
+            // Only color, no background
+            break;
+    }
+    if (options.highlightTextColor) {
+        base.color = options.highlightTextColor;
+    }
+    else {
+        base.color = 'var(--seekora-highlight-color, inherit)';
+    }
+    base.fontWeight = options.highlightFontWeight || 'var(--seekora-highlight-weight, 500)';
+    return base;
+}
 /**
  * Converts a string like "lined <mark>blue</mark>" into React nodes with
- * the marked part rendered as a <mark> element. When no <mark> tags are
+ * the marked part rendered as a styled element. When no <mark> tags are
  * present, returns the string as-is.
  */
 export function parseHighlightMarkup(text, options = {}) {
@@ -21,11 +52,18 @@ export function parseHighlightMarkup(text, options = {}) {
     const parts = text.split(/(<mark>[\s\S]*?<\/mark>)/g);
     if (parts.length <= 1)
         return text;
-    const { markClassName, markStyle } = options;
+    const { markClassName, markStyle, highlightTag } = options;
+    const Tag = (highlightTag || 'mark');
+    // Compute styles: if no custom options provided, use legacy defaults
+    const hasCustomOptions = options.highlightColor || options.highlightTextColor
+        || options.highlightFontWeight || options.highlightStyle;
+    const computedStyle = hasCustomOptions
+        ? computeHighlightStyles(options)
+        : defaultMarkStyle;
     return (React.createElement(React.Fragment, null, parts.map((part, i) => {
         const m = part.match(/^<mark>([\s\S]*)<\/mark>$/);
         if (m) {
-            return (React.createElement("mark", { key: i, className: markClassName, style: { ...defaultMarkStyle, ...markStyle } }, m[1]));
+            return (React.createElement(Tag, { key: i, className: markClassName, style: { ...computedStyle, ...markStyle } }, m[1]));
         }
         return part;
     })));

package/dist/hooks/useClickTracking.d.ts

@@ -0,0 +1,36 @@
+/**
+ * useClickTracking Hook
+ *
+ * Wraps result link clicks with analytics fire-before-navigate.
+ * - For target="_blank" links: fires analytics normally (page stays)
+ * - For same-page navigation: uses sendBeacon + small delay before navigation
+ * - Tracks click_target: 'new_tab' | 'same_page' | 'in_page'
+ * - Includes destination_url and source_url in click event payload
+ */
+export type ClickTarget = 'new_tab' | 'same_page' | 'in_page';
+export interface ClickTrackingOptions {
+    /** The destination URL the user is navigating to */
+    destinationUrl?: string;
+    /** The clicked item ID */
+    itemId: string;
+    /** Position in search results (1-based) */
+    position: number;
+    /** Click target type */
+    clickTarget?: ClickTarget;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface UseClickTrackingReturn {
+    /**
+     * Track a click event and optionally delay navigation.
+     * Returns a promise that resolves when tracking is complete.
+     */
+    trackClick: (options: ClickTrackingOptions) => Promise<void>;
+    /**
+     * Create an onClick handler that tracks before navigating.
+     * Use this to wrap <a> tag clicks.
+     */
+    createClickHandler: (options: ClickTrackingOptions, onComplete?: () => void) => (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+export declare const useClickTracking: () => UseClickTrackingReturn;
+//# sourceMappingURL=useClickTracking.d.ts.map

package/dist/hooks/useClickTracking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickTracking.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickTracking.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,kBAAkB,EAAE,CAClB,OAAO,EAAE,oBAAoB,EAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,KACpB,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,QAAO,sBAwFnC,CAAC"}

package/dist/hooks/useClickTracking.js

@@ -0,0 +1,96 @@
+/**
+ * useClickTracking Hook
+ *
+ * Wraps result link clicks with analytics fire-before-navigate.
+ * - For target="_blank" links: fires analytics normally (page stays)
+ * - For same-page navigation: uses sendBeacon + small delay before navigation
+ * - Tracks click_target: 'new_tab' | 'same_page' | 'in_page'
+ * - Includes destination_url and source_url in click event payload
+ */
+import { useCallback, useRef } from 'react';
+import { useSearchContext } from '../components/SearchProvider';
+import { useSearchState } from './useSearchState';
+import { sendAnalyticsBeacon } from '@seekora-ai/ui-sdk-core';
+export const useClickTracking = () => {
+    const { client, enableAnalytics, stateManager } = useSearchContext();
+    const { results } = useSearchState();
+    const pendingRef = useRef(false);
+    const trackClick = useCallback(async (options) => {
+        if (!enableAnalytics || pendingRef.current)
+            return;
+        pendingRef.current = true;
+        try {
+            const sourceUrl = typeof window !== 'undefined' ? window.location.href : undefined;
+            const searchContext = results?.context;
+            // Include A/B test fields from state manager (beacon payloads bypass client.trackEvent)
+            const abTestId = stateManager.getAbTestId?.();
+            const abVariant = stateManager.getAbVariant?.();
+            const eventPayload = {
+                event_name: 'product_click',
+                clicked_item_id: options.itemId,
+                position: options.position,
+                destination_url: options.destinationUrl || '',
+                source_url: sourceUrl || '',
+                click_target: options.clickTarget || 'in_page',
+                ...(abTestId && { ab_test_id: abTestId }),
+                ...(abVariant && { ab_variant: abVariant }),
+                ...options.metadata,
+            };
+            // For same_page navigation, use sendBeacon for reliability
+            if (options.clickTarget === 'same_page') {
+                if (client.trackClick) {
+                    // Try sendBeacon approach
+                    const baseUrl = client.baseUrl || client.apiUrl || '';
+                    if (baseUrl) {
+                        sendAnalyticsBeacon(`${baseUrl}/api/analytics/event`, {
+                            ...eventPayload,
+                            ...(searchContext || {}),
+                        });
+                    }
+                }
+            }
+            else {
+                // Normal tracking via client SDK
+                if (client.trackClick) {
+                    await client.trackClick(options.itemId, options.position, searchContext);
+                }
+                else if (client.trackEvent) {
+                    await client.trackEvent(eventPayload, searchContext);
+                }
+            }
+        }
+        catch {
+            // Silently fail — analytics should never break navigation
+        }
+        finally {
+            pendingRef.current = false;
+        }
+    }, [client, enableAnalytics, results, stateManager]);
+    const createClickHandler = useCallback((options, onComplete) => {
+        return (e) => {
+            const anchor = e.currentTarget;
+            const href = anchor.href;
+            const target = anchor.target;
+            const isNewTab = target === '_blank' || e.metaKey || e.ctrlKey;
+            const clickTarget = isNewTab ? 'new_tab' : 'same_page';
+            const trackOptions = { ...options, destinationUrl: href, clickTarget };
+            if (isNewTab) {
+                // New tab: page stays, track normally
+                trackClick(trackOptions);
+                onComplete?.();
+            }
+            else {
+                // Same page: prevent default, track with beacon, then navigate
+                e.preventDefault();
+                trackClick(trackOptions).then(() => {
+                    // Small delay to ensure beacon fires
+                    setTimeout(() => {
+                        onComplete?.();
+                        window.location.href = href;
+                    }, 50);
+                });
+            }
+        };
+    }, [trackClick]);
+    return { trackClick, createClickHandler };
+};

package/dist/hooks/useExperiment.d.ts

@@ -0,0 +1,25 @@
+/**
+ * useExperiment Hook
+ *
+ * Fetches experiment variant assignments from the backend and caches them.
+ * Auto-injects ab_test_id and ab_variant into SearchProvider context.
+ *
+ * Usage:
+ *   const { experimentId, variantId, variantConfig, isLoading } = useExperiment('search-ranking-v2');
+ */
+export interface ExperimentAssignment {
+    experiment_id: string;
+    variant_id: string;
+    variant_config?: Record<string, unknown>;
+}
+export interface UseExperimentReturn {
+    experimentId: string | null;
+    variantId: string | null;
+    variantConfig: Record<string, unknown> | null;
+    isLoading: boolean;
+    error: Error | null;
+    /** All active assignments for the current user */
+    allAssignments: ExperimentAssignment[];
+}
+export declare const useExperiment: (experimentId?: string) => UseExperimentReturn;
+//# sourceMappingURL=useExperiment.d.ts.map

package/dist/hooks/useExperiment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExperiment.d.ts","sourceRoot":"","sources":["../../src/hooks/useExperiment.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kDAAkD;IAClD,cAAc,EAAE,oBAAoB,EAAE,CAAC;CACxC;AAsCD,eAAO,MAAM,aAAa,GAAI,eAAe,MAAM,KAAG,mBAkHrD,CAAC"}

package/dist/hooks/useExperiment.js

@@ -0,0 +1,146 @@
+/**
+ * useExperiment Hook
+ *
+ * Fetches experiment variant assignments from the backend and caches them.
+ * Auto-injects ab_test_id and ab_variant into SearchProvider context.
+ *
+ * Usage:
+ *   const { experimentId, variantId, variantConfig, isLoading } = useExperiment('search-ranking-v2');
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useSearchContext } from '../components/SearchProvider';
+const CACHE_PREFIX = 'seekora_experiment_';
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
+function getCachedAssignment(userKey, experimentId) {
+    if (typeof localStorage === 'undefined')
+        return null;
+    try {
+        const key = `${CACHE_PREFIX}${userKey}_${experimentId}`;
+        const raw = localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const cached = JSON.parse(raw);
+        if (Date.now() - cached.timestamp > CACHE_TTL_MS) {
+            localStorage.removeItem(key);
+            return null;
+        }
+        return cached.assignment;
+    }
+    catch {
+        return null;
+    }
+}
+function setCachedAssignment(userKey, assignment) {
+    if (typeof localStorage === 'undefined')
+        return;
+    try {
+        const key = `${CACHE_PREFIX}${userKey}_${assignment.experiment_id}`;
+        const cached = { assignment, timestamp: Date.now() };
+        localStorage.setItem(key, JSON.stringify(cached));
+    }
+    catch {
+        // Silently fail — localStorage may be full or unavailable
+    }
+}
+export const useExperiment = (experimentId) => {
+    const { client, stateManager } = useSearchContext();
+    const [allAssignments, setAllAssignments] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchedRef = useRef(false);
+    const fetchAssignments = useCallback(async () => {
+        if (fetchedRef.current)
+            return;
+        fetchedRef.current = true;
+        setIsLoading(true);
+        try {
+            // Get user key from client config or generate anonymous one
+            const clientAny = client;
+            const baseUrl = clientAny.baseUrl || clientAny.apiUrl || '';
+            const storeId = clientAny.storeId || clientAny.xStoreId || '';
+            if (!baseUrl || !storeId) {
+                setIsLoading(false);
+                return;
+            }
+            // Try to determine user key
+            const userKey = clientAny.userId || clientAny.anonymousId || clientAny.anonId || '';
+            if (!userKey) {
+                setIsLoading(false);
+                return;
+            }
+            // Check cache first for specific experiment
+            if (experimentId) {
+                const cached = getCachedAssignment(userKey, experimentId);
+                if (cached) {
+                    setAllAssignments([cached]);
+                    // Update state manager and SDK client with cached assignment
+                    stateManager.setAbTest(cached.experiment_id, cached.variant_id);
+                    if (typeof client.setAbTest === 'function') {
+                        client.setAbTest(cached.experiment_id, cached.variant_id);
+                    }
+                    setIsLoading(false);
+                    return;
+                }
+            }
+            // Fetch from backend (requires store authentication for orgID resolution)
+            const readSecret = clientAny.readSecret || clientAny.storeSecret || '';
+            const headers = {
+                'x-storeid': storeId,
+                'x-user-id': userKey,
+            };
+            if (readSecret) {
+                headers['x-storesecret'] = readSecret;
+            }
+            const response = await fetch(`${baseUrl}/api/v1/experiments/assignment`, {
+                headers,
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch experiment assignments: ${response.status}`);
+            }
+            const data = await response.json();
+            const assignments = data.assignments || [];
+            // Cache all assignments
+            assignments.forEach(a => setCachedAssignment(userKey, a));
+            setAllAssignments(assignments);
+            // If a specific experiment was requested, set it on the state manager and SDK client
+            const setAbFields = (expId, varId) => {
+                stateManager.setAbTest(expId, varId);
+                if (typeof client.setAbTest === 'function') {
+                    client.setAbTest(expId, varId);
+                }
+            };
+            if (experimentId) {
+                const match = assignments.find(a => a.experiment_id === experimentId);
+                if (match) {
+                    setAbFields(match.experiment_id, match.variant_id);
+                }
+            }
+            else if (assignments.length > 0) {
+                // Use the first assignment by default
+                setAbFields(assignments[0].experiment_id, assignments[0].variant_id);
+            }
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [client, stateManager, experimentId]);
+    useEffect(() => {
+        fetchAssignments();
+    }, [fetchAssignments]);
+    // Find the specific experiment assignment
+    const assignment = experimentId
+        ? allAssignments.find(a => a.experiment_id === experimentId)
+        : allAssignments[0] || null;
+    return {
+        experimentId: assignment?.experiment_id || null,
+        variantId: assignment?.variant_id || null,
+        variantConfig: assignment?.variant_config || null,
+        isLoading,
+        error,
+        allAssignments,
+    };
+};