@sonordev/site-kit 1.5.4 → 2.0.0

package/dist/{chunk-VZMRZQ2D.mjs → chunk-MSRLAD7F.mjs}

@@ -1,5 +1,6 @@
 'use client';
 import React2, { useState, useRef, useEffect, useCallback, createElement } from 'react';
+import ReactDOM from 'react-dom';
 import { usePathname } from 'next/navigation';
 import ReactMarkdown from 'react-markdown';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -7,7 +8,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 // src/engage/EngageWidget.tsx
 function getApiConfig() {
   const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
-  const defaultApiUrl = isDev && (process.env?.SONOR_API_URL || process.env?.NEXT_PUBLIC_UPTRADE_API_URL) ? process.env.SONOR_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL : "https://api.sonor.io";
+  const defaultApiUrl = isDev && process.env?.SONOR_API_URL ? process.env.SONOR_API_URL : "https://api.sonor.io";
   const defaultSignalUrl = isDev && (process.env?.SONOR_SIGNAL_URL || process.env?.NEXT_PUBLIC_SIGNAL_API_URL) ? process.env.SONOR_SIGNAL_URL || process.env.NEXT_PUBLIC_SIGNAL_API_URL : "https://signal.sonor.io";
   const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || defaultApiUrl : defaultApiUrl;
   const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
@@ -54,6 +55,21 @@ function isLightColor(hex) {
   const b = num & 255;
   return (r * 299 + g * 587 + b * 114) / 1e3 > 160;
 }
+function resolveColor(cssVar, apiFallback, hardDefault) {
+  if (typeof window !== "undefined") {
+    const cssValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+    if (cssValue) return cssValue;
+  }
+  return apiFallback || hardDefault;
+}
+function hexToRgbString(hex, fallback = "59, 130, 246") {
+  const match = hex.replace("#", "").match(/^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+  if (!match) return fallback;
+  return `${parseInt(match[1], 16)}, ${parseInt(match[2], 16)}, ${parseInt(match[3], 16)}`;
+}
+function hexAlpha(rgbVar, alpha, fallbackRgb = "59, 130, 246") {
+  return `rgba(var(${rgbVar}, ${fallbackRgb}), ${alpha})`;
+}
 function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, signalUrl: propSignalUrl, suggested_questions: propSuggestedQuestions, assistant_name: propAssistantName, welcome_message: propWelcomeMessage, assistant_avatar: propAssistantAvatar }) {
   const [resolvedProjectId, setResolvedProjectId] = useState(propProjectId || null);
   const projectId = propProjectId || resolvedProjectId || "";
@@ -94,7 +110,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const socketRef = useRef(null);
   const pollingIntervalRef = useRef(null);
   const position = config?.position || widgetConfig?.position || "bottom-right";
-  const primaryColor = widgetConfig?.brand_primary || config?.buttonColor || "#00afab";
+  const primaryColor = resolveColor("--sk-primary", widgetConfig?.brand_primary || config?.buttonColor, "#3b82f6");
+  const primaryRgb = hexToRgbString(primaryColor);
   const businessName = propAssistantName || widgetConfig?.project_name || widgetConfig?.business_info?.name || "Chat with us";
   const logoUrl = propAssistantAvatar || widgetConfig?.logo_url || null;
   const welcomeEnabled = widgetConfig?.welcome_screen_enabled !== false;
@@ -757,7 +774,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (checkingAvailability) return { dot: "#f59e0b", text: "Checking for a team member..." };
     if (widgetConfig?.signal_enabled) return { dot: null, text: "Echo Intelligent Site Assistant" };
     if (availability && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
-    return { dot: "#9ca3af", text: "We'll respond soon" };
+    return { dot: "var(--sk-text-tertiary, #9ca3af)", text: "We'll respond soon" };
   })();
   const ChatButton = /* @__PURE__ */ jsx(
     "button",
@@ -839,7 +856,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     }
   );
   const WelcomeScreen = /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", padding: 20, gap: 16 }, children: [
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", paddingTop: 8 }, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 15, color: "#374151", lineHeight: 1.5 }, children: welcomeMessage }) }),
+    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", paddingTop: 8 }, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 15, color: "var(--sk-text-primary, #374151)", lineHeight: 1.5 }, children: welcomeMessage }) }),
     quickActions.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: quickActions.map((action, i) => /* @__PURE__ */ jsx(
       "button",
       {
@@ -848,8 +865,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         style: {
           padding: "12px 16px",
           borderRadius: 12,
-          border: `1px solid ${primaryColor}33`,
-          backgroundColor: `${primaryColor}08`,
+          border: `1px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}`,
+          backgroundColor: hexAlpha("--sk-primary-rgb", 0.031, primaryRgb),
           color: primaryColor,
           fontSize: 14,
           cursor: "pointer",
@@ -858,12 +875,12 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           lineHeight: 1.4
         },
         onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = `${primaryColor}15`;
-          e.currentTarget.style.borderColor = `${primaryColor}55`;
+          e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.082, primaryRgb);
+          e.currentTarget.style.borderColor = hexAlpha("--sk-primary-rgb", 0.333, primaryRgb);
         },
         onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = `${primaryColor}08`;
-          e.currentTarget.style.borderColor = `${primaryColor}33`;
+          e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.031, primaryRgb);
+          e.currentTarget.style.borderColor = hexAlpha("--sk-primary-rgb", 0.2, primaryRgb);
         },
         children: action
       },
@@ -888,18 +905,18 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         children: "Start a conversation"
       }
     ),
-    widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "#6b7280" }, children: [
+    widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "var(--sk-text-secondary, #6b7280)" }, children: [
       "Or call us at",
       " ",
       /* @__PURE__ */ jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: primaryColor, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
     ] })
   ] });
   const OfflineFormView = /* @__PURE__ */ jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
-    /* @__PURE__ */ jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: `${primaryColor}15`, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
-    /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "#111827" }, children: "Message Sent!" }),
-    /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#6b7280", fontSize: 14 }, children: offlineSubheading })
+    /* @__PURE__ */ jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb), display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "var(--sk-text-primary, #111827)" }, children: "Message Sent!" }),
+    /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading })
   ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleOfflineSubmit, children: [
-    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 16px", color: "#6b7280", fontSize: 14 }, children: offlineSubheading }),
+    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 16px", color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading }),
     [
       { name: "name", type: "text", placeholder: "Your name *", required: true },
       { name: "email", type: "email", placeholder: "Your email *", required: true },
@@ -912,9 +929,9 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         value: offlineForm[field.name],
         onChange: (e) => setOfflineForm((prev) => ({ ...prev, [field.name]: e.target.value })),
         required: field.required,
-        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid #e5e7eb", fontSize: 14, outline: "none", boxSizing: "border-box" },
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 14, outline: "none", boxSizing: "border-box" },
         onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-        onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+        onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
       }
     ) }, field.name)),
     /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(
@@ -925,12 +942,12 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         onChange: (e) => setOfflineForm((prev) => ({ ...prev, message: e.target.value })),
         required: true,
         rows: 4,
-        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid #e5e7eb", fontSize: 14, outline: "none", resize: "vertical", boxSizing: "border-box" },
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 14, outline: "none", resize: "vertical", boxSizing: "border-box" },
         onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-        onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+        onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
       }
     ) }),
-    offlineError && /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px", borderRadius: 8, backgroundColor: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13, marginBottom: 12 }, children: offlineError }),
+    offlineError && /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px", borderRadius: 8, backgroundColor: "var(--sk-error-bg, #fef2f2)", border: "1px solid var(--sk-error, #fecaca)", color: "var(--sk-error, #dc2626)", fontSize: 13, marginBottom: 12 }, children: offlineError }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -961,7 +978,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             position: "absolute",
             inset: 0,
             borderRadius: "50%",
-            backgroundColor: `${primaryColor}15`,
+            backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb),
             animation: "checkPulse 2s infinite ease-out"
           }
         }
@@ -973,7 +990,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             position: "absolute",
             inset: 8,
             borderRadius: "50%",
-            backgroundColor: `${primaryColor}25`,
+            backgroundColor: hexAlpha("--sk-primary-rgb", 0.145, primaryRgb),
             animation: "checkPulse 2s infinite ease-out 0.4s"
           }
         }
@@ -1000,13 +1017,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#111827", marginBottom: 6 }, children: checkingHandoff ? "Looking for online support" : "Checking for a team member" }),
-      /* @__PURE__ */ jsxs("div", { style: { fontSize: 14, color: "#6b7280", lineHeight: 1.5 }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "var(--sk-text-primary, #111827)", marginBottom: 6 }, children: checkingHandoff ? "Looking for online support" : "Checking for a team member" }),
+      /* @__PURE__ */ jsxs("div", { style: { fontSize: 14, color: "var(--sk-text-secondary, #6b7280)", lineHeight: 1.5 }, children: [
         "One moment please",
         /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", width: 20 }, children: /* @__PURE__ */ jsx("span", { style: { animation: "checkDots 1.5s infinite steps(4, end)" }, children: "..." }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { width: "80%", height: 3, backgroundColor: "#e5e7eb", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { width: "80%", height: 3, backgroundColor: "var(--sk-border, #e5e7eb)", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -1019,13 +1036,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         }
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#9ca3af" }, children: "This usually takes just a few seconds" })
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "This usually takes just a few seconds" })
   ] });
   const MessagesView = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "#f9fafb" },
+        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "var(--sk-bg-elevated, #f9fafb)" },
         children: [
           messages.map((message) => {
             const isAssistant = message.role === "assistant" || message.role === "agent";
@@ -1036,8 +1053,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                   maxWidth: "80%",
                   padding: message.role === "system" ? "8px 12px" : isAssistant ? "12px 16px" : "10px 14px",
                   borderRadius: message.role === "user" ? "16px 16px 4px 16px" : message.role === "system" ? "8px" : "16px 16px 16px 4px",
-                  backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "#e5e7eb" : "#ffffff",
-                  color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "#6b7280" : "#111827",
+                  backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "var(--sk-border, #e5e7eb)" : "var(--sk-bg, #ffffff)",
+                  color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
                   boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.08)",
                   fontSize: message.role === "system" ? 13 : 14,
                   fontStyle: message.role === "system" ? "italic" : "normal",
@@ -1045,7 +1062,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                   whiteSpace: isAssistant ? "normal" : "pre-wrap",
                   wordBreak: "break-word",
                   textAlign: isAssistant ? "left" : void 0,
-                  borderLeft: isAssistant ? `3px solid ${primaryColor}33` : void 0
+                  borderLeft: isAssistant ? `3px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}` : void 0
                 },
                 children: [
                   message.agentName && message.role === "agent" && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
@@ -1072,21 +1089,21 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                               marginRight: 6,
                               padding: "8px 14px",
                               borderRadius: 8,
-                              backgroundColor: `${primaryColor}15`,
+                              backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb),
                               color: primaryColor,
                               fontWeight: 600,
                               fontSize: 13,
                               textDecoration: "none",
-                              border: `1px solid ${primaryColor}40`,
+                              border: `1px solid ${hexAlpha("--sk-primary-rgb", 0.25, primaryRgb)}`,
                               boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
                               transition: "background-color 0.15s, transform 0.1s"
                             },
                             onMouseOver: (e) => {
-                              e.currentTarget.style.backgroundColor = `${primaryColor}25`;
+                              e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.145, primaryRgb);
                               e.currentTarget.style.transform = "translateY(-1px)";
                             },
                             onMouseOut: (e) => {
-                              e.currentTarget.style.backgroundColor = `${primaryColor}15`;
+                              e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.082, primaryRgb);
                               e.currentTarget.style.transform = "translateY(0)";
                             },
                             children
@@ -1118,7 +1135,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                         padding: "6px 12px",
                         borderRadius: 16,
                         border: `1px solid ${primaryColor}`,
-                        backgroundColor: `${primaryColor}10`,
+                        backgroundColor: hexAlpha("--sk-primary-rgb", 0.063, primaryRgb),
                         color: primaryColor,
                         fontSize: 13,
                         cursor: "pointer"
@@ -1132,7 +1149,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                     {
                       type: "button",
                       onClick: retryFailedSend,
-                      style: { padding: "6px 12px", borderRadius: 6, border: "1px solid #ef4444", backgroundColor: "#fef2f2", color: "#dc2626", fontSize: 13, cursor: "pointer" },
+                      style: { padding: "6px 12px", borderRadius: 6, border: "1px solid var(--sk-error, #ef4444)", backgroundColor: "var(--sk-error-bg, #fef2f2)", color: "var(--sk-error, #dc2626)", fontSize: 13, cursor: "pointer" },
                       children: "Retry send"
                     }
                   ) }),
@@ -1164,11 +1181,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               style: {
                 padding: "10px 14px",
                 borderRadius: "16px 16px 16px 4px",
-                backgroundColor: "#ffffff",
+                backgroundColor: "var(--sk-bg, #ffffff)",
                 boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
                 display: "flex",
                 gap: 4,
-                color: "#9ca3af"
+                color: "var(--sk-text-tertiary, #9ca3af)"
               },
               children: [
                 /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
@@ -1181,11 +1198,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         ]
       }
     ),
-    lastFailedSend && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", backgroundColor: "#fef2f2", borderTop: "1px solid #fecaca", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#dc2626" }, children: "Failed to send" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid #dc2626", background: "#fff", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: "Retry" })
+    lastFailedSend && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", backgroundColor: "var(--sk-error-bg, #fef2f2)", borderTop: "1px solid var(--sk-error, #fecaca)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--sk-error, #dc2626)" }, children: "Failed to send" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--sk-error, #dc2626)", background: "var(--sk-bg, #fff)", color: "var(--sk-error, #dc2626)", fontSize: 12, cursor: "pointer" }, children: "Retry" })
     ] }),
-    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid #e5e7eb", backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid var(--sk-border, #e5e7eb)", backgroundColor: "var(--sk-bg, #ffffff)" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -1203,13 +1220,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             flex: 1,
             padding: "10px 14px",
             borderRadius: 24,
-            border: "1px solid #e5e7eb",
+            border: "1px solid var(--sk-border, #e5e7eb)",
             fontSize: 14,
             outline: "none",
             transition: "border-color 0.2s"
           },
           onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-          onBlur: (e) => e.currentTarget.style.borderColor = "#e5e7eb"
+          onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1222,7 +1239,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             height: 40,
             borderRadius: "50%",
             border: "none",
-            backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? primaryColor : "#e5e7eb",
+            backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? primaryColor : "var(--sk-border, #e5e7eb)",
             color: (inputValue.trim() || pendingFiles.length) && !isLoading && isLightColor(primaryColor) ? "#1a1a1a" : "white",
             cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
             display: "flex",
@@ -1247,7 +1264,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         maxWidth: "calc(100vw - 40px)",
         height: 520,
         maxHeight: "calc(100vh - 120px)",
-        backgroundColor: "#ffffff",
+        backgroundColor: "var(--sk-bg, #ffffff)",
         borderRadius: 16,
         boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
         display: "flex",
@@ -1259,10 +1276,10 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       children: [
         Header,
         checkingAvailability || checkingHandoff ? CheckingScreen : showOfflineForm ? OfflineFormView : showWelcome && welcomeEnabled && messages.length === 0 ? WelcomeScreen : MessagesView,
-        showPoweredBy && /* @__PURE__ */ jsxs("div", { style: { padding: "6px 0", textAlign: "center", fontSize: 11, color: "#9ca3af", backgroundColor: "#ffffff", borderTop: "1px solid #f3f4f6" }, children: [
+        showPoweredBy && /* @__PURE__ */ jsxs("div", { style: { padding: "6px 0", textAlign: "center", fontSize: 11, color: "var(--sk-text-tertiary, #9ca3af)", backgroundColor: "var(--sk-bg, #ffffff)", borderTop: "1px solid var(--sk-bg-elevated, #f3f4f6)" }, children: [
           "Powered by",
           " ",
-          /* @__PURE__ */ jsx("a", { href: "https://sonor.io", target: "_blank", rel: "noopener noreferrer", style: { color: "#6b7280", textDecoration: "none", fontWeight: 500 }, children: "Sonor" })
+          /* @__PURE__ */ jsx("a", { href: "https://sonor.io", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--sk-text-secondary, #6b7280)", textDecoration: "none", fontWeight: 500 }, children: "Sonor" })
         ] }),
         /* @__PURE__ */ jsx("style", { children: `
         @keyframes chatSlideUp {
@@ -1482,7 +1499,7 @@ function NodeRenderer({ node, onClose, onAction, context }) {
         }
       );
     case "Divider":
-      return /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: "1px solid #e5e7eb", ...computedStyle } });
+      return /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: "1px solid var(--sk-border, #e5e7eb)", ...computedStyle } });
     case "Spacer":
       return /* @__PURE__ */ jsx("div", { style: { ...computedStyle, width: props.width, height: props.height } });
     case "Icon":
@@ -1494,7 +1511,7 @@ function NodeRenderer({ node, onClose, onAction, context }) {
           style: computedStyle,
           "data-engage-form": props.form_id,
           ...eventHandlers,
-          children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", background: "#f5f5f5", borderRadius: "8px", textAlign: "center" }, children: [
+          children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", background: "var(--sk-bg-elevated, #f5f5f5)", borderRadius: "8px", textAlign: "center" }, children: [
             "Form: ",
             props.form_id || "Not configured"
           ] })
@@ -1559,7 +1576,7 @@ function DesignRenderer({
 }
 function getApiConfig2() {
   const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
-  const defaultApiUrl = isDev && (process.env?.SONOR_API_URL || process.env?.NEXT_PUBLIC_UPTRADE_API_URL) ? process.env.SONOR_API_URL || process.env.NEXT_PUBLIC_UPTRADE_API_URL : "https://api.sonor.io";
+  const defaultApiUrl = isDev && process.env?.SONOR_API_URL ? process.env.SONOR_API_URL : "https://api.sonor.io";
   const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || defaultApiUrl : defaultApiUrl;
   const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
   return { apiUrl, apiKey };
@@ -1587,11 +1604,11 @@ function EngageWidget({
         if (debug) console.warn("[Engage] No API key configured");
         return;
       }
-      let visitorId = typeof localStorage !== "undefined" ? localStorage.getItem("_uptrade_vid") : null;
+      let visitorId = typeof localStorage !== "undefined" ? localStorage.getItem("_sk_vid") : null;
       if (!visitorId) {
         visitorId = crypto.randomUUID();
-        if (typeof localStorage !== "undefined") localStorage.setItem("_uptrade_vid", visitorId);
       }
+      if (typeof localStorage !== "undefined") localStorage.setItem("_sk_vid", visitorId);
       const url = typeof window !== "undefined" ? window.location.href : "";
       try {
         const response = await fetch(
@@ -1692,39 +1709,43 @@ function EngageWidget({
       }
     }
   }, [elements]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    activeElements.map((elementId) => {
-      const element = elements.find((e) => e.id === elementId);
-      if (!element) return null;
-      const { apiUrl: globalApiUrl, apiKey: globalApiKey } = getApiConfig2();
-      return /* @__PURE__ */ jsx(
-        EngageElementRenderer,
+  if (typeof document === "undefined") return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      activeElements.map((elementId) => {
+        const element = elements.find((e) => e.id === elementId);
+        if (!element) return null;
+        const { apiUrl: globalApiUrl, apiKey: globalApiKey } = getApiConfig2();
+        return /* @__PURE__ */ jsx(
+          EngageElementRenderer,
+          {
+            element,
+            onDismiss: () => handleDismiss(element.id),
+            zIndex,
+            apiUrl: propApiUrl || globalApiUrl,
+            apiKey: propApiKey || globalApiKey
+          },
+          element.id
+        );
+      }),
+      chatEnabled && chatReady && /* @__PURE__ */ jsx(
+        ChatWidget,
         {
-          element,
-          onDismiss: () => handleDismiss(element.id),
-          zIndex,
-          apiUrl: propApiUrl || globalApiUrl,
-          apiKey: propApiKey || globalApiKey
-        },
-        element.id
-      );
-    }),
-    chatEnabled && chatReady && /* @__PURE__ */ jsx(
-      ChatWidget,
-      {
-        projectId: propProjectId ?? void 0,
-        config: {
-          position,
-          buttonColor: "#00afab"
-          // Default teal, can be customized later
+          projectId: propProjectId ?? void 0,
+          config: {
+            position,
+            buttonColor: "#3b82f6"
+            // Default blue, overridden by --sk-primary CSS var or API brand_primary
+          }
         }
-      }
-    )
-  ] });
+      )
+    ] }),
+    document.body
+  );
 }
 function trackEngageEvent(apiUrl, apiKey, endpoint, data) {
   if (!apiKey) return;
-  const visitorId = typeof localStorage !== "undefined" ? localStorage.getItem("_uptrade_vid") : null;
+  const visitorId = typeof localStorage !== "undefined" ? localStorage.getItem("_sk_vid") : null;
   fetch(`${apiUrl.replace(/\/$/, "")}/engage/widget/${endpoint}`, {
     method: "POST",
     headers: { "Content-Type": "application/json", "x-api-key": apiKey },
@@ -1908,7 +1929,7 @@ function EngageElementRenderer({
           "div",
           {
             style: {
-              backgroundColor: "white",
+              backgroundColor: "var(--sk-bg, #ffffff)",
               padding: 24,
               borderRadius: 8,
               maxWidth: 500,
@@ -1949,8 +1970,8 @@ function EngageElementRenderer({
           top: 0,
           left: 0,
           right: 0,
-          backgroundColor: element.config?.backgroundColor || "#3b82f6",
-          color: element.config?.textColor || "white",
+          backgroundColor: element.config?.backgroundColor || "var(--sk-primary, #3b82f6)",
+          color: element.config?.textColor || "var(--sk-bg, #ffffff)",
           padding: "12px 24px",
           display: "flex",
           alignItems: "center",
@@ -1995,5 +2016,5 @@ function getDeviceType() {
 }
 
 export { ChatWidget, DesignRenderer, EngageWidget };
-//# sourceMappingURL=chunk-VZMRZQ2D.mjs.map
-//# sourceMappingURL=chunk-VZMRZQ2D.mjs.map
+//# sourceMappingURL=chunk-MSRLAD7F.mjs.map
+//# sourceMappingURL=chunk-MSRLAD7F.mjs.map