@huskel/sdk 0.4.2 → 0.4.3

package/dist/index.mjs

@@ -63,7 +63,15 @@ var HuskelAPI = class {
       });
       if (!res.ok) {
         const text = await res.text();
-        const err = { status: res.status, message: text };
+        let message = text;
+        try {
+          const parsed = JSON.parse(text);
+          if (parsed && typeof parsed.error === "string") {
+            message = parsed.error;
+          }
+        } catch (e) {
+        }
+        const err = { status: res.status, message };
         if (res.status >= 400 && res.status < 500) {
           log("error", `${path} failed [${res.status}]`, text);
           throw err;
@@ -114,6 +122,52 @@ var HuskelAPI = class {
     log("info", "chat query", query);
     return this.post("/chat", { query, siteId: this.siteId, history });
   }
+  // --- Cart System ---
+  buildHeaders() {
+    var _a, _b;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Huskel-Token": this.apiToken,
+      "X-Huskel-Site": this.siteId
+    };
+    const shopperId = (_a = this.getShopperId) == null ? void 0 : _a.call(this);
+    if (shopperId) headers["X-Huskel-Shopper-Id"] = shopperId;
+    const sessionId = (_b = this.getSessionId) == null ? void 0 : _b.call(this);
+    if (sessionId) headers["X-Huskel-Session-Id"] = sessionId;
+    return headers;
+  }
+  async getCart() {
+    const res = await fetch(`${this.apiUrl}/cart?siteId=${this.siteId}`, {
+      headers: this.buildHeaders()
+    });
+    if (!res.ok) throw new Error("Failed to fetch cart");
+    return res.json();
+  }
+  async clearCart() {
+    const res = await fetch(`${this.apiUrl}/cart?siteId=${this.siteId}`, {
+      method: "DELETE",
+      headers: this.buildHeaders()
+    });
+    if (!res.ok) throw new Error("Failed to clear cart");
+    return res.json();
+  }
+  async checkoutCart() {
+    const res = await fetch(`${this.apiUrl}/cart/checkout`, {
+      method: "POST",
+      headers: this.buildHeaders(),
+      body: JSON.stringify({ siteId: this.siteId })
+    });
+    if (!res.ok) throw new Error("Failed to checkout cart");
+    return res.json();
+  }
+  async getCheckoutConfig() {
+    const res = await fetch(`${this.apiUrl}/checkout/config?site_id=${this.siteId}`, {
+      method: "GET",
+      headers: this.buildHeaders()
+    });
+    if (!res.ok) throw new Error("Failed to fetch checkout config");
+    return res.json();
+  }
 };
 
 // src/client.ts
@@ -221,13 +275,14 @@ var _HuskelClient = class _HuskelClient {
     if (!apiUrl) console.error('[Huskel] Missing apiUrl. Set it via <HuskelProvider apiUrl="..."> or NEXT_PUBLIC_HUSKEL_API_URL.');
     if (!apiToken) console.error('[Huskel] Missing apiToken. Set it via <HuskelProvider apiToken="..."> or NEXT_PUBLIC_HUSKEL_API_TOKEN.');
     this.shopperId = config.shopperId;
+    this.onCheckout = config.onCheckout;
     this.initSession();
     this.loadIngestedCache();
     this.api = new HuskelAPI(
       apiUrl,
       siteId,
       apiToken,
-      () => this.shopperId,
+      () => this.getShopperId(),
       () => this.sessionId
     );
     instance = this;
@@ -268,7 +323,7 @@ var _HuskelClient = class _HuskelClient {
     this.shopperId = id;
   }
   getShopperId() {
-    return this.shopperId;
+    return this.shopperId || "guest_" + this.sessionId;
   }
   getSessionId() {
     return this.sessionId;
@@ -441,7 +496,15 @@ function useSearch() {
       }
     } catch (e) {
       if (gen === genRef.current) {
-        setError((_b = e.message) != null ? _b : "Search failed");
+        let msg = (_b = e == null ? void 0 : e.message) != null ? _b : "Search failed";
+        try {
+          const parsed = JSON.parse(msg);
+          if (parsed && parsed.error) {
+            msg = parsed.error;
+          }
+        } catch (e2) {
+        }
+        setError(msg);
       }
     } finally {
       if (gen === genRef.current) setLoading(false);
@@ -516,13 +579,13 @@ function useChat() {
   const [loading, setLoading] = useState3(false);
   const [error, setError] = useState3(null);
   const abortRef = useRef5(null);
-  const send = useCallback3(async (query) => {
-    var _a, _b, _c;
+  const send = useCallback3(async (query, displayQuery) => {
+    var _a, _b, _c, _d, _e;
     if (!query.trim() || loading) return;
     (_a = abortRef.current) == null ? void 0 : _a.abort();
     abortRef.current = new AbortController();
     const signal = abortRef.current.signal;
-    const userMsg = { role: "user", content: query };
+    const userMsg = { role: "user", content: displayQuery != null ? displayQuery : query };
     setMessages((prev) => [...prev, userMsg]);
     setLoading(true);
     setError(null);
@@ -548,9 +611,30 @@ function useChat() {
       }
       if (signal.aborted) return;
       setSources((_b = res.sources) != null ? _b : []);
+      if (((_c = res.action) == null ? void 0 : _c.type) === "add_to_cart" || res.checkout) {
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new CustomEvent("huskel:cart_updated", { detail: res.checkout }));
+        }
+      }
+      if (((_d = res.action) == null ? void 0 : _d.type) === "checkout") {
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(new CustomEvent("huskel:trigger_checkout", { detail: res.checkout }));
+        }
+      }
+      if (res.checkout && client.onCheckout) {
+        client.onCheckout(res.checkout);
+      }
     } catch (e) {
       if (signal.aborted) return;
-      setError((_c = e == null ? void 0 : e.message) != null ? _c : "Chat request failed");
+      let msg = (_e = e == null ? void 0 : e.message) != null ? _e : "Chat request failed";
+      try {
+        const parsed = JSON.parse(msg);
+        if (parsed && parsed.error) {
+          msg = parsed.error;
+        }
+      } catch (e2) {
+      }
+      setError(msg);
       setMessages((prev) => prev.slice(0, -1));
     } finally {
       if (!signal.aborted) {
@@ -569,8 +653,53 @@ function useChat() {
   return { messages, sources, loading, error, send, reset };
 }
 
+// src/hooks/useCart.ts
+import { useState as useState4, useEffect as useEffect3, useCallback as useCallback4 } from "react";
+function useCart() {
+  const client = useHuskelContext();
+  const [cart, setCart] = useState4(null);
+  const [loading, setLoading] = useState4(false);
+  const shopperId = client.getShopperId();
+  const fetchCart = useCallback4(async () => {
+    if (!shopperId) return;
+    setLoading(true);
+    try {
+      const res = await client.api.getCart();
+      setCart(res);
+    } catch (e) {
+      console.error("[Huskel] Failed to fetch cart", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, shopperId]);
+  useEffect3(() => {
+    fetchCart();
+    const handleCartUpdate = (e) => {
+      if (e.detail) {
+        setCart(e.detail);
+      } else {
+        fetchCart();
+      }
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("huskel:cart_updated", handleCartUpdate);
+      return () => window.removeEventListener("huskel:cart_updated", handleCartUpdate);
+    }
+  }, [fetchCart, shopperId]);
+  return { cart, loading, fetchCart };
+}
+
+// src/components/SearchBar.tsx
+import { useState as useState5, useEffect as useEffect4, useRef as useRef6 } from "react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 // src/components/SearchBar.tsx
-import { useState as useState4, useEffect as useEffect3, useRef as useRef6 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SearchIcon = () => /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
   /* @__PURE__ */ jsx2("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
@@ -588,12 +717,12 @@ function SearchBar({
   theme,
   classNames = {}
 }) {
-  const [query, setQuery] = useState4("");
-  const [open, setOpen] = useState4(false);
+  const [query, setQuery] = useState5("");
+  const [open, setOpen] = useState5(false);
   const { results, loading, search, clear } = useSearch();
   const timer = useRef6();
   const wrap = useRef6(null);
-  useEffect3(() => {
+  useEffect4(() => {
     clearTimeout(timer.current);
     if (!query.trim()) {
       clear();
@@ -606,7 +735,7 @@ function SearchBar({
     }, debounceMs);
     return () => clearTimeout(timer.current);
   }, [query]);
-  useEffect3(() => {
+  useEffect4(() => {
     const h = (e) => {
       if (wrap.current && !wrap.current.contains(e.target)) setOpen(false);
     };
@@ -619,13 +748,13 @@ function SearchBar({
     onSelect == null ? void 0 : onSelect(r);
   };
   const showDrop = open && query.trim().length > 0;
-  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
-  return /* @__PURE__ */ jsxs("div", { className: `hsk-sb-wrap ${classNames.root || ""} ${className || ""}`, ref: wrap, style: customStyles, children: [
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
+  return /* @__PURE__ */ jsxs("div", { className: cn("hsk-sb-wrap", classNames.root, className), ref: wrap, style: customStyles, children: [
     /* @__PURE__ */ jsx2("span", { className: "hsk-sb-icon", children: /* @__PURE__ */ jsx2(SearchIcon, {}) }),
     /* @__PURE__ */ jsx2(
       "input",
       {
-        className: `hsk-sb-input ${classNames.input || ""} ${inputClassName || ""}`,
+        className: cn("hsk-sb-input", classNames.input, inputClassName),
         type: "text",
         value: query,
         placeholder,
@@ -635,7 +764,7 @@ function SearchBar({
         spellCheck: false
       }
     ),
-    showDrop && /* @__PURE__ */ jsxs("div", { className: `hsk-sb-drop ${classNames.dropdown || ""} ${dropdownClassName || ""}`, style: { position: "absolute" }, children: [
+    showDrop && /* @__PURE__ */ jsxs("div", { className: cn("hsk-sb-drop", classNames.dropdown, dropdownClassName), style: { position: "absolute" }, children: [
       loading && /* @__PURE__ */ jsx2("div", { className: "hsk-sb-loading-bar" }),
       results.length === 0 && !loading && /* @__PURE__ */ jsxs("div", { className: "hsk-sb-empty", children: [
         "No results for \u201C",
@@ -656,7 +785,7 @@ function SearchBar({
         ) : /* @__PURE__ */ jsxs(
           "div",
           {
-            className: `hsk-sb-row hsk-sb-fade ${classNames.row || ""}`,
+            className: cn("hsk-sb-row hsk-sb-fade", classNames.row),
             style: { animationDelay: `${i * 18}ms` },
             onClick: () => handleSelect(r),
             children: [
@@ -675,14 +804,124 @@ function SearchBar({
 }
 
 // src/components/Sparkle.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef7 } from "react";
+import { useState as useState6, useEffect as useEffect5, useRef as useRef7 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SparkleIcon = ({ className }) => /* @__PURE__ */ jsx3("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
+
+// src/utils/markdown.tsx
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+var parseInline = (text, keyPrefix) => {
+  const tokenRegex = /(\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|`[^`]+`)/g;
+  const parts = text.split(tokenRegex);
+  return parts.map((part, index) => {
+    if (!part) return null;
+    const key = `${keyPrefix}-inline-${index}`;
+    if (part.startsWith("`") && part.endsWith("`")) {
+      return /* @__PURE__ */ jsx3("code", { className: "hsk-markdown-code", children: part.slice(1, -1) }, key);
+    }
+    if (part.startsWith("**") && part.endsWith("**")) {
+      return /* @__PURE__ */ jsx3("strong", { children: parseInline(part.slice(2, -2), key) }, key);
+    }
+    const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+    if (linkMatch) {
+      const url = linkMatch[2];
+      const isSafeUrl = /^(https?|mailto|tel):/i.test(url) || url.startsWith("/");
+      if (isSafeUrl) {
+        return /* @__PURE__ */ jsx3("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "hsk-markdown-link", children: parseInline(linkMatch[1], key) }, key);
+      }
+      return /* @__PURE__ */ jsx3("span", { children: parseInline(linkMatch[1], key) }, key);
+    }
+    return part;
+  });
+};
+function renderMarkdown(content) {
+  const lines = content.split("\n");
+  const elements = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const key = `md-line-${i}`;
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+    const headerMatch = line.match(/^(#{1,3})\s+(.*)/);
+    if (headerMatch) {
+      const level = headerMatch[1].length;
+      const Tag = `h${level + 3}`;
+      elements.push(/* @__PURE__ */ jsx3(Tag, { className: `hsk-markdown-h${level}`, children: parseInline(headerMatch[2], key) }, key));
+      i++;
+      continue;
+    }
+    if (line.match(/^[-*]\s+/)) {
+      const listItems = [];
+      while (i < lines.length && lines[i].match(/^[-*]\s+/)) {
+        const itemText = lines[i].replace(/^[-*]\s+/, "");
+        listItems.push(/* @__PURE__ */ jsx3("li", { children: parseInline(itemText, `li-${i}`) }, `li-${i}`));
+        i++;
+      }
+      elements.push(/* @__PURE__ */ jsx3("ul", { className: "hsk-markdown-list", children: listItems }, `ul-${key}`));
+      continue;
+    }
+    if (line.trim().startsWith("|")) {
+      const tableRows = [];
+      let isHeader = true;
+      while (i < lines.length && lines[i].trim().startsWith("|")) {
+        const rowLine = lines[i].trim();
+        if (rowLine.match(/^\|[-:| ]+\|$/)) {
+          i++;
+          isHeader = false;
+          continue;
+        }
+        const cells = rowLine.split("|").slice(1, -1).map((c) => c.trim());
+        const Tag = isHeader ? "th" : "td";
+        tableRows.push(
+          /* @__PURE__ */ jsx3("tr", { children: cells.map((cell, cIdx) => /* @__PURE__ */ jsx3(Tag, { children: parseInline(cell, `td-${i}-${cIdx}`) }, `td-${i}-${cIdx}`)) }, `tr-${i}`)
+        );
+        i++;
+      }
+      elements.push(
+        /* @__PURE__ */ jsx3("div", { className: "hsk-table-wrapper", children: /* @__PURE__ */ jsx3("table", { className: "hsk-markdown-table", children: /* @__PURE__ */ jsx3("tbody", { children: tableRows }) }) }, `table-wrapper-${key}`)
+      );
+      continue;
+    }
+    elements.push(
+      /* @__PURE__ */ jsx3("p", { className: "hsk-markdown-p", children: parseInline(line, key) }, key)
+    );
+    i++;
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children: elements });
+}
+
+// src/components/Sparkle.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SparkleIcon = ({ className }) => /* @__PURE__ */ jsx4("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
 var CloseIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  /* @__PURE__ */ jsx4("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx4("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+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__ */ jsx4("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 19V5" })
 ] });
+var getFriendlyError = (err) => {
+  let str = "";
+  if (typeof err === "string") str = err;
+  else if (err && typeof err === "object" && err.message) str = err.message;
+  else try {
+    str = JSON.stringify(err);
+  } catch (e) {
+    str = String(err);
+  }
+  if (str.toLowerCase().includes("token limit")) {
+    return "You've reached your usage limit. Please update your billing limits in your dashboard to continue.";
+  }
+  try {
+    const parsed = JSON.parse(str);
+    return parsed.error || parsed.message || str;
+  } catch (e) {
+    return str;
+  }
+};
 function SparkleModal({
   productName,
   limit,
@@ -692,26 +931,42 @@ function SparkleModal({
   onNavigate,
   onResult,
   theme,
-  classNames = {}
+  classNames = {},
+  product: initialProduct
 }) {
-  const { results, loading, search } = useSearch();
-  const initiated = useRef7(false);
-  useEffect4(() => {
-    if (!initiated.current) {
-      initiated.current = true;
-      search(productName, limit);
+  var _a, _b, _c;
+  const client = useHuskelContext();
+  const [fetchedProduct, setFetchedProduct] = useState6(null);
+  const displayProduct = initialProduct || fetchedProduct;
+  const { results, loading: searchLoading, search } = useSearch();
+  const { messages, sources, loading: chatLoading, error: chatError, send } = useChat();
+  const [chatInput, setChatInput] = useState6("");
+  const chatBottomRef = useRef7(null);
+  const chatTextareaRef = useRef7(null);
+  useEffect5(() => {
+    if (!initialProduct && !fetchedProduct) {
+      client.api.searchVector(productName, 1).then((res) => {
+        if (res.results && res.results.length > 0) {
+          setFetchedProduct(res.results[0].product);
+        }
+      }).catch((err) => console.error("[Huskel] Failed to fetch product details", err));
     }
-  }, []);
-  useEffect4(() => {
+    search(productName, limit);
+  }, [productName, initialProduct, fetchedProduct, client, limit, search]);
+  useEffect5(() => {
     if (results.length > 0) onResult == null ? void 0 : onResult(results);
-  }, [results]);
-  useEffect4(() => {
+  }, [results, onResult]);
+  useEffect5(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", h);
     return () => document.removeEventListener("keydown", h);
-  }, []);
+  }, [onClose]);
+  useEffect5(() => {
+    var _a2;
+    (_a2 = chatBottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
+  }, [messages, chatLoading]);
   const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur != null ? backdropBlur : "16px";
   const bg = backdropColor != null ? backdropColor : void 0;
   const handleNav = (r) => {
@@ -721,83 +976,209 @@ function SparkleModal({
       if (r.product.url) window.location.href = r.product.url;
     }
   };
-  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
-  return /* @__PURE__ */ jsx3(
+  const handleSend = async (text) => {
+    const q = (text != null ? text : chatInput).trim();
+    if (!q || chatLoading) return;
+    setChatInput("");
+    if (chatTextareaRef.current) {
+      chatTextareaRef.current.style.height = "auto";
+    }
+    if (messages.length === 0 && displayProduct) {
+      const contextQuery = `[Context: Shopper is viewing "${displayProduct.name}". Price: ${displayProduct.price}. Description: ${displayProduct.description || ""}]
+
+Question: ${q}`;
+      await send(contextQuery, q);
+    } else {
+      await send(q);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleInput = (e) => {
+    setChatInput(e.target.value);
+    const t = e.target;
+    t.style.height = "auto";
+    t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
+  };
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
+  const displayMessages = messages.length === 0 && displayProduct ? [
+    {
+      role: "assistant",
+      content: `Hi! I can help you with **${displayProduct.name}**. Ask me about its specifications, features, compare it with other options, or find alternatives!`
+    }
+  ] : messages;
+  return /* @__PURE__ */ jsx4(
     "div",
     {
-      className: `hsk-sp-backdrop ${classNames.backdrop || ""}`,
+      className: cn("hsk-sp-backdrop", classNames.backdrop),
       onClick: onClose,
       style: __spreadValues({
         backdropFilter: `blur(${blurVal})`,
         WebkitBackdropFilter: `blur(${blurVal})`,
         background: bg != null ? bg : void 0
       }, customStyles),
-      children: /* @__PURE__ */ jsxs2("div", { className: `hsk-sp-card ${classNames.card || ""}`, onClick: (e) => e.stopPropagation(), children: [
+      children: /* @__PURE__ */ jsxs2("div", { className: cn("hsk-sp-card hsk-sp-fullscreen", classNames.card), onClick: (e) => e.stopPropagation(), children: [
         /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header", children: [
-          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
+          /* @__PURE__ */ jsx4("span", { className: "hsk-sp-header-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx4(SparkleIcon, {}) }),
           /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-body", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-header-title", children: [
-              "Similar to \u201C",
-              productName,
-              "\u201D"
-            ] }),
-            /* @__PURE__ */ jsx3("div", { className: "hsk-sp-header-sub", children: "AI vector similarity \xB7 instant results" })
+            /* @__PURE__ */ jsx4("div", { className: "hsk-sp-header-title", children: (displayProduct == null ? void 0 : displayProduct.name) || productName }),
+            /* @__PURE__ */ jsx4("div", { className: "hsk-sp-header-sub", children: "Ask questions, compare specs, or check similar products" })
           ] }),
-          /* @__PURE__ */ jsx3("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx3(CloseIcon, {}) })
+          /* @__PURE__ */ jsx4("button", { className: "hsk-sp-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx4(CloseIcon, {}) })
         ] }),
-        loading && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-bar" }),
-        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-results", children: [
-          !loading && results.length === 0 && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-empty", children: "No similar products found." }),
-          results.map((r, i) => {
-            var _a, _b, _c;
-            const price = parseFloat(((_a = r.product.price) == null ? void 0 : _a.replace(/[^0-9.]/g, "")) || "0");
-            const currency = (_b = r.product.currency) != null ? _b : "KES";
-            return /* @__PURE__ */ jsxs2(
-              "div",
-              {
-                className: `hsk-sp-item ${classNames.item || ""}`,
-                style: { animationDelay: `${i * 55}ms` },
-                children: [
-                  /* @__PURE__ */ jsx3("div", { className: "hsk-sp-img-wrap", children: ((_c = r.product.images) == null ? void 0 : _c[0]) ? /* @__PURE__ */ jsx3("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx3("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
-                  /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-body", children: [
-                    r.product.category && /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-cat", children: r.product.category }),
-                    /* @__PURE__ */ jsx3("div", { className: "hsk-sp-item-name", children: r.product.name }),
-                    /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-price-row", children: [
-                      /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-currency", children: currency }),
-                      /* @__PURE__ */ jsx3("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
+        searchLoading && /* @__PURE__ */ jsx4("div", { className: "hsk-sp-bar" }),
+        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-body", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-details-pane", children: [
+            displayProduct && /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-product-profile-container", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-product-profile", children: [
+                /* @__PURE__ */ jsx4("div", { className: "hsk-sp-details-imgwrap", children: ((_a = displayProduct.images) == null ? void 0 : _a[0]) ? /* @__PURE__ */ jsx4("img", { src: displayProduct.images[0], alt: displayProduct.name }) : /* @__PURE__ */ jsx4("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-details-meta", children: [
+                  displayProduct.brand && /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-brand", children: displayProduct.brand }),
+                  displayProduct.category && /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-cat", children: displayProduct.category }),
+                  /* @__PURE__ */ jsx4("h2", { className: "hsk-sp-details-name", children: displayProduct.name }),
+                  /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-price-row", children: [
+                    /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-currency", children: (_b = displayProduct.currency) != null ? _b : "KES" }),
+                    /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-price", children: parseFloat(((_c = displayProduct.price) == null ? void 0 : _c.replace(/[^0-9.]/g, "")) || "0").toLocaleString() }),
+                    displayProduct.originalPrice && /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-original-price", children: parseFloat(displayProduct.originalPrice.replace(/[^0-9.]/g, "") || "0").toLocaleString() }),
+                    displayProduct.discount && /* @__PURE__ */ jsxs2("span", { className: "hsk-sp-item-discount", children: [
+                      "(",
+                      displayProduct.discount,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-meta-badges", children: [
+                    displayProduct.rating && /* @__PURE__ */ jsxs2("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-rating", children: [
+                      "\u2605 ",
+                      parseFloat(displayProduct.rating.toString()).toFixed(1),
+                      " ",
+                      displayProduct.reviewCount ? `(${displayProduct.reviewCount})` : ""
                     ] }),
-                    /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-actions", children: [
-                      /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          className: "hsk-sp-action hsk-sp-action-primary",
-                          onClick: () => handleNav(r),
-                          children: "View Product"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          className: "hsk-sp-action hsk-sp-action-secondary",
-                          onClick: () => onClose(),
-                          children: "Add to Cart"
-                        }
-                      )
+                    displayProduct.availability && /* @__PURE__ */ jsx4("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__ */ jsxs2("span", { className: "hsk-sp-meta-badge hsk-sp-meta-badge-stock", children: [
+                      "Stock: ",
+                      displayProduct.stock
                     ] })
                   ] })
-                ]
-              },
-              r.id
-            );
-          })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-footer", children: [
-          /* @__PURE__ */ jsxs2("span", { className: "hsk-sp-badge", style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [
-            /* @__PURE__ */ jsx3(SparkleIcon, {}),
-            " Huskel AI"
+                ] })
+              ] }),
+              displayProduct.specs && Object.keys(displayProduct.specs).length > 0 && /* @__PURE__ */ jsx4("div", { className: "hsk-sp-specs-horizontal", children: Object.entries(displayProduct.specs).map(([key, val]) => /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-spec-item-horizontal", children: [
+                /* @__PURE__ */ jsxs2("span", { className: "hsk-sp-spec-label-horizontal", children: [
+                  key,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx4("span", { className: "hsk-sp-spec-value-horizontal", title: val, children: val })
+              ] }, key)) }),
+              displayProduct.description && /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-details-desc", children: [
+                /* @__PURE__ */ jsx4("h4", { children: "Description" }),
+                /* @__PURE__ */ jsx4("p", { children: displayProduct.description })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-similar-section", children: [
+              /* @__PURE__ */ jsx4("h3", { children: "Similar Products" }),
+              /* @__PURE__ */ jsx4("div", { className: "hsk-sp-results", children: (() => {
+                const similarProducts = results.filter(
+                  (r) => {
+                    var _a2;
+                    const isSameName = r.product.name.toLowerCase() === ((_a2 = displayProduct == null ? void 0 : displayProduct.name) == null ? void 0 : _a2.toLowerCase());
+                    const isSameSlug = r.product.slug && (displayProduct == null ? void 0 : displayProduct.slug) && r.product.slug.toLowerCase() === displayProduct.slug.toLowerCase();
+                    return !isSameName && !isSameSlug;
+                  }
+                );
+                if (!searchLoading && similarProducts.length === 0) {
+                  return /* @__PURE__ */ jsx4("div", { className: "hsk-sp-empty", children: "No similar products found." });
+                }
+                return similarProducts.map((r, i) => {
+                  var _a2, _b2, _c2;
+                  const price = parseFloat(((_a2 = r.product.price) == null ? void 0 : _a2.replace(/[^0-9.]/g, "")) || "0");
+                  const currency = (_b2 = r.product.currency) != null ? _b2 : "KES";
+                  return /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      className: cn("hsk-sp-item", classNames.item),
+                      style: { animationDelay: `${i * 55}ms` },
+                      children: [
+                        /* @__PURE__ */ jsx4("div", { className: "hsk-sp-img-wrap", children: ((_c2 = r.product.images) == null ? void 0 : _c2[0]) ? /* @__PURE__ */ jsx4("img", { src: r.product.images[0], alt: r.product.name }) : /* @__PURE__ */ jsx4("span", { className: "hsk-sp-img-placeholder", children: "\u{1F6CD}" }) }),
+                        /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-body", children: [
+                          /* @__PURE__ */ jsxs2("div", { children: [
+                            r.product.category && /* @__PURE__ */ jsx4("div", { className: "hsk-sp-item-cat", children: r.product.category }),
+                            /* @__PURE__ */ jsx4("div", { className: "hsk-sp-item-name", title: r.product.name, children: r.product.name })
+                          ] }),
+                          /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-item-price-row", children: [
+                            /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-currency", children: currency }),
+                            /* @__PURE__ */ jsx4("span", { className: "hsk-sp-item-price", children: price.toLocaleString() })
+                          ] }),
+                          /* @__PURE__ */ jsx4("div", { className: "hsk-sp-actions", children: /* @__PURE__ */ jsx4(
+                            "button",
+                            {
+                              className: "hsk-sp-action hsk-sp-action-primary",
+                              onClick: () => handleNav(r),
+                              children: "View"
+                            }
+                          ) })
+                        ] })
+                      ]
+                    },
+                    r.id
+                  );
+                });
+              })() })
+            ] })
           ] }),
-          /* @__PURE__ */ jsx3("span", { className: "hsk-sp-esc", children: "Esc to close" })
-        ] })
+          /* @__PURE__ */ jsxs2("div", { className: "hsk-sp-chat-pane", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "hsk-cb-msgs", children: [
+              displayMessages.map((msg, idx) => {
+                const isUser = msg.role === "user";
+                return /* @__PURE__ */ jsx4("div", { className: "hsk-cb-msg-group", children: isUser ? /* @__PURE__ */ jsx4("div", { className: "hsk-cb-user-msg", children: /* @__PURE__ */ jsx4("div", { className: "hsk-cb-user-bubble", children: msg.content }) }) : /* @__PURE__ */ jsxs2("div", { className: "hsk-cb-ai-msg", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx4(SparkleIcon, {}) }),
+                  /* @__PURE__ */ jsx4("div", { className: "hsk-cb-ai-body", children: /* @__PURE__ */ jsx4("div", { className: "hsk-cb-ai-text", children: renderMarkdown(msg.content) }) })
+                ] }) }, idx);
+              }),
+              chatLoading && /* @__PURE__ */ jsxs2("div", { className: "hsk-cb-typing-row", children: [
+                /* @__PURE__ */ jsx4("div", { className: "hsk-cb-ai-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx4(SparkleIcon, {}) }),
+                /* @__PURE__ */ jsxs2("div", { className: "hsk-cb-typing", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx4("div", { className: "hsk-cb-dot" }),
+                  /* @__PURE__ */ jsx4("div", { className: "hsk-cb-dot" })
+                ] })
+              ] }),
+              chatError && /* @__PURE__ */ jsx4("div", { className: "hsk-cb-error", children: getFriendlyError(chatError) }),
+              /* @__PURE__ */ jsx4("div", { ref: chatBottomRef, style: { height: 1 } })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "hsk-cb-input-wrap", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "hsk-cb-input-box", children: [
+                /* @__PURE__ */ jsx4(
+                  "textarea",
+                  {
+                    ref: chatTextareaRef,
+                    className: "hsk-cb-textarea",
+                    value: chatInput,
+                    onChange: handleInput,
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Ask about this product, specs, or comparison...",
+                    rows: 1,
+                    disabled: chatLoading
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    className: "hsk-cb-send",
+                    onClick: () => handleSend(),
+                    disabled: !chatInput.trim() || chatLoading,
+                    "aria-label": "Send message",
+                    children: /* @__PURE__ */ jsx4(ArrowUpIcon, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "hsk-cb-hint", children: "Huskel AI \xB7 instant product knowledge" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "hsk-sp-footer", children: /* @__PURE__ */ jsx4("span", { className: "hsk-sp-esc", children: "Esc to close" }) })
       ] })
     }
   );
@@ -811,39 +1192,41 @@ function Sparkle({
   className,
   onNavigate,
   theme,
-  classNames = {}
+  classNames = {},
+  product
 }) {
-  const [open, setOpen] = useState5(false);
-  const [mounted, setMounted] = useState5(false);
-  useEffect4(() => {
+  const [open, setOpen] = useState6(false);
+  const [mounted, setMounted] = useState6(false);
+  useEffect5(() => {
     setMounted(true);
   }, []);
-  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
       "button",
       {
-        className: `hsk-sp-btn ${classNames.button || ""} ${className || ""}`,
+        className: cn("hsk-sp-btn", classNames.button, className),
         onClick: () => setOpen(true),
         style: customStyles,
         title: "Find similar products",
         "aria-label": "Find similar products",
-        children: /* @__PURE__ */ jsx3(SparkleIcon, {})
+        children: /* @__PURE__ */ jsx4(SparkleIcon, {})
       }
     ),
     open && mounted && createPortal(
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         SparkleModal,
         {
           productName,
           limit,
+          onResult,
           backdropColor,
           backdropBlur,
           onClose: () => setOpen(false),
-          onResult,
           onNavigate,
           theme,
-          classNames
+          classNames,
+          product
         }
       ),
       document.body
@@ -852,97 +1235,10 @@ function Sparkle({
 }
 
 // src/components/ChatWidget.tsx
-import { useState as useState6, useRef as useRef8, useEffect as useEffect5 } from "react";
-
-// src/utils/markdown.tsx
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
-var parseInline = (text, keyPrefix) => {
-  const tokenRegex = /(\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|`[^`]+`)/g;
-  const parts = text.split(tokenRegex);
-  return parts.map((part, index) => {
-    if (!part) return null;
-    const key = `${keyPrefix}-inline-${index}`;
-    if (part.startsWith("`") && part.endsWith("`")) {
-      return /* @__PURE__ */ jsx4("code", { className: "hsk-markdown-code", children: part.slice(1, -1) }, key);
-    }
-    if (part.startsWith("**") && part.endsWith("**")) {
-      return /* @__PURE__ */ jsx4("strong", { children: parseInline(part.slice(2, -2), key) }, key);
-    }
-    const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
-    if (linkMatch) {
-      const url = linkMatch[2];
-      const isSafeUrl = /^(https?|mailto|tel):/i.test(url) || url.startsWith("/");
-      if (isSafeUrl) {
-        return /* @__PURE__ */ jsx4("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "hsk-markdown-link", children: parseInline(linkMatch[1], key) }, key);
-      }
-      return /* @__PURE__ */ jsx4("span", { children: parseInline(linkMatch[1], key) }, key);
-    }
-    return part;
-  });
-};
-function renderMarkdown(content) {
-  const lines = content.split("\n");
-  const elements = [];
-  let i = 0;
-  while (i < lines.length) {
-    const line = lines[i];
-    const key = `md-line-${i}`;
-    if (!line.trim()) {
-      i++;
-      continue;
-    }
-    const headerMatch = line.match(/^(#{1,3})\s+(.*)/);
-    if (headerMatch) {
-      const level = headerMatch[1].length;
-      const Tag = `h${level + 3}`;
-      elements.push(/* @__PURE__ */ jsx4(Tag, { className: `hsk-markdown-h${level}`, children: parseInline(headerMatch[2], key) }, key));
-      i++;
-      continue;
-    }
-    if (line.match(/^[-*]\s+/)) {
-      const listItems = [];
-      while (i < lines.length && lines[i].match(/^[-*]\s+/)) {
-        const itemText = lines[i].replace(/^[-*]\s+/, "");
-        listItems.push(/* @__PURE__ */ jsx4("li", { children: parseInline(itemText, `li-${i}`) }, `li-${i}`));
-        i++;
-      }
-      elements.push(/* @__PURE__ */ jsx4("ul", { className: "hsk-markdown-list", children: listItems }, `ul-${key}`));
-      continue;
-    }
-    if (line.trim().startsWith("|")) {
-      const tableRows = [];
-      let isHeader = true;
-      while (i < lines.length && lines[i].trim().startsWith("|")) {
-        const rowLine = lines[i].trim();
-        if (rowLine.match(/^\|[-:| ]+\|$/)) {
-          i++;
-          isHeader = false;
-          continue;
-        }
-        const cells = rowLine.split("|").slice(1, -1).map((c) => c.trim());
-        const Tag = isHeader ? "th" : "td";
-        tableRows.push(
-          /* @__PURE__ */ jsx4("tr", { children: cells.map((cell, cIdx) => /* @__PURE__ */ jsx4(Tag, { children: parseInline(cell, `td-${i}-${cIdx}`) }, `td-${i}-${cIdx}`)) }, `tr-${i}`)
-        );
-        i++;
-      }
-      elements.push(
-        /* @__PURE__ */ jsx4("div", { className: "hsk-table-wrapper", children: /* @__PURE__ */ jsx4("table", { className: "hsk-markdown-table", children: /* @__PURE__ */ jsx4("tbody", { children: tableRows }) }) }, `table-wrapper-${key}`)
-      );
-      continue;
-    }
-    elements.push(
-      /* @__PURE__ */ jsx4("p", { className: "hsk-markdown-p", children: parseInline(line, key) }, key)
-    );
-    i++;
-  }
-  return /* @__PURE__ */ jsx4(Fragment2, { children: elements });
-}
-
-// src/components/ChatWidget.tsx
+import { useState as useState7, useRef as useRef8, useEffect as useEffect6 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var SparkleIcon2 = () => /* @__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__ */ jsxs3("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+var ArrowUpIcon2 = () => /* @__PURE__ */ jsxs3("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" })
 ] });
@@ -972,10 +1268,10 @@ function ChatWidget({
   onSelectSource
 }) {
   const { messages, sources, loading, error, send, reset } = useChat();
-  const [input, setInput] = useState6("");
+  const [input, setInput] = useState7("");
   const bottomRef = useRef8(null);
   const textareaRef = useRef8(null);
-  useEffect5(() => {
+  useEffect6(() => {
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading]);
@@ -998,14 +1294,14 @@ function ChatWidget({
     t.style.height = "auto";
     t.style.height = Math.min(t.scrollHeight, 120) + "px";
   };
-  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: `hsk-chat-widget ${classNames.root || ""} ${className || ""}`,
+      className: cn("hsk-chat-widget", classNames.root, className),
       style: customStyles,
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: `hsk-chat-header ${classNames.header || ""}`, children: [
+        /* @__PURE__ */ jsxs3("div", { className: cn("hsk-chat-header", classNames.header), children: [
           /* @__PURE__ */ jsx5("span", { className: "hsk-chat-header-icon", children: /* @__PURE__ */ jsx5(SparkleIcon2, {}) }),
           /* @__PURE__ */ jsx5("span", { className: "hsk-chat-title", children: title }),
           /* @__PURE__ */ jsx5("span", { className: "hsk-chat-badge", children: "AI" }),
@@ -1018,8 +1314,8 @@ function ChatWidget({
             /* @__PURE__ */ jsx5("div", { className: "hsk-chat-empty-suggestions", children: emptyStateSuggestions })
           ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { children: [
             /* @__PURE__ */ jsxs3("div", { className: `hsk-msg-row ${msg.role}`, children: [
-              /* @__PURE__ */ jsx5("div", { className: `hsk-msg-avatar ${msg.role === "assistant" ? "ai" : "user"}`, children: msg.role === "assistant" ? /* @__PURE__ */ jsx5(SparkleIcon2, {}) : "U" }),
-              /* @__PURE__ */ jsx5("div", { className: `hsk-msg-bubble ${msg.role} ${classNames.messageBubble || ""}`, children: renderMarkdown(msg.content) })
+              /* @__PURE__ */ jsx5("div", { className: cn("hsk-msg-avatar", msg.role === "assistant" ? "ai" : "user"), children: msg.role === "assistant" ? /* @__PURE__ */ jsx5(SparkleIcon2, {}) : "U" }),
+              /* @__PURE__ */ jsx5("div", { className: cn("hsk-msg-bubble", msg.role, classNames.messageBubble), children: renderMarkdown(msg.content) })
             ] }),
             msg.role === "assistant" && idx === messages.length - 1 && 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)),
@@ -1031,7 +1327,14 @@ function ChatWidget({
               /* @__PURE__ */ jsx5("div", { className: "hsk-typing-dot" })
             ] })
           ] }),
-          error && /* @__PURE__ */ jsx5("div", { className: "hsk-chat-error", children: error }),
+          error && /* @__PURE__ */ jsx5("div", { className: "hsk-chat-error", children: (() => {
+            try {
+              const parsed = JSON.parse(error);
+              return parsed.error || parsed.message || error;
+            } catch (e) {
+              return error;
+            }
+          })() }),
           /* @__PURE__ */ jsx5("div", { ref: bottomRef })
         ] }),
         /* @__PURE__ */ jsxs3("div", { className: "hsk-chat-input-area", children: [
@@ -1039,7 +1342,7 @@ function ChatWidget({
             "textarea",
             {
               ref: textareaRef,
-              className: `hsk-chat-input ${classNames.input || ""}`,
+              className: cn("hsk-chat-input", classNames.input),
               value: input,
               onChange: handleInput,
               onKeyDown: handleKey,
@@ -1055,7 +1358,7 @@ function ChatWidget({
               onClick: handleSend,
               disabled: !input.trim() || loading,
               "aria-label": "Send message",
-              children: /* @__PURE__ */ jsx5(ArrowUpIcon, {})
+              children: /* @__PURE__ */ jsx5(ArrowUpIcon2, {})
             }
           )
         ] })
@@ -1065,11 +1368,11 @@ function ChatWidget({
 }
 
 // src/components/AIChatButton.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef9, useCallback as useCallback4 } from "react";
+import { useState as useState8, useEffect as useEffect7, useRef as useRef9, useCallback as useCallback5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SparkleIcon3 = ({ className }) => /* @__PURE__ */ jsx6("svg", { className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }) });
-var ArrowUpIcon2 = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+var ArrowUpIcon3 = () => /* @__PURE__ */ jsxs4("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" })
 ] });
@@ -1086,14 +1389,14 @@ var DEFAULT_CHIPS = [
 ];
 function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
   const railRef = useRef9(null);
-  const [showNext, setShowNext] = useState7(false);
-  const measure = useCallback4(() => {
+  const [showNext, setShowNext] = useState8(false);
+  const measure = useCallback5(() => {
     const el = railRef.current;
     if (!el) return;
     const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 8;
     setShowNext(el.scrollWidth > el.clientWidth + 4 && !atEnd);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     measure();
     const el = railRef.current;
     if (!el) return;
@@ -1146,7 +1449,7 @@ function SourcesCarousel({ sources, defaultCurrency, onSelectSource }) {
   ] });
 }
 function ChatModal({
-  title = "AI Shopping Assistant",
+  title = "Shopping Assistant",
   placeholder = "Ask me anything \u2014 gifts, budget, use case\u2026",
   backdropColor,
   backdropBlur,
@@ -1159,15 +1462,15 @@ function ChatModal({
 }) {
   var _a, _b;
   const { messages, sources, loading, error, send, reset } = useChat();
-  const [input, setInput] = useState7("");
-  const [selectedProduct, setSelectedProduct] = useState7(null);
+  const [input, setInput] = useState8("");
+  const [selectedProduct, setSelectedProduct] = useState8(null);
   const bottomRef = useRef9(null);
   const textareaRef = useRef9(null);
-  useEffect6(() => {
+  useEffect7(() => {
     var _a2;
     (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
   }, [messages, loading, selectedProduct]);
-  useEffect6(() => {
+  useEffect7(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1204,24 +1507,21 @@ function ChatModal({
     t.style.height = `${Math.min(t.scrollHeight, 140)}px`;
   };
   const blurVal = typeof backdropBlur === "number" ? `${backdropBlur}px` : backdropBlur != null ? backdropBlur : "20px";
-  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
   return /* @__PURE__ */ jsx6(
     "div",
     {
-      className: `hsk-cb-overlay ${classNames.overlay || ""}`,
+      className: cn("hsk-cb-overlay", classNames.overlay),
       onClick: onClose,
       style: __spreadValues(__spreadValues({
         backdropFilter: `blur(${blurVal})`,
         WebkitBackdropFilter: `blur(${blurVal})`
       }, backdropColor ? { background: backdropColor } : {}), customStyles),
-      children: /* @__PURE__ */ jsxs4("div", { className: `hsk-cb-panel ${classNames.panel || ""}`, onClick: (e) => e.stopPropagation(), children: [
+      children: /* @__PURE__ */ jsxs4("div", { className: cn("hsk-cb-panel", classNames.panel), onClick: (e) => e.stopPropagation(), children: [
         /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar", children: [
           /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-left", children: [
             /* @__PURE__ */ jsx6("span", { className: "hsk-cb-topbar-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-            /* @__PURE__ */ jsxs4("div", { children: [
-              /* @__PURE__ */ jsx6("div", { className: "hsk-cb-topbar-title", children: title }),
-              /* @__PURE__ */ jsx6("div", { className: "hsk-cb-topbar-sub", children: "Powered by Huskel AI \xB7 searches the whole catalogue" })
-            ] })
+            /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6("div", { className: "hsk-cb-topbar-title", children: title }) })
           ] }),
           /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-topbar-actions", children: [
             messages.length > 0 && /* @__PURE__ */ jsx6("button", { className: "hsk-cb-topbar-btn", onClick: reset, children: "Clear chat" }),
@@ -1231,8 +1531,7 @@ function ChatModal({
         /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-msgs", children: [
           messages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "hsk-cb-empty", children: [
             /* @__PURE__ */ jsx6("div", { className: "hsk-cb-empty-icon", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx6(SparkleIcon3, {}) }),
-            /* @__PURE__ */ jsx6("div", { className: "hsk-cb-empty-title", children: "What can I help you find?" }),
-            /* @__PURE__ */ jsx6("div", { className: "hsk-cb-empty-sub", children: "Ask about products, budgets, gift ideas, specs \u2014 I'll search the entire catalogue for you." }),
+            /* @__PURE__ */ jsx6("div", { className: "hsk-cb-empty-title", children: "Find exactly what you need" }),
             /* @__PURE__ */ jsx6("div", { className: "hsk-cb-chips", children: chips.map((chip) => /* @__PURE__ */ jsx6(
               "button",
               {
@@ -1295,7 +1594,7 @@ function ChatModal({
               "textarea",
               {
                 ref: textareaRef,
-                className: `hsk-cb-textarea ${classNames.input || ""}`,
+                className: cn("hsk-cb-textarea", classNames.input),
                 value: input,
                 onChange: handleInput,
                 onKeyDown: handleKeyDown,
@@ -1308,11 +1607,11 @@ function ChatModal({
             /* @__PURE__ */ jsx6(
               "button",
               {
-                className: `hsk-cb-send ${classNames.sendButton || ""}`,
+                className: cn("hsk-cb-send", classNames.sendButton),
                 onClick: () => handleSend(),
                 disabled: !input.trim() || loading,
                 "aria-label": "Send message",
-                children: /* @__PURE__ */ jsx6(ArrowUpIcon2, {})
+                children: /* @__PURE__ */ jsx6(ArrowUpIcon3, {})
               }
             )
           ] }),
@@ -1335,17 +1634,17 @@ function AIChatButton({
   theme,
   classNames = {}
 }) {
-  const [open, setOpen] = useState7(false);
-  const [mounted, setMounted] = useState7(false);
-  useEffect6(() => {
+  const [open, setOpen] = useState8(false);
+  const [mounted, setMounted] = useState8(false);
+  useEffect7(() => {
     setMounted(true);
   }, []);
-  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily });
+  const customStyles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius });
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     /* @__PURE__ */ jsxs4(
       "button",
       {
-        className: `hsk-cb-btn ${classNames.button || ""} ${className || ""}`,
+        className: cn("hsk-cb-btn", classNames.button, className),
         onClick: () => setOpen(true),
         style: customStyles,
         "aria-label": "Open AI chat",
@@ -1375,8 +1674,260 @@ function AIChatButton({
     )
   ] });
 }
+
+// src/components/CartBadge.tsx
+import { jsx as jsx7 } 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 });
+}
+
+// src/components/CartDrawer.tsx
+import { useState as useState10, useEffect as useEffect9 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+
+// src/components/CheckoutModal.tsx
+import { useState as useState9, useEffect as useEffect8 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function CheckoutModal({
+  onClose,
+  theme,
+  customStyles,
+  hskThemeAttr
+}) {
+  var _a, _b, _c, _d;
+  const { cart, loading: cartLoading } = useCart();
+  const client = useHuskelContext();
+  const [config, setConfig] = useState9(null);
+  const [loading, setLoading] = useState9(true);
+  const [checkingOut, setCheckingOut] = useState9(false);
+  const [paymentSuccess, setPaymentSuccess] = useState9(false);
+  useEffect8(() => {
+    client.api.getCheckoutConfig().then((res) => setConfig(res.payment_methods)).catch((e) => console.error("[Huskel] Failed to fetch checkout config", e)).finally(() => setLoading(false));
+  }, [client]);
+  const handlePay = async (method) => {
+    setCheckingOut(true);
+    setTimeout(async () => {
+      try {
+        const payload = await client.api.checkoutCart();
+        if (client.onCheckout) {
+          client.onCheckout(payload);
+        }
+        setPaymentSuccess(true);
+        setTimeout(() => {
+          onClose();
+        }, 3e3);
+      } catch (e) {
+        console.error("[Huskel] Checkout failed", e);
+        setCheckingOut(false);
+      }
+    }, 1500);
+  };
+  const hasPaymentMethods = config && Object.values(config).some((m) => m.enabled);
+  return createPortal3(
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "hsk-cart-backdrop",
+        style: __spreadProps(__spreadValues({}, customStyles), { zIndex: 999999 }),
+        "data-hsk-theme": hskThemeAttr,
+        onClick: onClose,
+        children: /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: "hsk-checkout-modal",
+            style: customStyles,
+            "data-hsk-theme": hskThemeAttr,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-header", children: [
+                /* @__PURE__ */ jsx8("h2", { children: "Secure Checkout" }),
+                /* @__PURE__ */ jsx8("button", { onClick: onClose, className: "hsk-close-btn", children: "\xD7" })
+              ] }),
+              /* @__PURE__ */ jsx8("div", { className: "hsk-checkout-content", children: paymentSuccess ? /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-success", children: [
+                /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "hsk-success-icon", 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__ */ jsx8("h3", { children: "Payment Successful!" }),
+                /* @__PURE__ */ jsx8("p", { children: "Thank you for your order." })
+              ] }) : /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-split", children: [
+                /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-summary", children: [
+                  /* @__PURE__ */ jsx8("h3", { children: "Order Summary" }),
+                  cartLoading || !cart ? /* @__PURE__ */ jsx8("p", { className: "hsk-cart-loading", children: "Loading order..." }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+                    /* @__PURE__ */ jsx8("ul", { className: "hsk-checkout-items", children: cart.items.map((item) => /* @__PURE__ */ jsxs5("li", { children: [
+                      /* @__PURE__ */ jsxs5("span", { children: [
+                        item.quantity,
+                        "x ",
+                        item.name
+                      ] }),
+                      /* @__PURE__ */ jsxs5("span", { children: [
+                        item.currency,
+                        " ",
+                        (item.price_numeric * item.quantity).toLocaleString(void 0, { minimumFractionDigits: 2 })
+                      ] })
+                    ] }, item.id)) }),
+                    /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-total", children: [
+                      /* @__PURE__ */ jsx8("span", { children: "Total" }),
+                      /* @__PURE__ */ jsxs5("span", { children: [
+                        cart.currency,
+                        " ",
+                        cart.total.toLocaleString(void 0, { minimumFractionDigits: 2 })
+                      ] })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs5("div", { className: "hsk-checkout-payment", children: [
+                  /* @__PURE__ */ jsx8("h3", { children: "Payment Method" }),
+                  loading ? /* @__PURE__ */ jsx8("p", { className: "hsk-cart-loading", children: "Loading secure payment methods..." }) : !hasPaymentMethods ? /* @__PURE__ */ jsx8("p", { className: "hsk-checkout-error", children: "No payment methods are currently available for this store." }) : /* @__PURE__ */ jsxs5("div", { className: "hsk-payment-options", children: [
+                    ((_a = config == null ? void 0 : config.mpesa) == null ? void 0 : _a.enabled) && /* @__PURE__ */ jsx8("button", { onClick: () => handlePay("mpesa"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-mpesa", children: checkingOut ? "Processing..." : "Pay with M-Pesa" }),
+                    ((_b = config == null ? void 0 : config.equity) == null ? void 0 : _b.enabled) && /* @__PURE__ */ jsx8("button", { onClick: () => handlePay("equity"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-equity", children: checkingOut ? "Processing..." : "Pay with Equity Bank" }),
+                    ((_c = config == null ? void 0 : config.stripe) == null ? void 0 : _c.enabled) && /* @__PURE__ */ jsx8("button", { onClick: () => handlePay("stripe"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-stripe", children: checkingOut ? "Processing..." : "Pay with Card (Stripe)" }),
+                    ((_d = config == null ? void 0 : config.paypal) == null ? void 0 : _d.enabled) && /* @__PURE__ */ jsx8("button", { onClick: () => handlePay("paypal"), disabled: checkingOut, className: "hsk-pay-btn hsk-pay-paypal", children: checkingOut ? "Processing..." : "Pay with PayPal" })
+                  ] })
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/CartDrawer.tsx
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function CartDrawer({
+  trigger,
+  className,
+  theme
+}) {
+  const { cart, loading } = useCart();
+  const [open, setOpen] = useState10(false);
+  const [showCheckout, setShowCheckout] = useState10(false);
+  const [mounted, setMounted] = useState10(false);
+  const client = useHuskelContext();
+  useEffect9(() => {
+    setMounted(true);
+    const handleTriggerCheckout = () => {
+      setShowCheckout(true);
+      setOpen(false);
+    };
+    window.addEventListener("huskel:trigger_checkout", handleTriggerCheckout);
+    return () => {
+      window.removeEventListener("huskel:trigger_checkout", handleTriggerCheckout);
+    };
+  }, []);
+  useEffect9(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  const handleCheckout = async () => {
+    if (!cart || cart.items.length === 0) return;
+    setShowCheckout(true);
+  };
+  const isStringTheme = typeof theme === "string";
+  const hskThemeAttr = isStringTheme ? theme : void 0;
+  const customStyles = !isStringTheme && theme ? __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (theme == null ? void 0 : theme.primaryColor) && { "--hsk-primary": theme.primaryColor, "--hsk-primary-color": theme.primaryColor }), (theme == null ? void 0 : theme.backgroundColor) && { "--hsk-bg": theme.backgroundColor }), (theme == null ? void 0 : theme.textColor) && { "--hsk-text": theme.textColor }), (theme == null ? void 0 : theme.fontFamily) && { "--hsk-font": theme.fontFamily }), (theme == null ? void 0 : theme.borderRadius) && { "--hsk-border-radius": theme.borderRadius }) : void 0;
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsx9("div", { onClick: () => setOpen(true), style: { display: "inline-block" }, children: trigger || /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        className: cn("hsk-cart-trigger", className),
+        style: customStyles,
+        "data-hsk-theme": hskThemeAttr,
+        "aria-label": "Open cart",
+        children: [
+          /* @__PURE__ */ jsxs6("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" })
+          ] }),
+          cart && cart.item_count > 0 ? /* @__PURE__ */ jsx9("span", { className: "hsk-cart-trigger-badge", children: cart.item_count }) : null
+        ]
+      }
+    ) }),
+    open && mounted && createPortal4(
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "hsk-cart-backdrop",
+          style: customStyles,
+          "data-hsk-theme": hskThemeAttr,
+          onClick: () => setOpen(false),
+          children: /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "hsk-cart-bottom-sheet",
+              style: customStyles,
+              "data-hsk-theme": hskThemeAttr,
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx9("div", { className: "hsk-cart-sheet-handle" }),
+                /* @__PURE__ */ jsxs6("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__ */ 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__ */ jsxs6("li", { className: "hsk-cart-item", children: [
+                  item.image && /* @__PURE__ */ jsx9("img", { src: item.image, alt: item.name, className: "hsk-cart-item-img" }),
+                  /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-item-info", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "hsk-cart-item-name", children: item.name }),
+                    /* @__PURE__ */ jsxs6("span", { className: "hsk-cart-item-price", children: [
+                      item.currency,
+                      " ",
+                      item.price_numeric.toLocaleString(void 0, { minimumFractionDigits: 2 })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-item-qty", children: [
+                    "x",
+                    item.quantity
+                  ] })
+                ] }, item.id)) }) }),
+                cart && cart.items.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-sheet-footer", children: [
+                  /* @__PURE__ */ jsxs6("div", { className: "hsk-cart-total", children: [
+                    /* @__PURE__ */ jsx9("span", { children: "Total" }),
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      cart.currency,
+                      " ",
+                      cart.total.toLocaleString(void 0, { minimumFractionDigits: 2 })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx9("button", { onClick: handleCheckout, className: "hsk-checkout-btn", children: "Checkout securely" })
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    ),
+    showCheckout && mounted && /* @__PURE__ */ jsx9(
+      CheckoutModal,
+      {
+        onClose: () => {
+          setShowCheckout(false);
+          setOpen(false);
+        },
+        theme: isStringTheme ? theme : void 0,
+        customStyles,
+        hskThemeAttr
+      }
+    )
+  ] });
+}
 export {
   AIChatButton,
+  CartBadge,
+  CartDrawer,
   ChatWidget,
   HuskelAPI,
   HuskelClient,
@@ -1385,6 +1936,7 @@ export {
   Sparkle,
   getHuskelClient,
   initHuskel,
+  useCart,
   useChat,
   useHuskel,
   useIngest,