@sonordev/site-kit 1.5.4 → 2.0.0

package/dist/{chunk-DK2WNYQA.js → chunk-6ZGM7S5O.js}

@@ -2,6 +2,7 @@
 'use strict';
 
 var React2 = require('react');
+var ReactDOM = require('react-dom');
 var navigation = require('next/navigation');
 var ReactMarkdown = require('react-markdown');
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,12 +10,13 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React2__default = /*#__PURE__*/_interopDefault(React2);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 
 // 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;
@@ -61,6 +63,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] = React2.useState(propProjectId || null);
   const projectId = propProjectId || resolvedProjectId || "";
@@ -101,7 +118,8 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const socketRef = React2.useRef(null);
   const pollingIntervalRef = React2.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;
@@ -764,7 +782,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__ */ jsxRuntime.jsx(
     "button",
@@ -846,7 +864,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     }
   );
   const WelcomeScreen = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", padding: 20, gap: 16 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", paddingTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 15, color: "#374151", lineHeight: 1.5 }, children: welcomeMessage }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", paddingTop: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 15, color: "var(--sk-text-primary, #374151)", lineHeight: 1.5 }, children: welcomeMessage }) }),
     quickActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: quickActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -855,8 +873,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",
@@ -865,12 +883,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
       },
@@ -895,18 +913,18 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         children: "Start a conversation"
       }
     ),
-    widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "#6b7280" }, children: [
+    widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "var(--sk-text-secondary, #6b7280)" }, children: [
       "Or call us at",
       " ",
       /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: primaryColor, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
     ] })
   ] });
   const OfflineFormView = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: `${primaryColor}15`, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "#111827" }, children: "Message Sent!" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "#6b7280", fontSize: 14 }, children: offlineSubheading })
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "var(--sk-text-primary, #111827)" }, children: "Message Sent!" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleOfflineSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 16px", color: "#6b7280", fontSize: 14 }, children: offlineSubheading }),
+    /* @__PURE__ */ jsxRuntime.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 },
@@ -919,9 +937,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__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -932,12 +950,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__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px", borderRadius: 8, backgroundColor: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13, marginBottom: 12 }, children: offlineError }),
+    offlineError && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       "button",
       {
@@ -968,7 +986,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"
           }
         }
@@ -980,7 +998,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"
           }
         }
@@ -1007,13 +1025,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "#111827", marginBottom: 6 }, children: checkingHandoff ? "Looking for online support" : "Checking for a team member" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, color: "#6b7280", lineHeight: 1.5 }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, color: "var(--sk-text-secondary, #6b7280)", lineHeight: 1.5 }, children: [
         "One moment please",
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", width: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { animation: "checkDots 1.5s infinite steps(4, end)" }, children: "..." }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80%", height: 3, backgroundColor: "#e5e7eb", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80%", height: 3, backgroundColor: "var(--sk-border, #e5e7eb)", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -1026,13 +1044,13 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         }
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#9ca3af" }, children: "This usually takes just a few seconds" })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "This usually takes just a few seconds" })
   ] });
   const MessagesView = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.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";
@@ -1043,8 +1061,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",
@@ -1052,7 +1070,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__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
@@ -1079,21 +1097,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
@@ -1125,7 +1143,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"
@@ -1139,7 +1157,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"
                     }
                   ) }),
@@ -1171,11 +1189,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__ */ jsxRuntime.jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
@@ -1188,11 +1206,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         ]
       }
     ),
-    lastFailedSend && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px", backgroundColor: "#fef2f2", borderTop: "1px solid #fecaca", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "#dc2626" }, children: "Failed to send" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "var(--sk-error, #dc2626)" }, children: "Failed to send" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid #e5e7eb", backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, style: { padding: 12, borderTop: "1px solid var(--sk-border, #e5e7eb)", backgroundColor: "var(--sk-bg, #ffffff)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -1210,13 +1228,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__ */ jsxRuntime.jsx(
@@ -1229,7 +1247,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",
@@ -1254,7 +1272,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",
@@ -1266,10 +1284,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__ */ jsxRuntime.jsxs("div", { style: { padding: "6px 0", textAlign: "center", fontSize: 11, color: "#9ca3af", backgroundColor: "#ffffff", borderTop: "1px solid #f3f4f6" }, children: [
+        showPoweredBy && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("a", { href: "https://sonor.io", target: "_blank", rel: "noopener noreferrer", style: { color: "#6b7280", textDecoration: "none", fontWeight: 500 }, children: "Sonor" })
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("style", { children: `
         @keyframes chatSlideUp {
@@ -1489,7 +1507,7 @@ function NodeRenderer({ node, onClose, onAction, context }) {
         }
       );
     case "Divider":
-      return /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #e5e7eb", ...computedStyle } });
+      return /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid var(--sk-border, #e5e7eb)", ...computedStyle } });
     case "Spacer":
       return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...computedStyle, width: props.width, height: props.height } });
     case "Icon":
@@ -1501,7 +1519,7 @@ function NodeRenderer({ node, onClose, onAction, context }) {
           style: computedStyle,
           "data-engage-form": props.form_id,
           ...eventHandlers,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px", background: "#f5f5f5", borderRadius: "8px", textAlign: "center" }, children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px", background: "var(--sk-bg-elevated, #f5f5f5)", borderRadius: "8px", textAlign: "center" }, children: [
             "Form: ",
             props.form_id || "Not configured"
           ] })
@@ -1566,7 +1584,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 };
@@ -1594,11 +1612,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(
@@ -1699,39 +1717,43 @@ function EngageWidget({
       }
     }
   }, [elements]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsx(
-        EngageElementRenderer,
+  if (typeof document === "undefined") return null;
+  return ReactDOM__default.default.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsx(
+          EngageElementRenderer,
+          {
+            element,
+            onDismiss: () => handleDismiss(element.id),
+            zIndex,
+            apiUrl: propApiUrl || globalApiUrl,
+            apiKey: propApiKey || globalApiKey
+          },
+          element.id
+        );
+      }),
+      chatEnabled && chatReady && /* @__PURE__ */ jsxRuntime.jsx(
+        ChatWidget,
         {
-          element,
-          onDismiss: () => handleDismiss(element.id),
-          zIndex,
-          apiUrl: propApiUrl || globalApiUrl,
-          apiKey: propApiKey || globalApiKey
-        },
-        element.id
-      );
-    }),
-    chatEnabled && chatReady && /* @__PURE__ */ jsxRuntime.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 },
@@ -1915,7 +1937,7 @@ function EngageElementRenderer({
           "div",
           {
             style: {
-              backgroundColor: "white",
+              backgroundColor: "var(--sk-bg, #ffffff)",
               padding: 24,
               borderRadius: 8,
               maxWidth: 500,
@@ -1956,8 +1978,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",
@@ -2004,5 +2026,5 @@ function getDeviceType() {
 exports.ChatWidget = ChatWidget;
 exports.DesignRenderer = DesignRenderer;
 exports.EngageWidget = EngageWidget;
-//# sourceMappingURL=chunk-DK2WNYQA.js.map
-//# sourceMappingURL=chunk-DK2WNYQA.js.map
+//# sourceMappingURL=chunk-6ZGM7S5O.js.map
+//# sourceMappingURL=chunk-6ZGM7S5O.js.map