keystone-design-bootstrap 1.0.97 → 1.0.99

package/dist/index.js

@@ -81,6 +81,128 @@ function isValidTheme(theme) {
   return theme in THEME_CONFIG;
 }
 
+// src/tracking/logging.ts
+import { logs } from "@opentelemetry/api-logs";
+import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
+import { resourceFromAttributes } from "@opentelemetry/resources";
+import { BatchLogRecordProcessor, LoggerProvider } from "@opentelemetry/sdk-logs";
+var BUILD_CONSOLE_DISABLED = process.env.NEXT_PUBLIC_LOGGING_DISABLED === "1";
+var BUILD_POSTHOG_DISABLED = process.env.NEXT_PUBLIC_POSTHOG_LOGGING_DISABLED === "1";
+var MAX_PENDING_POSTHOG_LOGS = 500;
+var otelLogger = null;
+var pendingPostHogLogs = [];
+var browserConsole = globalThis == null ? void 0 : globalThis["console"];
+var CHANNEL_COLORS = {
+  // Shared diagnostics
+  "global-client": "#d2a8ff",
+  // Section pins (desktop)
+  "every-channel-pin": "#9febd7",
+  "hero-pin": "#6ecc8b",
+  "pricing-pin": "#399587",
+  "product-screens-pin": "#4fafa0",
+  "social-proof-pin": "#ffbb8a",
+  "value-props-pin": "#e0a733",
+  "work-pin": "#f57e56",
+  // Section pins (mobile)
+  "mobile-every-channel-pin": "#7ed9c6",
+  "mobile-hero-pin": "#f0eee6",
+  "mobile-pricing-pin": "#80d4ff",
+  "mobile-product-screens-pin": "#3a9085",
+  "mobile-social-proof-pin": "#ffd580",
+  "mobile-value-props-pin": "#4fafa0"
+};
+function flattenAttributes(input, prefix = "") {
+  const output = {};
+  for (const [key, value] of Object.entries(input)) {
+    const nextKey = prefix ? `${prefix}.${key}` : key;
+    if (value === null || value === void 0) continue;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      output[nextKey] = value;
+      continue;
+    }
+    if (Array.isArray(value)) {
+      output[nextKey] = JSON.stringify(value);
+      continue;
+    }
+    if (typeof value === "object") {
+      Object.assign(output, flattenAttributes(value, nextKey));
+      continue;
+    }
+    output[nextKey] = String(value);
+  }
+  return output;
+}
+function enqueuePendingPostHogLog(entry) {
+  if (pendingPostHogLogs.length >= MAX_PENDING_POSTHOG_LOGS) {
+    pendingPostHogLogs.shift();
+  }
+  pendingPostHogLogs.push(entry);
+}
+function isConsoleEnabled() {
+  if (BUILD_CONSOLE_DISABLED) return false;
+  if (typeof window === "undefined") return true;
+  return window.__loggingDisabled !== true;
+}
+function isPostHogShippingEnabled() {
+  if (BUILD_POSTHOG_DISABLED) return false;
+  if (typeof window === "undefined") return false;
+  return window.__posthogLoggingDisabled !== true;
+}
+function formatDetail(detail) {
+  return Object.entries(detail).map(([k, v]) => `${k}=${typeof v === "number" ? v.toFixed(4) : String(v)}`).join("  ");
+}
+function emitConsole(level, channel, event, detail) {
+  var _a, _b, _c, _d;
+  const color2 = (_a = CHANNEL_COLORS[channel]) != null ? _a : "#aaa";
+  const detailStr = formatDetail(detail);
+  const message = `%c[${channel}] %c${event}%c ${detailStr}`;
+  const channelStyle = `color:${color2}; font-weight:bold`;
+  const eventStyle = level === "error" ? "color:#e94e4e; font-weight:bold" : level === "warn" ? "color:#f5a623; font-weight:bold" : "color:#fff; font-weight:bold";
+  const detailStyle = "color:#999; font-weight:normal";
+  if (level === "error") {
+    (_b = browserConsole == null ? void 0 : browserConsole.error) == null ? void 0 : _b.call(browserConsole, message, channelStyle, eventStyle, detailStyle);
+    return;
+  }
+  if (level === "warn") {
+    (_c = browserConsole == null ? void 0 : browserConsole.warn) == null ? void 0 : _c.call(browserConsole, message, channelStyle, eventStyle, detailStyle);
+    return;
+  }
+  (_d = browserConsole == null ? void 0 : browserConsole.log) == null ? void 0 : _d.call(browserConsole, message, channelStyle, eventStyle, detailStyle);
+}
+function emitToPostHog(level, channel, event, detail) {
+  if (!otelLogger) return false;
+  const severityText = level === "warn" ? "WARNING" : level === "error" ? "ERROR" : "INFO";
+  const attributes = flattenAttributes(__spreadValues({ channel }, detail));
+  otelLogger.emit({
+    severityText,
+    body: event,
+    attributes
+  });
+  return true;
+}
+function emit(level, channel, event, detail, options) {
+  var _a;
+  const shouldShip = ((_a = options == null ? void 0 : options.shipToPostHog) != null ? _a : level !== "info") && isPostHogShippingEnabled();
+  if (level !== "info" || isConsoleEnabled()) {
+    emitConsole(level, channel, event, detail);
+  }
+  if (shouldShip) {
+    const shipped = emitToPostHog(level, channel, event, detail);
+    if (!shipped) {
+      enqueuePendingPostHogLog({ level, channel, event, detail });
+    }
+  }
+}
+function log(channel, event, detail = {}, options) {
+  emit("info", channel, event, detail, options);
+}
+function warn(channel, event, detail = {}, options) {
+  emit("warn", channel, event, detail, options);
+}
+function error(channel, event, detail = {}, options) {
+  emit("error", channel, event, detail, options);
+}
+
 // src/contexts/ThemeContext.tsx
 var ThemeContext = createContext({ theme: "classic" });
 function ThemeProvider({
@@ -88,7 +210,7 @@ function ThemeProvider({
   children
 }) {
   if (!isValidTheme(theme)) {
-    console.warn(`Invalid theme "${theme}", falling back to "classic"`);
+    warn("theme", "INVALID_THEME_FALLBACK", { theme });
     theme = "classic";
   }
   return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: { theme } }, children);
@@ -2435,7 +2557,9 @@ function GoogleMap({ address, locationName, className = "" }) {
       return;
     }
     if (!window.google.maps.Geocoder) {
-      console.warn("Google Maps Geocoder not yet available, retrying...");
+      warn("google-map", "GEOCODER_NOT_READY_RETRYING", {
+        address
+      });
       setTimeout(() => {
         var _a, _b;
         if (mapRef.current && ((_b = (_a = window.google) == null ? void 0 : _a.maps) == null ? void 0 : _b.Geocoder) && initMapRef.current) {
@@ -2493,8 +2617,12 @@ function GoogleMap({ address, locationName, className = "" }) {
         }
         isInitializingRef.current = false;
       });
-    } catch (error) {
-      console.error("Error initializing map:", error);
+    } catch (error2) {
+      error("google-map", "MAP_INITIALIZATION_FAILED", {
+        address,
+        message: error2 instanceof Error ? error2.message : String(error2),
+        stack: error2 instanceof Error ? error2.stack || "" : ""
+      });
       setMapError("Error loading map. Please try again later.");
       isInitializingRef.current = false;
     }
@@ -6292,7 +6420,7 @@ async function setPixelUserData(userData) {
 function firePixelEvent(event, params, eventId) {
   const fbq = getFbq();
   if (!fbq) {
-    console.debug("[MetaPixel] skipped \u2014 fbq not loaded", { event });
+    warn("meta-pixel", "PIXEL_EVENT_SKIPPED_FBQ_NOT_LOADED", { event });
     return;
   }
   applyStoredUserData(fbq);
@@ -6301,7 +6429,9 @@ function firePixelEvent(event, params, eventId) {
   if (params == null ? void 0 : params.contentCategory) normalized.content_category = params.contentCategory;
   const customData = Object.keys(normalized).length > 0 ? normalized : void 0;
   const eventData = eventId ? { eventID: eventId } : void 0;
-  console.debug("[MetaPixel]", event, normalized, eventId ? { eventID: eventId } : "");
+  log("meta-pixel", "PIXEL_EVENT_FIRED", __spreadValues(__spreadValues({
+    event
+  }, normalized), eventId ? { eventId } : {}), { shipToPostHog: true });
   fbq("track", event, customData, eventData);
 }
 
@@ -7935,7 +8065,10 @@ var BlogPostSection = ({
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
     } catch (err) {
-      console.error("Failed to copy:", err);
+      error("blog-post", "COPY_LINK_FAILED", {
+        message: err instanceof Error ? err.message : String(err),
+        stack: err instanceof Error ? err.stack || "" : ""
+      });
     }
   };
   const handleShareLink = () => {
@@ -7944,7 +8077,10 @@ var BlogPostSection = ({
         title: blogPost == null ? void 0 : blogPost.title,
         url: window.location.href
       }).catch((err) => {
-        console.error("Error sharing:", err);
+        error("blog-post", "SHARE_LINK_FAILED", {
+          message: err instanceof Error ? err.message : String(err),
+          stack: err instanceof Error ? err.stack || "" : ""
+        });
       });
     } else {
       handleCopyLink();
@@ -8007,7 +8143,10 @@ var BlogPostSection = ({
       onSubmit: (e) => {
         e.preventDefault();
         const formData = new FormData(e.currentTarget);
-        console.log("Form data:", formData);
+        const email = formData.get("email");
+        log("blog-post", "NEWSLETTER_FORM_SUBMIT", {
+          email: typeof email === "string" ? email : ""
+        }, { shipToPostHog: true });
       },
       className: "flex flex-col gap-4"
     },
@@ -8418,7 +8557,7 @@ var HomeHeroComponent = ({
         if (onEmailSubmit) {
           onEmailSubmit(email);
         } else {
-          console.log("Email signup:", email);
+          log("home-hero", "EMAIL_SIGNUP_SUBMIT", { email }, { shipToPostHog: true });
         }
       },
       className: "mt-8 flex w-full flex-col items-stretch gap-4 md:mt-12 md:max-w-120 md:flex-row md:items-start"
@@ -19963,17 +20102,30 @@ function useRealtimeReplyOrchestrator({
       { channel: "ContactCommunicationsChannel", contact_id: String(contactIdForStream) },
       {
         connected: () => {
-          console.info(`[${debugLabel}] realtime connected contact_id=${contactIdForStream}`);
+          log("chat-realtime", "REALTIME_CONNECTED", {
+            debugLabel,
+            contactId: contactIdForStream
+          }, { shipToPostHog: true });
         },
         disconnected: () => {
-          console.warn(`[${debugLabel}] realtime disconnected contact_id=${contactIdForStream}`);
+          warn("chat-realtime", "REALTIME_DISCONNECTED", {
+            debugLabel,
+            contactId: contactIdForStream
+          });
         },
         rejected: () => {
-          console.warn(`[${debugLabel}] realtime rejected contact_id=${contactIdForStream}`);
+          warn("chat-realtime", "REALTIME_REJECTED", {
+            debugLabel,
+            contactId: contactIdForStream
+          });
         },
         received: async (data) => {
           var _a;
-          console.info(`[${debugLabel}] realtime received type=${(_a = data == null ? void 0 : data.type) != null ? _a : "unknown"} contact_id=${contactIdForStream}`);
+          log("chat-realtime", "REALTIME_RECEIVED", {
+            debugLabel,
+            type: (_a = data == null ? void 0 : data.type) != null ? _a : "unknown",
+            contactId: contactIdForStream
+          }, { shipToPostHog: true });
           if ((data == null ? void 0 : data.type) === "agent_thinking") {
             onAgentThinking == null ? void 0 : onAgentThinking();
             return;
@@ -19984,8 +20136,13 @@ function useRealtimeReplyOrchestrator({
             if (hasReply) {
               resolveReply();
             }
-          } catch (error) {
-            console.error(`[${debugLabel}] realtime receive handling error`, error);
+          } catch (error2) {
+            error("chat-realtime", "REALTIME_RECEIVE_HANDLER_ERROR", {
+              debugLabel,
+              contactId: contactIdForStream,
+              message: error2 instanceof Error ? error2.message : String(error2),
+              stack: error2 instanceof Error ? error2.stack || "" : ""
+            });
           }
         }
       }
@@ -20072,8 +20229,11 @@ function ChatWidget({
         setMessages(newMessages);
         return newMessages;
       }
-    } catch (error) {
-      console.error("Failed to load messages:", error);
+    } catch (error2) {
+      error("chat-widget", "LOAD_MESSAGES_FAILED", {
+        message: error2 instanceof Error ? error2.message : String(error2),
+        stack: error2 instanceof Error ? error2.stack || "" : ""
+      });
     }
     return [];
   }, [contactId, sessionId]);
@@ -20168,14 +20328,17 @@ function ChatWidget({
       } else {
         setMessages((prev) => prev.filter((m) => m.id !== tempMessage.id));
         captureEvent("chat_message_failed", { error: "send_failed" });
-        console.error("Failed to send message");
+        error("chat-widget", "SEND_MESSAGE_NON_OK");
         setIsLoading(false);
         setWaitingForReply(false);
       }
-    } catch (error) {
+    } catch (error2) {
       setMessages((prev) => prev.filter((m) => m.id !== tempMessage.id));
       captureEvent("chat_message_failed", { error: "network_error" });
-      console.error("Failed to send message:", error);
+      error("chat-widget", "SEND_MESSAGE_NETWORK_ERROR", {
+        message: error2 instanceof Error ? error2.message : String(error2),
+        stack: error2 instanceof Error ? error2.stack || "" : ""
+      });
       setIsLoading(false);
       setWaitingForReply(false);
     }