@sonordev/site-kit 6.1.1 → 6.1.3

package/dist/{chunk-3SHAY7PK.mjs → chunk-PTQHPWEK.mjs}

@@ -1,12 +1,65 @@
 'use client';
 import { chatLauncherStyles } from './chunk-4U5NCKQY.mjs';
 import { GlassStyles } from './chunk-OBKS3CPP.mjs';
-import { useForm } from './chunk-YZMI7QQ2.mjs';
-import { sonorFetch } from './chunk-6ZMEJSNX.mjs';
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useForm } from './chunk-6FIIA6ME.mjs';
+import { parseColor, relativeLuminance, DARK_LUMINANCE, contrastRatio } from './chunk-NYXENHD2.mjs';
+import { sonorFetch } from './chunk-CI7T4ZRP.mjs';
+import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/engage/brand-color.ts
+var TEXT_CONTRAST = 4.5;
+var RESTING_TINT = 0.082;
+var UNREADABLE_BRAND_SHARE = 40;
+var WHITE = { r: 255, g: 255, b: 255 };
+var BLACK = { r: 0, g: 0, b: 0 };
+function mix(a, b, share) {
+  return {
+    r: a.r * share + b.r * (1 - share),
+    g: a.g * share + b.g * (1 - share),
+    b: a.b * share + b.b * (1 - share)
+  };
+}
+function round({ r, g, b }) {
+  const c = (v) => Math.round(Math.min(255, Math.max(0, v)));
+  return { r: c(r), g: c(g), b: c(b) };
+}
+function toHex(rgb) {
+  const { r, g, b } = round(rgb);
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+function isLightColor(color) {
+  const rgb = parseColor(color);
+  if (!rgb) return false;
+  return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3 > 160;
+}
+function onBrandColor(brand) {
+  return isLightColor(brand) ? "#1a1a1a" : "white";
+}
+function rgbTriplet(color, fallback = "37, 99, 235") {
+  const rgb = parseColor(color);
+  if (!rgb) return fallback;
+  const { r, g, b } = round(rgb);
+  return `${r}, ${g}, ${b}`;
+}
+function brandTextColor(brand, panelTint) {
+  const tint = panelTint && parseColor(panelTint) || WHITE;
+  const pole = relativeLuminance(tint) < DARK_LUMINANCE ? WHITE : BLACK;
+  const rgb = parseColor(brand);
+  if (!rgb) return `color-mix(in srgb, ${brand} ${UNREADABLE_BRAND_SHARE}%, ${toHex(pole)})`;
+  const surface = relativeLuminance(mix(rgb, tint, RESTING_TINT));
+  const reads = (c) => contrastRatio(relativeLuminance(c), surface) >= TEXT_CONTRAST;
+  if (reads(rgb)) return brand;
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 12; i++) {
+    const share = (lo + hi) / 2;
+    if (reads(round(mix(rgb, pole, share)))) lo = share;
+    else hi = share;
+  }
+  return toHex(mix(rgb, pole, lo));
+}
 function alpha(rgb, a) {
   return `rgba(var(--sk-primary-rgb, ${rgb}), ${a})`;
 }
@@ -192,7 +245,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
               borderRadius: 8,
               border: "none",
               backgroundColor: primaryColor,
-              color: "#fff",
+              color: onBrandColor(primaryColor),
               fontSize: 13.5,
               fontWeight: 600,
               cursor: isSubmitting ? "default" : "pointer",
@@ -205,7 +258,7 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     }
   );
 }
-function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSuggest }) {
+function SuggestActionChip({ action, message, primaryColor, primaryRgb, brandText, onSuggest }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -216,7 +269,7 @@ function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSugges
         borderRadius: 16,
         border: `1px solid ${primaryColor}`,
         backgroundColor: alpha(primaryRgb, 0.063),
-        color: primaryColor,
+        color: brandText,
         fontSize: 13,
         cursor: "pointer"
       },
@@ -224,7 +277,7 @@ function SuggestActionChip({ action, message, primaryColor, primaryRgb, onSugges
     }
   );
 }
-function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
+function EchoUiActions({ actions, primaryColor, primaryRgb, brandText, onSuggest }) {
   if (!actions?.length) return null;
   const chips = actions.filter((a) => a?.type === "suggest_action");
   const forms = actions.filter((a) => a?.type === "show_form");
@@ -256,6 +309,7 @@ function EchoUiActions({ actions, primaryColor, primaryRgb, onSuggest }) {
           message: label,
           primaryColor,
           primaryRgb,
+          brandText,
           onSuggest
         },
         `chip-${i}`
@@ -309,21 +363,9 @@ var ECHO_CSS = `
   [data-sk-echo-panel] { animation: none !important; }
 }
 `;
-function isLightColor(hex) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = num >> 16;
-  const g = num >> 8 & 255;
-  const b = num & 255;
-  return (r * 299 + g * 587 + b * 114) / 1e3 > 160;
-}
 function staticPrimaryColor(apiFallback, hardDefault) {
   return apiFallback || hardDefault;
 }
-function hexToRgbString(hex, fallback = "37, 99, 235") {
-  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, alpha2, fallbackRgb = "37, 99, 235") {
   return `rgba(var(${rgbVar}, ${fallbackRgb}), ${alpha2})`;
 }
@@ -376,11 +418,19 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const primaryFallback = staticPrimaryColor(widgetConfig?.brand_primary || config?.buttonColor, "#2563eb");
   const [primaryFromCssVar, setPrimaryFromCssVar] = useState(null);
   const primaryColor = primaryFromCssVar ?? primaryFallback;
-  const primaryRgb = hexToRgbString(primaryColor);
+  const primaryRgb = rgbTriplet(primaryColor);
   useEffect(() => {
     const cssValue = getComputedStyle(document.documentElement).getPropertyValue("--sk-primary").trim();
     setPrimaryFromCssVar(cssValue || null);
   }, []);
+  const onBrand = onBrandColor(primaryColor);
+  const panelRef = useRef(null);
+  const [panelTint, setPanelTint] = useState(null);
+  useLayoutEffect(() => {
+    if (!isOpen || !panelRef.current) return;
+    setPanelTint(getComputedStyle(panelRef.current).getPropertyValue("--sk-glass-t").trim() || null);
+  }, [isOpen]);
+  const brandText = brandTextColor(primaryColor, panelTint);
   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;
@@ -1066,7 +1116,6 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     if (availability && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
     return { dot: "var(--sk-text-tertiary, #9ca3af)", text: "We'll respond soon" };
   })();
-  const launcherIcon = isLightColor(primaryColor) ? "#1a1a1a" : "white";
   const ChatButton = /* @__PURE__ */ jsx(
     "button",
     {
@@ -1095,10 +1144,10 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       onMouseLeave: (e) => {
         e.currentTarget.style.transform = "scale(1)";
       },
-      children: isOpen ? /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      children: isOpen ? /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) : /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: launcherIcon, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+      ] }) : /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
     }
   );
   const Header = /* @__PURE__ */ jsxs(
@@ -1122,7 +1171,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               height: 40,
               borderRadius: "50%",
               backgroundColor: primaryColor,
-              color: launcherIcon,
+              color: onBrand,
               boxShadow: "inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12)",
               display: "flex",
               alignItems: "center",
@@ -1159,7 +1208,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           borderRadius: 12,
           border: `1px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}`,
           backgroundColor: hexAlpha("--sk-primary-rgb", 0.031, primaryRgb),
-          color: primaryColor,
+          color: brandText,
           fontSize: 14,
           cursor: "pointer",
           textAlign: "left",
@@ -1188,7 +1237,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           borderRadius: 12,
           border: "none",
           backgroundColor: primaryColor,
-          color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+          color: onBrand,
           fontSize: 14,
           fontWeight: 600,
           cursor: "pointer",
@@ -1200,11 +1249,11 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     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 })
+      /* @__PURE__ */ jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: brandText, 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: 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("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: brandText, 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: [
@@ -1251,7 +1300,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           borderRadius: 8,
           border: "none",
           backgroundColor: primaryColor,
-          color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+          color: onBrand,
           fontSize: 14,
           fontWeight: 600,
           cursor: isLoading ? "wait" : "pointer",
@@ -1299,7 +1348,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: isLightColor(primaryColor) ? "#1a1a1a" : "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
             /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
             /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
             /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
@@ -1348,7 +1397,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                   // Bubbles on glass stay near-opaque: the glass behind them
                   // is for depth, never for the text to read against.
                   backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "color-mix(in srgb, var(--sk-text-primary, #111827) 7%, transparent)" : BUBBLE_BG,
-                  color: message.role === "user" ? isLightColor(primaryColor) ? "#1a1a1a" : "white" : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
+                  color: message.role === "user" ? onBrand : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
                   border: message.role === "user" || message.role === "system" ? "none" : HAIRLINE,
                   boxShadow: message.role === "system" ? "none" : message.role === "user" ? "inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent), 0 1px 2px rgba(0,0,0,0.10)" : "0 1px 2px rgba(0,0,0,0.06)",
                   fontSize: message.role === "system" ? 13 : 14,
@@ -1384,7 +1433,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                               padding: "8px 14px",
                               borderRadius: 8,
                               backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb),
-                              color: primaryColor,
+                              color: brandText,
                               fontWeight: 600,
                               fontSize: 13,
                               textDecoration: "none",
@@ -1430,7 +1479,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                         borderRadius: 16,
                         border: `1px solid ${primaryColor}`,
                         backgroundColor: hexAlpha("--sk-primary-rgb", 0.063, primaryRgb),
-                        color: primaryColor,
+                        color: brandText,
                         fontSize: 13,
                         cursor: "pointer"
                       },
@@ -1444,6 +1493,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                       actions: message.uiActions,
                       primaryColor,
                       primaryRgb,
+                      brandText,
                       onSuggest: handleSuggestAction
                     }
                   ) : null,
@@ -1467,7 +1517,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                         borderRadius: 6,
                         border: `1px solid ${primaryColor}`,
                         backgroundColor: "transparent",
-                        color: primaryColor,
+                        color: brandText,
                         fontSize: 13,
                         cursor: "pointer"
                       },
@@ -1549,7 +1599,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             borderRadius: "50%",
             border: "none",
             backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? primaryColor : "var(--sk-border, #e5e7eb)",
-            color: (inputValue.trim() || pendingFiles.length) && !isLoading && isLightColor(primaryColor) ? "#1a1a1a" : "white",
+            color: (inputValue.trim() || pendingFiles.length) && !isLoading ? onBrand : "white",
             cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
             display: "flex",
             alignItems: "center",
@@ -1565,6 +1615,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const ChatPopup = isOpen && /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: panelRef,
       "data-sk-echo-panel": true,
       className: "sk-glass sk-glass--panel",
       style: {
@@ -1628,5 +1679,5 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
 }
 
 export { ChatWidget };
-//# sourceMappingURL=chunk-3SHAY7PK.mjs.map
-//# sourceMappingURL=chunk-3SHAY7PK.mjs.map
+//# sourceMappingURL=chunk-PTQHPWEK.mjs.map
+//# sourceMappingURL=chunk-PTQHPWEK.mjs.map