@huskel/sdk 0.4.0 → 0.4.1

package/dist/index.mjs

@@ -548,135 +548,7 @@ function useChat() {
 
 // src/components/SearchBar.tsx
 import { useState as useState4, useEffect as useEffect3, useRef as useRef6 } from "react";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var CSS = `
-  /* \u2500\u2500 Light mode defaults (CSS custom properties) \u2500\u2500 */
-  .hsk-sb-wrap {
-    --hsk-bg: #fff;
-    --hsk-border: #d1d5db;
-    --hsk-text: #111;
-    --hsk-muted: #9ca3af;
-    --hsk-hover: #f3f4f6;
-    --hsk-drop-shadow: 0 8px 30px rgba(0,0,0,.12);
-    position: relative;
-    width: 100%;
-    font-family: inherit;
-  }
-
-  /* \u2500\u2500 Dark mode overrides at wrap level so ALL children inherit \u2500\u2500 */
-  @media (prefers-color-scheme: dark) {
-    .hsk-sb-wrap {
-      --hsk-bg: #1a1a1b;
-      --hsk-border: #2a2a2d;
-      --hsk-text: #f3f3f2;
-      --hsk-muted: #666;
-      --hsk-hover: #1e1e1f;
-      --hsk-drop-shadow: 0 12px 40px rgba(0,0,0,.5);
-    }
-  }
-
-  /* \u2500\u2500 Input \u2500\u2500 */
-  .hsk-sb-input {
-    width: 100%;
-    padding: 10px 16px 10px 40px;
-    font-size: 14px;
-    border-radius: 9999px;
-    border: 1.5px solid var(--hsk-border);
-    outline: none;
-    box-sizing: border-box;
-    background: var(--hsk-bg);
-    color: var(--hsk-text);
-    transition: border-color .15s, box-shadow .15s;
-    font-family: inherit;
-  }
-  .hsk-sb-input::placeholder { color: var(--hsk-muted); }
-  .hsk-sb-input:focus {
-    border-color: #ff6a33;
-    box-shadow: 0 0 0 3px rgba(255,106,51,.12);
-  }
-  .hsk-sb-icon {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--hsk-muted);
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-  }
-
-  /* \u2500\u2500 Dropdown \u2500\u2500 */
-  .hsk-sb-drop {
-    position: absolute;
-    top: calc(100% + 6px);
-    left: 0; right: 0;
-    background: var(--hsk-bg);
-    border: 1px solid var(--hsk-border);
-    border-radius: 12px;
-    box-shadow: var(--hsk-drop-shadow);
-    z-index: 9999;
-    overflow: hidden;
-    padding: 6px 0;
-  }
-
-  /* \u2500\u2500 Row \u2500\u2500 */
-  .hsk-sb-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 9px 16px;
-    cursor: pointer;
-    transition: background .1s;
-  }
-  .hsk-sb-row:hover { background: var(--hsk-hover); }
-  .hsk-sb-row-icon {
-    color: var(--hsk-muted);
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-  .hsk-sb-row-body { flex: 1; min-width: 0; }
-  .hsk-sb-row-title {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--hsk-text);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.3;
-  }
-  .hsk-sb-row-sub {
-    font-size: 11px;
-    color: var(--hsk-muted);
-    margin-top: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .hsk-sb-empty {
-    padding: 14px 16px;
-    font-size: 13px;
-    color: var(--hsk-muted);
-  }
-
-  /* \u2500\u2500 Thin accent bar while loading (non-intrusive, no text) \u2500\u2500 */
-  .hsk-sb-loading-bar {
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #ff6a33, transparent);
-    background-size: 200% 100%;
-    animation: hsk-sweep 0.9s linear infinite;
-    position: absolute;
-    top: 0; left: 0; right: 0;
-  }
-  @keyframes hsk-sweep {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-
-  /* \u2500\u2500 Staggered fade-in \u2500\u2500 */
-  .hsk-sb-fade { animation: hsk-fin .1s ease-out both; }
-  @keyframes hsk-fin { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
-`;
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SearchIcon = () => /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
   /* @__PURE__ */ jsx2("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
   /* @__PURE__ */ jsx2("line", { x1: "13", y1: "13", x2: "18", y2: "18" })
@@ -689,7 +561,9 @@ function SearchBar({
   className,
   inputClassName,
   dropdownClassName,
-  renderResult
+  renderResult,
+  theme,
+  classNames = {}
 }) {
   const [query, setQuery] = useState4("");
   const [open, setOpen] = useState4(false);
@@ -722,59 +596,57 @@ function SearchBar({
     onSelect == null ? void 0 : onSelect(r);
   };
   const showDrop = open && query.trim().length > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("style", { children: CSS }),
-    /* @__PURE__ */ jsxs("div", { className: `hsk-sb-wrap ${className != null ? className : ""}`, ref: wrap, children: [
-      /* @__PURE__ */ jsx2("span", { className: "hsk-sb-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          className: `hsk-sb-input ${inputClassName != null ? inputClassName : ""}`,
-          type: "text",
-          value: query,
-          placeholder,
-          onChange: (e) => setQuery(e.target.value),
-          onFocus: () => results.length > 0 && query.trim() && setOpen(true),
-          autoComplete: "off",
-          spellCheck: false
-        }
-      ),
-      showDrop && /* @__PURE__ */ jsxs("div", { className: `hsk-sb-drop ${dropdownClassName != null ? dropdownClassName : ""}`, style: { position: "absolute" }, children: [
-        loading && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-loading-bar" }),
-        results.length === 0 && !loading && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
-          "No results for \u201C",
-          query,
-          "\u201D"
-        ] }),
-        results.map((r, i) => {
-          var _a;
-          return renderResult ? /* @__PURE__ */ jsx2(
-            "div",
-            {
-              onClick: () => handleSelect(r),
-              className: "hsk-sb-fade",
-              style: { animationDelay: `${i * 18}ms` },
-              children: renderResult(r)
-            },
-            r.id
-          ) : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "hsk-sb-row hsk-sb-fade",
-              style: { animationDelay: `${i * 18}ms` },
-              onClick: () => handleSelect(r),
-              children: [
-                /* @__PURE__ */ jsx2("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
-                /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-title", children: r.product.name }),
-                  (r.product.category || r.product.brand) && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-sub", children: (_a = r.product.category) != null ? _a : r.product.brand })
-                ] })
-              ]
-            },
-            r.id
-          );
-        })
-      ] })
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  return /* @__PURE__ */ jsxs("div", { className: `hsk-sb-wrap ${classNames.root || ""} ${className || ""}`, ref: wrap, style: customStyles, children: [
+    /* @__PURE__ */ jsx2("span", { className: "hsk-sb-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        className: `hsk-sb-input ${classNames.input || ""} ${inputClassName || ""}`,
+        type: "text",
+        value: query,
+        placeholder,
+        onChange: (e) => setQuery(e.target.value),
+        onFocus: () => results.length > 0 && query.trim() && setOpen(true),
+        autoComplete: "off",
+        spellCheck: false
+      }
+    ),
+    showDrop && /* @__PURE__ */ jsxs("div", { className: `hsk-sb-drop ${classNames.dropdown || ""} ${dropdownClassName || ""}`, style: { position: "absolute" }, children: [
+      loading && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-loading-bar" }),
+      results.length === 0 && !loading && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
+        "No results for \u201C",
+        query,
+        "\u201D"
+      ] }),
+      results.map((r, i) => {
+        var _a;
+        return renderResult ? /* @__PURE__ */ jsx2(
+          "div",
+          {
+            onClick: () => handleSelect(r),
+            className: "hsk-sb-fade",
+            style: { animationDelay: `${i * 18}ms` },
+            children: renderResult(r)
+          },
+          r.id
+        ) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `hsk-sb-row hsk-sb-fade ${classNames.row || ""}`,
+            style: { animationDelay: `${i * 18}ms` },
+            onClick: () => handleSelect(r),
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "hsk-sb-row-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
+              /* @__PURE__ */ jsxs("div", { className: "hsk-sb-row-body", children: [
+                /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-title", children: r.product.name }),
+                (r.product.category || r.product.brand) && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-row-sub", children: (_a = r.product.category) != null ? _a : r.product.brand })
+              ] })
+            ]
+          },
+          r.id
+        );
+      })
     ] })
   ] });
 }
@@ -782,237 +654,23 @@ function SearchBar({
 // src/components/Sparkle.tsx
 import { useState as useState5, useEffect as useEffect4, useRef as useRef7 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var CSS2 = `
-  /* \u2500\u2500 Trigger button \u2500\u2500 */
-  .hsk-sp-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    border: 1px solid var(--hsk-sp-border, rgba(255,106,51,.35));
-    background: var(--hsk-sp-bg, rgba(255,106,51,.08));
-    color: #ff6a33;
-    cursor: pointer;
-    font-size: 15px;
-    line-height: 1;
-    transition: background .15s, border-color .15s, transform .12s;
-    flex-shrink: 0;
-    padding: 0;
-  }
-  .hsk-sp-btn:hover {
-    background: rgba(255,106,51,.18);
-    border-color: rgba(255,106,51,.7);
-    transform: scale(1.1);
-  }
-  .hsk-sp-btn:active { transform: scale(.92); }
-
-  /* \u2500\u2500 Backdrop \u2500\u2500 */
-  .hsk-sp-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 99998;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding: clamp(48px, 10vh, 96px) 16px 40px;
-    animation: hsk-bd-in .2s ease-out both;
-    overflow-y: auto;
-  }
-  @keyframes hsk-bd-in { from { opacity:0; } to { opacity:1; } }
-
-  /* \u2500\u2500 Modal card \u2500\u2500 */
-  .hsk-sp-card {
-    width: 100%;
-    max-width: 600px;
-    border-radius: 18px;
-    overflow: hidden;
-    animation: hsk-card-in .24s cubic-bezier(.34,1.36,.64,1) both;
-    flex-shrink: 0;
-    /* light */
-    background: var(--hsk-modal-card-bg, #fff);
-    border: 1px solid var(--hsk-modal-card-border, rgba(0,0,0,.08));
-    box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
-  }
-  @keyframes hsk-card-in {
-    from { opacity:0; transform: scale(.96) translateY(-12px); }
-    to   { opacity:1; transform: scale(1) translateY(0); }
-  }
-
-  /* \u2500\u2500 Header \u2500\u2500 */
-  .hsk-sp-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 18px 20px 14px;
-    border-bottom: 1px solid var(--hsk-modal-divide, rgba(0,0,0,.07));
-  }
-  .hsk-sp-header-icon { font-size: 18px; color: #ff6a33; flex-shrink: 0; }
-  .hsk-sp-header-body { flex: 1; min-width: 0; }
-  .hsk-sp-header-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--hsk-modal-text, #111);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .hsk-sp-header-sub {
-    font-size: 11px;
-    color: var(--hsk-modal-muted, #888);
-    margin-top: 2px;
-  }
-  .hsk-sp-close {
-    width: 30px; height: 30px;
-    border-radius: 8px;
-    border: 1px solid var(--hsk-modal-divide, rgba(0,0,0,.1));
-    background: none;
-    color: var(--hsk-modal-muted, #888);
-    cursor: pointer;
-    font-size: 18px;
-    display: flex; align-items: center; justify-content: center;
-    transition: all .15s;
-    flex-shrink: 0;
-  }
-  .hsk-sp-close:hover { border-color: #ff6a33; color: #ff6a33; }
-
-  /* \u2500\u2500 Thin loading accent bar \u2500\u2500 */
-  .hsk-sp-bar {
-    height: 2px;
-    background: linear-gradient(90deg, transparent 0%, #ff6a33 40%, #ffaa80 60%, transparent 100%);
-    background-size: 200% 100%;
-    animation: hsk-bar .9s linear infinite;
-  }
-  @keyframes hsk-bar { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
-
-  /* \u2500\u2500 Results list \u2500\u2500 */
-  .hsk-sp-results { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
-  .hsk-sp-empty { padding: 40px; text-align: center; font-size: 13px; color: var(--hsk-modal-muted, #aaa); }
-
-  /* \u2500\u2500 Result card (toast-inspired: slides up from bottom) \u2500\u2500 */
-  .hsk-sp-item {
-    display: flex;
-    gap: 14px;
-    padding: 14px;
-    border-radius: 12px;
-    border: 1px solid var(--hsk-modal-item-border, rgba(0,0,0,.07));
-    background: var(--hsk-modal-item-bg, #f9f9f9);
-    animation: hsk-toast-up .28s cubic-bezier(.22,.68,0,1.2) both;
-    overflow: hidden;
-  }
-  @keyframes hsk-toast-up {
-    from { opacity:0; transform: translateY(18px) scale(.97); }
-    to   { opacity:1; transform: translateY(0) scale(1); }
-  }
-
-  /* image */
-  .hsk-sp-img-wrap {
-    width: 72px; height: 72px;
-    border-radius: 10px;
-    background: #fff;
-    border: 1px solid var(--hsk-modal-divide, rgba(0,0,0,.07));
-    flex-shrink: 0;
-    overflow: hidden;
-    display: flex; align-items: center; justify-content: center;
-    padding: 6px;
-  }
-  .hsk-sp-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
-  .hsk-sp-img-placeholder { font-size: 26px; }
-
-  /* body */
-  .hsk-sp-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
-  .hsk-sp-item-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--hsk-modal-text, #111);
-    line-height: 1.35;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-  .hsk-sp-item-cat {
-    font-size: 11px;
-    font-weight: 600;
-    color: #ff6a33;
-    text-transform: uppercase;
-    letter-spacing: .05em;
-  }
-  .hsk-sp-item-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
-  .hsk-sp-item-price {
-    font-size: 18px;
-    font-weight: 700;
-    color: var(--hsk-modal-text, #111);
-  }
-  .hsk-sp-item-currency { font-size: 12px; color: var(--hsk-modal-muted, #888); }
-
-  /* actions */
-  .hsk-sp-actions { display: flex; gap: 6px; margin-top: 8px; }
-  .hsk-sp-action {
-    flex: 1;
-    padding: 7px 10px;
-    border-radius: 8px;
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: all .15s;
-    text-align: center;
-    font-family: inherit;
-  }
-  .hsk-sp-action-primary {
-    background: #ff6a33;
-    color: #fff;
-    border-color: #ff6a33;
-  }
-  .hsk-sp-action-primary:hover { background: #e55d2a; }
-  .hsk-sp-action-secondary {
-    background: var(--hsk-action-sec-bg, rgba(0,0,0,.06));
-    color: var(--hsk-modal-muted, #666);
-    border-color: var(--hsk-modal-divide, rgba(0,0,0,.1));
-  }
-  .hsk-sp-action-secondary:hover {
-    background: var(--hsk-action-sec-bg-hover, rgba(0,0,0,.1));
-    color: var(--hsk-modal-text, #333);
-  }
-
-  /* \u2500\u2500 Footer \u2500\u2500 */
-  .hsk-sp-footer {
-    padding: 12px 20px;
-    border-top: 1px solid var(--hsk-modal-divide, rgba(0,0,0,.07));
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .hsk-sp-badge {
-    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
-    color: #ff6a33;
-    background: rgba(255,106,51,.1);
-    border: 1px solid rgba(255,106,51,.25);
-    padding: 2px 8px;
-    border-radius: 999px;
-  }
-  .hsk-sp-esc { font-size: 11px; color: var(--hsk-modal-muted, #bbb); margin-left: auto; }
-
-  /* \u2500\u2500 Dark mode \u2500\u2500 */
-  @media (prefers-color-scheme: dark) {
-    .hsk-sp-card {
-      --hsk-modal-card-bg: #111112;
-      --hsk-modal-card-border: rgba(255,255,255,.07);
-      --hsk-modal-text: #f3f3f2;
-      --hsk-modal-muted: #666;
-      --hsk-modal-divide: rgba(255,255,255,.07);
-      --hsk-modal-item-bg: #1a1a1b;
-      --hsk-modal-item-border: rgba(255,255,255,.06);
-      --hsk-action-sec-bg: rgba(255,255,255,.07);
-      --hsk-action-sec-bg-hover: rgba(255,255,255,.12);
-    }
-    .hsk-sp-img-wrap { background: #242425; border-color: rgba(255,255,255,.08); }
-  }
-`;
-function SparkleModal({ productName, limit, backdropColor, backdropBlur, onClose, onNavigate, onResult }) {
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SparkleIcon = ({ className }) => /* @__PURE__ */ jsx3("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+function SparkleModal({
+  productName,
+  limit,
+  backdropColor,
+  backdropBlur,
+  onClose,
+  onNavigate,
+  onResult,
+  theme,
+  classNames = {}
+}) {
   const { results, loading, search } = useSearch();
   const initiated = useRef7(false);
   useEffect4(() => {
@@ -1040,109 +698,114 @@ function SparkleModal({ productName, limit, backdropColor, backdropBlur, onClose
       if (r.product.url) window.location.href = r.product.url;
     }
   };
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3("style", { children: CSS2 }),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: "hsk-sp-backdrop",
-        onClick: onClose,
-        style: {
-          backdropFilter: `blur(${blurVal})`,
-          WebkitBackdropFilter: `blur(${blurVal})`,
-          background: bg != null ? bg : void 0
-          /* CSS handles light/dark via @media if bg not forced */
-        },
-        children: [
-          !bg && /* @__PURE__ */ jsx3("style", { children: `
-            @media (prefers-color-scheme: dark)  { .hsk-sp-backdrop { background: rgba(0,0,0,.80); } }
-            @media (prefers-color-scheme: light) { .hsk-sp-backdrop { background: rgba(240,240,245,.70); } }
-          ` }),
-          /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-card", onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header", children: [
-              /* @__PURE__ */ jsx3("span", { className: "hsk-sp-header-icon", children: "\u2726" }),
-              /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-body", children: [
-                /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-title", children: [
-                  "Similar to \u201C",
-                  productName,
-                  "\u201D"
-                ] }),
-                /* @__PURE__ */ jsx3("div", { className: "hsk-sp-header-sub", children: "AI vector similarity \xB7 instant results" })
-              ] }),
-              /* @__PURE__ */ jsx3("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: "\xD7" })
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `hsk-sp-backdrop ${classNames.backdrop || ""}`,
+      onClick: onClose,
+      style: __spreadValues({
+        backdropFilter: `blur(${blurVal})`,
+        WebkitBackdropFilter: `blur(${blurVal})`,
+        background: bg != null ? bg : void 0
+      }, customStyles),
+      children: /* @__PURE__ */ jsxs2("div", { className: `hsk-sp-card ${classNames.card || ""}`, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header", children: [
+          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
+          /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-body", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-title", children: [
+              "Similar to \u201C",
+              productName,
+              "\u201D"
             ] }),
-            loading && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-bar" }),
-            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-results", children: [
-              !loading && results.length === 0 && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-empty", children: "No similar products found." }),
-              results.map((r, i) => {
-                var _a, _b, _c;
-                const price = parseFloat(((_a = r.product.price) == null ? void 0 : _a.replace(/[^0-9.]/g, "")) || "0");
-                const currency = (_b = r.product.currency) != null ? _b : "KES";
-                return /* @__PURE__ */ jsxs2(
-                  "div",
-                  {
-                    className: "hsk-sp-item",
-                    style: { animationDelay: `${i * 55}ms` },
-                    children: [
-                      /* @__PURE__ */ jsx3("div", { className: "hsk-sp-img-wrap", children: ((_c = r.product.images) == null ? void 0 : _c[0]) ? /* @__PURE__ */ jsx3("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx3("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
-                      /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-body", children: [
-                        r.product.category && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-cat", children: r.product.category }),
-                        /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-name", children: r.product.name }),
-                        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-price-row", children: [
-                          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-currency", children: currency }),
-                          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
-                        ] }),
-                        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-actions", children: [
-                          /* @__PURE__ */ jsx3(
-                            "button",
-                            {
-                              className: "hsk-sp-action hsk-sp-action-primary",
-                              onClick: () => handleNav(r),
-                              children: "View Product"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx3(
-                            "button",
-                            {
-                              className: "hsk-sp-action hsk-sp-action-secondary",
-                              onClick: () => onClose(),
-                              children: "Add to Cart"
-                            }
-                          )
-                        ] })
-                      ] })
-                    ]
-                  },
-                  r.id
-                );
-              })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-footer", children: [
-              /* @__PURE__ */ jsx3("span", { className: "hsk-sp-badge", children: "\u2726 Huskel AI" }),
-              /* @__PURE__ */ jsx3("span", { className: "hsk-sp-esc", children: "Esc to close" })
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] });
+            /* @__PURE__ */ jsx3("div", { className: "hsk-sp-header-sub", children: "AI vector similarity \xB7 instant results" })
+          ] }),
+          /* @__PURE__ */ jsx3("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx3(CloseIcon, {}) })
+        ] }),
+        loading && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-bar" }),
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-results", children: [
+          !loading && results.length === 0 && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-empty", children: "No similar products found." }),
+          results.map((r, i) => {
+            var _a, _b, _c;
+            const price = parseFloat(((_a = r.product.price) == null ? void 0 : _a.replace(/[^0-9.]/g, "")) || "0");
+            const currency = (_b = r.product.currency) != null ? _b : "KES";
+            return /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: `hsk-sp-item ${classNames.item || ""}`,
+                style: { animationDelay: `${i * 55}ms` },
+                children: [
+                  /* @__PURE__ */ jsx3("div", { className: "hsk-sp-img-wrap", children: ((_c = r.product.images) == null ? void 0 : _c[0]) ? /* @__PURE__ */ jsx3("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx3("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                  /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-body", children: [
+                    r.product.category && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-cat", children: r.product.category }),
+                    /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-name", children: r.product.name }),
+                    /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-price-row", children: [
+                      /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-currency", children: currency }),
+                      /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-actions", children: [
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          className: "hsk-sp-action hsk-sp-action-primary",
+                          onClick: () => handleNav(r),
+                          children: "View Product"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          className: "hsk-sp-action hsk-sp-action-secondary",
+                          onClick: () => onClose(),
+                          children: "Add to Cart"
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              },
+              r.id
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-footer", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "hsk-sp-badge", style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [
+            /* @__PURE__ */ jsx3(SparkleIcon, {}),
+            " Huskel AI"
+          ] }),
+          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-esc", children: "Esc to close" })
+        ] })
+      ] })
+    }
+  );
 }
-function Sparkle({ productName, limit = 8, onResult, backdropColor, backdropBlur, className, onNavigate }) {
+function Sparkle({
+  productName,
+  limit = 8,
+  onResult,
+  backdropColor,
+  backdropBlur,
+  className,
+  onNavigate,
+  theme,
+  classNames = {}
+}) {
   const [open, setOpen] = useState5(false);
   const [mounted, setMounted] = useState5(false);
   useEffect4(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3("style", { children: CSS2 }),
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx3(
       "button",
       {
-        className: `hsk-sp-btn ${className != null ? className : ""}`,
+        className: `hsk-sp-btn ${classNames.button || ""} ${className || ""}`,
         onClick: () => setOpen(true),
+        style: customStyles,
         title: "Find similar products",
         "aria-label": "Find similar products",
-        children: "\u2726"
+        children: /* @__PURE__ */ jsx3(SparkleIcon, {})
       }
     ),
     open && mounted && createPortal(
@@ -1155,7 +818,9 @@ function Sparkle({ productName, limit = 8, onResult, backdropColor, backdropBlur
           backdropBlur,
           onClose: () => setOpen(false),
           onResult,
-          onNavigate
+          onNavigate,
+          theme,
+          classNames
         }
       ),
       document.body
@@ -1165,60 +830,37 @@ function Sparkle({ productName, limit = 8, onResult, backdropColor, backdropBlur
 
 // src/components/ChatWidget.tsx
 import { useState as useState6, useRef as useRef8, useEffect as useEffect5 } from "react";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var S = `
-  .hsk-chat-widget{display:flex;flex-direction:column;height:100%;min-height:320px;font-family:inherit;background:#0f0f10;border:1px solid #2a2a2d;border-radius:12px;overflow:hidden}
-  .hsk-chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #1e1e1f;background:#111112;flex-shrink:0}
-  .hsk-chat-title{font-size:14px;font-weight:600;color:#f3f3f2}
-  .hsk-chat-badge{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#ff6a33;background:#ff6a3315;border:1px solid #ff6a3330;padding:2px 8px;border-radius:20px}
-  .hsk-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
-  .hsk-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:#555;font-size:13px;text-align:center;padding:24px}
-  .hsk-chat-empty-icon{font-size:28px;margin-bottom:4px}
-  .hsk-msg-row{display:flex;gap:8px;align-items:flex-start}
-  .hsk-msg-row.user{flex-direction:row-reverse}
-  .hsk-msg-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
-  .hsk-msg-avatar.ai{background:#ff6a3320;border:1px solid #ff6a3340;color:#ff6a33}
-  .hsk-msg-avatar.user{background:#2a2a2d;color:#9a9aa1}
-  .hsk-msg-bubble{max-width:78%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6}
-  .hsk-msg-bubble.ai{background:#171718;border:1px solid #2a2a2d;color:#e8e8e7;border-radius:4px 12px 12px 12px}
-  .hsk-msg-bubble.user{background:#ff6a33;color:#fff;border-radius:12px 4px 12px 12px}
-  .hsk-sources{margin-top:10px;display:flex;flex-direction:column;gap:6px}
-  .hsk-source-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#1a1a1b;border:1px solid #252527;border-radius:8px;cursor:pointer;transition:border-color 0.15s}
-  .hsk-source-card:hover{border-color:#ff6a3360}
-  .hsk-source-img{width:36px;height:36px;object-fit:cover;border-radius:4px;background:#fff}
-  .hsk-source-name{font-size:12px;font-weight:500;color:#e8e8e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .hsk-source-price{font-size:11px;color:#ff6a33;font-weight:700;margin-top:2px}
-  .hsk-typing{display:flex;gap:4px;align-items:center;padding:10px 14px;background:#171718;border:1px solid #2a2a2d;border-radius:4px 12px 12px 12px;width:fit-content}
-  .hsk-typing-dot{width:6px;height:6px;background:#ff6a33;border-radius:50%;animation:hsk-chat-bounce 1.2s infinite}
-  .hsk-typing-dot:nth-child(2){animation-delay:0.2s}
-  .hsk-typing-dot:nth-child(3){animation-delay:0.4s}
-  @keyframes hsk-chat-bounce{0%,100%{opacity:0.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
-  .hsk-chat-input-area{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid #1e1e1f;background:#111112;flex-shrink:0}
-  .hsk-chat-input{flex:1;background:#1a1a1b;border:1px solid #2a2a2d;border-radius:8px;padding:9px 14px;font-size:13px;color:#f3f3f2;outline:none;font-family:inherit;transition:border-color 0.2s;resize:none;min-height:38px;max-height:120px;line-height:1.5}
-  .hsk-chat-input::placeholder{color:#555}
-  .hsk-chat-input:focus{border-color:#ff6a33}
-  .hsk-chat-send{width:34px;height:34px;border-radius:8px;background:#ff6a33;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:opacity 0.15s,transform 0.1s}
-  .hsk-chat-send:hover{opacity:0.88}
-  .hsk-chat-send:active{transform:scale(0.93)}
-  .hsk-chat-send:disabled{opacity:0.4;cursor:not-allowed}
-  .hsk-chat-reset{font-size:11px;color:#555;cursor:pointer;padding:0 4px;transition:color 0.15s;background:none;border:none;font-family:inherit}
-  .hsk-chat-reset:hover{color:#ff6a33}
-`;
-function SourceCard({ source, onSelect }) {
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SparkleIcon2 = () => /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
+var ArrowUpIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 19V5" })
+] });
+function SourceCard({ source, defaultCurrency, onSelect }) {
   var _a;
   return /* @__PURE__ */ jsxs3("div", { className: "hsk-source-card", onClick: () => onSelect == null ? void 0 : onSelect(source), children: [
     source.image && /* @__PURE__ */ jsx4("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
     /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx4("div", { className: "hsk-source-name", children: source.name }),
       source.price && /* @__PURE__ */ jsxs3("div", { className: "hsk-source-price", children: [
-        (_a = source.currency) != null ? _a : "KES",
+        (_a = source.currency) != null ? _a : defaultCurrency,
         " ",
         source.price
       ] })
     ] })
   ] });
 }
-function ChatWidget({ placeholder = "Ask about anything in our store\u2026", title = "AI Shopping Assistant", className, onSelectSource }) {
+function ChatWidget({
+  title = "AI Shopping Assistant",
+  placeholder = "Ask about anything in our store\u2026",
+  emptyStateText = "Ask me anything about our products",
+  emptyStateSuggestions = '"Find me headphones under KSh 5,000" \xB7 "Gift ideas"',
+  defaultCurrency = "KES",
+  className,
+  theme,
+  classNames = {},
+  onSelectSource
+}) {
   const { messages, sources, loading, error, send, reset } = useChat();
   const [input, setInput] = useState6("");
   const bottomRef = useRef8(null);
@@ -1246,581 +888,93 @@ function ChatWidget({ placeholder = "Ask about anything in our store\u2026", tit
     t.style.height = "auto";
     t.style.height = Math.min(t.scrollHeight, 120) + "px";
   };
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4("style", { children: S }),
-    /* @__PURE__ */ jsxs3("div", { className: `hsk-chat-widget ${className != null ? className : ""}`, children: [
-      /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-header", children: [
-        /* @__PURE__ */ jsx4("span", { style: { fontSize: 16, color: "#ff6a33" }, children: "\u2726" }),
-        /* @__PURE__ */ jsx4("span", { className: "hsk-chat-title", children: title }),
-        /* @__PURE__ */ jsx4("span", { className: "hsk-chat-badge", children: "AI" }),
-        messages.length > 0 && /* @__PURE__ */ jsx4("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-messages", children: [
-        messages.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-empty", children: [
-          /* @__PURE__ */ jsx4("div", { className: "hsk-chat-empty-icon", children: "\u2726" }),
-          /* @__PURE__ */ jsx4("div", { children: "Ask me anything about our products" }),
-          /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "#444", marginTop: 4 }, children: '"Find me headphones under KSh 5,000" \xB7 "Gift ideas for a chef"' })
-        ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { children: [
-          /* @__PURE__ */ jsxs3("div", { className: `hsk-msg-row ${msg.role}`, children: [
-            /* @__PURE__ */ jsx4("div", { className: `hsk-msg-avatar ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.role === "assistant" ? "\u2726" : "\u2191" }),
-            /* @__PURE__ */ jsx4("div", { className: `hsk-msg-bubble ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.content })
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `hsk-chat-widget ${classNames.root || ""} ${className || ""}`,
+      style: customStyles,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: `hsk-chat-header ${classNames.header || ""}`, children: [
+          /* @__PURE__ */ jsx4("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ jsx4(SparkleIcon2, {}) }),
+          /* @__PURE__ */ jsx4("span", { className: "hsk-chat-title", children: title }),
+          /* @__PURE__ */ jsx4("span", { className: "hsk-chat-badge", children: "AI" }),
+          messages.length > 0 && /* @__PURE__ */ jsx4("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-messages", children: [
+          messages.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-empty", children: [
+            /* @__PURE__ */ jsx4("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ jsx4(SparkleIcon2, {}) }),
+            /* @__PURE__ */ jsx4("div", { children: emptyStateText }),
+            /* @__PURE__ */ jsx4("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
+          ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsxs3("div", { className: `hsk-msg-row ${msg.role}`, children: [
+              /* @__PURE__ */ jsx4("div", { className: `hsk-msg-avatar ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.role === "assistant" ? /* @__PURE__ */ jsx4(SparkleIcon2, {}) : "U" }),
+              /* @__PURE__ */ jsx4("div", { className: `hsk-msg-bubble ${msg.role} ${classNames.messageBubble || ""}`, children: msg.content })
+            ] }),
+            msg.role === "assistant" && idx === messages.length - 1 && sources.length > 0 && /* @__PURE__ */ jsx4("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx4("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx4(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
+          ] }, idx)),
+          loading && /* @__PURE__ */ jsxs3("div", { className: "hsk-msg-row", children: [
+            /* @__PURE__ */ jsx4("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx4(SparkleIcon2, {}) }),
+            /* @__PURE__ */ jsxs3("div", { className: "hsk-typing", children: [
+              /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
+              /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
+              /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" })
+            ] })
           ] }),
-          msg.role === "assistant" && idx === messages.length - 1 && sources.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginLeft: 36 }, children: /* @__PURE__ */ jsx4("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx4(SourceCard, { source: src, onSelect: onSelectSource }, si)) }) })
-        ] }, idx)),
-        loading && /* @__PURE__ */ jsxs3("div", { className: "hsk-msg-row", children: [
-          /* @__PURE__ */ jsx4("div", { className: "hsk-msg-avatar ai", children: "\u2726" }),
-          /* @__PURE__ */ jsxs3("div", { className: "hsk-typing", children: [
-            /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
-            /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" }),
-            /* @__PURE__ */ jsx4("div", { className: "hsk-typing-dot" })
-          ] })
+          error && /* @__PURE__ */ jsx4("div", { className: "hsk-chat-error", children: error }),
+          /* @__PURE__ */ jsx4("div", { ref: bottomRef })
         ] }),
-        error && /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "#ef4444", textAlign: "center", padding: 8 }, children: error }),
-        /* @__PURE__ */ jsx4("div", { ref: bottomRef })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-input-area", children: [
-        /* @__PURE__ */ jsx4(
-          "textarea",
-          {
-            ref: textareaRef,
-            className: "hsk-chat-input",
-            value: input,
-            onChange: handleInput,
-            onKeyDown: handleKey,
-            placeholder,
-            rows: 1,
-            disabled: loading
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            className: "hsk-chat-send",
-            onClick: handleSend,
-            disabled: !input.trim() || loading,
-            "aria-label": "Send",
-            children: "\u2191"
-          }
-        )
-      ] })
-    ] })
-  ] });
+        /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-input-area", children: [
+          /* @__PURE__ */ jsx4(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: `hsk-chat-input ${classNames.input || ""}`,
+              value: input,
+              onChange: handleInput,
+              onKeyDown: handleKey,
+              placeholder,
+              rows: 1,
+              disabled: loading
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              className: "hsk-chat-send",
+              onClick: handleSend,
+              disabled: !input.trim() || loading,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx4(ArrowUpIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/AIChatButton.tsx
 import { useState as useState7, useEffect as useEffect6, useRef as useRef9, useCallback as useCallback4 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var CSS3 = `
-  /* \u2500\u2500 Trigger button \u2500\u2500 */
-  .hsk-cb-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    padding: 8px 16px;
-    border-radius: 9999px;
-    border: 1px solid rgba(255,106,51,.4);
-    background: rgba(255,106,51,.1);
-    color: #ff6a33;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
-    font-family: inherit;
-    white-space: nowrap;
-  }
-  .hsk-cb-btn:hover {
-    background: rgba(255,106,51,.18);
-    border-color: rgba(255,106,51,.7);
-    box-shadow: 0 4px 16px rgba(255,106,51,.2);
-  }
-  .hsk-cb-btn:active { transform: scale(.95); }
-  .hsk-cb-btn-icon { font-size: 15px; line-height: 1; }
-
-  /* \u2500\u2500 Full-screen overlay \u2500\u2500 */
-  .hsk-cb-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 99999;
-    display: flex;
-    flex-direction: column;
-    animation: hsk-overlay-in .2s ease-out both;
-  }
-  @keyframes hsk-overlay-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-  }
-
-  /* \u2500\u2500 Panel (Claude-style, centered column) \u2500\u2500 */
-  .hsk-cb-panel {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    max-width: 780px;
-    width: 100%;
-    margin: 0 auto;
-    animation: hsk-panel-in .28s cubic-bezier(.34,1.2,.64,1) both;
-  }
-  @keyframes hsk-panel-in {
-    from { opacity: 0; transform: translateY(24px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
-  /* \u2500\u2500 Top bar \u2500\u2500 */
-  .hsk-cb-topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 28px 12px;
-    flex-shrink: 0;
-  }
-  .hsk-cb-topbar-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .hsk-cb-topbar-icon {
-    font-size: 22px;
-    color: #ff6a33;
-    line-height: 1;
-    animation: hsk-sparkle-spin 6s linear infinite;
-  }
-  @keyframes hsk-sparkle-spin {
-    0%,100% { transform: rotate(0deg) scale(1); }
-    25% { transform: rotate(15deg) scale(1.1); }
-    75% { transform: rotate(-10deg) scale(.95); }
-  }
-  .hsk-cb-topbar-title {
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--hsk-chat-text, #111);
-    letter-spacing: -.01em;
-  }
-  .hsk-cb-topbar-sub {
-    font-size: 12px;
-    color: var(--hsk-chat-muted, #888);
-    margin-top: 2px;
-  }
-  .hsk-cb-topbar-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .hsk-cb-topbar-btn {
-    height: 34px;
-    padding: 0 14px;
-    border-radius: 8px;
-    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
-    background: none;
-    color: var(--hsk-chat-muted, #888);
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all .15s;
-    font-family: inherit;
-  }
-  .hsk-cb-topbar-btn:hover {
-    border-color: #ff6a33;
-    color: #ff6a33;
-  }
-  .hsk-cb-close {
-    width: 34px; height: 34px;
-    border-radius: 8px;
-    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
-    background: none;
-    color: var(--hsk-chat-muted, #888);
-    cursor: pointer;
-    font-size: 20px;
-    display: flex; align-items: center; justify-content: center;
-    transition: all .15s;
-    flex-shrink: 0;
-    font-family: inherit;
-    line-height: 1;
-  }
-  .hsk-cb-close:hover { border-color: #ff6a33; color: #ff6a33; }
-
-  /* \u2500\u2500 Messages scroll area \u2500\u2500 */
-  .hsk-cb-msgs {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px 28px 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    scroll-behavior: smooth;
-    scrollbar-width: thin;
-    scrollbar-color: var(--hsk-chat-divide, rgba(0,0,0,.1)) transparent;
-  }
-
-  /* \u2500\u2500 Empty / welcome state \u2500\u2500 */
-  .hsk-cb-empty {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    padding: 60px 32px;
-    text-align: center;
-  }
-  .hsk-cb-empty-icon {
-    font-size: 48px;
-    color: #ff6a33;
-    animation: hsk-sparkle-spin 4s linear infinite;
-  }
-  .hsk-cb-empty-title {
-    font-size: 26px;
-    font-weight: 700;
-    color: var(--hsk-chat-text, #111);
-    letter-spacing: -.02em;
-  }
-  .hsk-cb-empty-sub {
-    font-size: 14px;
-    color: var(--hsk-chat-muted, #888);
-    line-height: 1.7;
-    max-width: 380px;
-  }
-  .hsk-cb-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    justify-content: center;
-    margin-top: 4px;
-  }
-  .hsk-cb-chip {
-    padding: 8px 16px;
-    border-radius: 9999px;
-    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
-    background: var(--hsk-chat-source-bg, rgba(0,0,0,.03));
-    color: var(--hsk-chat-text, #333);
-    font-size: 13px;
-    cursor: pointer;
-    transition: all .15s;
-    font-family: inherit;
-  }
-  .hsk-cb-chip:hover {
-    border-color: #ff6a33;
-    color: #ff6a33;
-    background: rgba(255,106,51,.06);
-  }
-
-  /* \u2500\u2500 Message rows \u2500\u2500 */
-  .hsk-cb-msg-group {
-    padding: 20px 0;
-    border-bottom: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.05));
-    animation: hsk-msg-in .22s ease-out both;
-  }
-  .hsk-cb-msg-group:last-child { border-bottom: none; }
-  @keyframes hsk-msg-in {
-    from { opacity: 0; transform: translateY(10px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
-  /* User message */
-  .hsk-cb-user-msg {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 20px;
-  }
-  .hsk-cb-user-bubble {
-    background: #ff6a33;
-    color: #fff;
-    padding: 12px 20px;
-    border-radius: 22px 22px 6px 22px;
-    font-size: 15px;
-    line-height: 1.6;
-    max-width: 72%;
-    font-weight: 500;
-  }
-
-  /* AI message - no bubble, just clean text like Claude */
-  .hsk-cb-ai-msg {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-  }
-  .hsk-cb-ai-icon {
-    width: 28px; height: 28px;
-    border-radius: 50%;
-    background: rgba(255,106,51,.12);
-    border: 1px solid rgba(255,106,51,.25);
-    color: #ff6a33;
-    font-size: 13px;
-    display: flex; align-items: center; justify-content: center;
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-  .hsk-cb-ai-body { flex: 1; min-width: 0; }
-  .hsk-cb-ai-text {
-    font-size: 15px;
-    line-height: 1.75;
-    color: var(--hsk-chat-text, #111);
-    white-space: pre-wrap;
-  }
-
-  /* \u2500\u2500 Sources horizontal carousel \u2500\u2500 */
-  .hsk-cb-sources-wrap {
-    position: relative;
-    margin-top: 20px;
-  }
-  .hsk-cb-sources {
-    display: flex;
-    flex-direction: row;
-    gap: 14px;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    padding-bottom: 4px;
-  }
-  .hsk-cb-sources::-webkit-scrollbar { display: none; }
-  /* Feathered right edge */
-  .hsk-cb-sources-fade {
-    position: absolute;
-    right: 0; top: 0; bottom: 4px;
-    width: 90px;
-    pointer-events: none;
-  }
-  /* Scroll-next pill */
-  .hsk-cb-sources-next {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 30px; height: 30px;
-    border-radius: 50%;
-    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
-    background: var(--hsk-chat-bg, #0e0e0f);
-    color: var(--hsk-chat-text, #eee);
-    cursor: pointer;
-    font-size: 16px;
-    display: flex; align-items: center; justify-content: center;
-    box-shadow: 0 2px 12px rgba(0,0,0,.2);
-    transition: all .15s;
-    z-index: 3;
-    font-family: inherit;
-    line-height: 1;
-  }
-  .hsk-cb-sources-next:hover { border-color: #ff6a33; color: #ff6a33; }
-  /* Card: no border, no bg, no radius \u2014 clean dark canvas */
-  .hsk-cb-source {
-    flex: 0 0 188px;
-    scroll-snap-align: start;
-    border-radius: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    transition: transform .14s, opacity .14s;
-    animation: hsk-card-in .26s ease-out both;
-    overflow: visible;
-  }
-  @keyframes hsk-card-in {
-    from { opacity: 0; transform: translateX(16px); }
-    to   { opacity: 1; transform: none; }
-  }
-  .hsk-cb-source:hover { transform: translateY(-3px); opacity: .92; }
-  .hsk-cb-src-imgwrap {
-    width: 188px;
-    height: 188px;
-    overflow: hidden;
-    border-radius: 0;
-    display: block;
-  }
-  .hsk-cb-src-imgwrap img {
-    width: 100%; height: 100%;
-    object-fit: cover;
-    transition: transform .22s;
-    display: block;
-  }
-  .hsk-cb-source:hover .hsk-cb-src-imgwrap img { transform: scale(1.05); }
-  .hsk-cb-src-imgwrap-empty {
-    width: 188px;
-    height: 188px;
-    background: var(--hsk-chat-divide, rgba(255,255,255,.06));
-    display: flex; align-items: center; justify-content: center;
-    color: var(--hsk-chat-muted, #555);
-    font-size: 32px;
-  }
-  .hsk-cb-src-info {
-    padding: 8px 2px 0;
-  }
-  .hsk-cb-src-name {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--hsk-chat-text, #eee);
-    line-height: 1.4;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .hsk-cb-src-price {
-    font-size: 13px;
-    color: #ff6a33;
-    font-weight: 700;
-    margin-top: 3px;
-  }
-
-  /* \u2500\u2500 Selected product inline card \u2500\u2500 */
-  .hsk-cb-selected-product {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    margin-top: 16px;
-    padding: 14px;
-    border: 1px solid var(--hsk-chat-divide, rgba(255,255,255,.08));
-    border-left: 3px solid #ff6a33;
-    background: var(--hsk-chat-source-bg, rgba(255,255,255,.03));
-    cursor: pointer;
-    transition: border-color .15s;
-    animation: hsk-msg-in .2s ease-out both;
-  }
-  .hsk-cb-selected-product:hover { border-left-color: rgba(255,106,51,.6); }
-  .hsk-cb-selected-img {
-    width: 64px; height: 64px;
-    object-fit: cover;
-    flex-shrink: 0;
-  }
-  .hsk-cb-selected-info { flex: 1; min-width: 0; }
-  .hsk-cb-selected-name {
-    font-size: 13px; font-weight: 700;
-    color: var(--hsk-chat-text, #eee);
-    margin-bottom: 3px;
-  }
-  .hsk-cb-selected-price {
-    font-size: 13px; color: #ff6a33; font-weight: 700;
-  }
-
-  /* \u2500\u2500 Typing indicator \u2500\u2500 */
-  .hsk-cb-typing-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    padding: 20px 0;
-  }
-  .hsk-cb-typing {
-    display: flex;
-    gap: 5px;
-    padding: 14px 18px;
-  }
-  .hsk-cb-dot {
-    width: 7px; height: 7px;
-    border-radius: 50%;
-    background: var(--hsk-chat-muted, #ccc);
-    animation: hsk-dot-pulse 1.2s ease-in-out infinite;
-  }
-  .hsk-cb-dot:nth-child(2) { animation-delay: .18s; }
-  .hsk-cb-dot:nth-child(3) { animation-delay: .36s; }
-  @keyframes hsk-dot-pulse {
-    0%,100% { opacity: .3; transform: scale(.75); }
-    50%      { opacity: 1;  transform: scale(1); }
-  }
-
-  /* \u2500\u2500 Input area \u2500\u2500 */
-  .hsk-cb-input-wrap {
-    padding: 16px 28px 28px;
-    flex-shrink: 0;
-  }
-  .hsk-cb-input-box {
-    display: flex;
-    align-items: flex-end;
-    gap: 10px;
-    background: var(--hsk-chat-input-bg, rgba(0,0,0,.04));
-    border: 1.5px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
-    border-radius: 18px;
-    padding: 14px 14px 14px 20px;
-    transition: border-color .15s, box-shadow .15s;
-  }
-  .hsk-cb-input-box:focus-within {
-    border-color: #ff6a33;
-    box-shadow: 0 0 0 3px rgba(255,106,51,.1);
-  }
-  .hsk-cb-textarea {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    resize: none;
-    font-size: 15px;
-    color: var(--hsk-chat-text, #111);
-    min-height: 24px;
-    max-height: 140px;
-    line-height: 1.55;
-    font-family: inherit;
-  }
-  .hsk-cb-textarea::placeholder { color: var(--hsk-chat-muted, #aaa); }
-  .hsk-cb-send {
-    width: 38px; height: 38px;
-    border-radius: 10px;
-    background: #ff6a33;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    font-size: 18px;
-    display: flex; align-items: center; justify-content: center;
-    flex-shrink: 0;
-    transition: opacity .15s, transform .1s, background .15s;
-    font-family: inherit;
-  }
-  .hsk-cb-send:hover { opacity: .88; }
-  .hsk-cb-send:active { transform: scale(.9); }
-  .hsk-cb-send:disabled { opacity: .3; cursor: not-allowed; background: var(--hsk-chat-muted, #ccc); }
-  .hsk-cb-hint {
-    text-align: center;
-    font-size: 11px;
-    color: var(--hsk-chat-muted, #bbb);
-    margin-top: 10px;
-  }
-
-  /* \u2500\u2500 Error \u2500\u2500 */
-  .hsk-cb-error {
-    margin: 8px 0;
-    padding: 10px 14px;
-    border-radius: 10px;
-    background: rgba(239,68,68,.08);
-    border: 1px solid rgba(239,68,68,.2);
-    color: #ef4444;
-    font-size: 13px;
-  }
-
-  /* \u2500\u2500 Dark mode \u2500\u2500 */
-  @media (prefers-color-scheme: dark) {
-    .hsk-cb-overlay {
-      --hsk-chat-bg: #0e0e0f;
-      --hsk-chat-text: #f0efed;
-      --hsk-chat-muted: #555;
-      --hsk-chat-divide: rgba(255,255,255,.07);
-      --hsk-chat-input-bg: rgba(255,255,255,.05);
-      --hsk-chat-source-bg: rgba(255,255,255,.04);
-      --hsk-fade-bg: #0e0e0f;
-    }
-    .hsk-cb-overlay {
-      background: rgba(0,0,0,.92) !important;
-    }
-  }
-  @media (prefers-color-scheme: light) {
-    .hsk-cb-overlay {
-      --hsk-chat-bg: #fafafa;
-      --hsk-chat-text: #111;
-      --hsk-chat-muted: #999;
-      --hsk-chat-divide: rgba(0,0,0,.08);
-      --hsk-chat-input-bg: rgba(0,0,0,.04);
-      --hsk-chat-source-bg: rgba(0,0,0,.025);
-      --hsk-fade-bg: #fafafa;
-    }
-    .hsk-cb-overlay {
-      background: rgba(240,240,244,.88) !important;
-    }
-  }
-`;
-var CHIPS = [
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SparkleIcon3 = ({ className }) => /* @__PURE__ */ jsx5("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
+var ArrowUpIcon2 = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
+] });
+var CloseIcon2 = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m9 18 6-6-6-6" }) });
+var DEFAULT_CHIPS = [
   "Cheapest smartphone",
   "Smart TV under KSh 20,000",
   "Noise-cancelling headphones",
   "Best laptop for students"
 ];
-function SourcesCarousel({ sources, onSelectSource }) {
+function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
   const railRef = useRef9(null);
   const [showNext, setShowNext] = useState7(false);
   const measure = useCallback4(() => {
@@ -1855,11 +1009,11 @@ function SourcesCarousel({ sources, onSelectSource }) {
           style: { animationDelay: `${si * 50}ms` },
           onClick: () => onSelectSource == null ? void 0 : onSelectSource(src),
           children: [
-            src.image ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap", children: /* @__PURE__ */ jsx5("img", { src: src.image, alt: src.name, loading: "lazy" }) }) : /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap-empty", children: "\u2726" }),
+            src.image ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap", children: /* @__PURE__ */ jsx5("img", { src: src.image, alt: src.name, loading: "lazy" }) }) : /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
             /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-info", children: [
               /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-name", children: src.name }),
               src.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-price", children: [
-                (_a = src.currency) != null ? _a : "KES",
+                (_a = src.currency) != null ? _a : defaultCurrency,
                 " ",
                 parseFloat(src.price.replace(/[^0-9.]/g, "") || "0").toLocaleString()
               ] })
@@ -1869,7 +1023,7 @@ function SourcesCarousel({ sources, onSelectSource }) {
         si
       );
     }) }),
-    showNext && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    showNext && /* @__PURE__ */ jsxs4(Fragment2, { children: [
       /* @__PURE__ */ jsx5(
         "div",
         {
@@ -1877,7 +1031,7 @@ function SourcesCarousel({ sources, onSelectSource }) {
           style: { background: "linear-gradient(to right, transparent, var(--hsk-fade-bg, #0e0e0f))" }
         }
       ),
-      /* @__PURE__ */ jsx5("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: "\u203A" })
+      /* @__PURE__ */ jsx5("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -1887,7 +1041,11 @@ function ChatModal({
   backdropColor,
   backdropBlur,
   onClose,
-  onSelectSource
+  onSelectSource,
+  defaultCurrency = "KES",
+  chips = DEFAULT_CHIPS,
+  theme,
+  classNames = {}
 }) {
   var _a, _b;
   const { messages, sources, loading, error, send, reset } = useChat();
@@ -1910,7 +1068,7 @@ function ChatModal({
     var _a2;
     setSelectedProduct(src);
     onSelectSource == null ? void 0 : onSelectSource(src);
-    const q = `Tell me more about the ${src.name}${src.price ? ` (${(_a2 = src.currency) != null ? _a2 : "KES"} ${src.price})` : ""} \u2014 what are its key specs, who is it best for, and is it worth buying?`;
+    const q = `Tell me more about the ${src.name}${src.price ? ` (${(_a2 = src.currency) != null ? _a2 : defaultCurrency} ${src.price})` : ""} \u2014 what are its key specs, who is it best for, and is it worth buying?`;
     send(q);
   };
   const handleSend = async (text) => {
@@ -1936,124 +1094,123 @@ function ChatModal({
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
   };
   const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur != null ? backdropBlur : "20px";
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5("style", { children: CSS3 }),
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        className: "hsk-cb-overlay",
-        onClick: onClose,
-        style: __spreadValues({
-          backdropFilter: `blur(${blurVal})`,
-          WebkitBackdropFilter: `blur(${blurVal})`
-        }, backdropColor ? { background: backdropColor } : {}),
-        children: /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-panel", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-left", children: [
-              /* @__PURE__ */ jsx5("span", { className: "hsk-cb-topbar-icon", children: "\u2726" }),
-              /* @__PURE__ */ jsxs4("div", { children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-title", children: title }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-sub", children: "Powered by Huskel AI \xB7 searches the whole catalogue" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-actions", children: [
-              messages.length > 0 && /* @__PURE__ */ jsx5("button", { className: "hsk-cb-topbar-btn", onClick: reset, children: "Clear chat" }),
-              /* @__PURE__ */ jsx5("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: "\xD7" })
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: `hsk-cb-overlay ${classNames.overlay || ""}`,
+      onClick: onClose,
+      style: __spreadValues(__spreadValues({
+        backdropFilter: `blur(${blurVal})`,
+        WebkitBackdropFilter: `blur(${blurVal})`
+      }, backdropColor ? { background: backdropColor } : {}), customStyles),
+      children: /* @__PURE__ */ jsxs4("div", { className: `hsk-cb-panel ${classNames.panel || ""}`, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-left", children: [
+            /* @__PURE__ */ jsx5("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-title", children: title }),
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-sub", children: "Powered by Huskel AI \xB7 searches the whole catalogue" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-msgs", children: [
-            messages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-empty", children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-icon", children: "\u2726" }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-title", children: "What can I help you find?" }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-sub", children: "Ask about products, budgets, gift ideas, specs \u2014 I'll search the entire catalogue for you." }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-chips", children: CHIPS.map((chip) => /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  className: "hsk-cb-chip",
-                  onClick: () => handleSend(chip),
-                  children: chip
-                },
-                chip
-              )) })
-            ] }) : messages.map((msg, idx) => {
-              const isLast = idx === messages.length - 1;
-              const isUser = msg.role === "user";
-              return /* @__PURE__ */ jsx5("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-msg", children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", children: "\u2726" }),
-                /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-body", children: [
-                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-text", children: msg.content }),
-                  isLast && sources.length > 0 && /* @__PURE__ */ jsx5(
-                    SourcesCarousel,
-                    {
-                      sources,
-                      onSelectSource: handleSourceClick
-                    }
-                  )
-                ] })
-              ] }) }, idx);
-            }),
-            selectedProduct && loading && /* @__PURE__ */ jsxs4(
-              "div",
+          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-actions", children: [
+            messages.length > 0 && /* @__PURE__ */ jsx5("button", { className: "hsk-cb-topbar-btn", onClick: reset, children: "Clear chat" }),
+            /* @__PURE__ */ jsx5("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx5(CloseIcon2, {}) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-msgs", children: [
+          messages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-empty", children: [
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-title", children: "What can I help you find?" }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-sub", children: "Ask about products, budgets, gift ideas, specs \u2014 I'll search the entire catalogue for you." }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-chips", children: chips.map((chip) => /* @__PURE__ */ jsx5(
+              "button",
               {
-                className: "hsk-cb-selected-product",
-                onClick: () => selectedProduct.url && window.open(selectedProduct.url, "_blank"),
-                children: [
-                  selectedProduct.image && /* @__PURE__ */ jsx5("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
-                  /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-info", children: [
-                    /* @__PURE__ */ jsx5("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
-                    selectedProduct.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-price", children: [
-                      (_a = selectedProduct.currency) != null ? _a : "KES",
-                      " ",
-                      parseFloat(((_b = selectedProduct.price) != null ? _b : "").replace(/[^0-9.]/g, "") || "0").toLocaleString()
-                    ] })
+                className: "hsk-cb-chip",
+                onClick: () => handleSend(chip),
+                children: chip
+              },
+              chip
+            )) })
+          ] }) : messages.map((msg, idx) => {
+            const isLast = idx === messages.length - 1;
+            const isUser = msg.role === "user";
+            return /* @__PURE__ */ jsx5("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-msg", children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+              /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-body", children: [
+                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-text", children: msg.content }),
+                isLast && sources.length > 0 && /* @__PURE__ */ jsx5(
+                  SourcesCarousel,
+                  {
+                    sources,
+                    defaultCurrency,
+                    onSelectSource: handleSourceClick
+                  }
+                )
+              ] })
+            ] }) }, idx);
+          }),
+          selectedProduct && loading && /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "hsk-cb-selected-product",
+              onClick: () => selectedProduct.url && window.open(selectedProduct.url, "_blank"),
+              children: [
+                selectedProduct.image && /* @__PURE__ */ jsx5("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
+                /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-info", children: [
+                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
+                  selectedProduct.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-price", children: [
+                    (_a = selectedProduct.currency) != null ? _a : defaultCurrency,
+                    " ",
+                    parseFloat(((_b = selectedProduct.price) != null ? _b : "").replace(/[^0-9.]/g, "") || "0").toLocaleString()
                   ] })
-                ]
+                ] })
+              ]
+            }
+          ),
+          loading && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing-row", children: [
+            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing", children: [
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
+              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx5("div", { className: "hsk-cb-error", children: error }),
+          /* @__PURE__ */ jsx5("div", { ref: bottomRef, style: { height: 1 } })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-wrap", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-box", children: [
+            /* @__PURE__ */ jsx5(
+              "textarea",
+              {
+                ref: textareaRef,
+                className: `hsk-cb-textarea ${classNames.input || ""}`,
+                value: input,
+                onChange: handleInput,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                rows: 1,
+                disabled: loading,
+                autoFocus: true
               }
             ),
-            loading && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing-row", children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", children: "\u2726" }),
-              /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing", children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" })
-              ] })
-            ] }),
-            error && /* @__PURE__ */ jsx5("div", { className: "hsk-cb-error", children: error }),
-            /* @__PURE__ */ jsx5("div", { ref: bottomRef, style: { height: 1 } })
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                className: `hsk-cb-send ${classNames.sendButton || ""}`,
+                onClick: () => handleSend(),
+                disabled: !input.trim() || loading,
+                "aria-label": "Send message",
+                children: /* @__PURE__ */ jsx5(ArrowUpIcon2, {})
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-wrap", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-box", children: [
-              /* @__PURE__ */ jsx5(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  className: "hsk-cb-textarea",
-                  value: input,
-                  onChange: handleInput,
-                  onKeyDown: handleKeyDown,
-                  placeholder,
-                  rows: 1,
-                  disabled: loading,
-                  autoFocus: true
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  className: "hsk-cb-send",
-                  onClick: () => handleSend(),
-                  disabled: !input.trim() || loading,
-                  "aria-label": "Send",
-                  children: "\u2191"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-hint", children: "Huskel AI \xB7 searches the whole catalogue in real time" })
-          ] })
+          /* @__PURE__ */ jsx5("div", { className: "hsk-cb-hint", children: "Huskel AI \xB7 searches the whole catalogue in real time" })
         ] })
-      }
-    )
-  ] });
+      ] })
+    }
+  );
 }
 function AIChatButton({
   label,
@@ -2062,23 +1219,28 @@ function AIChatButton({
   backdropColor,
   backdropBlur,
   className,
-  onSelectSource
+  onSelectSource,
+  defaultCurrency,
+  chips,
+  theme,
+  classNames = {}
 }) {
   const [open, setOpen] = useState7(false);
   const [mounted, setMounted] = useState7(false);
   useEffect6(() => {
     setMounted(true);
   }, []);
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5("style", { children: CSS3 }),
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsxs4(
       "button",
       {
-        className: `hsk-cb-btn ${className != null ? className : ""}`,
+        className: `hsk-cb-btn ${classNames.button || ""} ${className || ""}`,
         onClick: () => setOpen(true),
+        style: customStyles,
         "aria-label": "Open AI chat",
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "hsk-cb-btn-icon", children: "\u2726" }),
+          /* @__PURE__ */ jsx5("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon3, {}) }),
           label !== void 0 ? label : null
         ]
       }
@@ -2092,7 +1254,11 @@ function AIChatButton({
           backdropColor,
           backdropBlur,
           onClose: () => setOpen(false),
-          onSelectSource
+          onSelectSource,
+          defaultCurrency,
+          chips,
+          theme,
+          classNames
         }
       ),
       document.body