keystone-design-bootstrap 1.0.97 → 1.0.99

package/dist/design_system/sections/index.js

@@ -64,6 +64,130 @@ function getThemedComponent(componentName, theme = "classic") {
 
 // src/contexts/ThemeContext.tsx
 import { createContext, useContext } from "react";
+
+// 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 useTheme() {
   return useContext(ThemeContext);
@@ -2407,7 +2531,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) {
@@ -2465,8 +2591,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;
     }
@@ -6264,7 +6394,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);
@@ -6273,7 +6403,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);
 }
 
@@ -7907,7 +8039,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 = () => {
@@ -7916,7 +8051,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();
@@ -7979,7 +8117,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"
     },
@@ -8390,7 +8531,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"