@syntrologie/runtime-sdk 0.2.12 → 0.2.14

package/dist/smart-canvas.js

@@ -3581,16 +3581,19 @@ var SyntrologieSDK = (() => {
     const opacity = Math.min(Math.max(opts?.scrimOpacity ?? 0.55, 0), 1);
     const ringColor = opts?.ringColor ?? "var(--syntro-ring, #5b8cff)";
     const blocking = opts?.blocking ?? false;
+    const onClickOutside = opts?.onClickOutside ?? true;
+    const onEsc = opts?.onEsc ?? true;
     const rootStyles = getComputedStyle(document.documentElement);
     const tokenScrim = rootStyles.getPropertyValue("--syntro-spotlight-backdrop").trim();
     const tokenRing = rootStyles.getPropertyValue("--syntro-ring").trim();
     const scrim = document.createElement("div");
     scrim.className = "syntro-spotlight-scrim";
+    const needsPointerEvents = blocking || onClickOutside;
     Object.assign(scrim.style, {
       position: "fixed",
       inset: "0",
       zIndex: "2147483646",
-      pointerEvents: blocking ? "auto" : "none",
+      pointerEvents: needsPointerEvents ? "auto" : "none",
       background: tokenScrim || `rgba(2, 6, 23, ${opacity})`,
       transition: "opacity 220ms ease",
       opacity: "0"
@@ -3678,15 +3681,17 @@ var SyntrologieSDK = (() => {
     window.addEventListener("scroll", onScroll, true);
     window.addEventListener("resize", onResize);
     const onKey = (e2) => {
-      if (e2.key === "Escape") handle.destroy();
+      if (e2.key === "Escape" && onEsc) handle.destroy();
     };
-    window.addEventListener("keydown", onKey);
+    if (onEsc) {
+      window.addEventListener("keydown", onKey);
+    }
     const onClick = (event) => {
-      if (!blocking) {
-        handle.destroy();
-      } else {
+      if (blocking) {
         event.preventDefault();
         event.stopPropagation();
+      } else if (onClickOutside) {
+        handle.destroy();
       }
     };
     scrim.addEventListener("click", onClick);
@@ -3695,7 +3700,9 @@ var SyntrologieSDK = (() => {
         ro2.disconnect();
         window.removeEventListener("scroll", onScroll, true);
         window.removeEventListener("resize", onResize);
-        window.removeEventListener("keydown", onKey);
+        if (onEsc) {
+          window.removeEventListener("keydown", onKey);
+        }
         scrim.removeEventListener("click", onClick);
         scrim.style.opacity = "0";
         setTimeout(() => {
@@ -4119,7 +4126,9 @@ var SyntrologieSDK = (() => {
       radiusPx: step.ring?.radiusPx,
       scrimOpacity: step.scrim?.opacity,
       ringColor: step.ringColor,
-      blocking: step.blocking
+      blocking: step.blocking,
+      onClickOutside: step.dismiss?.onClickOutside ?? true,
+      onEsc: step.dismiss?.onEsc ?? true
     });
     ctx.onEvent?.("syntro_overlay_exposed", { kind: "highlight", stepId: step.id, recipeId: ctx.recipeId });
     const timers = [];
@@ -24545,6 +24554,7 @@ var SyntrologieSDK = (() => {
     CanvasRecipeZ: () => CanvasRecipeZ,
     HighlightStepZ: () => HighlightStepZ,
     SelectorZ: () => SelectorZ,
+    SessionMetricTracker: () => SessionMetricTracker,
     ShadowCanvasOverlay: () => ShadowCanvasOverlay,
     SmartCanvasApp: () => SmartCanvasApp,
     SmartCanvasController: () => SmartCanvasController,
@@ -24558,6 +24568,7 @@ var SyntrologieSDK = (() => {
     createGrowthBookClient: () => createGrowthBookClient,
     createOverlayRecipeFetcher: () => createOverlayRecipeFetcher,
     createPostHogClient: () => createPostHogClient,
+    createSessionMetricTracker: () => createSessionMetricTracker,
     createSmartCanvas: () => createSmartCanvas,
     createSmartCanvasController: () => createSmartCanvasController,
     decodeToken: () => decodeToken,
@@ -29100,14 +29111,18 @@ var SyntrologieSDK = (() => {
     constructor(options = {}) {
       this.options = options;
       __publicField(this, "client");
+      __publicField(this, "featureFlagsCallback");
       this.client = options.client;
+      this.featureFlagsCallback = options.onFeatureFlagsLoaded;
       if (!this.client && typeof window !== "undefined" && options.apiKey) {
         this.client = Uo;
+        const enableFeatureFlags = options.enableFeatureFlags ?? true;
         this.client.init(options.apiKey, {
           api_host: options.apiHost ?? "https://posthog-dev.syntrologie.com",
-          // Disable feature flags - we use GrowthBook for experiments
-          advanced_disable_feature_flags: true,
-          advanced_disable_feature_flags_on_first_load: true,
+          // Feature flags for segment membership (in_segment_* flags)
+          // When enabled, /decide is called to get segment flags
+          advanced_disable_feature_flags: !enableFeatureFlags,
+          advanced_disable_feature_flags_on_first_load: !enableFeatureFlags,
           // Full-page tracking - all ON by default
           autocapture: options.autocapture ?? true,
           capture_pageview: options.capturePageview ?? true,
@@ -29124,10 +29139,43 @@ var SyntrologieSDK = (() => {
           // Capture performance metrics
           capture_performance: true,
           // Enable web vitals
-          enable_recording_console_log: true
+          enable_recording_console_log: true,
+          // Bootstrap callback for when flags are loaded
+          loaded: (ph) => {
+            if (enableFeatureFlags && this.featureFlagsCallback) {
+              ph.onFeatureFlags(() => {
+                const allFlags = this.getAllFeatureFlags();
+                if (allFlags && this.featureFlagsCallback) {
+                  this.featureFlagsCallback(allFlags);
+                }
+              });
+            }
+          }
         });
       }
     }
+    /**
+     * Get all feature flags from PostHog.
+     * Used to extract segment membership flags (in_segment_*).
+     */
+    getAllFeatureFlags() {
+      const flags = this.client?.featureFlags?.getFlagVariants?.();
+      return flags;
+    }
+    /**
+     * Get segment membership flags (in_segment_*) from PostHog.
+     */
+    getSegmentFlags() {
+      const allFlags = this.getAllFeatureFlags();
+      if (!allFlags) return {};
+      const segmentFlags = {};
+      for (const [key, value] of Object.entries(allFlags)) {
+        if (key.startsWith("in_segment_")) {
+          segmentFlags[key] = value === true;
+        }
+      }
+      return segmentFlags;
+    }
     identify(id, props) {
       this.client?.identify(id, props);
     }
@@ -29176,6 +29224,9 @@ var SyntrologieSDK = (() => {
     setPersonPropertiesOnce(properties) {
       this.client?.capture("$set", { $set_once: properties });
     }
+    getDistinctId() {
+      return this.client?.get_distinct_id?.();
+    }
   };
   function createPostHogClient(options = {}) {
     return new PostHogAdapter(options);
@@ -32159,7 +32210,8 @@ var SyntrologieSDK = (() => {
           overlayRecipe: response.overlayRecipe,
           overlayRecipes: response.overlayRecipes,
           theme: response.theme,
-          launcher: response.launcher
+          launcher: response.launcher,
+          routes: response.routes
         });
       } catch (err) {
         setState((prev) => ({
@@ -38518,6 +38570,23 @@ var SyntrologieSDK = (() => {
 
   // src/SmartCanvasApp.tsx
   var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+  function isRouteAllowed(routes, pathname) {
+    if (!routes) return true;
+    if (routes.include?.length) {
+      return routes.include.some((pattern) => matchRoute(pattern, pathname));
+    }
+    if (routes.exclude?.length) {
+      return !routes.exclude.some((pattern) => matchRoute(pattern, pathname));
+    }
+    return true;
+  }
+  function matchRoute(pattern, pathname) {
+    if (pattern.endsWith("/*")) {
+      const prefix = pattern.slice(0, -2);
+      return pathname === prefix || pathname.startsWith(prefix + "/");
+    }
+    return pathname === pattern;
+  }
   function SmartCanvasApp({
     controller,
     fetcher,
@@ -38539,6 +38608,29 @@ var SyntrologieSDK = (() => {
     theme
   }) {
     const [open, setOpen] = (0, import_react10.useState)(controller.getState().open);
+    const [pathname, setPathname] = (0, import_react10.useState)(
+      () => typeof window !== "undefined" ? window.location.pathname : "/"
+    );
+    (0, import_react10.useEffect)(() => {
+      if (typeof window === "undefined") return;
+      const updatePathname = () => setPathname(window.location.pathname);
+      window.addEventListener("popstate", updatePathname);
+      const originalPushState = history.pushState;
+      const originalReplaceState = history.replaceState;
+      history.pushState = function(...args) {
+        originalPushState.apply(this, args);
+        updatePathname();
+      };
+      history.replaceState = function(...args) {
+        originalReplaceState.apply(this, args);
+        updatePathname();
+      };
+      return () => {
+        window.removeEventListener("popstate", updatePathname);
+        history.pushState = originalPushState;
+        history.replaceState = originalReplaceState;
+      };
+    }, []);
     const derivedFetcher = (0, import_react10.useMemo)(() => {
       if (fetcher) return fetcher;
       return createCanvasConfigFetcher({
@@ -38598,7 +38690,8 @@ var SyntrologieSDK = (() => {
         // any direct overrides from theme prop
       };
     }, [configState.theme, theme]);
-    if (!configState.isLoading && !hasContent) {
+    const routeAllowed = isRouteAllowed(configState.routes, pathname);
+    if (!configState.isLoading && (!hasContent || !routeAllowed)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -39128,6 +39221,151 @@ var SyntrologieSDK = (() => {
     };
   }
 
+  // src/metrics/sessionMetrics.ts
+  var STORAGE_KEY = "syntro_session_metrics";
+  var SessionMetricTracker = class {
+    constructor(options = {}) {
+      __publicField(this, "metrics", /* @__PURE__ */ new Map());
+      __publicField(this, "experiments");
+      __publicField(this, "attributePrefix");
+      __publicField(this, "onMetricChange");
+      this.experiments = options.experiments;
+      this.attributePrefix = options.attributePrefix ?? "session_";
+      this.onMetricChange = options.onMetricChange;
+      this.loadFromStorage();
+    }
+    /**
+     * Increment a metric by the specified amount.
+     *
+     * @param metricKey - The metric to increment (e.g., "button_clicks", "page_views")
+     * @param amount - Amount to increment by (default: 1)
+     * @returns The new metric value
+     */
+    increment(metricKey, amount = 1) {
+      const currentValue = this.metrics.get(metricKey) ?? 0;
+      const newValue = currentValue + amount;
+      this.metrics.set(metricKey, newValue);
+      this.saveToStorage();
+      this.updateExperimentAttributes(metricKey, newValue);
+      this.onMetricChange?.(metricKey, newValue);
+      return newValue;
+    }
+    /**
+     * Set a metric to a specific value.
+     *
+     * @param metricKey - The metric to set
+     * @param value - The value to set
+     */
+    set(metricKey, value) {
+      this.metrics.set(metricKey, value);
+      this.saveToStorage();
+      this.updateExperimentAttributes(metricKey, value);
+      this.onMetricChange?.(metricKey, value);
+    }
+    /**
+     * Get the current value of a metric.
+     *
+     * @param metricKey - The metric to get
+     * @returns The current value (0 if not set)
+     */
+    get(metricKey) {
+      return this.metrics.get(metricKey) ?? 0;
+    }
+    /**
+     * Check if a metric meets or exceeds a threshold.
+     *
+     * @param metricKey - The metric to check
+     * @param threshold - The threshold value
+     * @returns True if metric >= threshold
+     */
+    meetsThreshold(metricKey, threshold) {
+      return this.get(metricKey) >= threshold;
+    }
+    /**
+     * Get all current metric values.
+     *
+     * @returns Record of metric keys to values
+     */
+    getAll() {
+      return Object.fromEntries(this.metrics);
+    }
+    /**
+     * Reset a specific metric to zero.
+     *
+     * @param metricKey - The metric to reset
+     */
+    reset(metricKey) {
+      this.metrics.delete(metricKey);
+      this.saveToStorage();
+      this.updateExperimentAttributes(metricKey, 0);
+      this.onMetricChange?.(metricKey, 0);
+    }
+    /**
+     * Reset all metrics (clear the session).
+     */
+    resetAll() {
+      const keys = Array.from(this.metrics.keys());
+      this.metrics.clear();
+      this.saveToStorage();
+      const attrs = {};
+      for (const key of keys) {
+        attrs[`${this.attributePrefix}${key}`] = 0;
+        this.onMetricChange?.(key, 0);
+      }
+      this.experiments?.setAttributes?.(attrs);
+    }
+    /**
+     * Update the experiment client (useful if experiments client changes).
+     */
+    setExperiments(experiments) {
+      this.experiments = experiments;
+      this.syncAllToExperiments();
+    }
+    // ==================== Private Methods ====================
+    updateExperimentAttributes(metricKey, value) {
+      if (!this.experiments?.setAttributes) return;
+      const attributeKey = `${this.attributePrefix}${metricKey}`;
+      this.experiments.setAttributes({ [attributeKey]: value });
+    }
+    syncAllToExperiments() {
+      if (!this.experiments?.setAttributes) return;
+      const attrs = {};
+      for (const [key, value] of this.metrics) {
+        attrs[`${this.attributePrefix}${key}`] = value;
+      }
+      this.experiments.setAttributes(attrs);
+    }
+    loadFromStorage() {
+      if (typeof window === "undefined" || typeof sessionStorage === "undefined") return;
+      try {
+        const stored = sessionStorage.getItem(STORAGE_KEY);
+        if (stored) {
+          const data = JSON.parse(stored);
+          for (const [key, value] of Object.entries(data)) {
+            this.metrics.set(key, value.count);
+          }
+        }
+      } catch (err) {
+        console.warn("[SessionMetricTracker] Failed to load from sessionStorage:", err);
+      }
+    }
+    saveToStorage() {
+      if (typeof window === "undefined" || typeof sessionStorage === "undefined") return;
+      try {
+        const data = {};
+        for (const [key, count] of this.metrics) {
+          data[key] = { count, lastUpdated: Date.now() };
+        }
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      } catch (err) {
+        console.warn("[SessionMetricTracker] Failed to save to sessionStorage:", err);
+      }
+    }
+  };
+  function createSessionMetricTracker(options = {}) {
+    return new SessionMetricTracker(options);
+  }
+
   // src/token.ts
   var TOKEN_PREFIX = "syn_";
   function decodeToken(token) {
@@ -39379,6 +39617,40 @@ var SyntrologieSDK = (() => {
     });
     return hasToken;
   }
+  var SEGMENT_CACHE_KEY = "syntro_segment_attributes";
+  function loadCachedSegmentAttributes() {
+    if (typeof window === "undefined") return {};
+    try {
+      const cached = localStorage.getItem(SEGMENT_CACHE_KEY);
+      if (cached) {
+        const attrs = JSON.parse(cached);
+        console.log("[Syntro Bootstrap] Loaded cached segment attributes:", attrs);
+        return attrs;
+      }
+    } catch (err) {
+      console.warn("[Syntro Bootstrap] Failed to load cached segment attributes:", err);
+    }
+    return {};
+  }
+  function cacheSegmentAttributes(attrs) {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(SEGMENT_CACHE_KEY, JSON.stringify(attrs));
+      console.log("[Syntro Bootstrap] Cached segment attributes:", attrs);
+    } catch (err) {
+      console.warn("[Syntro Bootstrap] Failed to cache segment attributes:", err);
+    }
+  }
+  function extractSegmentFlags(allFlags) {
+    if (!allFlags) return {};
+    const segmentFlags = {};
+    for (const [key, value] of Object.entries(allFlags)) {
+      if (key.startsWith("in_segment_")) {
+        segmentFlags[key] = value === true;
+      }
+    }
+    return segmentFlags;
+  }
   async function init(options) {
     console.log("[Syntro Bootstrap] ====== INIT ======");
     console.log("[Syntro Bootstrap] Options:", {
@@ -39409,20 +39681,41 @@ var SyntrologieSDK = (() => {
     const experimentHost = getEnvVar("NEXT_PUBLIC_SYNTRO_EXPERIMENT_HOST") || getEnvVar("VITE_SYNTRO_EXPERIMENT_HOST") || payload?.eh;
     const telemetryHost = getEnvVar("NEXT_PUBLIC_SYNTRO_TELEMETRY_HOST") || getEnvVar("VITE_SYNTRO_TELEMETRY_HOST") || payload?.th;
     const editorUrl = getEnvVar("NEXT_PUBLIC_SYNTRO_EDITOR_URL") || getEnvVar("VITE_SYNTRO_EDITOR_URL") || options.canvas?.editorUrl;
+    const cachedSegmentAttrs = loadCachedSegmentAttributes();
+    console.log("[Syntro Bootstrap] Phase 1: Using cached segment attributes:", cachedSegmentAttrs);
+    let experiments;
+    const onFeatureFlagsLoaded = (allFlags) => {
+      console.log("[Syntro Bootstrap] Phase 2: PostHog feature flags loaded");
+      const segmentFlags = extractSegmentFlags(allFlags);
+      console.log("[Syntro Bootstrap] Segment flags from PostHog:", segmentFlags);
+      cacheSegmentAttributes(segmentFlags);
+      if (experiments) {
+        const sessionAttrs = sessionMetrics?.getAll?.() ?? {};
+        const updatedAttrs = { ...sessionAttrs, ...segmentFlags };
+        console.log("[Syntro Bootstrap] Updating GrowthBook with attributes:", updatedAttrs);
+        experiments.setAttributes?.(updatedAttrs);
+      }
+    };
     let telemetry;
     if (payload?.t) {
       telemetry = createTelemetryClient("posthog", {
         apiKey: payload.t,
-        apiHost: telemetryHost
+        apiHost: telemetryHost,
         // undefined falls back to adapter default
+        // Enable PostHog feature flags for segment membership
+        enableFeatureFlags: true,
+        // Wire up callback for when flags are loaded (Phase 2)
+        onFeatureFlagsLoaded
       });
     }
-    let experiments;
+    let sessionMetrics;
     if (payload?.e) {
       experiments = createExperimentClient("growthbook", {
         clientKey: payload.e,
         apiHost: experimentHost,
         // undefined falls back to adapter default
+        // Phase 1: Use cached segment attributes for instant evaluation
+        attributes: cachedSegmentAttrs,
         // Wire experiment tracking to telemetry provider
         onExperimentViewed: telemetry?.trackExperiment ? (key, variationId, variationName) => {
           telemetry.trackExperiment(key, variationId, variationName);
@@ -39444,13 +39737,22 @@ var SyntrologieSDK = (() => {
     } else if (experiments) {
       fetcher = createCanvasConfigFetcher({ experiments });
     }
+    if (options.enableSessionMetrics) {
+      sessionMetrics = createSessionMetricTracker({
+        experiments,
+        onMetricChange: (key, value) => {
+          console.log(`[Syntro Bootstrap] Session metric changed: ${key} = ${value}`);
+        }
+      });
+      console.log("[Syntro Bootstrap] SessionMetricTracker created");
+    }
     const canvas = await createSmartCanvas({
       ...options.canvas,
       fetcher,
       integrations: { experiments, telemetry },
       editorUrl
     });
-    return { canvas, experiments, telemetry };
+    return { canvas, experiments, telemetry, sessionMetrics };
   }
   var Syntro = {
     init,