@huskel/sdk 0.3.3 → 0.4.0

package/dist/index.mjs

@@ -105,6 +105,10 @@ var HuskelAPI = class {
   async searchVector(query, limit = 10) {
     return this.post("/search/vector", { query, siteId: this.siteId, limit });
   }
+  // Autocomplete — pure in-memory Trie, <1ms, no Upstash call. Only true prefix matches.
+  async searchAutocomplete(query, limit = 8) {
+    return this.post("/search/autocomplete", { query, siteId: this.siteId, limit });
+  }
   // LLM chat — conversational search with history context.
   async chat(query, history = []) {
     log("info", "chat query", query);
@@ -420,29 +424,34 @@ function useSearch() {
   const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const abortRef = useRef3(null);
-  const search = useCallback(async (query, limit = 10) => {
-    var _a, _b, _c;
+  const genRef = useRef3(0);
+  const search = useCallback(async (query, limit = 8) => {
+    var _a, _b;
     if (!query.trim()) {
       setResults([]);
+      setLoading(false);
       return;
     }
-    (_a = abortRef.current) == null ? void 0 : _a.abort();
-    abortRef.current = new AbortController();
-    setLoading(true);
+    const gen = ++genRef.current;
     setError(null);
     try {
-      const res = await client.api.searchVector(query, limit);
-      setResults((_b = res.results) != null ? _b : []);
+      const res = await client.api.searchAutocomplete(query, limit);
+      if (gen === genRef.current) {
+        setResults((_a = res.results) != null ? _a : []);
+      }
     } catch (e) {
-      setError((_c = e.message) != null ? _c : "Search failed");
+      if (gen === genRef.current) {
+        setError((_b = e.message) != null ? _b : "Search failed");
+      }
     } finally {
-      setLoading(false);
+      if (gen === genRef.current) setLoading(false);
     }
   }, [client]);
   const clear = useCallback(() => {
+    genRef.current++;
     setResults([]);
     setError(null);
+    setLoading(false);
   }, []);
   return { results, loading, error, search, clear };
 }
@@ -540,22 +549,142 @@ 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 S = `
-  .hsk-wrap{position:relative;width:100%;font-family:inherit}
-  .hsk-input{width:100%;padding:10px 16px;font-size:15px;border:1.5px solid #e2e2e2;border-radius:8px;outline:none;box-sizing:border-box;background:#fff;transition:border-color .2s}
-  .hsk-input:focus{border-color:#f47c3c}
-  .hsk-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:9999;max-height:360px;overflow-y:auto}
-  .hsk-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s}
-  .hsk-item:hover{background:#faf5f1}
-  .hsk-item img{width:40px;height:40px;object-fit:cover;border-radius:4px}
-  .hsk-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .hsk-item-price{font-size:13px;color:#f47c3c;margin-top:2px}
-  .hsk-msg{padding:16px;text-align:center;font-size:14px;color:#888}
+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; } }
 `;
+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" })
+] });
 function SearchBar({
-  placeholder = "Search for what you want \u2014 how you want",
+  placeholder = "Search products\u2026",
   limit = 10,
-  debounceMs = 300,
+  debounceMs = 80,
   onSelect,
   className,
   inputClassName,
@@ -574,101 +703,470 @@ function SearchBar({
       setOpen(false);
       return;
     }
+    setOpen(true);
     timer.current = setTimeout(() => {
       search(query, limit);
-      setOpen(true);
     }, debounceMs);
     return () => clearTimeout(timer.current);
-  }, [query, search, clear, limit, debounceMs]);
+  }, [query]);
   useEffect3(() => {
-    const handler = (e) => {
+    const h = (e) => {
       if (wrap.current && !wrap.current.contains(e.target)) setOpen(false);
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
   }, []);
   const handleSelect = (r) => {
     setOpen(false);
     setQuery(r.product.name);
     onSelect == null ? void 0 : onSelect(r);
   };
+  const showDrop = open && query.trim().length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("style", { children: S }),
-    /* @__PURE__ */ jsxs("div", { className: `hsk-wrap ${className != null ? className : ""}`, ref: wrap, 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-input ${inputClassName != null ? inputClassName : ""}`,
+          className: `hsk-sb-input ${inputClassName != null ? inputClassName : ""}`,
           type: "text",
           value: query,
           placeholder,
           onChange: (e) => setQuery(e.target.value),
-          onFocus: () => results.length && setOpen(true)
+          onFocus: () => results.length > 0 && query.trim() && setOpen(true),
+          autoComplete: "off",
+          spellCheck: false
         }
       ),
-      open && /* @__PURE__ */ jsxs("div", { className: `hsk-drop ${dropdownClassName != null ? dropdownClassName : ""}`, children: [
-        loading && /* @__PURE__ */ jsx2("div", { className: "hsk-msg", children: "Searching\u2026" }),
-        !loading && results.length === 0 && /* @__PURE__ */ jsxs("div", { className: "hsk-msg", children: [
-          'No results for "',
+      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) => {
-            var _a, _b;
-            return renderResult ? /* @__PURE__ */ jsx2("div", { onClick: () => handleSelect(r), children: renderResult(r) }, r.id) : /* @__PURE__ */ jsxs("div", { className: "hsk-item", onClick: () => handleSelect(r), children: [
-              ((_a = r.product.images) == null ? void 0 : _a[0]) && /* @__PURE__ */ jsx2("img", { src: r.product.images[0], alt: r.product.name }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx2("div", { className: "hsk-item-name", children: r.product.name }),
-                /* @__PURE__ */ jsxs("div", { className: "hsk-item-price", children: [
-                  (_b = r.product.currency) != null ? _b : "KES",
-                  " ",
-                  r.product.price
+        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);
-          }
-        )
+              ]
+            },
+            r.id
+          );
+        })
       ] })
     ] })
   ] });
 }
 
 // src/components/Sparkle.tsx
-import { useState as useState5 } from "react";
+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 S2 = `
-  .hsk-sparkle{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;background:#f47c3c;color:#fff;border:none;border-radius:20px;cursor:pointer;transition:opacity .2s,transform .15s}
-  .hsk-sparkle:hover{opacity:.88;transform:scale(1.04)}
-  .hsk-sparkle:disabled{opacity:.5;cursor:not-allowed}
+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 Sparkle({ productName, limit = 5, onResult, className }) {
-  const client = useHuskelContext();
-  const [loading, setLoading] = useState5(false);
-  const handleClick = async () => {
-    setLoading(true);
-    try {
-      const res = await client.api.searchVector(productName, limit);
-      onResult == null ? void 0 : onResult(res.results);
-    } catch (e) {
-      console.error("[Huskel Sparkle]", e);
-    } finally {
-      setLoading(false);
+function SparkleModal({ productName, limit, backdropColor, backdropBlur, onClose, onNavigate, onResult }) {
+  const { results, loading, search } = useSearch();
+  const initiated = useRef7(false);
+  useEffect4(() => {
+    if (!initiated.current) {
+      initiated.current = true;
+      search(productName, limit);
+    }
+  }, []);
+  useEffect4(() => {
+    if (results.length > 0) onResult == null ? void 0 : onResult(results);
+  }, [results]);
+  useEffect4(() => {
+    const h = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", h);
+    return () => document.removeEventListener("keydown", h);
+  }, []);
+  const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur != null ? backdropBlur : "16px";
+  const bg = backdropColor != null ? backdropColor : void 0;
+  const handleNav = (r) => {
+    const prevent = onNavigate == null ? void 0 : onNavigate(r);
+    if (prevent !== false) {
+      onClose();
+      if (r.product.url) window.location.href = r.product.url;
     }
   };
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3("style", { children: S2 }),
-    /* @__PURE__ */ jsxs2("button", { className: `hsk-sparkle ${className != null ? className : ""}`, onClick: handleClick, disabled: loading, children: [
-      "\u2726 ",
-      loading ? "Finding\u2026" : "Similar"
-    ] })
+    /* @__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" })
+            ] }),
+            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" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Sparkle({ productName, limit = 8, onResult, backdropColor, backdropBlur, className, onNavigate }) {
+  const [open, setOpen] = useState5(false);
+  const [mounted, setMounted] = useState5(false);
+  useEffect4(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("style", { children: CSS2 }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        className: `hsk-sp-btn ${className != null ? className : ""}`,
+        onClick: () => setOpen(true),
+        title: "Find similar products",
+        "aria-label": "Find similar products",
+        children: "\u2726"
+      }
+    ),
+    open && mounted && createPortal(
+      /* @__PURE__ */ jsx3(
+        SparkleModal,
+        {
+          productName,
+          limit,
+          backdropColor,
+          backdropBlur,
+          onClose: () => setOpen(false),
+          onResult,
+          onNavigate
+        }
+      ),
+      document.body
+    )
   ] });
 }
 
 // src/components/ChatWidget.tsx
-import { useState as useState6, useRef as useRef7, useEffect as useEffect4 } from "react";
+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 S3 = `
+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}
@@ -723,9 +1221,9 @@ function SourceCard({ source, onSelect }) {
 function ChatWidget({ placeholder = "Ask about anything in our store\u2026", title = "AI Shopping Assistant", className, onSelectSource }) {
   const { messages, sources, loading, error, send, reset } = useChat();
   const [input, setInput] = useState6("");
-  const bottomRef = useRef7(null);
-  const textareaRef = useRef7(null);
-  useEffect4(() => {
+  const bottomRef = useRef8(null);
+  const textareaRef = useRef8(null);
+  useEffect5(() => {
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading]);
@@ -749,7 +1247,7 @@ function ChatWidget({ placeholder = "Ask about anything in our store\u2026", tit
     t.style.height = Math.min(t.scrollHeight, 120) + "px";
   };
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4("style", { children: S3 }),
+    /* @__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" }),
@@ -808,7 +1306,801 @@ function ChatWidget({ placeholder = "Ask about anything in our store\u2026", tit
     ] })
   ] });
 }
+
+// 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 = [
+  "Cheapest smartphone",
+  "Smart TV under KSh 20,000",
+  "Noise-cancelling headphones",
+  "Best laptop for students"
+];
+function SourcesCarousel({ sources, onSelectSource }) {
+  const railRef = useRef9(null);
+  const [showNext, setShowNext] = useState7(false);
+  const measure = useCallback4(() => {
+    const el = railRef.current;
+    if (!el) return;
+    const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
+    setShowNext(el.scrollWidth > el.clientWidth + 4 && !atEnd);
+  }, []);
+  useEffect6(() => {
+    measure();
+    const el = railRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    el.addEventListener("scroll", measure, { passive: true });
+    return () => {
+      ro.disconnect();
+      el.removeEventListener("scroll", measure);
+    };
+  }, [measure, sources]);
+  const scrollNext = () => {
+    var _a;
+    (_a = railRef.current) == null ? void 0 : _a.scrollBy({ left: 170, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-sources-wrap", children: [
+    /* @__PURE__ */ jsx5("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => {
+      var _a;
+      return /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "hsk-cb-source",
+          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" }),
+            /* @__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",
+                " ",
+                parseFloat(src.price.replace(/[^0-9.]/g, "") || "0").toLocaleString()
+              ] })
+            ] })
+          ]
+        },
+        si
+      );
+    }) }),
+    showNext && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "hsk-cb-sources-fade",
+          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" })
+    ] })
+  ] });
+}
+function ChatModal({
+  title = "AI Shopping Assistant",
+  placeholder = "Ask me anything \u2014 gifts, budget, use case\u2026",
+  backdropColor,
+  backdropBlur,
+  onClose,
+  onSelectSource
+}) {
+  var _a, _b;
+  const { messages, sources, loading, error, send, reset } = useChat();
+  const [input, setInput] = useState7("");
+  const [selectedProduct, setSelectedProduct] = useState7(null);
+  const bottomRef = useRef9(null);
+  const textareaRef = useRef9(null);
+  useEffect6(() => {
+    var _a2;
+    (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
+  }, [messages, loading, selectedProduct]);
+  useEffect6(() => {
+    const h = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", h);
+    return () => document.removeEventListener("keydown", h);
+  }, []);
+  const handleSourceClick = (src) => {
+    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?`;
+    send(q);
+  };
+  const handleSend = async (text) => {
+    const q = (text != null ? text : input).trim();
+    if (!q || loading) return;
+    setSelectedProduct(null);
+    setInput("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+    await send(q);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleInput = (e) => {
+    setInput(e.target.value);
+    const t = e.target;
+    t.style.height = "auto";
+    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" })
+            ] })
+          ] }),
+          /* @__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",
+              {
+                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()
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            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__ */ 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" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function AIChatButton({
+  label,
+  title,
+  placeholder,
+  backdropColor,
+  backdropBlur,
+  className,
+  onSelectSource
+}) {
+  const [open, setOpen] = useState7(false);
+  const [mounted, setMounted] = useState7(false);
+  useEffect6(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx5("style", { children: CSS3 }),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        className: `hsk-cb-btn ${className != null ? className : ""}`,
+        onClick: () => setOpen(true),
+        "aria-label": "Open AI chat",
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "hsk-cb-btn-icon", children: "\u2726" }),
+          label !== void 0 ? label : null
+        ]
+      }
+    ),
+    open && mounted && createPortal2(
+      /* @__PURE__ */ jsx5(
+        ChatModal,
+        {
+          title,
+          placeholder,
+          backdropColor,
+          backdropBlur,
+          onClose: () => setOpen(false),
+          onSelectSource
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 export {
+  AIChatButton,
   ChatWidget,
   HuskelAPI,
   HuskelClient,