@sonordev/site-kit 6.0.0 → 6.1.0

package/dist/{chunk-XKXZ4OW4.mjs → chunk-4EJI4IOX.mjs}

@@ -1,7 +1,8 @@
 'use client';
 import { chatLauncherStyles } from './chunk-4U5NCKQY.mjs';
-import { useForm } from './chunk-HOOVYWTO.mjs';
-import { sonorFetch } from './chunk-2YSB4FIC.mjs';
+import { GlassStyles } from './chunk-OBKS3CPP.mjs';
+import { useForm } from './chunk-YP5WAFTI.mjs';
+import { sonorFetch } from './chunk-RGCUND5Q.mjs';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -60,7 +61,9 @@ function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
     borderColor: "var(--sk-border, #e5e7eb)",
     backgroundColor: "var(--sk-bg, #ffffff)",
     color: "var(--sk-text-primary, #111827)",
-    fontSize: 13.5,
+    // 16px, not smaller: iOS Safari zooms the whole page into any focused
+    // field under 16px, which throws the visitor out of the chat window.
+    fontSize: 16,
     boxSizing: "border-box",
     outline: "none"
   };
@@ -295,13 +298,8 @@ function userRequestedHandoff(text) {
   ];
   return patterns.some((p) => p.test(lower));
 }
-function adjustColor(hex, amount) {
-  const num = parseInt(hex.replace("#", ""), 16);
-  const r = Math.min(255, Math.max(0, (num >> 16) + amount));
-  const g = Math.min(255, Math.max(0, (num >> 8 & 255) + amount));
-  const b = Math.min(255, Math.max(0, (num & 255) + amount));
-  return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
-}
+var BUBBLE_BG = "color-mix(in srgb, var(--sk-bg, #ffffff) 94%, transparent)";
+var HAIRLINE = "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 9%, transparent)";
 function isLightColor(hex) {
   const num = parseInt(hex.replace("#", ""), 16);
   const r = num >> 16;
@@ -1059,11 +1057,13 @@ 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",
     {
       type: "button",
       "data-sk-echo-launcher": true,
+      className: "sk-glass sk-glass--brand",
       onClick: handleToggle,
       "aria-label": isOpen ? "Close chat" : "Open chat",
       style: {
@@ -1072,37 +1072,34 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         width: "60px",
         height: "60px",
         borderRadius: "50%",
-        backgroundColor: primaryColor,
-        border: "none",
+        ["--sk-glass-brand"]: primaryColor,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         cursor: "pointer",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)",
-        transition: "transform 0.2s, box-shadow 0.2s",
+        transition: "transform 0.2s, bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1)",
         zIndex: placement.zIndex.launcher
       },
       onMouseEnter: (e) => {
         e.currentTarget.style.transform = "scale(1.05)";
-        e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.3)";
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.transform = "scale(1)";
-        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.25)";
       },
-      children: isOpen ? /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      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: [
         /* @__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: "white", 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: 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" }) })
     }
   );
   const Header = /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
-        padding: "16px 20px",
-        background: `linear-gradient(135deg, ${primaryColor}, ${adjustColor(primaryColor, -25)})`,
-        color: isLightColor(primaryColor) ? "#1a1a1a" : "white",
+        padding: "16px 18px 14px",
+        background: `linear-gradient(180deg, color-mix(in srgb, ${primaryColor} 16%, transparent), transparent)`,
+        borderBottom: "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 8%, transparent)",
+        color: "var(--sk-text-primary, #111827)",
         display: "flex",
         alignItems: "center",
         gap: 12
@@ -1115,7 +1112,9 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
               width: 40,
               height: 40,
               borderRadius: "50%",
-              backgroundColor: "rgba(255,255,255,0.2)",
+              backgroundColor: primaryColor,
+              color: launcherIcon,
+              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",
               justifyContent: "center",
@@ -1127,12 +1126,12 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
         ),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
           /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 16, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: showOfflineForm ? offlineHeading : businessName }),
-          statusLabel && /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, opacity: 0.9, display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
+          statusLabel && /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, color: "var(--sk-text-secondary, #6b7280)", display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
             statusLabel.dot && /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", backgroundColor: statusLabel.dot, flexShrink: 0 } }),
             statusLabel.text
           ] })
         ] }),
-        connectionStatus === "connecting" && !showWelcome && !showOfflineForm && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, opacity: 0.7, display: "flex", alignItems: "center", gap: 4 }, children: [
+        connectionStatus === "connecting" && !showWelcome && !showOfflineForm && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "var(--sk-text-secondary, #6b7280)", display: "flex", alignItems: "center", gap: 4 }, children: [
           /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1s infinite ease-in-out" }, children: "\u25CF" }),
           "Connecting"
         ] })
@@ -1213,7 +1212,7 @@ 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 var(--sk-border, #e5e7eb)", fontSize: 14, outline: "none", boxSizing: "border-box" },
+        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 16, outline: "none", boxSizing: "border-box" },
         onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
         onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
       }
@@ -1226,7 +1225,7 @@ 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 var(--sk-border, #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: 16, outline: "none", resize: "vertical", boxSizing: "border-box" },
         onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
         onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
       }
@@ -1326,7 +1325,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     /* @__PURE__ */ jsxs(
       "div",
       {
-        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "var(--sk-bg-elevated, #f9fafb)" },
+        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "transparent" },
         children: [
           messages.map((message) => {
             const isAssistant = message.role === "assistant" || message.role === "agent";
@@ -1336,17 +1335,19 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
                 style: {
                   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" ? "var(--sk-border, #e5e7eb)" : "var(--sk-bg, #ffffff)",
+                  borderRadius: message.role === "user" ? "18px 18px 6px 18px" : message.role === "system" ? "10px" : "18px 18px 18px 6px",
+                  // 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)",
-                  boxShadow: message.role === "system" ? "none" : "0 1px 2px rgba(0,0,0,0.08)",
+                  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,
                   fontStyle: message.role === "system" ? "italic" : "normal",
                   lineHeight: isAssistant ? 1.6 : 1.5,
                   whiteSpace: isAssistant ? "normal" : "pre-wrap",
                   wordBreak: "break-word",
-                  textAlign: isAssistant ? "left" : void 0,
-                  borderLeft: isAssistant ? `3px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}` : void 0
+                  textAlign: isAssistant ? "left" : void 0
                 },
                 children: [
                   message.agentName && message.role === "agent" && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
@@ -1473,9 +1474,10 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
             {
               style: {
                 padding: "10px 14px",
-                borderRadius: "16px 16px 16px 4px",
-                backgroundColor: "var(--sk-bg, #ffffff)",
-                boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
+                borderRadius: "18px 18px 18px 6px",
+                backgroundColor: BUBBLE_BG,
+                border: HAIRLINE,
+                boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
                 display: "flex",
                 gap: 4,
                 color: "var(--sk-text-tertiary, #9ca3af)"
@@ -1495,7 +1497,7 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
       /* @__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 var(--sk-border, #e5e7eb)", backgroundColor: "var(--sk-bg, #ffffff)" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, style: { padding: "10px 12px 12px", backgroundColor: "transparent" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -1511,15 +1513,20 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
           disabled: isLoading,
           style: {
             flex: 1,
-            padding: "10px 14px",
+            minWidth: 0,
+            padding: "10px 16px",
             borderRadius: 24,
-            border: "1px solid var(--sk-border, #e5e7eb)",
-            fontSize: 14,
+            border: HAIRLINE,
+            backgroundColor: BUBBLE_BG,
+            color: "var(--sk-text-primary, #111827)",
+            // 16px: iOS Safari zooms the page into any focused field under 16px.
+            fontSize: 16,
             outline: "none",
+            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.04)",
             transition: "border-color 0.2s"
           },
           onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-          onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
+          onBlur: (e) => e.currentTarget.style.borderColor = ""
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1549,33 +1556,38 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
   const ChatPopup = isOpen && /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-sk-echo-panel": true,
+      className: "sk-glass sk-glass--panel",
       style: {
         position: "fixed",
         ...placement.popup,
         width: "380px",
         maxWidth: "calc(100vw - 40px)",
         height: "520px",
-        backgroundColor: "var(--sk-bg, #ffffff)",
-        borderRadius: "16px",
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        color: "var(--sk-text-primary, #111827)",
+        borderRadius: "24px",
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
         zIndex: placement.zIndex.popup,
-        animation: "chatSlideUp 0.3s ease-out"
+        transformOrigin: position === "bottom-left" ? "bottom left" : "bottom right",
+        animation: "chatGlassIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.05)"
       },
       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: "var(--sk-text-tertiary, #9ca3af)", backgroundColor: "var(--sk-bg, #ffffff)", borderTop: "1px solid var(--sk-bg-elevated, #f3f4f6)" }, children: [
+        showPoweredBy && /* @__PURE__ */ jsxs("div", { style: { padding: "0 0 8px", textAlign: "center", fontSize: 11, color: "var(--sk-text-tertiary, #9ca3af)", backgroundColor: "transparent" }, children: [
           "Powered by",
           " ",
           /* @__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 {
-          from { opacity: 0; transform: translateY(20px); }
-          to { opacity: 1; transform: translateY(0); }
+        @keyframes chatGlassIn {
+          from { opacity: 0; transform: translateY(12px) scale(0.94); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          [data-sk-echo-panel] { animation: none !important; }
         }
         @keyframes chatDot {
           0%, 80%, 100% { opacity: 0.3; }
@@ -1602,11 +1614,12 @@ function ChatWidget({ projectId: propProjectId, config, apiUrl: propApiUrl, sign
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GlassStyles, {}),
     ChatPopup,
     ChatButton
   ] });
 }
 
 export { ChatWidget };
-//# sourceMappingURL=chunk-XKXZ4OW4.mjs.map
-//# sourceMappingURL=chunk-XKXZ4OW4.mjs.map
+//# sourceMappingURL=chunk-4EJI4IOX.mjs.map
+//# sourceMappingURL=chunk-4EJI4IOX.mjs.map