@akropolys/kiku 1.2.4 → 1.4.0

package/dist/index.js

@@ -29,7 +29,9 @@ __export(src_exports, {
   KikuButton: () => KikuButton,
   KikuChat: () => ChatWidget,
   SearchBar: () => SearchBar,
-  Sparkle: () => Sparkle
+  Sparkle: () => Sparkle,
+  VisualSearch: () => VisualSearch,
+  VoiceButton: () => VoiceButton
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -197,8 +199,8 @@ function SearchBar({
 }
 
 // src/components/ChatWidget.tsx
-var import_react2 = require("react");
-var import_sdk2 = require("@akropolys/sdk");
+var import_react4 = require("react");
+var import_sdk3 = require("@akropolys/sdk");
 
 // src/utils/markdown.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -285,19 +287,151 @@ function renderMarkdown(content) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: elements });
 }
 
-// src/components/ChatWidget.tsx
+// src/components/VoiceButton.tsx
+var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var SparkleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19V5" })
+var MicIcon = ({ active }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", fill: active ? "currentColor" : "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 10a7 7 0 0 0 14 0" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+] });
+function VoiceButton({
+  onTranscript,
+  onInterim,
+  lang = "en-US",
+  className = "",
+  disabled = false
+}) {
+  const [listening, setListening] = (0, import_react2.useState)(false);
+  const recognitionRef = (0, import_react2.useRef)(null);
+  const isSupported = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
+  const start = (0, import_react2.useCallback)(() => {
+    if (!isSupported || listening) return;
+    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SR();
+    recognition.lang = lang;
+    recognition.interimResults = true;
+    recognition.maxAlternatives = 1;
+    recognitionRef.current = recognition;
+    recognition.onstart = () => setListening(true);
+    recognition.onend = () => setListening(false);
+    recognition.onerror = () => setListening(false);
+    recognition.onresult = (e) => {
+      const results = Array.from(e.results);
+      const transcript = results.map((r) => r[0].transcript).join("");
+      const isFinal = e.results[e.results.length - 1].isFinal;
+      if (isFinal) {
+        onTranscript(transcript);
+        setListening(false);
+      } else {
+        onInterim?.(transcript);
+      }
+    };
+    recognition.start();
+  }, [isSupported, listening, lang, onTranscript, onInterim]);
+  const stop = (0, import_react2.useCallback)(() => {
+    recognitionRef.current?.stop();
+    setListening(false);
+  }, []);
+  if (!isSupported) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `kiku-voice-btn${listening ? " kiku-voice-btn--active" : ""} ${className}`,
+      onClick: listening ? stop : start,
+      disabled,
+      title: listening ? "Stop listening" : "Speak your search",
+      "aria-label": listening ? "Stop voice input" : "Start voice input",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MicIcon, { active: listening }),
+        listening && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "kiku-voice-ripple", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+// src/components/VisualSearch.tsx
+var import_react3 = require("react");
+var import_sdk2 = require("@akropolys/sdk");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CameraIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "13", r: "4" })
+] });
+var SpinnerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "kiku-vs-spin", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+function VisualSearch({
+  onResults,
+  onError,
+  categoryHint,
+  className = "",
+  disabled = false
+}) {
+  const client = (0, import_sdk2.useAkropolysContext)();
+  const inputRef = (0, import_react3.useRef)(null);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const handleFile = async (file) => {
+    if (!file.type.startsWith("image/")) return;
+    setLoading(true);
+    try {
+      const base64 = await fileToBase64(file);
+      const res = await client.api.searchByImage(base64, categoryHint);
+      onResults(res, base64);
+    } catch (e) {
+      onError?.(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      setLoading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "label",
+    {
+      className: `kiku-vs-btn${loading ? " kiku-vs-btn--loading" : ""} ${className}`,
+      title: "Search by photo",
+      "aria-label": "Search by uploading a photo",
+      style: { cursor: disabled || loading ? "not-allowed" : "pointer" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: "image/*",
+            capture: "environment",
+            onChange: (e) => e.target.files?.[0] && handleFile(e.target.files[0]),
+            disabled: disabled || loading,
+            hidden: true
+          }
+        ),
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpinnerIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CameraIcon, {})
+      ]
+    }
+  );
+}
+
+// src/components/ChatWidget.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SparkleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 19V5" })
 ] });
 function SourceCard({ source, defaultCurrency, onSelect }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-source-card", onClick: () => onSelect?.(source), children: [
-    source.image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-source-name", children: source.name }),
-      source.price && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-source-price", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-source-card", onClick: () => onSelect?.(source), children: [
+    source.image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-source-name", children: source.name }),
+      source.price && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-source-price", children: [
         source.currency ?? defaultCurrency,
         " ",
         source.price
@@ -314,15 +448,56 @@ function ChatWidget({
   className,
   theme,
   classNames = {},
-  onSelectSource
+  onSelectSource,
+  enableVoice = false,
+  enableVision = false,
+  visionCategoryHint
 }) {
-  const { messages, sources, loading, error, send, reset } = (0, import_sdk2.useKiku)();
-  const [input, setInput] = (0, import_react2.useState)("");
-  const bottomRef = (0, import_react2.useRef)(null);
-  const textareaRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const { messages, sources, loading: chatLoading, error, send, reset } = (0, import_sdk3.useKiku)();
+  const [input, setInput] = (0, import_react4.useState)("");
+  const [visualLoading, setVisualLoading] = (0, import_react4.useState)(false);
+  const bottomRef = (0, import_react4.useRef)(null);
+  const textareaRef = (0, import_react4.useRef)(null);
+  const loading = chatLoading || visualLoading;
+  const [chatHistory, setChatHistory] = (0, import_react4.useState)([]);
+  const lastSyncedCount = (0, import_react4.useRef)(0);
+  (0, import_react4.useEffect)(() => {
+    if (messages.length === 0) {
+      setChatHistory([]);
+      lastSyncedCount.current = 0;
+      return;
+    }
+    if (messages.length > lastSyncedCount.current) {
+      const newMsgs = messages.slice(lastSyncedCount.current);
+      setChatHistory((prev) => [...prev, ...newMsgs]);
+      lastSyncedCount.current = messages.length;
+    } else if (messages.length < lastSyncedCount.current) {
+      setChatHistory(messages);
+      lastSyncedCount.current = messages.length;
+    } else {
+      setChatHistory((prev) => {
+        const next = [...prev];
+        let hookIdx = messages.length - 1;
+        let historyIdx = next.length - 1;
+        while (hookIdx >= 0 && historyIdx >= 0) {
+          if (next[historyIdx].role === messages[hookIdx].role) {
+            next[historyIdx] = {
+              ...next[historyIdx],
+              content: messages[hookIdx].content,
+              cartSnapshot: messages[hookIdx].cartSnapshot,
+              actionType: messages[hookIdx].actionType
+            };
+            break;
+          }
+          historyIdx--;
+        }
+        return next;
+      });
+    }
+  }, [messages]);
+  (0, import_react4.useEffect)(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, loading]);
+  }, [chatHistory, loading]);
   const handleSend = async () => {
     const q = input.trim();
     if (!q || loading) return;
@@ -342,6 +517,56 @@ function ChatWidget({
     t.style.height = "auto";
     t.style.height = Math.min(t.scrollHeight, 120) + "px";
   };
+  const handleVisualResults = (res, preview) => {
+    const userMsg = {
+      role: "user",
+      content: "Uploaded a photo for visual search",
+      imagePreview: preview
+    };
+    const dna = res.style_dna;
+    let content = `I've analyzed your image! Here is the Style DNA I found:
+`;
+    if (dna) {
+      if (dna.color_palette) content += `* **Palette:** ${dna.color_palette}
+`;
+      if (dna.dominant_colors && dna.dominant_colors.length > 0) {
+        content += `* **Colors:** ${dna.dominant_colors.join(", ")}
+`;
+      }
+      if (dna.aesthetic && dna.aesthetic.length > 0) {
+        content += `* **Aesthetic:** ${dna.aesthetic.join(", ")}
+`;
+      }
+      if (dna.texture) content += `* **Texture:** ${dna.texture}
+`;
+      if (dna.formality) content += `* **Formality:** ${dna.formality}
+`;
+    }
+    const results = res.results || [];
+    if (results.length > 0) {
+      content += `
+I found ${results.length} matching products in the store for you.`;
+    } else {
+      content += `
+I couldn't find any matching products in the store.`;
+    }
+    const assistantMsg = {
+      role: "assistant",
+      content,
+      styleDNA: dna,
+      visualSources: results.map((r) => ({
+        id: r.id,
+        name: r.product.name,
+        price: r.product.price,
+        currency: r.product.currency,
+        category: r.product.category,
+        url: r.product.url,
+        image: r.product.images && r.product.images.length > 0 ? r.product.images[0] : void 0,
+        brand: r.product.brand
+      }))
+    };
+    setChatHistory((prev) => [...prev, userMsg, assistantMsg]);
+  };
   const customStyles = {
     ...theme?.primaryColor && { "--hsk-primary": theme.primaryColor },
     ...theme?.backgroundColor && { "--hsk-bg": theme.backgroundColor },
@@ -349,45 +574,60 @@ function ChatWidget({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: cn("hsk-chat-widget", classNames.root, className),
       style: customStyles,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("hsk-chat-header", classNames.header), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SparkleIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-chat-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-chat-badge", children: "AI" }),
-          messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("hsk-chat-header", classNames.header), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-chat-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-chat-badge", children: "AI" }),
+          chatHistory.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-chat-messages", children: [
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-chat-empty", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SparkleIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: emptyStateText }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
-          ] }) : messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `hsk-msg-row ${msg.role}`, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("hsk-msg-avatar", msg.role === "assistant" ? "ai" : "user"), children: msg.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SparkleIcon, {}) : "U" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("hsk-msg-bubble", msg.role, classNames.messageBubble), children: renderMarkdown(msg.content) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-chat-messages", children: [
+          chatHistory.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-chat-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: emptyStateText }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
+          ] }) : chatHistory.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `hsk-msg-row ${msg.role}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("hsk-msg-avatar", msg.role === "assistant" ? "ai" : "user"), children: msg.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon, {}) : "U" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("hsk-msg-bubble", msg.role, classNames.messageBubble), children: [
+                msg.imagePreview && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kiku-vs-preview-bubble", style: { marginBottom: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: msg.imagePreview, alt: "Uploaded Preview", className: "kiku-vs-preview-bubble-img", style: { maxWidth: "200px", borderRadius: "8px" } }) }),
+                renderMarkdown(msg.content),
+                msg.styleDNA && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "kiku-vs-preview-banner", style: { marginTop: "10px" }, children: [
+                  chatHistory[idx - 1]?.imagePreview && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: chatHistory[idx - 1].imagePreview, alt: "Visual Search Input", className: "kiku-vs-preview-img" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "kiku-vs-preview-info", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kiku-vs-preview-label", children: "Visual Match Palette" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kiku-vs-preview-palette", children: msg.styleDNA.color_palette || "Detected Style DNA" }),
+                    msg.styleDNA.style_tags && msg.styleDNA.style_tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kiku-style-tags", children: msg.styleDNA.style_tags.map((tag, ti) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "kiku-style-tag", children: [
+                      "#",
+                      tag
+                    ] }, ti)) })
+                  ] })
+                ] })
+              ] })
             ] }),
-            msg.role === "assistant" && idx === messages.length - 1 && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-sources-container", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
+            msg.role === "assistant" && msg.visualSources && msg.visualSources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-sources-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-sources", children: msg.visualSources.map((src, si) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) }),
+            msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-sources-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
           ] }, idx)),
-          loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-msg-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SparkleIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-pending", role: "status", "aria-live": "polite", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-pending-glyph", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-pending-ring" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-pending-dot" })
+          loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-msg-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-pending", role: "status", "aria-live": "polite", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-pending-glyph", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pending-ring" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pending-dot" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-pending-text", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-pending-step step-1", children: "Searching catalog" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-pending-step step-2", children: "Reasoning" }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hsk-pending-step step-3", children: "Composing" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-pending-text", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pending-step step-1", children: "Searching catalog" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pending-step step-2", children: "Reasoning" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pending-step step-3", children: "Composing" })
               ] })
             ] })
           ] }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hsk-chat-error", children: (() => {
+          error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-chat-error", children: (() => {
             try {
               const parsed = JSON.parse(error);
               return parsed.error || parsed.message || error;
@@ -395,10 +635,19 @@ function ChatWidget({
               return error;
             }
           })() }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: bottomRef })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: bottomRef })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hsk-chat-input-area", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-chat-input-area", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          enableVision && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            VisualSearch,
+            {
+              onResults: handleVisualResults,
+              onError: (err) => console.error("[VisualSearch] error:", err),
+              categoryHint: visionCategoryHint,
+              disabled: loading
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "textarea",
             {
               ref: textareaRef,
@@ -408,17 +657,30 @@ function ChatWidget({
               onKeyDown: handleKey,
               placeholder,
               rows: 1,
+              disabled: loading,
+              style: { flex: 1 }
+            }
+          ),
+          enableVoice && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            VoiceButton,
+            {
+              onTranscript: (text) => {
+                setInput(text);
+                send(text);
+                setInput("");
+              },
+              onInterim: (text) => setInput(text),
               disabled: loading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               className: "hsk-chat-send",
               onClick: handleSend,
               disabled: !input.trim() || loading,
               "aria-label": "Send message",
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowUpIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArrowUpIcon, {})
             }
           )
         ] })
@@ -428,14 +690,14 @@ function ChatWidget({
 }
 
 // src/components/KikuButton.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
-var import_sdk3 = require("@akropolys/sdk");
 var import_sdk4 = require("@akropolys/sdk");
 var import_sdk5 = require("@akropolys/sdk");
+var import_sdk6 = require("@akropolys/sdk");
 
 // src/components/ComparisonMatrix.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function extractSize(p) {
   const name = p.name;
   const cat = (p.category || "").toLowerCase();
@@ -547,9 +809,9 @@ function buildRows(products, currency) {
 }
 function ImageCell({ value, name }) {
   if (!value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 28, textAlign: "center" }, children: "\u{1F4E6}" });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 28, textAlign: "center" }, children: "\u{1F4E6}" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "img",
     {
       src: value,
@@ -566,10 +828,10 @@ function ImageCell({ value, name }) {
   );
 }
 function AvailabilityCell({ value }) {
-  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#9ca3af" }, children: "\u2014" });
+  if (!value) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#9ca3af" }, children: "\u2014" });
   const inStock = /in.?stock/i.test(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--hsk-text, #111827)" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--hsk-text, #111827)" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
       width: 8,
       height: 8,
       borderRadius: "50%",
@@ -610,7 +872,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
     display: "flex",
     alignItems: "center"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "hsk-compare-matrix",
@@ -623,9 +885,9 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
         fontSize: 13
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid", gridTemplateColumns: colTemplate, background: "var(--hsk-surface2, #f9fafb)", borderBottom: "2px solid var(--hsk-border, rgba(0,0,0,0.09))" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...labelStyle, borderBottom: "none", color: "var(--hsk-text, #111)", fontSize: 12 }, children: "Feature" }),
-          products.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid", gridTemplateColumns: colTemplate, background: "var(--hsk-surface2, #f9fafb)", borderBottom: "2px solid var(--hsk-border, rgba(0,0,0,0.09))" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...labelStyle, borderBottom: "none", color: "var(--hsk-text, #111)", fontSize: 12 }, children: "Feature" }),
+          products.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "a",
             {
               href: p.url || "#",
@@ -647,7 +909,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
             i
           ))
         ] }),
-        rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             style: {
@@ -656,17 +918,17 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
               background: rowIdx % 2 === 1 ? "var(--hsk-surface2, rgba(0,0,0,0.015))" : "transparent"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: labelStyle, children: row.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: labelStyle, children: row.label }),
               products.map((p, i) => {
                 const val = row.values[i];
                 const isBest = row.bestIdx === i && row.values.filter(Boolean).length > 1;
                 if (row.type === "image") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImageCell, { value: val, name: p.name }) }, i);
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageCell, { value: val, name: p.name }) }, i);
                 }
                 if (row.type === "availability") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...cellBase, borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvailabilityCell, { value: val }) }, i);
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...cellBase, borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvailabilityCell, { value: val }) }, i);
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "div",
                   {
                     style: {
@@ -676,7 +938,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
                       color: isBest ? "var(--hsk-primary, #ea580c)" : row.type === "price" ? "var(--hsk-text, #374151)" : "var(--hsk-text, #111827)",
                       borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none"
                     },
-                    children: val ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#9ca3af" }, children: "\u2014" })
+                    children: val ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#9ca3af" }, children: "\u2014" })
                   },
                   i
                 );
@@ -691,8 +953,8 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
 }
 
 // src/components/KikuButton.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   "svg",
   {
     className: cn("hsk-brand-a", className),
@@ -703,7 +965,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
     xmlns: "http://www.w3.org/2000/svg",
     "aria-label": "Akropolys",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           d: "M14.5 4.5 L6.5 25",
@@ -712,7 +974,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           d: "M14.5 4.5 L22.5 25",
@@ -721,7 +983,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           d: "M9.5 17 H19.5",
@@ -730,7 +992,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           d: "M3 25 H10",
@@ -739,7 +1001,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           d: "M19 25 H26",
@@ -748,7 +1010,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           d: "M8.5 2.5 C10 2.5, 11 3.5, 11 5 C11 7, 8.5 8.5, 7.5 9.5",
@@ -763,25 +1025,39 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ (0, import_js
   }
 );
 var SparkleIcon2 = AkropolysAIcon;
-var ArrowUpIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 19V5" })
+var ArrowUpIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 19V5" })
 ] });
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m9 18 6-6-6-6" }) });
-var HistoryIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 3v5h5" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 7v5l4 2" })
+var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+var HistoryIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 3v5h5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 7v5l4 2" })
 ] });
-var NewChatIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 5v14M5 12h14" }) });
-var ShoppingBagIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 10a4 4 0 0 1-8 0" })
+var NewChatIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+var ShoppingBagIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M16 10a4 4 0 0 1-8 0" })
+] });
+var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+var MicIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
+] });
+var MicOffIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
 ] });
 var DEFAULT_CHIPS = [
   "Cheapest smartphone",
@@ -821,25 +1097,25 @@ function CartContextCard({ cart, defaultCurrency }) {
   if (!cart.items || cart.items.length === 0) return null;
   const currency = cart.currency || defaultCurrency;
   const total = cart.total ?? cart.items.reduce((s, i) => s + i.price_numeric * i.quantity, 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-card-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShoppingBagIcon, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-card-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShoppingBagIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
         "Your cart \xB7 ",
         cart.item_count ?? cart.items.length,
         " item",
         (cart.item_count ?? cart.items.length) !== 1 ? "s" : ""
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-item-img-wrap", children: [
-        item.image ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { className: "hsk-cart-item-img", src: item.image, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cart-item-img-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShoppingBagIcon, {}) }),
-        item.quantity > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-cart-item-qty", children: item.quantity })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-item-img-wrap", children: [
+        item.image ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "hsk-cart-item-img", src: item.image, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cart-item-img-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShoppingBagIcon, {}) }),
+        item.quantity > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cart-item-qty", children: item.quantity })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-item-info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cart-item-name", children: item.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-item-price", children: [
-          item.quantity > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "hsk-cart-item-qty-label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-item-info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cart-item-name", children: item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-item-price", children: [
+          item.quantity > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-cart-item-qty-label", children: [
             item.quantity,
             "\xD7 "
           ] }),
@@ -849,9 +1125,9 @@ function CartContextCard({ cart, defaultCurrency }) {
         ] })
       ] })
     ] }, item.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cart-total", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Total" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "hsk-cart-total-amount", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cart-total", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "hsk-cart-total-amount", children: [
         currency,
         " ",
         total.toLocaleString()
@@ -883,14 +1159,14 @@ function ActionPills({ cart, actionType, onSend, loading }) {
     }
   }
   if (pills.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       className: "hsk-action-pill",
       onClick: () => onSend(pill.query),
       disabled: loading,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pill-emoji", children: pill.emoji }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-pill-emoji", children: pill.emoji }),
         pill.label
       ]
     },
@@ -898,17 +1174,17 @@ function ActionPills({ cart, actionType, onSend, loading }) {
   )) });
 }
 function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
-  const client = (0, import_sdk5.useAkropolysContext)();
+  const client = (0, import_sdk6.useAkropolysContext)();
   const isProperty = client?.vertical === "property";
-  const railRef = (0, import_react3.useRef)(null);
-  const [showNext, setShowNext] = (0, import_react3.useState)(false);
-  const measure = (0, import_react3.useCallback)(() => {
+  const railRef = (0, import_react5.useRef)(null);
+  const [showNext, setShowNext] = (0, import_react5.useState)(false);
+  const measure = (0, import_react5.useCallback)(() => {
     const el = railRef.current;
     if (!el) return;
     const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
     setShowNext(el.scrollWidth > el.clientWidth + 4 && !atEnd);
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     measure();
     const el = railRef.current;
     if (!el) return;
@@ -923,17 +1199,17 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
   const scrollNext = () => {
     railRef.current?.scrollBy({ left: 170, behavior: "smooth" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-sources-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-sources-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         className: "hsk-cb-source",
         style: { animationDelay: `${si * 50}ms` },
         onClick: () => onSelectSource?.(src),
         children: [
-          src.image ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: src.image, alt: src.name, loading: "lazy" }),
-            isProperty && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+          src.image ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: src.image, alt: src.name, loading: "lazy" }),
+            isProperty && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
               position: "absolute",
               top: "6px",
               right: "6px",
@@ -948,11 +1224,11 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
               color: "#fbbf24",
               // Gold sparkle badge
               boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
-            }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, { size: 12 }) })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-src-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-src-name", children: src.name }),
-            src.price && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-src-price", children: [
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, { size: 12 }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-src-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-src-name", children: src.name }),
+            src.price && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-src-price", children: [
               src.currency ?? defaultCurrency,
               " ",
               parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
@@ -962,15 +1238,15 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
       },
       si
     )) }),
-    showNext && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    showNext && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           className: "hsk-cb-sources-fade",
           style: { background: "linear-gradient(to right, transparent, var(--hsk-fade-bg, #0e0e0f))" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronRightIcon, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -989,7 +1265,7 @@ function SmartContextPills({
   onSend,
   loading
 }) {
-  const client = (0, import_sdk5.useAkropolysContext)();
+  const client = (0, import_sdk6.useAkropolysContext)();
   const isProperty = client?.vertical === "property";
   if (!intent) return null;
   const pills = [];
@@ -1058,14 +1334,14 @@ function SmartContextPills({
     pills.push({ emoji: "\u{1F4A1}", label: "Recommend something", query: "What do you recommend for me?" });
   }
   if (pills.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       className: "hsk-action-pill",
       onClick: () => onSend(pill.query),
       disabled: loading,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-pill-emoji", children: pill.emoji }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-pill-emoji", children: pill.emoji }),
         pill.label
       ]
     },
@@ -1124,17 +1400,71 @@ function ChatModal({
   defaultCurrency = "KES",
   chips = DEFAULT_CHIPS,
   theme,
-  classNames = {}
+  classNames = {},
+  enableVoice = false,
+  enableVision = false,
+  visionCategoryHint
 }) {
-  const client = (0, import_sdk5.useAkropolysContext)();
-  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset } = (0, import_sdk3.useKiku)();
-  const [input, setInput] = (0, import_react3.useState)("");
-  const [loadingMessageIndex, setLoadingMessageIndex] = (0, import_react3.useState)(0);
+  const client = (0, import_sdk6.useAkropolysContext)();
+  const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset } = (0, import_sdk4.useKiku)();
+  const [input, setInput] = (0, import_react5.useState)("");
+  const [loadingMessageIndex, setLoadingMessageIndex] = (0, import_react5.useState)(0);
+  const [attachments, setAttachments] = (0, import_react5.useState)([]);
+  const imageInputRef = (0, import_react5.useRef)(null);
+  const handleImageFiles = (files) => {
+    if (!files || files.length === 0) return;
+    Array.from(files).forEach((file) => {
+      if (!file.type.startsWith("image/")) return;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result;
+        if (dataUrl) {
+          setAttachments((prev) => [...prev, { type: "image", data: dataUrl }]);
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+  const removeAttachment = (idx) => {
+    setAttachments((prev) => prev.filter((_, i) => i !== idx));
+  };
+  const [voiceState, setVoiceState] = (0, import_react5.useState)("idle");
+  const recognitionRef = (0, import_react5.useRef)(null);
+  const pendingVoiceRef = (0, import_react5.useRef)(null);
+  const hasSpeechAPI = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
+  const startVoice = (0, import_react5.useCallback)(() => {
+    if (!hasSpeechAPI || voiceState !== "idle") return;
+    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SR();
+    recognition.lang = "en-US";
+    recognition.interimResults = false;
+    recognition.maxAlternatives = 1;
+    recognitionRef.current = recognition;
+    recognition.onstart = () => setVoiceState("listening");
+    recognition.onresult = (event) => {
+      const transcript = event.results[0][0].transcript;
+      setInput(transcript);
+      pendingVoiceRef.current = transcript;
+      setVoiceState("processing");
+    };
+    recognition.onerror = () => setVoiceState("idle");
+    recognition.onend = () => {
+      setVoiceState((prev) => prev === "listening" ? "idle" : prev);
+    };
+    recognition.start();
+  }, [hasSpeechAPI, voiceState]);
+  const stopVoice = (0, import_react5.useCallback)(() => {
+    recognitionRef.current?.stop();
+    setVoiceState("idle");
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    return () => recognitionRef.current?.abort();
+  }, []);
   const isProperty = client.vertical === "property";
   const activeChips = chips === DEFAULT_CHIPS && isProperty ? PROPERTY_CHIPS : chips;
   const activeTitle = title === "Shopping Assistant" && isProperty ? "Property Assistant" : title;
   const activePlaceholder = placeholder === "Ask me anything \u2014 gifts, budget, use case\u2026" && isProperty ? "Ask me anything \u2014 location, budget, bedrooms\u2026" : placeholder;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (loading && !streaming) {
       const interval = setInterval(() => {
         setLoadingMessageIndex((prev) => (prev + 1) % LOADING_MESSAGES.length);
@@ -1144,21 +1474,21 @@ function ChatModal({
       setLoadingMessageIndex(0);
     }
   }, [loading, streaming]);
-  const [selectedProduct, setSelectedProduct] = (0, import_react3.useState)(null);
-  const bottomRef = (0, import_react3.useRef)(null);
-  const textareaRef = (0, import_react3.useRef)(null);
-  const [phoneInput, setPhoneInput] = (0, import_react3.useState)(() => {
+  const [selectedProduct, setSelectedProduct] = (0, import_react5.useState)(null);
+  const bottomRef = (0, import_react5.useRef)(null);
+  const textareaRef = (0, import_react5.useRef)(null);
+  const [phoneInput, setPhoneInput] = (0, import_react5.useState)(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_phone") || "";
     }
     return "";
   });
-  const [merchantRef, setMerchantRef] = (0, import_react3.useState)(null);
-  const [paymentPhase, setPaymentPhase] = (0, import_react3.useState)("idle");
-  const [sessions, setSessions] = (0, import_react3.useState)(() => loadSessions());
-  const [sidebarOpen, setSidebarOpen] = (0, import_react3.useState)(false);
-  const [replayMessages, setReplayMessages] = (0, import_react3.useState)(null);
-  const { status: pollStatus } = (0, import_sdk4.usePaymentPolling)({
+  const [merchantRef, setMerchantRef] = (0, import_react5.useState)(null);
+  const [paymentPhase, setPaymentPhase] = (0, import_react5.useState)("idle");
+  const [sessions, setSessions] = (0, import_react5.useState)(() => loadSessions());
+  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(false);
+  const [replayMessages, setReplayMessages] = (0, import_react5.useState)(null);
+  const { status: pollStatus } = (0, import_sdk5.usePaymentPolling)({
     client: client.api,
     merchantReference: merchantRef,
     onSuccess: () => {
@@ -1170,7 +1500,7 @@ function ChatModal({
       setMerchantRef(null);
     }
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!lastAction) return;
     if (lastAction.type === "request_phone") {
       setPaymentPhase("prompt_phone");
@@ -1211,8 +1541,8 @@ function ChatModal({
       setPaymentPhase("failed");
     }
   };
-  const msgsContainerRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const msgsContainerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const container = msgsContainerRef.current;
     if (!container) return;
     const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
@@ -1220,14 +1550,14 @@ function ChatModal({
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, loading, selectedProduct]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", h);
     return () => document.removeEventListener("keydown", h);
   }, []);
-  const saveCurrentSession = (0, import_react3.useCallback)(() => {
+  const saveCurrentSession = (0, import_react5.useCallback)(() => {
     if (messages.length < 2) return;
     const firstUser = messages.find((m) => m.role === "user");
     const session = {
@@ -1240,7 +1570,7 @@ function ChatModal({
     setSessions(updated);
     saveSessions(updated);
   }, [messages, sessions]);
-  const handleReset = (0, import_react3.useCallback)(() => {
+  const handleReset = (0, import_react5.useCallback)(() => {
     saveCurrentSession();
     reset();
     setReplayMessages(null);
@@ -1253,7 +1583,7 @@ function ChatModal({
     const q = `Tell me more about the ${src.name}${src.price ? ` (${src.currency ?? 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) => {
+  const handleSend = async (text, extraAttachments) => {
     const q = (text ?? input).trim();
     if (!q || loading) return;
     setReplayMessages(null);
@@ -1262,7 +1592,9 @@ function ChatModal({
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
-    await send(q);
+    const toSend = extraAttachments ?? attachments;
+    setAttachments([]);
+    await send(q, void 0, toSend.length > 0 ? toSend : void 0);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
@@ -1276,6 +1608,20 @@ function ChatModal({
     t.style.height = "auto";
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
   };
+  (0, import_react5.useEffect)(() => {
+    if (voiceState !== "processing") return;
+    const transcript = pendingVoiceRef.current;
+    if (!transcript) {
+      setVoiceState("idle");
+      return;
+    }
+    pendingVoiceRef.current = null;
+    const timer = setTimeout(() => {
+      setVoiceState("idle");
+      handleSend(transcript);
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [voiceState]);
   const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur ?? "20px";
   const displayMessages = replayMessages ?? messages;
   const loadSession = (session) => {
@@ -1288,7 +1634,7 @@ function ChatModal({
     setSessions(updated);
     saveSessions(updated);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: cn("hsk-cb-overlay", classNames.overlay),
@@ -1300,27 +1646,27 @@ function ChatModal({
         ...backdropColor ? { background: backdropColor } : {},
         ...customStyles
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("hsk-cb-panel hsk-cb-panel--with-sidebar", classNames.panel), onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("hsk-cb-sidebar", sidebarOpen && "hsk-cb-sidebar--open"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-sidebar-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-cb-sidebar-title", children: "History" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("hsk-cb-panel hsk-cb-panel--with-sidebar", classNames.panel), onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("hsk-cb-sidebar", sidebarOpen && "hsk-cb-sidebar--open"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-sidebar-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-sidebar-title", children: "History" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "button",
               {
                 className: "hsk-cb-sidebar-new",
                 onClick: handleReset,
                 title: "New chat",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NewChatIcon, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "New chat" })
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NewChatIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "New chat" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-sidebar-list", children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-sidebar-empty", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HistoryIcon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "No history yet" })
-          ] }) : sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-sidebar-list", children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-sidebar-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HistoryIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "No history yet" })
+          ] }) : sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               className: cn(
@@ -1329,9 +1675,9 @@ function ChatModal({
               ),
               onClick: () => loadSession(session),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-sidebar-session-title", children: session.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-sidebar-session-meta", children: relativeTime(session.ts) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-sidebar-session-title", children: session.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-sidebar-session-meta", children: relativeTime(session.ts) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "hsk-cb-sidebar-session-del",
@@ -1345,10 +1691,10 @@ function ChatModal({
             session.id
           )) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-main", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-topbar", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-topbar-left", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-main", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-topbar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-topbar-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   className: cn("hsk-cb-sidebar-toggle", sidebarOpen && "hsk-cb-sidebar-toggle--active"),
@@ -1357,29 +1703,29 @@ function ChatModal({
                     setSidebarOpen((v) => !v);
                   },
                   "aria-label": "Toggle history",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HistoryIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HistoryIcon, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-topbar-title", children: activeTitle }) })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-topbar-title", children: activeTitle }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-topbar-actions", children: [
-              replayMessages ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-topbar-btn", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-topbar-actions", children: [
+              replayMessages ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-topbar-btn", onClick: () => {
                 setReplayMessages(null);
-              }, children: "\u2190 Live chat" }) : messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-topbar-btn", onClick: handleReset, children: "Clear chat" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) })
+              }, children: "\u2190 Live chat" }) : messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-topbar-btn", onClick: handleReset, children: "Clear chat" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
             ] })
           ] }),
-          replayMessages && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-replay-banner", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HistoryIcon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "You're viewing a past conversation." }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: () => setReplayMessages(null), children: "Back to chat \u2192" })
+          replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-replay-banner", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HistoryIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "You're viewing a past conversation." }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: () => setReplayMessages(null), children: "Back to chat \u2192" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-msgs", ref: msgsContainerRef, children: [
-            displayMessages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-empty", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-empty-title", children: "Find exactly what you need" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-msgs", ref: msgsContainerRef, children: [
+            displayMessages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-empty", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-empty-title", children: "Find exactly what you need" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   className: "hsk-cb-chip",
@@ -1392,12 +1738,15 @@ function ChatModal({
               const isLast = idx === displayMessages.length - 1 && !replayMessages;
               const isUser = msg.role === "user";
               const displayContent = !isUser && isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages ? stripMarkdownTables(msg.content) : msg.content;
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-ai-body", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(displayContent) }),
-                  isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComparisonMatrix, { sources, defaultCurrency }),
-                  isLast && sources.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-user-msg", children: [
+                msg.images && msg.images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-user-imgs", children: msg.images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: img, alt: `attachment ${i + 1}`, className: "hsk-cb-user-img-thumb" }, i)) }),
+                msg.content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-body", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(displayContent) }),
+                  isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComparisonMatrix, { sources, defaultCurrency }),
+                  isLast && sources.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     SourcesCarousel,
                     {
                       sources,
@@ -1405,14 +1754,14 @@ function ChatModal({
                       onSelectSource: handleSourceClick
                     }
                   ),
-                  msg.cartSnapshot && msg.cartSnapshot.items?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  msg.cartSnapshot && msg.cartSnapshot.items?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     CartContextCard,
                     {
                       cart: msg.cartSnapshot,
                       defaultCurrency
                     }
                   ),
-                  isLast && msg.cartSnapshot && !loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  isLast && msg.cartSnapshot && !loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     ActionPills,
                     {
                       cart: msg.cartSnapshot,
@@ -1421,7 +1770,7 @@ function ChatModal({
                       loading
                     }
                   ),
-                  isLast && !loading && !msg.cartSnapshot && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  isLast && !loading && !msg.cartSnapshot && !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     SmartContextPills,
                     {
                       intent: lastIntent,
@@ -1433,16 +1782,16 @@ function ChatModal({
                 ] })
               ] }) }, idx);
             }),
-            selectedProduct && loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            selectedProduct && loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "div",
               {
                 className: "hsk-cb-selected-product",
                 onClick: () => selectedProduct.url && window.open(selectedProduct.url, "_blank"),
                 children: [
-                  selectedProduct.image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-selected-info", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
-                    selectedProduct.price && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-selected-price", children: [
+                  selectedProduct.image && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-selected-info", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
+                    selectedProduct.price && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-selected-price", children: [
                       selectedProduct.currency ?? defaultCurrency,
                       " ",
                       parseFloat(String(selectedProduct.price ?? "").replace(/[^0-9.]/g, "") || "0").toLocaleString()
@@ -1451,34 +1800,34 @@ function ChatModal({
                 ]
               }
             ),
-            loading && !streaming && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center", marginTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+            loading && !streaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center", marginTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
                     @keyframes hsk-pulse {
                       0%, 100% { opacity: 0.6; }
                       50% { opacity: 1; }
                     }
                   ` }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: LOADING_MESSAGES[loadingMessageIndex] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-typing", style: { margin: 0, alignSelf: "flex-start" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-dot" })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: LOADING_MESSAGES[loadingMessageIndex] }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-typing", style: { margin: 0, alignSelf: "flex-start" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot" })
                 ] })
               ] })
             ] }),
-            error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
+            error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
             !replayMessages && paymentPhase === "prompt_phone" && (() => {
               const isHistoryIntent = lastIntent === "capture" || lastIntent === "delete" || lastIntent === "view_history";
               if (isHistoryIntent) {
                 return null;
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-phone-form", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "hsk-cb-phone-label", children: "Enter your M-Pesa number to pay" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-phone-form", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "hsk-cb-phone-label", children: "Enter your M-Pesa number to pay" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     "input",
                     {
                       type: "tel",
@@ -1490,37 +1839,37 @@ function ChatModal({
                       autoFocus: true
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Send STK push" })
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Send STK push" })
                 ] }) }) })
               ] });
             })(),
-            !replayMessages && paymentPhase === "awaiting" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--awaiting", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-pulse-ring" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "2rem" }, children: "\u{1F4F1}" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hsk-cb-payment-label", style: { fontWeight: 600 }, children: "Check your phone" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "hsk-cb-payment-sub", children: [
+            !replayMessages && paymentPhase === "awaiting" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--awaiting", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-payment-pulse-ring" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: "2rem" }, children: "\u{1F4F1}" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-payment-label", style: { fontWeight: 600 }, children: "Check your phone" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "hsk-cb-payment-sub", children: [
                 "An M-Pesa STK push has been sent.",
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
                 "Enter your PIN to complete payment."
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-dots", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-dot hsk-cb-dot--amber" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-payment-dots", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-dot hsk-cb-dot--amber" })
               ] })
             ] }),
-            !replayMessages && paymentPhase === "done" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--success", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-success-ring" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "2.5rem" }, children: "\u2705" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hsk-cb-payment-label", children: "Payment complete!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hsk-cb-payment-sub", children: "Thank you for your order. A confirmation has been sent." })
+            !replayMessages && paymentPhase === "done" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--success", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-payment-success-ring" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: "2.5rem" }, children: "\u2705" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-payment-label", children: "Payment complete!" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-payment-sub", children: "Thank you for your order. A confirmation has been sent." })
             ] }),
-            !replayMessages && paymentPhase === "failed" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--failed", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontSize: "2.5rem" }, children: "\u274C" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hsk-cb-payment-label", children: "Payment failed or timed out" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hsk-cb-payment-sub", children: "Please check your M-Pesa PIN and try again, or contact support." }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-payment-actions", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            !replayMessages && paymentPhase === "failed" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--failed", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: "2.5rem" }, children: "\u274C" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-payment-label", children: "Payment failed or timed out" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hsk-cb-payment-sub", children: "Please check your M-Pesa PIN and try again, or contact support." }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-payment-actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "hsk-cb-pay-submit",
@@ -1531,7 +1880,7 @@ function ChatModal({
                     children: "Try again"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "button",
                   {
                     className: "hsk-cb-pay-secondary",
@@ -1544,11 +1893,45 @@ function ChatModal({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: bottomRef, style: { height: 1 } })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef, style: { height: 1 } })
           ] }),
-          !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hsk-cb-input-box", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          !replayMessages && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
+            attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-img-strip", children: attachments.map((att, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-img-thumb-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: att.data, alt: `attachment ${i + 1}`, className: "hsk-cb-img-thumb" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  className: "hsk-cb-img-thumb-remove",
+                  onClick: () => removeAttachment(i),
+                  "aria-label": "Remove image",
+                  children: "\xD7"
+                }
+              )
+            ] }, i)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hsk-cb-input-box", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "input",
+                {
+                  ref: imageInputRef,
+                  type: "file",
+                  accept: "image/*",
+                  multiple: true,
+                  style: { display: "none" },
+                  onChange: (e) => handleImageFiles(e.target.files)
+                }
+              ),
+              enableVision && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  className: "hsk-cb-attach-btn",
+                  onClick: () => imageInputRef.current?.click(),
+                  disabled: loading,
+                  "aria-label": "Attach image",
+                  title: "Attach image",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaperclipIcon, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -1562,18 +1945,36 @@ function ChatModal({
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              hasSpeechAPI && enableVoice && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  className: cn(
+                    "hsk-cb-mic-btn",
+                    voiceState === "listening" && "hsk-cb-mic-btn--listening",
+                    voiceState === "processing" && "hsk-cb-mic-btn--processing"
+                  ),
+                  onClick: voiceState === "idle" ? startVoice : stopVoice,
+                  disabled: loading,
+                  "aria-label": voiceState === "idle" ? "Start voice input" : "Stop recording",
+                  title: voiceState === "idle" ? "Voice input" : "Stop",
+                  children: [
+                    voiceState === "listening" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MicOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MicIcon2, {}),
+                    voiceState === "listening" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-mic-pulse" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   className: cn("hsk-cb-send", classNames.sendButton),
                   onClick: () => handleSend(),
-                  disabled: !input.trim() || loading,
+                  disabled: !input.trim() && attachments.length === 0 || loading,
                   "aria-label": "Send message",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArrowUpIcon2, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowUpIcon2, {})
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hsk-cb-hint", children: "Akropolys AI \xB7 searches the whole catalogue in real time" })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hsk-cb-hint", children: "Akropolys AI \xB7 searches the whole catalogue in real time" })
           ] })
         ] })
       ] })
@@ -1591,11 +1992,14 @@ function KikuButton({
   defaultCurrency,
   chips,
   theme,
-  classNames = {}
+  classNames = {},
+  enableVoice = false,
+  enableVision = false,
+  visionCategoryHint
 }) {
-  const [open, setOpen] = (0, import_react3.useState)(false);
-  const [mounted, setMounted] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
     setMounted(true);
     if (typeof window !== "undefined" && !window.__akropolys_nav_patched) {
       window.__akropolys_nav_patched = true;
@@ -1629,8 +2033,8 @@ function KikuButton({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
         className: cn("hsk-cb-btn", classNames.button, className),
@@ -1639,13 +2043,13 @@ function KikuButton({
         "data-hsk-theme": hskThemeAttr,
         "aria-label": "Open AI chat",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SparkleIcon2, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparkleIcon2, {}) }),
           label !== void 0 ? label : null
         ]
       }
     ),
     open && mounted && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ChatModal,
         {
           title,
@@ -1657,7 +2061,10 @@ function KikuButton({
           defaultCurrency,
           chips,
           theme,
-          classNames
+          classNames,
+          enableVoice,
+          enableVision,
+          visionCategoryHint
         }
       ),
       document.body
@@ -1666,11 +2073,11 @@ function KikuButton({
 }
 
 // src/components/Sparkle.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_sdk6 = require("@akropolys/sdk");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+var import_sdk7 = require("@akropolys/sdk");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
   "svg",
   {
     className: cn("hsk-brand-a", className),
@@ -1681,7 +2088,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
     xmlns: "http://www.w3.org/2000/svg",
     "aria-label": "Akropolys",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M14.5 4.5 L6.5 25",
@@ -1690,7 +2097,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M14.5 4.5 L22.5 25",
@@ -1699,7 +2106,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M9.5 17 H19.5",
@@ -1708,7 +2115,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M3 25 H10",
@@ -1717,7 +2124,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M19 25 H26",
@@ -1726,7 +2133,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M8.5 2.5 C10 2.5, 11 3.5, 11 5 C11 7, 8.5 8.5, 7.5 9.5",
@@ -1740,13 +2147,13 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ (0, import_jsx_
     ]
   }
 );
-var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ArrowUpIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 19V5" })
+var ArrowUpIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 19V5" })
 ] });
 var getFriendlyError2 = (err) => {
   let str = "";
@@ -1779,18 +2186,18 @@ function SparkleModal({
   classNames = {},
   product: initialProduct
 }) {
-  const client = (0, import_sdk6.useAkropolysContext)();
-  const [fetchedProduct, setFetchedProduct] = (0, import_react4.useState)(null);
+  const client = (0, import_sdk7.useAkropolysContext)();
+  const [fetchedProduct, setFetchedProduct] = (0, import_react6.useState)(null);
   const displayProduct = initialProduct || fetchedProduct;
-  const { results, loading: searchLoading, search } = (0, import_sdk6.useSearch)();
-  const { messages, sources, loading: chatLoading, error: chatError, send } = (0, import_sdk6.useKiku)();
-  const [chatInput, setChatInput] = (0, import_react4.useState)("");
-  const [isMobile, setIsMobile] = (0, import_react4.useState)(false);
-  const [showSpecs, setShowSpecs] = (0, import_react4.useState)(false);
-  const [collapseSimilar, setCollapseSimilar] = (0, import_react4.useState)(false);
-  const chatBottomRef = (0, import_react4.useRef)(null);
-  const chatTextareaRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const { results, loading: searchLoading, search } = (0, import_sdk7.useSearch)();
+  const { messages, sources, loading: chatLoading, error: chatError, send } = (0, import_sdk7.useKiku)();
+  const [chatInput, setChatInput] = (0, import_react6.useState)("");
+  const [isMobile, setIsMobile] = (0, import_react6.useState)(false);
+  const [showSpecs, setShowSpecs] = (0, import_react6.useState)(false);
+  const [collapseSimilar, setCollapseSimilar] = (0, import_react6.useState)(false);
+  const chatBottomRef = (0, import_react6.useRef)(null);
+  const chatTextareaRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!initialProduct && !fetchedProduct) {
       client.api.searchVector(productName, 1).then((res) => {
         if (res.results && res.results.length > 0) {
@@ -1800,7 +2207,7 @@ function SparkleModal({
     }
     search(productName, limit);
   }, [productName, initialProduct, fetchedProduct, client, limit, search]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 768);
     handleResize();
     if (typeof window !== "undefined") {
@@ -1808,17 +2215,17 @@ function SparkleModal({
       return () => window.removeEventListener("resize", handleResize);
     }
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (results.length > 0) onResult?.(results);
   }, [results, onResult]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", h);
     return () => document.removeEventListener("keydown", h);
   }, [onClose]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     chatBottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, chatLoading]);
   const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur ?? "16px";
@@ -1872,7 +2279,7 @@ Question: ${q}`;
     }
   ] : messages;
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: cn("hsk-sp-backdrop hsk-sp-mobile-view", classNames.backdrop),
@@ -1883,13 +2290,13 @@ Question: ${q}`;
           background: bg ?? void 0,
           ...customStyles
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header-body", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header-title-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
-                displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-header-body", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-header-title-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
+                displayProduct && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1899,32 +2306,32 @@ Question: ${q}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon2, {}) })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon2, {}) })
           ] }),
-          searchLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-bar" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-chat-container", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-msgs", children: [
+          searchLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-bar" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-chat-container", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-msgs", children: [
               displayMessages.map((msg, idx) => {
                 const isUser = msg.role === "user";
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-ai-body", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
-                    idx === 0 && displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-attachment-deck", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-main-card", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u{1F6CD}" }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-main-card-info", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-main-card-price", children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-ai-body", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
+                    idx === 0 && displayProduct && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-attachment-deck", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-main-card", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-main-card-info", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-main-card-price", children: [
                             displayProduct.currency ?? "KES",
                             " ",
                             parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString()
                           ] })
                         ] }),
-                        (displayProduct.specs && Object.keys(displayProduct.specs).length > 0 || displayProduct.description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        (displayProduct.specs && Object.keys(displayProduct.specs).length > 0 || displayProduct.description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "button",
                           {
                             type: "button",
@@ -1943,21 +2350,21 @@ Question: ${q}`;
                           }
                         );
                         if (similarProducts.length === 0) return null;
-                        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-list", children: similarProducts.map((r) => {
+                        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-list", children: similarProducts.map((r) => {
                             const price = parseFloat(r.product.price?.replace(/[^0-9.]/g, "") || "0");
                             const currency = r.product.currency ?? "KES";
-                            return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                               "div",
                               {
                                 className: "hsk-sp-mobile-similar-carousel-item",
                                 onClick: () => handleNav(r),
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.product.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u{1F6CD}" }) }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.product.name, children: r.product.name }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.product.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u{1F6CD}" }) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.product.name, children: r.product.name }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
                                       currency,
                                       " ",
                                       price.toLocaleString()
@@ -1974,19 +2381,19 @@ Question: ${q}`;
                   ] })
                 ] }) }, idx);
               }),
-              chatLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-typing-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-typing", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" })
+              chatLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-dot" })
                 ] })
               ] }),
-              chatError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: chatBottomRef, style: { height: 1 } })
+              chatError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: chatBottomRef, style: { height: 1 } })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-input-box", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-input-box", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "textarea",
                 {
                   ref: chatTextareaRef,
@@ -1999,34 +2406,34 @@ Question: ${q}`;
                   disabled: chatLoading
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   className: "hsk-cb-send",
                   onClick: () => handleSend(),
                   disabled: !chatInput.trim() || chatLoading,
                   "aria-label": "Send message",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowUpIcon3, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArrowUpIcon3, {})
                 }
               )
             ] }) })
           ] }),
-          showSpecs && displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: "Specifications" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
+          showSpecs && displayProduct && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-specs-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Specifications" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-body", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
-              displayProduct.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-desc", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { children: "Description" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: displayProduct.description })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-specs-body", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
+              displayProduct.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-specs-desc", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h5", { children: "Description" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: displayProduct.description })
               ] }),
-              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-specs-list", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { children: "Details" }),
-                Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-mobile-spec-row", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-mobile-spec-label", children: key }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-mobile-spec-value", children: val })
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-specs-list", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h5", { children: "Details" }),
+                Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-mobile-spec-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-mobile-spec-label", children: key }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-mobile-spec-value", children: val })
                 ] }, key))
               ] })
             ] })
@@ -2035,7 +2442,7 @@ Question: ${q}`;
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       className: cn("hsk-sp-backdrop", classNames.backdrop),
@@ -2046,65 +2453,65 @@ Question: ${q}`;
         background: bg ?? void 0,
         ...customStyles
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("hsk-sp-card hsk-sp-fullscreen", classNames.card), onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-header-body", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-header-sub", children: "Ask questions, compare specs, or check similar products" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("hsk-sp-card hsk-sp-fullscreen", classNames.card), onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-header-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-header-sub", children: "Ask questions, compare specs, or check similar products" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon2, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon2, {}) })
         ] }),
-        searchLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-bar" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-details-pane", children: [
-            displayProduct && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-product-profile-container", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-product-profile", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-details-imgwrap", children: displayProduct.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-details-meta", children: [
-                  displayProduct.brand && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-brand", children: displayProduct.brand }),
-                  displayProduct.category && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-cat", children: displayProduct.category }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "hsk-sp-details-name", children: displayProduct.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-item-price-row", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-currency", children: displayProduct.currency ?? "KES" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-price", children: parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
-                    displayProduct.originalPrice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-original-price", children: parseFloat(displayProduct.originalPrice.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
-                    displayProduct.discount && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "hsk-sp-item-discount", children: [
+        searchLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-bar" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-details-pane", children: [
+            displayProduct && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-product-profile-container", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-product-profile", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-details-imgwrap", children: displayProduct.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-details-meta", children: [
+                  displayProduct.brand && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-brand", children: displayProduct.brand }),
+                  displayProduct.category && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-cat", children: displayProduct.category }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "hsk-sp-details-name", children: displayProduct.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-item-price-row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-currency", children: displayProduct.currency ?? "KES" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-price", children: parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
+                    displayProduct.originalPrice && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-original-price", children: parseFloat(displayProduct.originalPrice.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
+                    displayProduct.discount && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hsk-sp-item-discount", children: [
                       "(",
                       displayProduct.discount,
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-item-meta-badges", children: [
-                    displayProduct.rating && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-rating", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-item-meta-badges", children: [
+                    displayProduct.rating && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-rating", children: [
                       "\u2605 ",
                       parseFloat(displayProduct.rating.toString()).toFixed(1),
                       " ",
                       displayProduct.reviewCount ? `(${displayProduct.reviewCount})` : ""
                     ] }),
-                    displayProduct.availability && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `hsk-sp-meta-badge hsk-sp-meta-badge-avail ${displayProduct.availability.toLowerCase().includes("in") ? "in-stock" : "out-stock"}`, children: displayProduct.availability }),
-                    displayProduct.stock && !displayProduct.availability && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-stock", children: [
+                    displayProduct.availability && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `hsk-sp-meta-badge hsk-sp-meta-badge-avail ${displayProduct.availability.toLowerCase().includes("in") ? "in-stock" : "out-stock"}`, children: displayProduct.availability }),
+                    displayProduct.stock && !displayProduct.availability && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-stock", children: [
                       "Stock: ",
                       displayProduct.stock
                     ] })
                   ] })
                 ] })
               ] }),
-              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-specs-horizontal", children: Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-spec-item-horizontal", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "hsk-sp-spec-label-horizontal", children: [
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-specs-horizontal", children: Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-spec-item-horizontal", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hsk-sp-spec-label-horizontal", children: [
                   key,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-spec-value-horizontal", title: val, children: val })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-spec-value-horizontal", title: val, children: val })
               ] }, key)) }),
-              displayProduct.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-details-desc", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { children: "Description" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: displayProduct.description })
+              displayProduct.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-details-desc", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Description" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: displayProduct.description })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-similar-section", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: "Similar Products" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-results", children: (() => {
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-similar-section", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Similar Products" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-results", children: (() => {
                 const similarProducts = results.filter(
                   (r) => {
                     const isSameName = r.product.name.toLowerCase() === displayProduct?.name?.toLowerCase();
@@ -2113,29 +2520,29 @@ Question: ${q}`;
                   }
                 );
                 if (!searchLoading && similarProducts.length === 0) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-empty", children: "No similar products found." });
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-empty", children: "No similar products found." });
                 }
                 return similarProducts.map((r, i) => {
                   const price = parseFloat(r.product.price?.replace(/[^0-9.]/g, "") || "0");
                   const currency = r.product.currency ?? "KES";
-                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                     "div",
                     {
                       className: cn("hsk-sp-item", classNames.item),
                       style: { animationDelay: `${i * 55}ms`, cursor: "pointer" },
                       onClick: () => handleNav(r),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-img-wrap", children: r.product.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-item-body", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-                            r.product.category && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-item-cat", children: r.product.category }),
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-item-name", title: r.product.name, children: r.product.name })
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-img-wrap", children: r.product.images?.[0] ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-item-body", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+                            r.product.category && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-item-cat", children: r.product.category }),
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-item-name", title: r.product.name, children: r.product.name })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-item-price-row", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-currency", children: currency }),
-                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-item-price-row", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-currency", children: currency }),
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-actions", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-actions", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             "button",
                             {
                               className: "hsk-sp-action hsk-sp-action-primary",
@@ -2155,29 +2562,29 @@ Question: ${q}`;
               })() })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-sp-chat-pane", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-msgs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-sp-chat-pane", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-msgs", children: [
               displayMessages.map((msg, idx) => {
                 const isUser = msg.role === "user";
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }) })
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }) })
                 ] }) }, idx);
               }),
-              chatLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-typing-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-typing", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-dot" })
+              chatLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-dot" })
                 ] })
               ] }),
-              chatError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: chatBottomRef, style: { height: 1 } })
+              chatError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: chatBottomRef, style: { height: 1 } })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hsk-cb-input-box", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-input-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-cb-input-box", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "textarea",
                   {
                     ref: chatTextareaRef,
@@ -2190,22 +2597,22 @@ Question: ${q}`;
                     disabled: chatLoading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     className: "hsk-cb-send",
                     onClick: () => handleSend(),
                     disabled: !chatInput.trim() || chatLoading,
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowUpIcon3, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArrowUpIcon3, {})
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-cb-hint", children: "Akropolys \xB7 instant product knowledge" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-cb-hint", children: "Akropolys \xB7 instant product knowledge" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hsk-sp-footer", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hsk-sp-esc", children: "Esc to close" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-sp-footer", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-sp-esc", children: "Esc to close" }) })
       ] })
     }
   );
@@ -2223,9 +2630,9 @@ function Sparkle({
   product,
   children
 }) {
-  const [open, setOpen] = (0, import_react4.useState)(false);
-  const [mounted, setMounted] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [mounted, setMounted] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     setMounted(true);
   }, []);
   const customStyles = {
@@ -2235,8 +2642,8 @@ function Sparkle({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         className: cn("hsk-sp-btn", classNames.button, className),
@@ -2244,11 +2651,11 @@ function Sparkle({
         style: customStyles,
         title: "Find similar products",
         "aria-label": "Find similar products",
-        children: children || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparkleIcon3, {})
+        children: children || /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SparkleIcon3, {})
       }
     ),
     open && mounted && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SparkleModal,
         {
           productName,
@@ -2269,62 +2676,62 @@ function Sparkle({
 }
 
 // src/components/CartBadge.tsx
-var import_sdk7 = require("@akropolys/sdk");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_sdk8 = require("@akropolys/sdk");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CartBadge({ className }) {
-  const { cart } = (0, import_sdk7.useCart)();
+  const { cart } = (0, import_sdk8.useCart)();
   if (!cart || cart.item_count === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("hsk-cart-badge", className), children: cart.item_count });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("hsk-cart-badge", className), children: cart.item_count });
 }
 
 // src/components/CartDrawer.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_sdk9 = require("@akropolys/sdk");
+var import_sdk10 = require("@akropolys/sdk");
 
 // src/components/CheckoutModal.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_sdk8 = require("@akropolys/sdk");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_sdk9 = require("@akropolys/sdk");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function CheckoutModal({
   onClose,
   theme,
   customStyles,
   hskThemeAttr
 }) {
-  const { cart, loading: cartLoading } = (0, import_sdk8.useCart)();
-  const client = (0, import_sdk8.useAkropolysContext)();
-  const [config, setConfig] = (0, import_react5.useState)(null);
-  const [loadingConfig, setLoadingConfig] = (0, import_react5.useState)(true);
-  const [phone, setPhone] = (0, import_react5.useState)(() => {
+  const { cart, loading: cartLoading } = (0, import_sdk9.useCart)();
+  const client = (0, import_sdk9.useAkropolysContext)();
+  const [config, setConfig] = (0, import_react7.useState)(null);
+  const [loadingConfig, setLoadingConfig] = (0, import_react7.useState)(true);
+  const [phone, setPhone] = (0, import_react7.useState)(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_phone") || "";
     }
     return "";
   });
-  const [email, setEmail] = (0, import_react5.useState)(() => {
+  const [email, setEmail] = (0, import_react7.useState)(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_email") || "";
     }
     return "";
   });
-  const [firstName, setFirstName] = (0, import_react5.useState)(() => {
+  const [firstName, setFirstName] = (0, import_react7.useState)(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_firstname") || "";
     }
     return "";
   });
-  const [lastName, setLastName] = (0, import_react5.useState)(() => {
+  const [lastName, setLastName] = (0, import_react7.useState)(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_lastname") || "";
     }
     return "";
   });
-  const [phase, setPhase] = (0, import_react5.useState)("idle");
-  const [merchantRef, setMerchantRef] = (0, import_react5.useState)(null);
-  const [payError, setPayError] = (0, import_react5.useState)(null);
-  const {} = (0, import_sdk8.usePaymentPolling)({
+  const [phase, setPhase] = (0, import_react7.useState)("idle");
+  const [merchantRef, setMerchantRef] = (0, import_react7.useState)(null);
+  const [payError, setPayError] = (0, import_react7.useState)(null);
+  const {} = (0, import_sdk9.usePaymentPolling)({
     client: client.api,
     merchantReference: merchantRef,
     onSuccess: () => {
@@ -2337,7 +2744,7 @@ function CheckoutModal({
       setMerchantRef(null);
     }
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     client.api.getCheckoutConfig().then((res) => setConfig(res.payment_methods)).catch(() => {
     }).finally(() => setLoadingConfig(false));
   }, [client]);
@@ -2372,20 +2779,20 @@ function CheckoutModal({
   const total = cart?.total || 0;
   const backdropStyle = { ...customStyles, fontSize: "15px", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', zIndex: 999999 };
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         className: "hsk-checkout-backdrop-full",
         style: backdropStyle,
         "data-hsk-theme": hskThemeAttr,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: "hsk-checkout-modal-full",
             style: customStyles,
             "data-hsk-theme": hskThemeAttr,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   onClick: (e) => {
@@ -2395,71 +2802,71 @@ function CheckoutModal({
                   },
                   className: "hsk-checkout-close-x",
                   "aria-label": "Close checkout",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-panel-left", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-left-content", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { onClick: (e) => {
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-panel-left", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-left-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { onClick: (e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   onClose();
                 }, className: "hsk-checkout-back-btn", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "12 19 5 12 12 5" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polyline", { points: "12 19 5 12 12 5" })
                   ] }),
                   "Back to store"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-store-info", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { children: "Secure Checkout" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-amount-due", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-checkout-label-muted", children: "Pay total" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-grand-total", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-store-info", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { children: "Secure Checkout" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-amount-due", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hsk-checkout-label-muted", children: "Pay total" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-grand-total", children: [
                     currency,
                     " ",
                     total.toLocaleString(void 0, { minimumFractionDigits: 2 })
                   ] })
                 ] }),
-                cartLoading || !cart ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-items-list-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "hsk-checkout-items-list", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "hsk-checkout-item-row", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-item-img-container", children: [
-                    item.image ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.image, alt: item.name, className: "hsk-checkout-item-img" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-item-img-placeholder", children: "\u{1F6D2}" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-checkout-item-qty-badge", children: item.quantity })
+                cartLoading || !cart ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-items-list-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "hsk-checkout-items-list", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "hsk-checkout-item-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-item-img-container", children: [
+                    item.image ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: item.image, alt: item.name, className: "hsk-checkout-item-img" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-item-img-placeholder", children: "\u{1F6D2}" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hsk-checkout-item-qty-badge", children: item.quantity })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-item-details", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-checkout-item-name", children: item.name }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hsk-checkout-item-price", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-item-details", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hsk-checkout-item-name", children: item.name }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "hsk-checkout-item-price", children: [
                     item.currency,
                     " ",
                     (item.price_numeric * item.quantity).toLocaleString(void 0, { minimumFractionDigits: 2 })
                   ] })
                 ] }, item.id)) }) })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-panel-right", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-right-content", children: phase === "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card success", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-icon-wrap success", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-panel-right", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-right-content", children: phase === "done" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-status-card success", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-status-icon-wrap success", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment Successful!" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Your transaction has been confirmed. Thank you for your order!" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onClose, className: "hsk-pay-btn hsk-btn-primary", style: { marginTop: "1.5rem" }, children: "Continue Shopping" })
-              ] }) : phase === "awaiting" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card awaiting", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-spinner-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-spinner" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Confirm payment on your phone" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: "Payment Successful!" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "Your transaction has been confirmed. Thank you for your order!" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onClose, className: "hsk-pay-btn hsk-btn-primary", style: { marginTop: "1.5rem" }, children: "Continue Shopping" })
+              ] }) : phase === "awaiting" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-status-card awaiting", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-status-spinner-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-status-spinner" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: "Confirm payment on your phone" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { children: [
                   "We've sent an M-Pesa STK push prompt to ",
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("strong", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("strong", { children: [
                     "254",
                     phone
                   ] }),
                   "."
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-stk-instructions", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "1. Check your phone lockscreen for the M-Pesa prompt." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "2. Enter your M-Pesa PIN and press OK." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "3. Wait here \u2014 this page auto-updates once confirmed." })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-stk-instructions", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "1. Check your phone lockscreen for the M-Pesa prompt." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "2. Enter your M-Pesa PIN and press OK." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "3. Wait here \u2014 this page auto-updates once confirmed." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     onClick: () => {
@@ -2470,43 +2877,43 @@ function CheckoutModal({
                     children: "Cancel payment"
                   }
                 )
-              ] }) : phase === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card cancelled", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-icon-wrap cancelled", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m15 9-6 6M9 9l6 6" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "10" })
+              ] }) : phase === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-status-card cancelled", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-status-icon-wrap cancelled", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m15 9-6 6M9 9l6 6" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment Cancelled" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "No charge was made. You can update your phone number and try again whenever you're ready." }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-actions", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => {
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: "Payment Cancelled" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: "No charge was made. You can update your phone number and try again whenever you're ready." }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-status-actions", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: () => {
                     setPhase("idle");
                     setPayError(null);
                   }, className: "hsk-pay-btn hsk-btn-primary", children: "Try again" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
                 ] })
-              ] }) : phase === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-card failed", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-status-icon-wrap failed", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              ] }) : phase === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-status-card failed", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-status-icon-wrap failed", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Payment Failed" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-checkout-error-text", children: payError || "Could not verify M-Pesa transaction. Please check your phone and try again." }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-status-actions", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: () => {
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { children: "Payment Failed" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "hsk-checkout-error-text", children: payError || "Could not verify M-Pesa transaction. Please check your phone and try again." }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-status-actions", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: () => {
                     setPhase("idle");
                     setPayError(null);
                   }, className: "hsk-pay-btn hsk-btn-primary", children: "Try again" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
                 ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-checkout-payment-form-wrap", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "hsk-checkout-section-title", children: "Payment details" }),
-                loadingConfig ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-cart-loading", children: "Loading payment configuration..." }) : !hasPaymentMethods ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hsk-checkout-error", children: "No payment methods configured for this store." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handlePay, className: "hsk-stripe-checkout-form", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "M-Pesa Mobile Number" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-phone-input-container", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-phone-prefix", children: "254" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-checkout-payment-form-wrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "hsk-checkout-section-title", children: "Payment details" }),
+                loadingConfig ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "hsk-cart-loading", children: "Loading payment configuration..." }) : !hasPaymentMethods ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "hsk-checkout-error", children: "No payment methods configured for this store." }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handlePay, className: "hsk-stripe-checkout-form", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-form-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "hsk-form-label", children: "M-Pesa Mobile Number" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-phone-input-container", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hsk-phone-prefix", children: "254" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "input",
                         {
                           type: "tel",
@@ -2520,11 +2927,11 @@ function CheckoutModal({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hsk-form-hint", children: "Enter your 9-digit number (e.g. 712345678)" })
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hsk-form-hint", children: "Enter your 9-digit number (e.g. 712345678)" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "Email address" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-form-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "hsk-form-label", children: "Email address" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "input",
                       {
                         type: "email",
@@ -2535,10 +2942,10 @@ function CheckoutModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-row", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "First Name" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-form-row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-form-group", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "hsk-form-label", children: "First Name" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "input",
                         {
                           type: "text",
@@ -2549,9 +2956,9 @@ function CheckoutModal({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hsk-form-group", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "hsk-form-label", children: "Last Name" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hsk-form-group", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "hsk-form-label", children: "Last Name" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "input",
                         {
                           type: "text",
@@ -2563,14 +2970,14 @@ function CheckoutModal({
                       )
                     ] })
                   ] }),
-                  payError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-form-error-banner", children: payError }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "submit", className: "hsk-checkout-submit-btn", children: [
+                  payError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-form-error-banner", children: payError }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "submit", className: "hsk-checkout-submit-btn", children: [
                     "Pay ",
                     currency,
                     " ",
                     total.toLocaleString()
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hsk-checkout-footer-brand", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Powered by Akropolys" }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hsk-checkout-footer-brand", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Powered by Akropolys" }) })
                 ] })
               ] }) }) })
             ]
@@ -2583,18 +2990,18 @@ function CheckoutModal({
 }
 
 // src/components/CartDrawer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function CartDrawer({
   trigger,
   className,
   theme
 }) {
-  const { cart, loading } = (0, import_sdk9.useCart)();
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const [showCheckout, setShowCheckout] = (0, import_react6.useState)(false);
-  const [mounted, setMounted] = (0, import_react6.useState)(false);
-  const client = (0, import_sdk9.useAkropolysContext)();
-  (0, import_react6.useEffect)(() => {
+  const { cart, loading } = (0, import_sdk10.useCart)();
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const [showCheckout, setShowCheckout] = (0, import_react8.useState)(false);
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
+  const client = (0, import_sdk10.useAkropolysContext)();
+  (0, import_react8.useEffect)(() => {
     setMounted(true);
     const handleTriggerCheckout = () => {
       setShowCheckout(true);
@@ -2605,7 +3012,7 @@ function CartDrawer({
       window.removeEventListener("akropolys:trigger_checkout", handleTriggerCheckout);
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (open) {
       document.body.style.overflow = "hidden";
     } else {
@@ -2634,8 +3041,8 @@ function CartDrawer({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    trigger ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { onClick: () => setOpen(true), style: { display: "inline-block" }, children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    trigger ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { onClick: () => setOpen(true), style: { display: "inline-block" }, children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         onClick: () => setOpen(true),
@@ -2644,24 +3051,24 @@ function CartDrawer({
         "data-hsk-theme": hskThemeAttr,
         "aria-label": "Open cart",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "21", r: "1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "20", cy: "21", r: "1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "9", cy: "21", r: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "20", cy: "21", r: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })
           ] }),
-          cart && cart.item_count > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hsk-cart-trigger-badge", children: cart.item_count }) : null
+          cart && cart.item_count > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hsk-cart-trigger-badge", children: cart.item_count }) : null
         ]
       }
     ),
     open && mounted && (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           className: "hsk-cart-backdrop",
           style: customStyles,
           "data-hsk-theme": hskThemeAttr,
           onClick: () => setOpen(false),
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "hsk-cart-bottom-sheet",
@@ -2669,36 +3076,36 @@ function CartDrawer({
               "data-hsk-theme": hskThemeAttr,
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hsk-cart-sheet-handle" }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hsk-cart-sheet-header", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { children: "Your Cart" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { onClick: () => setOpen(false), className: "hsk-close-btn", children: "\xD7" })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hsk-cart-sheet-handle" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hsk-cart-sheet-header", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { children: "Your Cart" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { onClick: () => setOpen(false), className: "hsk-close-btn", children: "\xD7" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hsk-cart-sheet-content", children: loading && !cart ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hsk-cart-loading", children: "Loading cart..." }) : !cart || cart.items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hsk-cart-empty", children: "Your cart is empty." }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { className: "hsk-cart-item", children: [
-                  item.image && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: item.image, alt: item.name, className: "hsk-cart-item-img" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hsk-cart-item-info", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hsk-cart-item-name", children: item.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "hsk-cart-item-price", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hsk-cart-sheet-content", children: loading && !cart ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hsk-cart-loading", children: "Loading cart..." }) : !cart || cart.items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hsk-cart-empty", children: "Your cart is empty." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "hsk-cart-item", children: [
+                  item.image && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: item.image, alt: item.name, className: "hsk-cart-item-img" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hsk-cart-item-info", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hsk-cart-item-name", children: item.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "hsk-cart-item-price", children: [
                       item.currency,
                       " ",
                       item.price_numeric.toLocaleString(void 0, { minimumFractionDigits: 2 })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hsk-cart-item-qty", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hsk-cart-item-qty", children: [
                     "x",
                     item.quantity
                   ] })
                 ] }, item.id)) }) }),
-                cart && cart.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hsk-cart-sheet-footer", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hsk-cart-total", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Total" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+                cart && cart.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hsk-cart-sheet-footer", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hsk-cart-total", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "Total" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
                       cart.currency,
                       " ",
                       cart.total.toLocaleString(void 0, { minimumFractionDigits: 2 })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { onClick: handleCheckout, className: "hsk-checkout-btn", children: "Checkout securely" })
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { onClick: handleCheckout, className: "hsk-checkout-btn", children: "Checkout securely" })
                 ] })
               ]
             }
@@ -2707,7 +3114,7 @@ function CartDrawer({
       ),
       document.body
     ),
-    showCheckout && mounted && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    showCheckout && mounted && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       CheckoutModal,
       {
         onClose: () => {
@@ -2731,6 +3138,8 @@ function CartDrawer({
   KikuButton,
   KikuChat,
   SearchBar,
-  Sparkle
+  Sparkle,
+  VisualSearch,
+  VoiceButton
 });
 //# sourceMappingURL=index.js.map