@akropolys/kiku 1.2.3 → 1.4.0

package/dist/index.mjs

@@ -164,7 +164,7 @@ function SearchBar({
 }
 
 // src/components/ChatWidget.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState4, useRef as useRef4, useEffect as useEffect2 } from "react";
 import { useKiku } from "@akropolys/sdk";
 
 // src/utils/markdown.tsx
@@ -252,19 +252,151 @@ function renderMarkdown(content) {
   return /* @__PURE__ */ jsx2(Fragment2, { children: elements });
 }
 
-// src/components/ChatWidget.tsx
+// src/components/VoiceButton.tsx
+import { useState as useState2, useRef as useRef2, useCallback } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SparkleIcon = () => /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
-var ArrowUpIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ jsx3("path", { d: "M12 19V5" })
+var MicIcon = ({ active }) => /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx3("rect", { x: "9", y: "2", width: "6", height: "11", rx: "3", fill: active ? "currentColor" : "none" }),
+  /* @__PURE__ */ jsx3("path", { d: "M5 10a7 7 0 0 0 14 0" }),
+  /* @__PURE__ */ jsx3("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+  /* @__PURE__ */ jsx3("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+] });
+function VoiceButton({
+  onTranscript,
+  onInterim,
+  lang = "en-US",
+  className = "",
+  disabled = false
+}) {
+  const [listening, setListening] = useState2(false);
+  const recognitionRef = useRef2(null);
+  const isSupported = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
+  const start = 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 = useCallback(() => {
+    recognitionRef.current?.stop();
+    setListening(false);
+  }, []);
+  if (!isSupported) return null;
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx3(MicIcon, { active: listening }),
+        listening && /* @__PURE__ */ jsx3("span", { className: "kiku-voice-ripple", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+// src/components/VisualSearch.tsx
+import { useRef as useRef3, useState as useState3 } from "react";
+import { useAkropolysContext as useAkropolysContext2 } from "@akropolys/sdk";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CameraIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "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__ */ jsx4("circle", { cx: "12", cy: "13", r: "4" })
+] });
+var SpinnerIcon = () => /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "kiku-vs-spin", children: /* @__PURE__ */ jsx4("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 = useAkropolysContext2();
+  const inputRef = useRef3(null);
+  const [loading, setLoading] = useState3(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__ */ jsxs3(
+    "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__ */ jsx4(
+          "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__ */ jsx4(SpinnerIcon, {}) : /* @__PURE__ */ jsx4(CameraIcon, {})
+      ]
+    }
+  );
+}
+
+// src/components/ChatWidget.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SparkleIcon = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "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__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
 ] });
 function SourceCard({ source, defaultCurrency, onSelect }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "hsk-source-card", onClick: () => onSelect?.(source), children: [
-    source.image && /* @__PURE__ */ jsx3("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
-    /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx3("div", { className: "hsk-source-name", children: source.name }),
-      source.price && /* @__PURE__ */ jsxs2("div", { className: "hsk-source-price", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "hsk-source-card", onClick: () => onSelect?.(source), children: [
+    source.image && /* @__PURE__ */ jsx5("img", { src: source.image, alt: source.name, className: "hsk-source-img" }),
+    /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx5("div", { className: "hsk-source-name", children: source.name }),
+      source.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-source-price", children: [
         source.currency ?? defaultCurrency,
         " ",
         source.price
@@ -281,15 +413,56 @@ function ChatWidget({
   className,
   theme,
   classNames = {},
-  onSelectSource
+  onSelectSource,
+  enableVoice = false,
+  enableVision = false,
+  visionCategoryHint
 }) {
-  const { messages, sources, loading, error, send, reset } = useKiku();
-  const [input, setInput] = useState2("");
-  const bottomRef = useRef2(null);
-  const textareaRef = useRef2(null);
+  const { messages, sources, loading: chatLoading, error, send, reset } = useKiku();
+  const [input, setInput] = useState4("");
+  const [visualLoading, setVisualLoading] = useState4(false);
+  const bottomRef = useRef4(null);
+  const textareaRef = useRef4(null);
+  const loading = chatLoading || visualLoading;
+  const [chatHistory, setChatHistory] = useState4([]);
+  const lastSyncedCount = useRef4(0);
+  useEffect2(() => {
+    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]);
   useEffect2(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, loading]);
+  }, [chatHistory, loading]);
   const handleSend = async () => {
     const q = input.trim();
     if (!q || loading) return;
@@ -309,6 +482,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 },
@@ -316,45 +539,60 @@ function ChatWidget({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn("hsk-chat-widget", classNames.root, className),
       style: customStyles,
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: cn("hsk-chat-header", classNames.header), children: [
-          /* @__PURE__ */ jsx3("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
-          /* @__PURE__ */ jsx3("span", { className: "hsk-chat-title", children: title }),
-          /* @__PURE__ */ jsx3("span", { className: "hsk-chat-badge", children: "AI" }),
-          messages.length > 0 && /* @__PURE__ */ jsx3("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
+        /* @__PURE__ */ jsxs4("div", { className: cn("hsk-chat-header", classNames.header), children: [
+          /* @__PURE__ */ jsx5("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
+          /* @__PURE__ */ jsx5("span", { className: "hsk-chat-title", children: title }),
+          /* @__PURE__ */ jsx5("span", { className: "hsk-chat-badge", children: "AI" }),
+          chatHistory.length > 0 && /* @__PURE__ */ jsx5("button", { className: "hsk-chat-reset", onClick: reset, style: { marginLeft: "auto" }, children: "Clear" })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "hsk-chat-messages", children: [
-          messages.length === 0 ? /* @__PURE__ */ jsxs2("div", { className: "hsk-chat-empty", children: [
-            /* @__PURE__ */ jsx3("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
-            /* @__PURE__ */ jsx3("div", { children: emptyStateText }),
-            /* @__PURE__ */ jsx3("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
-          ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsxs2("div", { className: `hsk-msg-row ${msg.role}`, children: [
-              /* @__PURE__ */ jsx3("div", { className: cn("hsk-msg-avatar", msg.role === "assistant" ? "ai" : "user"), children: msg.role === "assistant" ? /* @__PURE__ */ jsx3(SparkleIcon, {}) : "U" }),
-              /* @__PURE__ */ jsx3("div", { className: cn("hsk-msg-bubble", msg.role, classNames.messageBubble), children: renderMarkdown(msg.content) })
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-chat-messages", children: [
+          chatHistory.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-chat-empty", children: [
+            /* @__PURE__ */ jsx5("div", { className: "hsk-chat-empty-icon", children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
+            /* @__PURE__ */ jsx5("div", { children: emptyStateText }),
+            /* @__PURE__ */ jsx5("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
+          ] }) : chatHistory.map((msg, idx) => /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsxs4("div", { className: `hsk-msg-row ${msg.role}`, children: [
+              /* @__PURE__ */ jsx5("div", { className: cn("hsk-msg-avatar", msg.role === "assistant" ? "ai" : "user"), children: msg.role === "assistant" ? /* @__PURE__ */ jsx5(SparkleIcon, {}) : "U" }),
+              /* @__PURE__ */ jsxs4("div", { className: cn("hsk-msg-bubble", msg.role, classNames.messageBubble), children: [
+                msg.imagePreview && /* @__PURE__ */ jsx5("div", { className: "kiku-vs-preview-bubble", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx5("img", { src: msg.imagePreview, alt: "Uploaded Preview", className: "kiku-vs-preview-bubble-img", style: { maxWidth: "200px", borderRadius: "8px" } }) }),
+                renderMarkdown(msg.content),
+                msg.styleDNA && /* @__PURE__ */ jsxs4("div", { className: "kiku-vs-preview-banner", style: { marginTop: "10px" }, children: [
+                  chatHistory[idx - 1]?.imagePreview && /* @__PURE__ */ jsx5("img", { src: chatHistory[idx - 1].imagePreview, alt: "Visual Search Input", className: "kiku-vs-preview-img" }),
+                  /* @__PURE__ */ jsxs4("div", { className: "kiku-vs-preview-info", children: [
+                    /* @__PURE__ */ jsx5("div", { className: "kiku-vs-preview-label", children: "Visual Match Palette" }),
+                    /* @__PURE__ */ jsx5("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__ */ jsx5("div", { className: "kiku-style-tags", children: msg.styleDNA.style_tags.map((tag, ti) => /* @__PURE__ */ jsxs4("span", { className: "kiku-style-tag", children: [
+                      "#",
+                      tag
+                    ] }, ti)) })
+                  ] })
+                ] })
+              ] })
             ] }),
-            msg.role === "assistant" && idx === messages.length - 1 && sources.length > 0 && /* @__PURE__ */ jsx3("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx3("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx3(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
+            msg.role === "assistant" && msg.visualSources && msg.visualSources.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: msg.visualSources.map((src, si) => /* @__PURE__ */ jsx5(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) }),
+            msg.role === "assistant" && idx === chatHistory.length - 1 && !msg.visualSources && sources.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hsk-sources-container", children: /* @__PURE__ */ jsx5("div", { className: "hsk-sources", children: sources.map((src, si) => /* @__PURE__ */ jsx5(SourceCard, { source: src, defaultCurrency, onSelect: onSelectSource }, si)) }) })
           ] }, idx)),
-          loading && /* @__PURE__ */ jsxs2("div", { className: "hsk-msg-row", children: [
-            /* @__PURE__ */ jsx3("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
-            /* @__PURE__ */ jsxs2("div", { className: "hsk-pending", role: "status", "aria-live": "polite", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "hsk-pending-glyph", children: [
-                /* @__PURE__ */ jsx3("span", { className: "hsk-pending-ring" }),
-                /* @__PURE__ */ jsx3("span", { className: "hsk-pending-dot" })
+          loading && /* @__PURE__ */ jsxs4("div", { className: "hsk-msg-row", children: [
+            /* @__PURE__ */ jsx5("div", { className: "hsk-msg-avatar ai", children: /* @__PURE__ */ jsx5(SparkleIcon, {}) }),
+            /* @__PURE__ */ jsxs4("div", { className: "hsk-pending", role: "status", "aria-live": "polite", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "hsk-pending-glyph", children: [
+                /* @__PURE__ */ jsx5("span", { className: "hsk-pending-ring" }),
+                /* @__PURE__ */ jsx5("span", { className: "hsk-pending-dot" })
               ] }),
-              /* @__PURE__ */ jsxs2("div", { className: "hsk-pending-text", children: [
-                /* @__PURE__ */ jsx3("span", { className: "hsk-pending-step step-1", children: "Searching catalog" }),
-                /* @__PURE__ */ jsx3("span", { className: "hsk-pending-step step-2", children: "Reasoning" }),
-                /* @__PURE__ */ jsx3("span", { className: "hsk-pending-step step-3", children: "Composing" })
+              /* @__PURE__ */ jsxs4("div", { className: "hsk-pending-text", children: [
+                /* @__PURE__ */ jsx5("span", { className: "hsk-pending-step step-1", children: "Searching catalog" }),
+                /* @__PURE__ */ jsx5("span", { className: "hsk-pending-step step-2", children: "Reasoning" }),
+                /* @__PURE__ */ jsx5("span", { className: "hsk-pending-step step-3", children: "Composing" })
               ] })
             ] })
           ] }),
-          error && /* @__PURE__ */ jsx3("div", { className: "hsk-chat-error", children: (() => {
+          error && /* @__PURE__ */ jsx5("div", { className: "hsk-chat-error", children: (() => {
             try {
               const parsed = JSON.parse(error);
               return parsed.error || parsed.message || error;
@@ -362,10 +600,19 @@ function ChatWidget({
               return error;
             }
           })() }),
-          /* @__PURE__ */ jsx3("div", { ref: bottomRef })
+          /* @__PURE__ */ jsx5("div", { ref: bottomRef })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "hsk-chat-input-area", children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "hsk-chat-input-area", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          enableVision && /* @__PURE__ */ jsx5(
+            VisualSearch,
+            {
+              onResults: handleVisualResults,
+              onError: (err) => console.error("[VisualSearch] error:", err),
+              categoryHint: visionCategoryHint,
+              disabled: loading
+            }
+          ),
+          /* @__PURE__ */ jsx5(
             "textarea",
             {
               ref: textareaRef,
@@ -375,17 +622,30 @@ function ChatWidget({
               onKeyDown: handleKey,
               placeholder,
               rows: 1,
+              disabled: loading,
+              style: { flex: 1 }
+            }
+          ),
+          enableVoice && /* @__PURE__ */ jsx5(
+            VoiceButton,
+            {
+              onTranscript: (text) => {
+                setInput(text);
+                send(text);
+                setInput("");
+              },
+              onInterim: (text) => setInput(text),
               disabled: loading
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               className: "hsk-chat-send",
               onClick: handleSend,
               disabled: !input.trim() || loading,
               "aria-label": "Send message",
-              children: /* @__PURE__ */ jsx3(ArrowUpIcon, {})
+              children: /* @__PURE__ */ jsx5(ArrowUpIcon, {})
             }
           )
         ] })
@@ -395,14 +655,14 @@ function ChatWidget({
 }
 
 // src/components/KikuButton.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef3, useCallback } from "react";
+import { useState as useState5, useEffect as useEffect3, useRef as useRef5, useCallback as useCallback2 } from "react";
 import { createPortal } from "react-dom";
 import { useKiku as useKiku2 } from "@akropolys/sdk";
 import { usePaymentPolling } from "@akropolys/sdk";
-import { useAkropolysContext as useAkropolysContext2 } from "@akropolys/sdk";
+import { useAkropolysContext as useAkropolysContext3 } from "@akropolys/sdk";
 
 // src/components/ComparisonMatrix.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function extractSize(p) {
   const name = p.name;
   const cat = (p.category || "").toLowerCase();
@@ -514,9 +774,9 @@ function buildRows(products, currency) {
 }
 function ImageCell({ value, name }) {
   if (!value) {
-    return /* @__PURE__ */ jsx4("div", { style: { fontSize: 28, textAlign: "center" }, children: "\u{1F4E6}" });
+    return /* @__PURE__ */ jsx6("div", { style: { fontSize: 28, textAlign: "center" }, children: "\u{1F4E6}" });
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "img",
     {
       src: value,
@@ -533,10 +793,10 @@ function ImageCell({ value, name }) {
   );
 }
 function AvailabilityCell({ value }) {
-  if (!value) return /* @__PURE__ */ jsx4("span", { style: { color: "#9ca3af" }, children: "\u2014" });
+  if (!value) return /* @__PURE__ */ jsx6("span", { style: { color: "#9ca3af" }, children: "\u2014" });
   const inStock = /in.?stock/i.test(value);
-  return /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--hsk-text, #111827)" }, children: [
-    /* @__PURE__ */ jsx4("span", { style: {
+  return /* @__PURE__ */ jsxs5("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--hsk-text, #111827)" }, children: [
+    /* @__PURE__ */ jsx6("span", { style: {
       width: 8,
       height: 8,
       borderRadius: "50%",
@@ -577,7 +837,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
     display: "flex",
     alignItems: "center"
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "hsk-compare-matrix",
@@ -590,9 +850,9 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
         fontSize: 13
       },
       children: [
-        /* @__PURE__ */ jsxs3("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__ */ jsx4("div", { style: { ...labelStyle, borderBottom: "none", color: "var(--hsk-text, #111)", fontSize: 12 }, children: "Feature" }),
-          products.map((p, i) => /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("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__ */ jsx6("div", { style: { ...labelStyle, borderBottom: "none", color: "var(--hsk-text, #111)", fontSize: 12 }, children: "Feature" }),
+          products.map((p, i) => /* @__PURE__ */ jsx6(
             "a",
             {
               href: p.url || "#",
@@ -614,7 +874,7 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
             i
           ))
         ] }),
-        rows.map((row, rowIdx) => /* @__PURE__ */ jsxs3(
+        rows.map((row, rowIdx) => /* @__PURE__ */ jsxs5(
           "div",
           {
             style: {
@@ -623,17 +883,17 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
               background: rowIdx % 2 === 1 ? "var(--hsk-surface2, rgba(0,0,0,0.015))" : "transparent"
             },
             children: [
-              /* @__PURE__ */ jsx4("div", { style: labelStyle, children: row.label }),
+              /* @__PURE__ */ jsx6("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__ */ jsx4("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ jsx4(ImageCell, { value: val, name: p.name }) }, i);
+                  return /* @__PURE__ */ jsx6("div", { style: { ...cellBase, justifyContent: "center", padding: "12px", borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ jsx6(ImageCell, { value: val, name: p.name }) }, i);
                 }
                 if (row.type === "availability") {
-                  return /* @__PURE__ */ jsx4("div", { style: { ...cellBase, borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ jsx4(AvailabilityCell, { value: val }) }, i);
+                  return /* @__PURE__ */ jsx6("div", { style: { ...cellBase, borderLeft: i > 0 ? "1px solid var(--hsk-border, rgba(0,0,0,0.07))" : "none" }, children: /* @__PURE__ */ jsx6(AvailabilityCell, { value: val }) }, i);
                 }
-                return /* @__PURE__ */ jsx4(
+                return /* @__PURE__ */ jsx6(
                   "div",
                   {
                     style: {
@@ -643,7 +903,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__ */ jsx4("span", { style: { color: "#9ca3af" }, children: "\u2014" })
+                    children: val ?? /* @__PURE__ */ jsx6("span", { style: { color: "#9ca3af" }, children: "\u2014" })
                   },
                   i
                 );
@@ -658,8 +918,8 @@ function ComparisonMatrix({ sources, defaultCurrency = "KES" }) {
 }
 
 // src/components/KikuButton.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs6(
   "svg",
   {
     className: cn("hsk-brand-a", className),
@@ -670,7 +930,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
     xmlns: "http://www.w3.org/2000/svg",
     "aria-label": "Akropolys",
     children: [
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "path",
         {
           d: "M14.5 4.5 L6.5 25",
@@ -679,7 +939,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "path",
         {
           d: "M14.5 4.5 L22.5 25",
@@ -688,7 +948,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "path",
         {
           d: "M9.5 17 H19.5",
@@ -697,7 +957,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "path",
         {
           d: "M3 25 H10",
@@ -706,7 +966,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "path",
         {
           d: "M19 25 H26",
@@ -715,7 +975,7 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "path",
         {
           d: "M8.5 2.5 C10 2.5, 11 3.5, 11 5 C11 7, 8.5 8.5, 7.5 9.5",
@@ -730,25 +990,39 @@ var AkropolysAIcon = ({ className, size = 18 }) => /* @__PURE__ */ jsxs4(
   }
 );
 var SparkleIcon2 = AkropolysAIcon;
-var ArrowUpIcon2 = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ jsx5("path", { d: "M12 19V5" })
+var ArrowUpIcon2 = () => /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx7("path", { d: "M12 19V5" })
 ] });
-var CloseIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+var CloseIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ChevronRightIcon = () => /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "m9 18 6-6-6-6" }) });
-var HistoryIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ jsx5("path", { d: "M3 3v5h5" }),
-  /* @__PURE__ */ jsx5("path", { d: "M12 7v5l4 2" })
+var ChevronRightIcon = () => /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "m9 18 6-6-6-6" }) });
+var HistoryIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ jsx7("path", { d: "M3 3v5h5" }),
+  /* @__PURE__ */ jsx7("path", { d: "M12 7v5l4 2" })
 ] });
-var NewChatIcon = () => /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M12 5v14M5 12h14" }) });
-var ShoppingBagIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("path", { d: "M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" }),
-  /* @__PURE__ */ jsx5("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-  /* @__PURE__ */ jsx5("path", { d: "M16 10a4 4 0 0 1-8 0" })
+var NewChatIcon = () => /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M12 5v14M5 12h14" }) });
+var ShoppingBagIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("path", { d: "M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" }),
+  /* @__PURE__ */ jsx7("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx7("path", { d: "M16 10a4 4 0 0 1-8 0" })
+] });
+var PaperclipIcon = () => /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("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__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
+  /* @__PURE__ */ jsx7("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+  /* @__PURE__ */ jsx7("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
+] });
+var MicOffIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
+  /* @__PURE__ */ jsx7("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
+  /* @__PURE__ */ jsx7("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
+  /* @__PURE__ */ jsx7("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
+  /* @__PURE__ */ jsx7("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+  /* @__PURE__ */ jsx7("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
 ] });
 var DEFAULT_CHIPS = [
   "Cheapest smartphone",
@@ -788,25 +1062,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__ */ jsxs4("div", { className: "hsk-cart-card", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "hsk-cart-card-header", children: [
-      /* @__PURE__ */ jsx5(ShoppingBagIcon, {}),
-      /* @__PURE__ */ jsxs4("span", { children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-card", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-card-header", children: [
+      /* @__PURE__ */ jsx7(ShoppingBagIcon, {}),
+      /* @__PURE__ */ jsxs6("span", { children: [
         "Your cart \xB7 ",
         cart.item_count ?? cart.items.length,
         " item",
         (cart.item_count ?? cart.items.length) !== 1 ? "s" : ""
       ] })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ jsxs4("div", { className: "hsk-cart-item", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "hsk-cart-item-img-wrap", children: [
-        item.image ? /* @__PURE__ */ jsx5("img", { className: "hsk-cart-item-img", src: item.image, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "hsk-cart-item-img-placeholder", children: /* @__PURE__ */ jsx5(ShoppingBagIcon, {}) }),
-        item.quantity > 1 && /* @__PURE__ */ jsx5("span", { className: "hsk-cart-item-qty", children: item.quantity })
+    /* @__PURE__ */ jsx7("div", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-item", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-item-img-wrap", children: [
+        item.image ? /* @__PURE__ */ jsx7("img", { className: "hsk-cart-item-img", src: item.image, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ jsx7("div", { className: "hsk-cart-item-img-placeholder", children: /* @__PURE__ */ jsx7(ShoppingBagIcon, {}) }),
+        item.quantity > 1 && /* @__PURE__ */ jsx7("span", { className: "hsk-cart-item-qty", children: item.quantity })
       ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "hsk-cart-item-info", children: [
-        /* @__PURE__ */ jsx5("div", { className: "hsk-cart-item-name", children: item.name }),
-        /* @__PURE__ */ jsxs4("div", { className: "hsk-cart-item-price", children: [
-          item.quantity > 1 && /* @__PURE__ */ jsxs4("span", { className: "hsk-cart-item-qty-label", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-item-info", children: [
+        /* @__PURE__ */ jsx7("div", { className: "hsk-cart-item-name", children: item.name }),
+        /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-item-price", children: [
+          item.quantity > 1 && /* @__PURE__ */ jsxs6("span", { className: "hsk-cart-item-qty-label", children: [
             item.quantity,
             "\xD7 "
           ] }),
@@ -816,9 +1090,9 @@ function CartContextCard({ cart, defaultCurrency }) {
         ] })
       ] })
     ] }, item.id)) }),
-    /* @__PURE__ */ jsxs4("div", { className: "hsk-cart-total", children: [
-      /* @__PURE__ */ jsx5("span", { children: "Total" }),
-      /* @__PURE__ */ jsxs4("span", { className: "hsk-cart-total-amount", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-total", children: [
+      /* @__PURE__ */ jsx7("span", { children: "Total" }),
+      /* @__PURE__ */ jsxs6("span", { className: "hsk-cart-total-amount", children: [
         currency,
         " ",
         total.toLocaleString()
@@ -850,14 +1124,14 @@ function ActionPills({ cart, actionType, onSend, loading }) {
     }
   }
   if (pills.length === 0) return null;
-  return /* @__PURE__ */ jsx5("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx7("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ jsxs6(
     "button",
     {
       className: "hsk-action-pill",
       onClick: () => onSend(pill.query),
       disabled: loading,
       children: [
-        /* @__PURE__ */ jsx5("span", { className: "hsk-pill-emoji", children: pill.emoji }),
+        /* @__PURE__ */ jsx7("span", { className: "hsk-pill-emoji", children: pill.emoji }),
         pill.label
       ]
     },
@@ -865,11 +1139,11 @@ function ActionPills({ cart, actionType, onSend, loading }) {
   )) });
 }
 function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
-  const client = useAkropolysContext2();
+  const client = useAkropolysContext3();
   const isProperty = client?.vertical === "property";
-  const railRef = useRef3(null);
-  const [showNext, setShowNext] = useState3(false);
-  const measure = useCallback(() => {
+  const railRef = useRef5(null);
+  const [showNext, setShowNext] = useState5(false);
+  const measure = useCallback2(() => {
     const el = railRef.current;
     if (!el) return;
     const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
@@ -890,17 +1164,17 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
   const scrollNext = () => {
     railRef.current?.scrollBy({ left: 170, behavior: "smooth" });
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-sources-wrap", children: [
-    /* @__PURE__ */ jsx5("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-sources-wrap", children: [
+    /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sources", ref: railRef, children: sources.map((src, si) => /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "hsk-cb-source",
         style: { animationDelay: `${si * 50}ms` },
         onClick: () => onSelectSource?.(src),
         children: [
-          src.image ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx5("img", { src: src.image, alt: src.name, loading: "lazy" }),
-            isProperty && /* @__PURE__ */ jsx5("div", { style: {
+          src.image ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-imgwrap", style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx7("img", { src: src.image, alt: src.name, loading: "lazy" }),
+            isProperty && /* @__PURE__ */ jsx7("div", { style: {
               position: "absolute",
               top: "6px",
               right: "6px",
@@ -915,11 +1189,11 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
               color: "#fbbf24",
               // Gold sparkle badge
               boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
-            }, children: /* @__PURE__ */ jsx5(SparkleIcon2, { size: 12 }) })
-          ] }) : /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-info", children: [
-            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-src-name", children: src.name }),
-            src.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-src-price", children: [
+            }, children: /* @__PURE__ */ jsx7(SparkleIcon2, { size: 12 }) })
+          ] }) : /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-imgwrap-empty", children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
+          /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-info", children: [
+            /* @__PURE__ */ jsx7("div", { className: "hsk-cb-src-name", children: src.name }),
+            src.price && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-src-price", children: [
               src.currency ?? defaultCurrency,
               " ",
               parseFloat(String(src.price).replace(/[^0-9.]/g, "") || "0").toLocaleString()
@@ -929,15 +1203,15 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
       },
       si
     )) }),
-    showNext && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx5(
+    showNext && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx7(
         "div",
         {
           className: "hsk-cb-sources-fade",
           style: { background: "linear-gradient(to right, transparent, var(--hsk-fade-bg, #0e0e0f))" }
         }
       ),
-      /* @__PURE__ */ jsx5("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ jsx5(ChevronRightIcon, {}) })
+      /* @__PURE__ */ jsx7("button", { className: "hsk-cb-sources-next", onClick: scrollNext, "aria-label": "See more", children: /* @__PURE__ */ jsx7(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -956,7 +1230,7 @@ function SmartContextPills({
   onSend,
   loading
 }) {
-  const client = useAkropolysContext2();
+  const client = useAkropolysContext3();
   const isProperty = client?.vertical === "property";
   if (!intent) return null;
   const pills = [];
@@ -1025,14 +1299,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__ */ jsx5("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx7("div", { className: "hsk-action-pills", children: pills.map((pill) => /* @__PURE__ */ jsxs6(
     "button",
     {
       className: "hsk-action-pill",
       onClick: () => onSend(pill.query),
       disabled: loading,
       children: [
-        /* @__PURE__ */ jsx5("span", { className: "hsk-pill-emoji", children: pill.emoji }),
+        /* @__PURE__ */ jsx7("span", { className: "hsk-pill-emoji", children: pill.emoji }),
         pill.label
       ]
     },
@@ -1091,12 +1365,66 @@ function ChatModal({
   defaultCurrency = "KES",
   chips = DEFAULT_CHIPS,
   theme,
-  classNames = {}
+  classNames = {},
+  enableVoice = false,
+  enableVision = false,
+  visionCategoryHint
 }) {
-  const client = useAkropolysContext2();
+  const client = useAkropolysContext3();
   const { messages, sources, loading, streaming, error, lastAction, lastIntent, send, reset } = useKiku2();
-  const [input, setInput] = useState3("");
-  const [loadingMessageIndex, setLoadingMessageIndex] = useState3(0);
+  const [input, setInput] = useState5("");
+  const [loadingMessageIndex, setLoadingMessageIndex] = useState5(0);
+  const [attachments, setAttachments] = useState5([]);
+  const imageInputRef = useRef5(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] = useState5("idle");
+  const recognitionRef = useRef5(null);
+  const pendingVoiceRef = useRef5(null);
+  const hasSpeechAPI = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
+  const startVoice = useCallback2(() => {
+    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 = useCallback2(() => {
+    recognitionRef.current?.stop();
+    setVoiceState("idle");
+  }, []);
+  useEffect3(() => {
+    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;
@@ -1111,20 +1439,20 @@ function ChatModal({
       setLoadingMessageIndex(0);
     }
   }, [loading, streaming]);
-  const [selectedProduct, setSelectedProduct] = useState3(null);
-  const bottomRef = useRef3(null);
-  const textareaRef = useRef3(null);
-  const [phoneInput, setPhoneInput] = useState3(() => {
+  const [selectedProduct, setSelectedProduct] = useState5(null);
+  const bottomRef = useRef5(null);
+  const textareaRef = useRef5(null);
+  const [phoneInput, setPhoneInput] = useState5(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_phone") || "";
     }
     return "";
   });
-  const [merchantRef, setMerchantRef] = useState3(null);
-  const [paymentPhase, setPaymentPhase] = useState3("idle");
-  const [sessions, setSessions] = useState3(() => loadSessions());
-  const [sidebarOpen, setSidebarOpen] = useState3(false);
-  const [replayMessages, setReplayMessages] = useState3(null);
+  const [merchantRef, setMerchantRef] = useState5(null);
+  const [paymentPhase, setPaymentPhase] = useState5("idle");
+  const [sessions, setSessions] = useState5(() => loadSessions());
+  const [sidebarOpen, setSidebarOpen] = useState5(false);
+  const [replayMessages, setReplayMessages] = useState5(null);
   const { status: pollStatus } = usePaymentPolling({
     client: client.api,
     merchantReference: merchantRef,
@@ -1178,7 +1506,7 @@ function ChatModal({
       setPaymentPhase("failed");
     }
   };
-  const msgsContainerRef = useRef3(null);
+  const msgsContainerRef = useRef5(null);
   useEffect3(() => {
     const container = msgsContainerRef.current;
     if (!container) return;
@@ -1194,7 +1522,7 @@ function ChatModal({
     document.addEventListener("keydown", h);
     return () => document.removeEventListener("keydown", h);
   }, []);
-  const saveCurrentSession = useCallback(() => {
+  const saveCurrentSession = useCallback2(() => {
     if (messages.length < 2) return;
     const firstUser = messages.find((m) => m.role === "user");
     const session = {
@@ -1207,7 +1535,7 @@ function ChatModal({
     setSessions(updated);
     saveSessions(updated);
   }, [messages, sessions]);
-  const handleReset = useCallback(() => {
+  const handleReset = useCallback2(() => {
     saveCurrentSession();
     reset();
     setReplayMessages(null);
@@ -1220,7 +1548,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);
@@ -1229,7 +1557,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) {
@@ -1243,6 +1573,20 @@ function ChatModal({
     t.style.height = "auto";
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
   };
+  useEffect3(() => {
+    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) => {
@@ -1255,7 +1599,7 @@ function ChatModal({
     setSessions(updated);
     saveSessions(updated);
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn("hsk-cb-overlay", classNames.overlay),
@@ -1267,27 +1611,27 @@ function ChatModal({
         ...backdropColor ? { background: backdropColor } : {},
         ...customStyles
       },
-      children: /* @__PURE__ */ jsxs4("div", { className: cn("hsk-cb-panel hsk-cb-panel--with-sidebar", classNames.panel), onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsxs4("div", { className: cn("hsk-cb-sidebar", sidebarOpen && "hsk-cb-sidebar--open"), children: [
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-sidebar-header", children: [
-            /* @__PURE__ */ jsx5("span", { className: "hsk-cb-sidebar-title", children: "History" }),
-            /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs6("div", { className: cn("hsk-cb-panel hsk-cb-panel--with-sidebar", classNames.panel), onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs6("div", { className: cn("hsk-cb-sidebar", sidebarOpen && "hsk-cb-sidebar--open"), children: [
+          /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-sidebar-header", children: [
+            /* @__PURE__ */ jsx7("span", { className: "hsk-cb-sidebar-title", children: "History" }),
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 className: "hsk-cb-sidebar-new",
                 onClick: handleReset,
                 title: "New chat",
                 children: [
-                  /* @__PURE__ */ jsx5(NewChatIcon, {}),
-                  /* @__PURE__ */ jsx5("span", { children: "New chat" })
+                  /* @__PURE__ */ jsx7(NewChatIcon, {}),
+                  /* @__PURE__ */ jsx7("span", { children: "New chat" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: "hsk-cb-sidebar-list", children: sessions.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-sidebar-empty", children: [
-            /* @__PURE__ */ jsx5(HistoryIcon, {}),
-            /* @__PURE__ */ jsx5("span", { children: "No history yet" })
-          ] }) : sessions.map((session) => /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sidebar-list", children: sessions.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-sidebar-empty", children: [
+            /* @__PURE__ */ jsx7(HistoryIcon, {}),
+            /* @__PURE__ */ jsx7("span", { children: "No history yet" })
+          ] }) : sessions.map((session) => /* @__PURE__ */ jsxs6(
             "div",
             {
               className: cn(
@@ -1296,9 +1640,9 @@ function ChatModal({
               ),
               onClick: () => loadSession(session),
               children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-sidebar-session-title", children: session.title }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-sidebar-session-meta", children: relativeTime(session.ts) }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sidebar-session-title", children: session.title }),
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-sidebar-session-meta", children: relativeTime(session.ts) }),
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "hsk-cb-sidebar-session-del",
@@ -1312,10 +1656,10 @@ function ChatModal({
             session.id
           )) })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-main", children: [
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-left", children: [
-              /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-main", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-topbar", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-topbar-left", children: [
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   className: cn("hsk-cb-sidebar-toggle", sidebarOpen && "hsk-cb-sidebar-toggle--active"),
@@ -1324,29 +1668,29 @@ function ChatModal({
                     setSidebarOpen((v) => !v);
                   },
                   "aria-label": "Toggle history",
-                  children: /* @__PURE__ */ jsx5(HistoryIcon, {})
+                  children: /* @__PURE__ */ jsx7(HistoryIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx5("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
-              /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5("div", { className: "hsk-cb-topbar-title", children: activeTitle }) })
+              /* @__PURE__ */ jsx7("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
+              /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7("div", { className: "hsk-cb-topbar-title", children: activeTitle }) })
             ] }),
-            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-actions", children: [
-              replayMessages ? /* @__PURE__ */ jsx5("button", { className: "hsk-cb-topbar-btn", onClick: () => {
+            /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-topbar-actions", children: [
+              replayMessages ? /* @__PURE__ */ jsx7("button", { className: "hsk-cb-topbar-btn", onClick: () => {
                 setReplayMessages(null);
-              }, children: "\u2190 Live chat" }) : messages.length > 0 && /* @__PURE__ */ jsx5("button", { className: "hsk-cb-topbar-btn", onClick: handleReset, children: "Clear chat" }),
-              /* @__PURE__ */ jsx5("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx5(CloseIcon, {}) })
+              }, children: "\u2190 Live chat" }) : messages.length > 0 && /* @__PURE__ */ jsx7("button", { className: "hsk-cb-topbar-btn", onClick: handleReset, children: "Clear chat" }),
+              /* @__PURE__ */ jsx7("button", { className: "hsk-cb-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
             ] })
           ] }),
-          replayMessages && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-replay-banner", children: [
-            /* @__PURE__ */ jsx5(HistoryIcon, {}),
-            /* @__PURE__ */ jsx5("span", { children: "You're viewing a past conversation." }),
-            /* @__PURE__ */ jsx5("button", { onClick: () => setReplayMessages(null), children: "Back to chat \u2192" })
+          replayMessages && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-replay-banner", children: [
+            /* @__PURE__ */ jsx7(HistoryIcon, {}),
+            /* @__PURE__ */ jsx7("span", { children: "You're viewing a past conversation." }),
+            /* @__PURE__ */ jsx7("button", { onClick: () => setReplayMessages(null), children: "Back to chat \u2192" })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-msgs", ref: msgsContainerRef, children: [
-            displayMessages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-empty", children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-empty-title", children: "Find exactly what you need" }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-msgs", ref: msgsContainerRef, children: [
+            displayMessages.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-empty", children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-empty-title", children: "Find exactly what you need" }),
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-chips", children: activeChips.map((chip) => /* @__PURE__ */ jsx7(
                 "button",
                 {
                   className: "hsk-cb-chip",
@@ -1359,12 +1703,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__ */ jsx5("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx5("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-msg", children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
-                /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-ai-body", children: [
-                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-text", children: renderMarkdown(displayContent) }),
-                  isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ jsx5(ComparisonMatrix, { sources, defaultCurrency }),
-                  isLast && sources.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ jsx5(
+              return /* @__PURE__ */ jsx7("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-user-msg", children: [
+                msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-user-imgs", children: msg.images.map((img, i) => /* @__PURE__ */ jsx7("img", { src: img, alt: `attachment ${i + 1}`, className: "hsk-cb-user-img-thumb" }, i)) }),
+                msg.content && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-user-bubble", children: msg.content })
+              ] }) : /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
+                /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-body", children: [
+                  /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-text", children: renderMarkdown(displayContent) }),
+                  isLast && lastIntent === "compare" && sources.length >= 2 && !replayMessages && /* @__PURE__ */ jsx7(ComparisonMatrix, { sources, defaultCurrency }),
+                  isLast && sources.length > 0 && lastIntent !== "compare" && lastAction?.type !== "request_phone" && lastAction?.type !== "awaiting_payment" && lastAction?.type !== "checkout" && !msg.cartSnapshot && /* @__PURE__ */ jsx7(
                     SourcesCarousel,
                     {
                       sources,
@@ -1372,14 +1719,14 @@ function ChatModal({
                       onSelectSource: handleSourceClick
                     }
                   ),
-                  msg.cartSnapshot && msg.cartSnapshot.items?.length > 0 && /* @__PURE__ */ jsx5(
+                  msg.cartSnapshot && msg.cartSnapshot.items?.length > 0 && /* @__PURE__ */ jsx7(
                     CartContextCard,
                     {
                       cart: msg.cartSnapshot,
                       defaultCurrency
                     }
                   ),
-                  isLast && msg.cartSnapshot && !loading && /* @__PURE__ */ jsx5(
+                  isLast && msg.cartSnapshot && !loading && /* @__PURE__ */ jsx7(
                     ActionPills,
                     {
                       cart: msg.cartSnapshot,
@@ -1388,7 +1735,7 @@ function ChatModal({
                       loading
                     }
                   ),
-                  isLast && !loading && !msg.cartSnapshot && !replayMessages && /* @__PURE__ */ jsx5(
+                  isLast && !loading && !msg.cartSnapshot && !replayMessages && /* @__PURE__ */ jsx7(
                     SmartContextPills,
                     {
                       intent: lastIntent,
@@ -1400,16 +1747,16 @@ function ChatModal({
                 ] })
               ] }) }, idx);
             }),
-            selectedProduct && loading && /* @__PURE__ */ jsxs4(
+            selectedProduct && loading && /* @__PURE__ */ jsxs6(
               "div",
               {
                 className: "hsk-cb-selected-product",
                 onClick: () => selectedProduct.url && window.open(selectedProduct.url, "_blank"),
                 children: [
-                  selectedProduct.image && /* @__PURE__ */ jsx5("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
-                  /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-info", children: [
-                    /* @__PURE__ */ jsx5("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
-                    selectedProduct.price && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-selected-price", children: [
+                  selectedProduct.image && /* @__PURE__ */ jsx7("img", { className: "hsk-cb-selected-img", src: selectedProduct.image, alt: selectedProduct.name }),
+                  /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-selected-info", children: [
+                    /* @__PURE__ */ jsx7("div", { className: "hsk-cb-selected-name", children: selectedProduct.name }),
+                    selectedProduct.price && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-selected-price", children: [
                       selectedProduct.currency ?? defaultCurrency,
                       " ",
                       parseFloat(String(selectedProduct.price ?? "").replace(/[^0-9.]/g, "") || "0").toLocaleString()
@@ -1418,34 +1765,34 @@ function ChatModal({
                 ]
               }
             ),
-            loading && !streaming && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center", marginTop: "4px" }, children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
-              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-                /* @__PURE__ */ jsx5("style", { children: `
+            loading && !streaming && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-typing-row", style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center", marginTop: "4px" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
+              /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx7("style", { children: `
                     @keyframes hsk-pulse {
                       0%, 100% { opacity: 0.6; }
                       50% { opacity: 1; }
                     }
                   ` }),
-                /* @__PURE__ */ jsx5("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: LOADING_MESSAGES[loadingMessageIndex] }),
-                /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-typing", style: { margin: 0, alignSelf: "flex-start" }, children: [
-                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot" })
+                /* @__PURE__ */ jsx7("div", { style: { fontSize: "0.85rem", color: "#6b7280", fontStyle: "italic", animation: "hsk-pulse 1.5s infinite ease-in-out" }, children: LOADING_MESSAGES[loadingMessageIndex] }),
+                /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-typing", style: { margin: 0, alignSelf: "flex-start" }, children: [
+                  /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot" })
                 ] })
               ] })
             ] }),
-            error && /* @__PURE__ */ jsx5("div", { className: "hsk-cb-error", children: getFriendlyError(error) }),
+            error && /* @__PURE__ */ jsx7("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__ */ jsxs4("div", { className: "hsk-cb-ai-msg", children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx5("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-phone-form", children: [
-                  /* @__PURE__ */ jsx5("label", { className: "hsk-cb-phone-label", children: "Enter your M-Pesa number to pay" }),
-                  /* @__PURE__ */ jsx5(
+              return /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-ai-msg", children: [
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx7("div", { className: "hsk-cb-ai-text", children: /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-phone-form", children: [
+                  /* @__PURE__ */ jsx7("label", { className: "hsk-cb-phone-label", children: "Enter your M-Pesa number to pay" }),
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       type: "tel",
@@ -1457,37 +1804,37 @@ function ChatModal({
                       autoFocus: true
                     }
                   ),
-                  /* @__PURE__ */ jsx5("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Send STK push" })
+                  /* @__PURE__ */ jsx7("button", { className: "hsk-cb-phone-submit", onClick: handlePhoneSubmit, children: "Send STK push" })
                 ] }) }) })
               ] });
             })(),
-            !replayMessages && paymentPhase === "awaiting" && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--awaiting", children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-payment-pulse-ring" }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ jsx5("span", { style: { fontSize: "2rem" }, children: "\u{1F4F1}" }) }),
-              /* @__PURE__ */ jsx5("p", { className: "hsk-cb-payment-label", style: { fontWeight: 600 }, children: "Check your phone" }),
-              /* @__PURE__ */ jsxs4("p", { className: "hsk-cb-payment-sub", children: [
+            !replayMessages && paymentPhase === "awaiting" && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--awaiting", children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-payment-pulse-ring" }),
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ jsx7("span", { style: { fontSize: "2rem" }, children: "\u{1F4F1}" }) }),
+              /* @__PURE__ */ jsx7("p", { className: "hsk-cb-payment-label", style: { fontWeight: 600 }, children: "Check your phone" }),
+              /* @__PURE__ */ jsxs6("p", { className: "hsk-cb-payment-sub", children: [
                 "An M-Pesa STK push has been sent.",
-                /* @__PURE__ */ jsx5("br", {}),
+                /* @__PURE__ */ jsx7("br", {}),
                 "Enter your PIN to complete payment."
               ] }),
-              /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-payment-dots", children: [
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
-                /* @__PURE__ */ jsx5("div", { className: "hsk-cb-dot hsk-cb-dot--amber" })
+              /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-payment-dots", children: [
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot hsk-cb-dot--amber" }),
+                /* @__PURE__ */ jsx7("div", { className: "hsk-cb-dot hsk-cb-dot--amber" })
               ] })
             ] }),
-            !replayMessages && paymentPhase === "done" && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--success", children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-payment-success-ring" }),
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ jsx5("span", { style: { fontSize: "2.5rem" }, children: "\u2705" }) }),
-              /* @__PURE__ */ jsx5("p", { className: "hsk-cb-payment-label", children: "Payment complete!" }),
-              /* @__PURE__ */ jsx5("p", { className: "hsk-cb-payment-sub", children: "Thank you for your order. A confirmation has been sent." })
+            !replayMessages && paymentPhase === "done" && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--success", children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-payment-success-ring" }),
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ jsx7("span", { style: { fontSize: "2.5rem" }, children: "\u2705" }) }),
+              /* @__PURE__ */ jsx7("p", { className: "hsk-cb-payment-label", children: "Payment complete!" }),
+              /* @__PURE__ */ jsx7("p", { className: "hsk-cb-payment-sub", children: "Thank you for your order. A confirmation has been sent." })
             ] }),
-            !replayMessages && paymentPhase === "failed" && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--failed", children: [
-              /* @__PURE__ */ jsx5("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ jsx5("span", { style: { fontSize: "2.5rem" }, children: "\u274C" }) }),
-              /* @__PURE__ */ jsx5("p", { className: "hsk-cb-payment-label", children: "Payment failed or timed out" }),
-              /* @__PURE__ */ jsx5("p", { className: "hsk-cb-payment-sub", children: "Please check your M-Pesa PIN and try again, or contact support." }),
-              /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-payment-actions", children: [
-                /* @__PURE__ */ jsx5(
+            !replayMessages && paymentPhase === "failed" && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-payment-prompt hsk-cb-payment-prompt--failed", children: [
+              /* @__PURE__ */ jsx7("div", { className: "hsk-cb-payment-icon-wrap", children: /* @__PURE__ */ jsx7("span", { style: { fontSize: "2.5rem" }, children: "\u274C" }) }),
+              /* @__PURE__ */ jsx7("p", { className: "hsk-cb-payment-label", children: "Payment failed or timed out" }),
+              /* @__PURE__ */ jsx7("p", { className: "hsk-cb-payment-sub", children: "Please check your M-Pesa PIN and try again, or contact support." }),
+              /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-payment-actions", children: [
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "hsk-cb-pay-submit",
@@ -1498,7 +1845,7 @@ function ChatModal({
                     children: "Try again"
                   }
                 ),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     className: "hsk-cb-pay-secondary",
@@ -1511,11 +1858,45 @@ function ChatModal({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx5("div", { ref: bottomRef, style: { height: 1 } })
+            /* @__PURE__ */ jsx7("div", { ref: bottomRef, style: { height: 1 } })
           ] }),
-          !replayMessages && /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-wrap", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-input-box", children: [
-              /* @__PURE__ */ jsx5(
+          !replayMessages && /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-input-wrap", children: [
+            attachments.length > 0 && /* @__PURE__ */ jsx7("div", { className: "hsk-cb-img-strip", children: attachments.map((att, i) => /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-img-thumb-wrap", children: [
+              /* @__PURE__ */ jsx7("img", { src: att.data, alt: `attachment ${i + 1}`, className: "hsk-cb-img-thumb" }),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  className: "hsk-cb-img-thumb-remove",
+                  onClick: () => removeAttachment(i),
+                  "aria-label": "Remove image",
+                  children: "\xD7"
+                }
+              )
+            ] }, i)) }),
+            /* @__PURE__ */ jsxs6("div", { className: "hsk-cb-input-box", children: [
+              /* @__PURE__ */ jsx7(
+                "input",
+                {
+                  ref: imageInputRef,
+                  type: "file",
+                  accept: "image/*",
+                  multiple: true,
+                  style: { display: "none" },
+                  onChange: (e) => handleImageFiles(e.target.files)
+                }
+              ),
+              enableVision && /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  className: "hsk-cb-attach-btn",
+                  onClick: () => imageInputRef.current?.click(),
+                  disabled: loading,
+                  "aria-label": "Attach image",
+                  title: "Attach image",
+                  children: /* @__PURE__ */ jsx7(PaperclipIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx7(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -1529,18 +1910,36 @@ function ChatModal({
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              hasSpeechAPI && enableVoice && /* @__PURE__ */ jsxs6(
+                "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__ */ jsx7(MicOffIcon, {}) : /* @__PURE__ */ jsx7(MicIcon2, {}),
+                    voiceState === "listening" && /* @__PURE__ */ jsx7("span", { className: "hsk-cb-mic-pulse" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx7(
                 "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__ */ jsx5(ArrowUpIcon2, {})
+                  children: /* @__PURE__ */ jsx7(ArrowUpIcon2, {})
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx5("div", { className: "hsk-cb-hint", children: "Akropolys AI \xB7 searches the whole catalogue in real time" })
+            /* @__PURE__ */ jsx7("div", { className: "hsk-cb-hint", children: "Akropolys AI \xB7 searches the whole catalogue in real time" })
           ] })
         ] })
       ] })
@@ -1558,10 +1957,13 @@ function KikuButton({
   defaultCurrency,
   chips,
   theme,
-  classNames = {}
+  classNames = {},
+  enableVoice = false,
+  enableVision = false,
+  visionCategoryHint
 }) {
-  const [open, setOpen] = useState3(false);
-  const [mounted, setMounted] = useState3(false);
+  const [open, setOpen] = useState5(false);
+  const [mounted, setMounted] = useState5(false);
   useEffect3(() => {
     setMounted(true);
     if (typeof window !== "undefined" && !window.__akropolys_nav_patched) {
@@ -1596,8 +1998,8 @@ function KikuButton({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   } : void 0;
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         className: cn("hsk-cb-btn", classNames.button, className),
@@ -1606,13 +2008,13 @@ function KikuButton({
         "data-hsk-theme": hskThemeAttr,
         "aria-label": "Open AI chat",
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
+          /* @__PURE__ */ jsx7("span", { className: "hsk-cb-btn-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(SparkleIcon2, {}) }),
           label !== void 0 ? label : null
         ]
       }
     ),
     open && mounted && createPortal(
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         ChatModal,
         {
           title,
@@ -1624,7 +2026,10 @@ function KikuButton({
           defaultCurrency,
           chips,
           theme,
-          classNames
+          classNames,
+          enableVoice,
+          enableVision,
+          visionCategoryHint
         }
       ),
       document.body
@@ -1633,11 +2038,11 @@ function KikuButton({
 }
 
 // src/components/Sparkle.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useState as useState6, useEffect as useEffect4, useRef as useRef6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { useSearch as useSearch2, useKiku as useKiku3, useAkropolysContext as useAkropolysContext3 } from "@akropolys/sdk";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
+import { useSearch as useSearch2, useKiku as useKiku3, useAkropolysContext as useAkropolysContext4 } from "@akropolys/sdk";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs7(
   "svg",
   {
     className: cn("hsk-brand-a", className),
@@ -1648,7 +2053,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
     xmlns: "http://www.w3.org/2000/svg",
     "aria-label": "Akropolys",
     children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M14.5 4.5 L6.5 25",
@@ -1657,7 +2062,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M14.5 4.5 L22.5 25",
@@ -1666,7 +2071,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M9.5 17 H19.5",
@@ -1675,7 +2080,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M3 25 H10",
@@ -1684,7 +2089,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M19 25 H26",
@@ -1693,7 +2098,7 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M8.5 2.5 C10 2.5, 11 3.5, 11 5 C11 7, 8.5 8.5, 7.5 9.5",
@@ -1707,13 +2112,13 @@ var SparkleIcon3 = ({ className, size = 16 }) => /* @__PURE__ */ jsxs5(
     ]
   }
 );
-var CloseIcon2 = () => /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+var CloseIcon2 = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ArrowUpIcon3 = () => /* @__PURE__ */ jsxs5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx6("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ jsx6("path", { d: "M12 19V5" })
+var ArrowUpIcon3 = () => /* @__PURE__ */ jsxs7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx8("path", { d: "M12 19V5" })
 ] });
 var getFriendlyError2 = (err) => {
   let str = "";
@@ -1746,17 +2151,17 @@ function SparkleModal({
   classNames = {},
   product: initialProduct
 }) {
-  const client = useAkropolysContext3();
-  const [fetchedProduct, setFetchedProduct] = useState4(null);
+  const client = useAkropolysContext4();
+  const [fetchedProduct, setFetchedProduct] = useState6(null);
   const displayProduct = initialProduct || fetchedProduct;
   const { results, loading: searchLoading, search } = useSearch2();
   const { messages, sources, loading: chatLoading, error: chatError, send } = useKiku3();
-  const [chatInput, setChatInput] = useState4("");
-  const [isMobile, setIsMobile] = useState4(false);
-  const [showSpecs, setShowSpecs] = useState4(false);
-  const [collapseSimilar, setCollapseSimilar] = useState4(false);
-  const chatBottomRef = useRef4(null);
-  const chatTextareaRef = useRef4(null);
+  const [chatInput, setChatInput] = useState6("");
+  const [isMobile, setIsMobile] = useState6(false);
+  const [showSpecs, setShowSpecs] = useState6(false);
+  const [collapseSimilar, setCollapseSimilar] = useState6(false);
+  const chatBottomRef = useRef6(null);
+  const chatTextareaRef = useRef6(null);
   useEffect4(() => {
     if (!initialProduct && !fetchedProduct) {
       client.api.searchVector(productName, 1).then((res) => {
@@ -1839,7 +2244,7 @@ Question: ${q}`;
     }
   ] : messages;
   if (isMobile) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn("hsk-sp-backdrop hsk-sp-mobile-view", classNames.backdrop),
@@ -1850,13 +2255,13 @@ Question: ${q}`;
           background: bg ?? void 0,
           ...customStyles
         },
-        children: /* @__PURE__ */ jsxs5("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header", children: [
-            /* @__PURE__ */ jsx6("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header-body", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header-title-row", children: [
-                /* @__PURE__ */ jsx6("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
-                displayProduct && /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsxs7("div", { className: cn("hsk-sp-card hsk-sp-fullscreen hsk-sp-mobile-card", classNames.card), onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-header", children: [
+            /* @__PURE__ */ jsx8("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8(SparkleIcon3, {}) }),
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-header-body", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-header-title-row", children: [
+                /* @__PURE__ */ jsx8("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
+                displayProduct && /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -1866,32 +2271,32 @@ Question: ${q}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx6("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
+              /* @__PURE__ */ jsx8("div", { className: "hsk-sp-header-sub", children: "Akropolys AI Shopping Assistant" })
             ] }),
-            /* @__PURE__ */ jsx6("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx6(CloseIcon2, {}) })
+            /* @__PURE__ */ jsx8("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx8(CloseIcon2, {}) })
           ] }),
-          searchLoading && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-bar" }),
-          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-chat-container", children: [
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-msgs", children: [
+          searchLoading && /* @__PURE__ */ jsx8("div", { className: "hsk-sp-bar" }),
+          /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-chat-container", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-msgs", children: [
               displayMessages.map((msg, idx) => {
                 const isUser = msg.role === "user";
-                return /* @__PURE__ */ jsx6("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx6("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx6("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-ai-msg", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-                  /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-ai-body", children: [
-                    /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
-                    idx === 0 && displayProduct && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-attachment-deck", children: [
-                      /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-main-card", children: [
-                        /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx6("span", { children: "\u{1F6CD}" }) }),
-                        /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-main-card-info", children: [
-                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
-                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
-                          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-main-card-price", children: [
+                return /* @__PURE__ */ jsx8("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx8("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx8("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8(SparkleIcon3, {}) }),
+                  /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-ai-body", children: [
+                    /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }),
+                    idx === 0 && displayProduct && /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-attachment-deck", children: [
+                      /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-main-card", children: [
+                        /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-main-card-img", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx8("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx8("span", { children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-main-card-info", children: [
+                          /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-main-card-brand", children: displayProduct.brand || displayProduct.category || "Product" }),
+                          /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-main-card-name", children: displayProduct.name }),
+                          /* @__PURE__ */ jsxs7("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__ */ jsx6(
+                        (displayProduct.specs && Object.keys(displayProduct.specs).length > 0 || displayProduct.description) && /* @__PURE__ */ jsx8(
                           "button",
                           {
                             type: "button",
@@ -1910,21 +2315,21 @@ Question: ${q}`;
                           }
                         );
                         if (similarProducts.length === 0) return null;
-                        return /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
-                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
-                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-list", children: similarProducts.map((r) => {
+                        return /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-similar-carousel-inline", children: [
+                          /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-similar-carousel-title", children: "Similar Products" }),
+                          /* @__PURE__ */ jsx8("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__ */ jsxs5(
+                            return /* @__PURE__ */ jsxs7(
                               "div",
                               {
                                 className: "hsk-sp-mobile-similar-carousel-item",
                                 onClick: () => handleNav(r),
                                 children: [
-                                  /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.product.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx6("span", { children: "\u{1F6CD}" }) }),
-                                  /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
-                                    /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.product.name, children: r.product.name }),
-                                    /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
+                                  /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-similar-carousel-img", children: r.product.images?.[0] ? /* @__PURE__ */ jsx8("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx8("span", { children: "\u{1F6CD}" }) }),
+                                  /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-similar-carousel-meta", children: [
+                                    /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-similar-carousel-name", title: r.product.name, children: r.product.name }),
+                                    /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-similar-carousel-price", children: [
                                       currency,
                                       " ",
                                       price.toLocaleString()
@@ -1941,19 +2346,19 @@ Question: ${q}`;
                   ] })
                 ] }) }, idx);
               }),
-              chatLoading && /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-typing-row", children: [
-                /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-                /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-typing", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" })
+              chatLoading && /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8(SparkleIcon3, {}) }),
+                /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-dot" })
                 ] })
               ] }),
-              chatError && /* @__PURE__ */ jsx6("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
-              /* @__PURE__ */ jsx6("div", { ref: chatBottomRef, style: { height: 1 } })
+              chatError && /* @__PURE__ */ jsx8("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
+              /* @__PURE__ */ jsx8("div", { ref: chatBottomRef, style: { height: 1 } })
             ] }),
-            /* @__PURE__ */ jsx6("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-input-box", children: [
-              /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx8("div", { className: "hsk-cb-input-wrap", children: /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-input-box", children: [
+              /* @__PURE__ */ jsx8(
                 "textarea",
                 {
                   ref: chatTextareaRef,
@@ -1966,34 +2371,34 @@ Question: ${q}`;
                   disabled: chatLoading
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   className: "hsk-cb-send",
                   onClick: () => handleSend(),
                   disabled: !chatInput.trim() || chatLoading,
                   "aria-label": "Send message",
-                  children: /* @__PURE__ */ jsx6(ArrowUpIcon3, {})
+                  children: /* @__PURE__ */ jsx8(ArrowUpIcon3, {})
                 }
               )
             ] }) })
           ] }),
-          showSpecs && displayProduct && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-header", children: [
-              /* @__PURE__ */ jsx6("h3", { children: "Specifications" }),
-              /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
+          showSpecs && displayProduct && /* @__PURE__ */ jsx8("div", { className: "hsk-sp-mobile-specs-overlay", onClick: () => setShowSpecs(false), children: /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-specs-drawer", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-specs-header", children: [
+              /* @__PURE__ */ jsx8("h3", { children: "Specifications" }),
+              /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => setShowSpecs(false), children: "Close" })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-body", children: [
-              /* @__PURE__ */ jsx6("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
-              displayProduct.description && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-desc", children: [
-                /* @__PURE__ */ jsx6("h5", { children: "Description" }),
-                /* @__PURE__ */ jsx6("p", { children: displayProduct.description })
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-specs-body", children: [
+              /* @__PURE__ */ jsx8("h4", { className: "hsk-sp-mobile-specs-title", children: displayProduct.name }),
+              displayProduct.description && /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-specs-desc", children: [
+                /* @__PURE__ */ jsx8("h5", { children: "Description" }),
+                /* @__PURE__ */ jsx8("p", { children: displayProduct.description })
               ] }),
-              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-specs-list", children: [
-                /* @__PURE__ */ jsx6("h5", { children: "Details" }),
-                Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-mobile-spec-row", children: [
-                  /* @__PURE__ */ jsx6("span", { className: "hsk-sp-mobile-spec-label", children: key }),
-                  /* @__PURE__ */ jsx6("span", { className: "hsk-sp-mobile-spec-value", children: val })
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-specs-list", children: [
+                /* @__PURE__ */ jsx8("h5", { children: "Details" }),
+                Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-mobile-spec-row", children: [
+                  /* @__PURE__ */ jsx8("span", { className: "hsk-sp-mobile-spec-label", children: key }),
+                  /* @__PURE__ */ jsx8("span", { className: "hsk-sp-mobile-spec-value", children: val })
                 ] }, key))
               ] })
             ] })
@@ -2002,7 +2407,7 @@ Question: ${q}`;
       }
     );
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: cn("hsk-sp-backdrop", classNames.backdrop),
@@ -2013,65 +2418,65 @@ Question: ${q}`;
         background: bg ?? void 0,
         ...customStyles
       },
-      children: /* @__PURE__ */ jsxs5("div", { className: cn("hsk-sp-card hsk-sp-fullscreen", classNames.card), onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header", children: [
-          /* @__PURE__ */ jsx6("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-header-body", children: [
-            /* @__PURE__ */ jsx6("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
-            /* @__PURE__ */ jsx6("div", { className: "hsk-sp-header-sub", children: "Ask questions, compare specs, or check similar products" })
+      children: /* @__PURE__ */ jsxs7("div", { className: cn("hsk-sp-card hsk-sp-fullscreen", classNames.card), onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-header", children: [
+          /* @__PURE__ */ jsx8("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8(SparkleIcon3, {}) }),
+          /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-header-body", children: [
+            /* @__PURE__ */ jsx8("div", { className: "hsk-sp-header-title", children: displayProduct?.name || productName }),
+            /* @__PURE__ */ jsx8("div", { className: "hsk-sp-header-sub", children: "Ask questions, compare specs, or check similar products" })
           ] }),
-          /* @__PURE__ */ jsx6("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx6(CloseIcon2, {}) })
+          /* @__PURE__ */ jsx8("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx8(CloseIcon2, {}) })
         ] }),
-        searchLoading && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-bar" }),
-        /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-body", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-details-pane", children: [
-            displayProduct && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-product-profile-container", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-product-profile", children: [
-                /* @__PURE__ */ jsx6("div", { className: "hsk-sp-details-imgwrap", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx6("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
-                /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-details-meta", children: [
-                  displayProduct.brand && /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-brand", children: displayProduct.brand }),
-                  displayProduct.category && /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-cat", children: displayProduct.category }),
-                  /* @__PURE__ */ jsx6("h2", { className: "hsk-sp-details-name", children: displayProduct.name }),
-                  /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-item-price-row", children: [
-                    /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-currency", children: displayProduct.currency ?? "KES" }),
-                    /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-price", children: parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
-                    displayProduct.originalPrice && /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-original-price", children: parseFloat(displayProduct.originalPrice.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
-                    displayProduct.discount && /* @__PURE__ */ jsxs5("span", { className: "hsk-sp-item-discount", children: [
+        searchLoading && /* @__PURE__ */ jsx8("div", { className: "hsk-sp-bar" }),
+        /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-body", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-details-pane", children: [
+            displayProduct && /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-product-profile-container", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-product-profile", children: [
+                /* @__PURE__ */ jsx8("div", { className: "hsk-sp-details-imgwrap", children: displayProduct.images?.[0] ? /* @__PURE__ */ jsx8("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx8("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-details-meta", children: [
+                  displayProduct.brand && /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-brand", children: displayProduct.brand }),
+                  displayProduct.category && /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-cat", children: displayProduct.category }),
+                  /* @__PURE__ */ jsx8("h2", { className: "hsk-sp-details-name", children: displayProduct.name }),
+                  /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-item-price-row", children: [
+                    /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-currency", children: displayProduct.currency ?? "KES" }),
+                    /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-price", children: parseFloat(displayProduct.price?.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
+                    displayProduct.originalPrice && /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-original-price", children: parseFloat(displayProduct.originalPrice.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
+                    displayProduct.discount && /* @__PURE__ */ jsxs7("span", { className: "hsk-sp-item-discount", children: [
                       "(",
                       displayProduct.discount,
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-item-meta-badges", children: [
-                    displayProduct.rating && /* @__PURE__ */ jsxs5("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-rating", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-item-meta-badges", children: [
+                    displayProduct.rating && /* @__PURE__ */ jsxs7("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__ */ jsx6("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__ */ jsxs5("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-stock", children: [
+                    displayProduct.availability && /* @__PURE__ */ jsx8("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__ */ jsxs7("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-stock", children: [
                       "Stock: ",
                       displayProduct.stock
                     ] })
                   ] })
                 ] })
               ] }),
-              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-specs-horizontal", children: Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-spec-item-horizontal", children: [
-                /* @__PURE__ */ jsxs5("span", { className: "hsk-sp-spec-label-horizontal", children: [
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsx8("div", { className: "hsk-sp-specs-horizontal", children: Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-spec-item-horizontal", children: [
+                /* @__PURE__ */ jsxs7("span", { className: "hsk-sp-spec-label-horizontal", children: [
                   key,
                   ":"
                 ] }),
-                /* @__PURE__ */ jsx6("span", { className: "hsk-sp-spec-value-horizontal", title: val, children: val })
+                /* @__PURE__ */ jsx8("span", { className: "hsk-sp-spec-value-horizontal", title: val, children: val })
               ] }, key)) }),
-              displayProduct.description && /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-details-desc", children: [
-                /* @__PURE__ */ jsx6("h4", { children: "Description" }),
-                /* @__PURE__ */ jsx6("p", { children: displayProduct.description })
+              displayProduct.description && /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-details-desc", children: [
+                /* @__PURE__ */ jsx8("h4", { children: "Description" }),
+                /* @__PURE__ */ jsx8("p", { children: displayProduct.description })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-similar-section", children: [
-              /* @__PURE__ */ jsx6("h3", { children: "Similar Products" }),
-              /* @__PURE__ */ jsx6("div", { className: "hsk-sp-results", children: (() => {
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-similar-section", children: [
+              /* @__PURE__ */ jsx8("h3", { children: "Similar Products" }),
+              /* @__PURE__ */ jsx8("div", { className: "hsk-sp-results", children: (() => {
                 const similarProducts = results.filter(
                   (r) => {
                     const isSameName = r.product.name.toLowerCase() === displayProduct?.name?.toLowerCase();
@@ -2080,29 +2485,29 @@ Question: ${q}`;
                   }
                 );
                 if (!searchLoading && similarProducts.length === 0) {
-                  return /* @__PURE__ */ jsx6("div", { className: "hsk-sp-empty", children: "No similar products found." });
+                  return /* @__PURE__ */ jsx8("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__ */ jsxs5(
+                  return /* @__PURE__ */ jsxs7(
                     "div",
                     {
                       className: cn("hsk-sp-item", classNames.item),
                       style: { animationDelay: `${i * 55}ms`, cursor: "pointer" },
                       onClick: () => handleNav(r),
                       children: [
-                        /* @__PURE__ */ jsx6("div", { className: "hsk-sp-img-wrap", children: r.product.images?.[0] ? /* @__PURE__ */ jsx6("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx6("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
-                        /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-item-body", children: [
-                          /* @__PURE__ */ jsxs5("div", { children: [
-                            r.product.category && /* @__PURE__ */ jsx6("div", { className: "hsk-sp-item-cat", children: r.product.category }),
-                            /* @__PURE__ */ jsx6("div", { className: "hsk-sp-item-name", title: r.product.name, children: r.product.name })
+                        /* @__PURE__ */ jsx8("div", { className: "hsk-sp-img-wrap", children: r.product.images?.[0] ? /* @__PURE__ */ jsx8("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx8("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-item-body", children: [
+                          /* @__PURE__ */ jsxs7("div", { children: [
+                            r.product.category && /* @__PURE__ */ jsx8("div", { className: "hsk-sp-item-cat", children: r.product.category }),
+                            /* @__PURE__ */ jsx8("div", { className: "hsk-sp-item-name", title: r.product.name, children: r.product.name })
                           ] }),
-                          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-item-price-row", children: [
-                            /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-currency", children: currency }),
-                            /* @__PURE__ */ jsx6("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
+                          /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-item-price-row", children: [
+                            /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-currency", children: currency }),
+                            /* @__PURE__ */ jsx8("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
                           ] }),
-                          /* @__PURE__ */ jsx6("div", { className: "hsk-sp-actions", children: /* @__PURE__ */ jsx6(
+                          /* @__PURE__ */ jsx8("div", { className: "hsk-sp-actions", children: /* @__PURE__ */ jsx8(
                             "button",
                             {
                               className: "hsk-sp-action hsk-sp-action-primary",
@@ -2122,29 +2527,29 @@ Question: ${q}`;
               })() })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "hsk-sp-chat-pane", children: [
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-msgs", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "hsk-sp-chat-pane", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-msgs", children: [
               displayMessages.map((msg, idx) => {
                 const isUser = msg.role === "user";
-                return /* @__PURE__ */ jsx6("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx6("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx6("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-ai-msg", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }) })
+                return /* @__PURE__ */ jsx8("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx8("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx8("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8(SparkleIcon3, {}) }),
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }) })
                 ] }) }, idx);
               }),
-              chatLoading && /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-typing-row", children: [
-                /* @__PURE__ */ jsx6("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-                /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-typing", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" }),
-                  /* @__PURE__ */ jsx6("div", { className: "hsk-cb-dot" })
+              chatLoading && /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ jsx8("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8(SparkleIcon3, {}) }),
+                /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx8("div", { className: "hsk-cb-dot" })
                 ] })
               ] }),
-              chatError && /* @__PURE__ */ jsx6("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
-              /* @__PURE__ */ jsx6("div", { ref: chatBottomRef, style: { height: 1 } })
+              chatError && /* @__PURE__ */ jsx8("div", { className: "hsk-cb-error", children: getFriendlyError2(chatError) }),
+              /* @__PURE__ */ jsx8("div", { ref: chatBottomRef, style: { height: 1 } })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-input-wrap", children: [
-              /* @__PURE__ */ jsxs5("div", { className: "hsk-cb-input-box", children: [
-                /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-input-wrap", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "hsk-cb-input-box", children: [
+                /* @__PURE__ */ jsx8(
                   "textarea",
                   {
                     ref: chatTextareaRef,
@@ -2157,22 +2562,22 @@ Question: ${q}`;
                     disabled: chatLoading
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     className: "hsk-cb-send",
                     onClick: () => handleSend(),
                     disabled: !chatInput.trim() || chatLoading,
                     "aria-label": "Send message",
-                    children: /* @__PURE__ */ jsx6(ArrowUpIcon3, {})
+                    children: /* @__PURE__ */ jsx8(ArrowUpIcon3, {})
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx6("div", { className: "hsk-cb-hint", children: "Akropolys \xB7 instant product knowledge" })
+              /* @__PURE__ */ jsx8("div", { className: "hsk-cb-hint", children: "Akropolys \xB7 instant product knowledge" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "hsk-sp-footer", children: /* @__PURE__ */ jsx6("span", { className: "hsk-sp-esc", children: "Esc to close" }) })
+        /* @__PURE__ */ jsx8("div", { className: "hsk-sp-footer", children: /* @__PURE__ */ jsx8("span", { className: "hsk-sp-esc", children: "Esc to close" }) })
       ] })
     }
   );
@@ -2190,8 +2595,8 @@ function Sparkle({
   product,
   children
 }) {
-  const [open, setOpen] = useState4(false);
-  const [mounted, setMounted] = useState4(false);
+  const [open, setOpen] = useState6(false);
+  const [mounted, setMounted] = useState6(false);
   useEffect4(() => {
     setMounted(true);
   }, []);
@@ -2202,8 +2607,8 @@ function Sparkle({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   };
-  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx8(
       "button",
       {
         className: cn("hsk-sp-btn", classNames.button, className),
@@ -2211,11 +2616,11 @@ function Sparkle({
         style: customStyles,
         title: "Find similar products",
         "aria-label": "Find similar products",
-        children: children || /* @__PURE__ */ jsx6(SparkleIcon3, {})
+        children: children || /* @__PURE__ */ jsx8(SparkleIcon3, {})
       }
     ),
     open && mounted && createPortal2(
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         SparkleModal,
         {
           productName,
@@ -2237,23 +2642,23 @@ function Sparkle({
 
 // src/components/CartBadge.tsx
 import { useCart } from "@akropolys/sdk";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function CartBadge({ className }) {
   const { cart } = useCart();
   if (!cart || cart.item_count === 0) return null;
-  return /* @__PURE__ */ jsx7("span", { className: cn("hsk-cart-badge", className), children: cart.item_count });
+  return /* @__PURE__ */ jsx9("span", { className: cn("hsk-cart-badge", className), children: cart.item_count });
 }
 
 // src/components/CartDrawer.tsx
-import { useState as useState6, useEffect as useEffect6 } from "react";
+import { useState as useState8, useEffect as useEffect6 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { useCart as useCart3, useAkropolysContext as useAkropolysContext5 } from "@akropolys/sdk";
+import { useCart as useCart3, useAkropolysContext as useAkropolysContext6 } from "@akropolys/sdk";
 
 // src/components/CheckoutModal.tsx
-import { useState as useState5, useEffect as useEffect5 } from "react";
+import { useState as useState7, useEffect as useEffect5 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { useCart as useCart2, useAkropolysContext as useAkropolysContext4, usePaymentPolling as usePaymentPolling2 } from "@akropolys/sdk";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCart as useCart2, useAkropolysContext as useAkropolysContext5, usePaymentPolling as usePaymentPolling2 } from "@akropolys/sdk";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function CheckoutModal({
   onClose,
   theme,
@@ -2261,36 +2666,36 @@ function CheckoutModal({
   hskThemeAttr
 }) {
   const { cart, loading: cartLoading } = useCart2();
-  const client = useAkropolysContext4();
-  const [config, setConfig] = useState5(null);
-  const [loadingConfig, setLoadingConfig] = useState5(true);
-  const [phone, setPhone] = useState5(() => {
+  const client = useAkropolysContext5();
+  const [config, setConfig] = useState7(null);
+  const [loadingConfig, setLoadingConfig] = useState7(true);
+  const [phone, setPhone] = useState7(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_phone") || "";
     }
     return "";
   });
-  const [email, setEmail] = useState5(() => {
+  const [email, setEmail] = useState7(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_email") || "";
     }
     return "";
   });
-  const [firstName, setFirstName] = useState5(() => {
+  const [firstName, setFirstName] = useState7(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_firstname") || "";
     }
     return "";
   });
-  const [lastName, setLastName] = useState5(() => {
+  const [lastName, setLastName] = useState7(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("akropolys_user_lastname") || "";
     }
     return "";
   });
-  const [phase, setPhase] = useState5("idle");
-  const [merchantRef, setMerchantRef] = useState5(null);
-  const [payError, setPayError] = useState5(null);
+  const [phase, setPhase] = useState7("idle");
+  const [merchantRef, setMerchantRef] = useState7(null);
+  const [payError, setPayError] = useState7(null);
   const {} = usePaymentPolling2({
     client: client.api,
     merchantReference: merchantRef,
@@ -2339,20 +2744,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 createPortal3(
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       "div",
       {
         className: "hsk-checkout-backdrop-full",
         style: backdropStyle,
         "data-hsk-theme": hskThemeAttr,
-        children: /* @__PURE__ */ jsxs6(
+        children: /* @__PURE__ */ jsxs8(
           "div",
           {
             className: "hsk-checkout-modal-full",
             style: customStyles,
             "data-hsk-theme": hskThemeAttr,
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   onClick: (e) => {
@@ -2362,71 +2767,71 @@ function CheckoutModal({
                   },
                   className: "hsk-checkout-close-x",
                   "aria-label": "Close checkout",
-                  children: /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  children: /* @__PURE__ */ jsxs8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-panel-left", children: /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-left-content", children: [
-                /* @__PURE__ */ jsxs6("button", { onClick: (e) => {
+              /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-panel-left", children: /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-left-content", children: [
+                /* @__PURE__ */ jsxs8("button", { onClick: (e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   onClose();
                 }, className: "hsk-checkout-back-btn", children: [
-                  /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx8("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-                    /* @__PURE__ */ jsx8("polyline", { points: "12 19 5 12 12 5" })
+                  /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx10("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                    /* @__PURE__ */ jsx10("polyline", { points: "12 19 5 12 12 5" })
                   ] }),
                   "Back to store"
                 ] }),
-                /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-store-info", children: /* @__PURE__ */ jsx8("h2", { children: "Secure Checkout" }) }),
-                /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-amount-due", children: [
-                  /* @__PURE__ */ jsx8("span", { className: "hsk-checkout-label-muted", children: "Pay total" }),
-                  /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-grand-total", children: [
+                /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-store-info", children: /* @__PURE__ */ jsx10("h2", { children: "Secure Checkout" }) }),
+                /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-amount-due", children: [
+                  /* @__PURE__ */ jsx10("span", { className: "hsk-checkout-label-muted", children: "Pay total" }),
+                  /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-grand-total", children: [
                     currency,
                     " ",
                     total.toLocaleString(void 0, { minimumFractionDigits: 2 })
                   ] })
                 ] }),
-                cartLoading || !cart ? /* @__PURE__ */ jsx8("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-items-list-wrap", children: /* @__PURE__ */ jsx8("ul", { className: "hsk-checkout-items-list", children: cart.items.map((item) => /* @__PURE__ */ jsxs6("li", { className: "hsk-checkout-item-row", children: [
-                  /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-item-img-container", children: [
-                    item.image ? /* @__PURE__ */ jsx8("img", { src: item.image, alt: item.name, className: "hsk-checkout-item-img" }) : /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-item-img-placeholder", children: "\u{1F6D2}" }),
-                    /* @__PURE__ */ jsx8("span", { className: "hsk-checkout-item-qty-badge", children: item.quantity })
+                cartLoading || !cart ? /* @__PURE__ */ jsx10("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-items-list-wrap", children: /* @__PURE__ */ jsx10("ul", { className: "hsk-checkout-items-list", children: cart.items.map((item) => /* @__PURE__ */ jsxs8("li", { className: "hsk-checkout-item-row", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-item-img-container", children: [
+                    item.image ? /* @__PURE__ */ jsx10("img", { src: item.image, alt: item.name, className: "hsk-checkout-item-img" }) : /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-item-img-placeholder", children: "\u{1F6D2}" }),
+                    /* @__PURE__ */ jsx10("span", { className: "hsk-checkout-item-qty-badge", children: item.quantity })
                   ] }),
-                  /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-item-details", children: /* @__PURE__ */ jsx8("span", { className: "hsk-checkout-item-name", children: item.name }) }),
-                  /* @__PURE__ */ jsxs6("span", { className: "hsk-checkout-item-price", children: [
+                  /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-item-details", children: /* @__PURE__ */ jsx10("span", { className: "hsk-checkout-item-name", children: item.name }) }),
+                  /* @__PURE__ */ jsxs8("span", { className: "hsk-checkout-item-price", children: [
                     item.currency,
                     " ",
                     (item.price_numeric * item.quantity).toLocaleString(void 0, { minimumFractionDigits: 2 })
                   ] })
                 ] }, item.id)) }) })
               ] }) }),
-              /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-panel-right", children: /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-right-content", children: phase === "done" ? /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-status-card success", children: [
-                /* @__PURE__ */ jsx8("div", { className: "hsk-status-icon-wrap success", children: /* @__PURE__ */ jsxs6("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx8("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-                  /* @__PURE__ */ jsx8("polyline", { points: "22 4 12 14.01 9 11.01" })
+              /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-panel-right", children: /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-right-content", children: phase === "done" ? /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-status-card success", children: [
+                /* @__PURE__ */ jsx10("div", { className: "hsk-status-icon-wrap success", children: /* @__PURE__ */ jsxs8("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx10("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+                  /* @__PURE__ */ jsx10("polyline", { points: "22 4 12 14.01 9 11.01" })
                 ] }) }),
-                /* @__PURE__ */ jsx8("h3", { children: "Payment Successful!" }),
-                /* @__PURE__ */ jsx8("p", { children: "Your transaction has been confirmed. Thank you for your order!" }),
-                /* @__PURE__ */ jsx8("button", { onClick: onClose, className: "hsk-pay-btn hsk-btn-primary", style: { marginTop: "1.5rem" }, children: "Continue Shopping" })
-              ] }) : phase === "awaiting" ? /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-status-card awaiting", children: [
-                /* @__PURE__ */ jsx8("div", { className: "hsk-status-spinner-wrap", children: /* @__PURE__ */ jsx8("div", { className: "hsk-status-spinner" }) }),
-                /* @__PURE__ */ jsx8("h3", { children: "Confirm payment on your phone" }),
-                /* @__PURE__ */ jsxs6("p", { children: [
+                /* @__PURE__ */ jsx10("h3", { children: "Payment Successful!" }),
+                /* @__PURE__ */ jsx10("p", { children: "Your transaction has been confirmed. Thank you for your order!" }),
+                /* @__PURE__ */ jsx10("button", { onClick: onClose, className: "hsk-pay-btn hsk-btn-primary", style: { marginTop: "1.5rem" }, children: "Continue Shopping" })
+              ] }) : phase === "awaiting" ? /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-status-card awaiting", children: [
+                /* @__PURE__ */ jsx10("div", { className: "hsk-status-spinner-wrap", children: /* @__PURE__ */ jsx10("div", { className: "hsk-status-spinner" }) }),
+                /* @__PURE__ */ jsx10("h3", { children: "Confirm payment on your phone" }),
+                /* @__PURE__ */ jsxs8("p", { children: [
                   "We've sent an M-Pesa STK push prompt to ",
-                  /* @__PURE__ */ jsxs6("strong", { children: [
+                  /* @__PURE__ */ jsxs8("strong", { children: [
                     "254",
                     phone
                   ] }),
                   "."
                 ] }),
-                /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-stk-instructions", children: [
-                  /* @__PURE__ */ jsx8("p", { children: "1. Check your phone lockscreen for the M-Pesa prompt." }),
-                  /* @__PURE__ */ jsx8("p", { children: "2. Enter your M-Pesa PIN and press OK." }),
-                  /* @__PURE__ */ jsx8("p", { children: "3. Wait here \u2014 this page auto-updates once confirmed." })
+                /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-stk-instructions", children: [
+                  /* @__PURE__ */ jsx10("p", { children: "1. Check your phone lockscreen for the M-Pesa prompt." }),
+                  /* @__PURE__ */ jsx10("p", { children: "2. Enter your M-Pesa PIN and press OK." }),
+                  /* @__PURE__ */ jsx10("p", { children: "3. Wait here \u2014 this page auto-updates once confirmed." })
                 ] }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     onClick: () => {
@@ -2437,43 +2842,43 @@ function CheckoutModal({
                     children: "Cancel payment"
                   }
                 )
-              ] }) : phase === "cancelled" ? /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-status-card cancelled", children: [
-                /* @__PURE__ */ jsx8("div", { className: "hsk-status-icon-wrap cancelled", children: /* @__PURE__ */ jsxs6("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx8("path", { d: "m15 9-6 6M9 9l6 6" }),
-                  /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" })
+              ] }) : phase === "cancelled" ? /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-status-card cancelled", children: [
+                /* @__PURE__ */ jsx10("div", { className: "hsk-status-icon-wrap cancelled", children: /* @__PURE__ */ jsxs8("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx10("path", { d: "m15 9-6 6M9 9l6 6" }),
+                  /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" })
                 ] }) }),
-                /* @__PURE__ */ jsx8("h3", { children: "Payment Cancelled" }),
-                /* @__PURE__ */ jsx8("p", { children: "No charge was made. You can update your phone number and try again whenever you're ready." }),
-                /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-status-actions", children: [
-                  /* @__PURE__ */ jsx8("button", { onClick: () => {
+                /* @__PURE__ */ jsx10("h3", { children: "Payment Cancelled" }),
+                /* @__PURE__ */ jsx10("p", { children: "No charge was made. You can update your phone number and try again whenever you're ready." }),
+                /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-status-actions", children: [
+                  /* @__PURE__ */ jsx10("button", { onClick: () => {
                     setPhase("idle");
                     setPayError(null);
                   }, className: "hsk-pay-btn hsk-btn-primary", children: "Try again" }),
-                  /* @__PURE__ */ jsx8("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
+                  /* @__PURE__ */ jsx10("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
                 ] })
-              ] }) : phase === "failed" ? /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-status-card failed", children: [
-                /* @__PURE__ */ jsx8("div", { className: "hsk-status-icon-wrap failed", children: /* @__PURE__ */ jsxs6("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
-                  /* @__PURE__ */ jsx8("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-                  /* @__PURE__ */ jsx8("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              ] }) : phase === "failed" ? /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-status-card failed", children: [
+                /* @__PURE__ */ jsx10("div", { className: "hsk-status-icon-wrap failed", children: /* @__PURE__ */ jsxs8("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx10("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                  /* @__PURE__ */ jsx10("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
                 ] }) }),
-                /* @__PURE__ */ jsx8("h3", { children: "Payment Failed" }),
-                /* @__PURE__ */ jsx8("p", { className: "hsk-checkout-error-text", children: payError || "Could not verify M-Pesa transaction. Please check your phone and try again." }),
-                /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-status-actions", children: [
-                  /* @__PURE__ */ jsx8("button", { onClick: () => {
+                /* @__PURE__ */ jsx10("h3", { children: "Payment Failed" }),
+                /* @__PURE__ */ jsx10("p", { className: "hsk-checkout-error-text", children: payError || "Could not verify M-Pesa transaction. Please check your phone and try again." }),
+                /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-status-actions", children: [
+                  /* @__PURE__ */ jsx10("button", { onClick: () => {
                     setPhase("idle");
                     setPayError(null);
                   }, className: "hsk-pay-btn hsk-btn-primary", children: "Try again" }),
-                  /* @__PURE__ */ jsx8("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
+                  /* @__PURE__ */ jsx10("button", { onClick: onClose, className: "hsk-checkout-cancel-btn", children: "Back to cart" })
                 ] })
-              ] }) : /* @__PURE__ */ jsxs6("div", { className: "hsk-checkout-payment-form-wrap", children: [
-                /* @__PURE__ */ jsx8("h3", { className: "hsk-checkout-section-title", children: "Payment details" }),
-                loadingConfig ? /* @__PURE__ */ jsx8("p", { className: "hsk-cart-loading", children: "Loading payment configuration..." }) : !hasPaymentMethods ? /* @__PURE__ */ jsx8("p", { className: "hsk-checkout-error", children: "No payment methods configured for this store." }) : /* @__PURE__ */ jsxs6("form", { onSubmit: handlePay, className: "hsk-stripe-checkout-form", children: [
-                  /* @__PURE__ */ jsxs6("div", { className: "hsk-form-group", children: [
-                    /* @__PURE__ */ jsx8("label", { className: "hsk-form-label", children: "M-Pesa Mobile Number" }),
-                    /* @__PURE__ */ jsxs6("div", { className: "hsk-phone-input-container", children: [
-                      /* @__PURE__ */ jsx8("span", { className: "hsk-phone-prefix", children: "254" }),
-                      /* @__PURE__ */ jsx8(
+              ] }) : /* @__PURE__ */ jsxs8("div", { className: "hsk-checkout-payment-form-wrap", children: [
+                /* @__PURE__ */ jsx10("h3", { className: "hsk-checkout-section-title", children: "Payment details" }),
+                loadingConfig ? /* @__PURE__ */ jsx10("p", { className: "hsk-cart-loading", children: "Loading payment configuration..." }) : !hasPaymentMethods ? /* @__PURE__ */ jsx10("p", { className: "hsk-checkout-error", children: "No payment methods configured for this store." }) : /* @__PURE__ */ jsxs8("form", { onSubmit: handlePay, className: "hsk-stripe-checkout-form", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "hsk-form-group", children: [
+                    /* @__PURE__ */ jsx10("label", { className: "hsk-form-label", children: "M-Pesa Mobile Number" }),
+                    /* @__PURE__ */ jsxs8("div", { className: "hsk-phone-input-container", children: [
+                      /* @__PURE__ */ jsx10("span", { className: "hsk-phone-prefix", children: "254" }),
+                      /* @__PURE__ */ jsx10(
                         "input",
                         {
                           type: "tel",
@@ -2487,11 +2892,11 @@ function CheckoutModal({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx8("span", { className: "hsk-form-hint", children: "Enter your 9-digit number (e.g. 712345678)" })
+                    /* @__PURE__ */ jsx10("span", { className: "hsk-form-hint", children: "Enter your 9-digit number (e.g. 712345678)" })
                   ] }),
-                  /* @__PURE__ */ jsxs6("div", { className: "hsk-form-group", children: [
-                    /* @__PURE__ */ jsx8("label", { className: "hsk-form-label", children: "Email address" }),
-                    /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsxs8("div", { className: "hsk-form-group", children: [
+                    /* @__PURE__ */ jsx10("label", { className: "hsk-form-label", children: "Email address" }),
+                    /* @__PURE__ */ jsx10(
                       "input",
                       {
                         type: "email",
@@ -2502,10 +2907,10 @@ function CheckoutModal({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs6("div", { className: "hsk-form-row", children: [
-                    /* @__PURE__ */ jsxs6("div", { className: "hsk-form-group", children: [
-                      /* @__PURE__ */ jsx8("label", { className: "hsk-form-label", children: "First Name" }),
-                      /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsxs8("div", { className: "hsk-form-row", children: [
+                    /* @__PURE__ */ jsxs8("div", { className: "hsk-form-group", children: [
+                      /* @__PURE__ */ jsx10("label", { className: "hsk-form-label", children: "First Name" }),
+                      /* @__PURE__ */ jsx10(
                         "input",
                         {
                           type: "text",
@@ -2516,9 +2921,9 @@ function CheckoutModal({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs6("div", { className: "hsk-form-group", children: [
-                      /* @__PURE__ */ jsx8("label", { className: "hsk-form-label", children: "Last Name" }),
-                      /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsxs8("div", { className: "hsk-form-group", children: [
+                      /* @__PURE__ */ jsx10("label", { className: "hsk-form-label", children: "Last Name" }),
+                      /* @__PURE__ */ jsx10(
                         "input",
                         {
                           type: "text",
@@ -2530,14 +2935,14 @@ function CheckoutModal({
                       )
                     ] })
                   ] }),
-                  payError && /* @__PURE__ */ jsx8("div", { className: "hsk-form-error-banner", children: payError }),
-                  /* @__PURE__ */ jsxs6("button", { type: "submit", className: "hsk-checkout-submit-btn", children: [
+                  payError && /* @__PURE__ */ jsx10("div", { className: "hsk-form-error-banner", children: payError }),
+                  /* @__PURE__ */ jsxs8("button", { type: "submit", className: "hsk-checkout-submit-btn", children: [
                     "Pay ",
                     currency,
                     " ",
                     total.toLocaleString()
                   ] }),
-                  /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-footer-brand", children: /* @__PURE__ */ jsx8("span", { children: "Powered by Akropolys" }) })
+                  /* @__PURE__ */ jsx10("div", { className: "hsk-checkout-footer-brand", children: /* @__PURE__ */ jsx10("span", { children: "Powered by Akropolys" }) })
                 ] })
               ] }) }) })
             ]
@@ -2550,17 +2955,17 @@ function CheckoutModal({
 }
 
 // src/components/CartDrawer.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function CartDrawer({
   trigger,
   className,
   theme
 }) {
   const { cart, loading } = useCart3();
-  const [open, setOpen] = useState6(false);
-  const [showCheckout, setShowCheckout] = useState6(false);
-  const [mounted, setMounted] = useState6(false);
-  const client = useAkropolysContext5();
+  const [open, setOpen] = useState8(false);
+  const [showCheckout, setShowCheckout] = useState8(false);
+  const [mounted, setMounted] = useState8(false);
+  const client = useAkropolysContext6();
   useEffect6(() => {
     setMounted(true);
     const handleTriggerCheckout = () => {
@@ -2601,8 +3006,8 @@ function CartDrawer({
     ...theme?.fontFamily && { "--hsk-font": theme.fontFamily },
     ...theme?.borderRadius && { "--hsk-border-radius": theme.borderRadius }
   } : void 0;
-  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
-    trigger ? /* @__PURE__ */ jsx9("div", { onClick: () => setOpen(true), style: { display: "inline-block" }, children: trigger }) : /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    trigger ? /* @__PURE__ */ jsx11("div", { onClick: () => setOpen(true), style: { display: "inline-block" }, children: trigger }) : /* @__PURE__ */ jsxs9(
       "button",
       {
         onClick: () => setOpen(true),
@@ -2611,24 +3016,24 @@ function CartDrawer({
         "data-hsk-theme": hskThemeAttr,
         "aria-label": "Open cart",
         children: [
-          /* @__PURE__ */ jsxs7("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "21", r: "1" }),
-            /* @__PURE__ */ jsx9("circle", { cx: "20", cy: "21", r: "1" }),
-            /* @__PURE__ */ jsx9("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })
+          /* @__PURE__ */ jsxs9("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx11("circle", { cx: "9", cy: "21", r: "1" }),
+            /* @__PURE__ */ jsx11("circle", { cx: "20", cy: "21", r: "1" }),
+            /* @__PURE__ */ jsx11("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__ */ jsx9("span", { className: "hsk-cart-trigger-badge", children: cart.item_count }) : null
+          cart && cart.item_count > 0 ? /* @__PURE__ */ jsx11("span", { className: "hsk-cart-trigger-badge", children: cart.item_count }) : null
         ]
       }
     ),
     open && mounted && createPortal4(
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx11(
         "div",
         {
           className: "hsk-cart-backdrop",
           style: customStyles,
           "data-hsk-theme": hskThemeAttr,
           onClick: () => setOpen(false),
-          children: /* @__PURE__ */ jsxs7(
+          children: /* @__PURE__ */ jsxs9(
             "div",
             {
               className: "hsk-cart-bottom-sheet",
@@ -2636,36 +3041,36 @@ function CartDrawer({
               "data-hsk-theme": hskThemeAttr,
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ jsx9("div", { className: "hsk-cart-sheet-handle" }),
-                /* @__PURE__ */ jsxs7("div", { className: "hsk-cart-sheet-header", children: [
-                  /* @__PURE__ */ jsx9("h2", { children: "Your Cart" }),
-                  /* @__PURE__ */ jsx9("button", { onClick: () => setOpen(false), className: "hsk-close-btn", children: "\xD7" })
+                /* @__PURE__ */ jsx11("div", { className: "hsk-cart-sheet-handle" }),
+                /* @__PURE__ */ jsxs9("div", { className: "hsk-cart-sheet-header", children: [
+                  /* @__PURE__ */ jsx11("h2", { children: "Your Cart" }),
+                  /* @__PURE__ */ jsx11("button", { onClick: () => setOpen(false), className: "hsk-close-btn", children: "\xD7" })
                 ] }),
-                /* @__PURE__ */ jsx9("div", { className: "hsk-cart-sheet-content", children: loading && !cart ? /* @__PURE__ */ jsx9("div", { className: "hsk-cart-loading", children: "Loading cart..." }) : !cart || cart.items.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "hsk-cart-empty", children: "Your cart is empty." }) : /* @__PURE__ */ jsx9("ul", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ jsxs7("li", { className: "hsk-cart-item", children: [
-                  item.image && /* @__PURE__ */ jsx9("img", { src: item.image, alt: item.name, className: "hsk-cart-item-img" }),
-                  /* @__PURE__ */ jsxs7("div", { className: "hsk-cart-item-info", children: [
-                    /* @__PURE__ */ jsx9("span", { className: "hsk-cart-item-name", children: item.name }),
-                    /* @__PURE__ */ jsxs7("span", { className: "hsk-cart-item-price", children: [
+                /* @__PURE__ */ jsx11("div", { className: "hsk-cart-sheet-content", children: loading && !cart ? /* @__PURE__ */ jsx11("div", { className: "hsk-cart-loading", children: "Loading cart..." }) : !cart || cart.items.length === 0 ? /* @__PURE__ */ jsx11("div", { className: "hsk-cart-empty", children: "Your cart is empty." }) : /* @__PURE__ */ jsx11("ul", { className: "hsk-cart-items", children: cart.items.map((item) => /* @__PURE__ */ jsxs9("li", { className: "hsk-cart-item", children: [
+                  item.image && /* @__PURE__ */ jsx11("img", { src: item.image, alt: item.name, className: "hsk-cart-item-img" }),
+                  /* @__PURE__ */ jsxs9("div", { className: "hsk-cart-item-info", children: [
+                    /* @__PURE__ */ jsx11("span", { className: "hsk-cart-item-name", children: item.name }),
+                    /* @__PURE__ */ jsxs9("span", { className: "hsk-cart-item-price", children: [
                       item.currency,
                       " ",
                       item.price_numeric.toLocaleString(void 0, { minimumFractionDigits: 2 })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxs7("div", { className: "hsk-cart-item-qty", children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "hsk-cart-item-qty", children: [
                     "x",
                     item.quantity
                   ] })
                 ] }, item.id)) }) }),
-                cart && cart.items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "hsk-cart-sheet-footer", children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "hsk-cart-total", children: [
-                    /* @__PURE__ */ jsx9("span", { children: "Total" }),
-                    /* @__PURE__ */ jsxs7("span", { children: [
+                cart && cart.items.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "hsk-cart-sheet-footer", children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "hsk-cart-total", children: [
+                    /* @__PURE__ */ jsx11("span", { children: "Total" }),
+                    /* @__PURE__ */ jsxs9("span", { children: [
                       cart.currency,
                       " ",
                       cart.total.toLocaleString(void 0, { minimumFractionDigits: 2 })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx9("button", { onClick: handleCheckout, className: "hsk-checkout-btn", children: "Checkout securely" })
+                  /* @__PURE__ */ jsx11("button", { onClick: handleCheckout, className: "hsk-checkout-btn", children: "Checkout securely" })
                 ] })
               ]
             }
@@ -2674,7 +3079,7 @@ function CartDrawer({
       ),
       document.body
     ),
-    showCheckout && mounted && /* @__PURE__ */ jsx9(
+    showCheckout && mounted && /* @__PURE__ */ jsx11(
       CheckoutModal,
       {
         onClose: () => {
@@ -2697,6 +3102,8 @@ export {
   KikuButton,
   ChatWidget as KikuChat,
   SearchBar,
-  Sparkle
+  Sparkle,
+  VisualSearch,
+  VoiceButton
 };
 //# sourceMappingURL=index.mjs.map