@syntrologie/runtime-sdk 2.15.0 → 2.16.0

package/dist/smart-canvas.js

@@ -12645,7 +12645,7 @@ Please report this to https://github.com/markedjs/marked.`, e9) {
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.15.0";
+  var SDK_VERSION = "2.16.0";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -22204,12 +22204,8 @@ ${cssRules}
     if (typeof process !== "undefined" && process.env) {
       return process.env[name];
     }
-    try {
-      const meta = (0, eval)("import.meta");
-      if (meta?.env) {
-        return meta.env[name];
-      }
-    } catch {
+    if (false) {
+      return (void 0)[name];
     }
     return void 0;
   }
@@ -25849,6 +25845,250 @@ ${cssRules}
     return new SessionMetricTracker(options);
   }
 
+  // src/platform/ShopifyAntiFlicker.ts
+  var ShopifyAntiFlicker = class {
+    constructor(adapter) {
+      this.unsubUnload = null;
+      this.unsubLoad = null;
+      this.destroyed = false;
+      this.adapter = adapter;
+    }
+    activate() {
+      if (this.destroyed) return;
+      this.unsubUnload = this.adapter.onRegionWillUnload((sectionId) => {
+        this.hideContentInSection(sectionId);
+      });
+      this.unsubLoad = this.adapter.onRegionDidLoad((sectionId) => {
+        this.revealContentInSection(sectionId);
+      });
+    }
+    destroy() {
+      this.destroyed = true;
+      this.unsubUnload?.();
+      this.unsubLoad?.();
+      this.unsubUnload = null;
+      this.unsubLoad = null;
+    }
+    hideContentInSection(sectionId) {
+      const selector = this.sectionSelector(sectionId);
+      const elements2 = document.querySelectorAll(`${selector} [data-syntro-action-id]`);
+      for (const el of elements2) {
+        el.style.opacity = "0";
+        el.style.transition = "none";
+      }
+    }
+    revealContentInSection(sectionId) {
+      const selector = this.sectionSelector(sectionId);
+      requestAnimationFrame(() => {
+        if (this.destroyed) return;
+        const elements2 = document.querySelectorAll(
+          `${selector} [data-syntro-action-id]`
+        );
+        for (const el of elements2) {
+          el.style.transition = "opacity 120ms ease-in";
+          el.style.opacity = "1";
+        }
+      });
+    }
+    sectionSelector(sectionId) {
+      const escaped = typeof CSS !== "undefined" ? CSS.escape(sectionId) : sectionId;
+      const byId = document.getElementById(`shopify-section-${sectionId}`);
+      if (byId) return `#shopify-section-${escaped}`;
+      return `.shopify-section[id$="-${escaped}"]`;
+    }
+  };
+
+  // src/platform/ShopifyAdapter.ts
+  var ShopifyAdapter = class {
+    constructor(options) {
+      this.name = "shopify";
+      this.loadCallbacks = /* @__PURE__ */ new Set();
+      this.unloadCallbacks = /* @__PURE__ */ new Set();
+      this.abortController = null;
+      this.antiFlicker = null;
+      this.initTimeoutMs = options?.initTimeoutMs ?? 3e3;
+    }
+    // --------------------------------------------------------------------------
+    // Detection
+    // --------------------------------------------------------------------------
+    detect() {
+      if (typeof window === "undefined" || typeof document === "undefined") {
+        return false;
+      }
+      if ("Shopify" in window && window.Shopify != null) {
+        return true;
+      }
+      if (document.querySelector('meta[name="shopify-checkout-api-token"]')) {
+        return true;
+      }
+      return false;
+    }
+    // --------------------------------------------------------------------------
+    // Initialization
+    // --------------------------------------------------------------------------
+    /**
+     * Wait for Shopify sections to be ready, then attach lifecycle listeners.
+     *
+     * Resolution order:
+     * 1. `.shopify-section` already in DOM -> resolve immediately
+     * 2. `shopify:section:load` fires -> resolve
+     * 3. Timeout (default 3000ms) -> resolve anyway (graceful degradation)
+     */
+    async onInit() {
+      this.abortController = new AbortController();
+      const { signal } = this.abortController;
+      this.attachSectionListeners(signal);
+      this.antiFlicker = new ShopifyAntiFlicker(this);
+      this.antiFlicker.activate();
+      await this.waitForInitialSections(this.initTimeoutMs, signal);
+    }
+    // --------------------------------------------------------------------------
+    // Region lifecycle subscriptions
+    // --------------------------------------------------------------------------
+    onRegionDidLoad(callback) {
+      this.loadCallbacks.add(callback);
+      return () => {
+        this.loadCallbacks.delete(callback);
+      };
+    }
+    onRegionWillUnload(callback) {
+      this.unloadCallbacks.add(callback);
+      return () => {
+        this.unloadCallbacks.delete(callback);
+      };
+    }
+    onRegionMutated(_regionId) {
+    }
+    // --------------------------------------------------------------------------
+    // Anchor scope
+    // --------------------------------------------------------------------------
+    getAnchorScope(anchor) {
+      const section = anchor.closest(".shopify-section");
+      if (section?.id) {
+        const escaped = typeof CSS !== "undefined" ? CSS.escape(section.id) : section.id;
+        return `#${escaped} `;
+      }
+      return "";
+    }
+    // --------------------------------------------------------------------------
+    // Teardown
+    // --------------------------------------------------------------------------
+    destroy() {
+      this.antiFlicker?.destroy();
+      this.antiFlicker = null;
+      if (this.abortController) {
+        this.abortController.abort();
+        this.abortController = null;
+      }
+      this.loadCallbacks.clear();
+      this.unloadCallbacks.clear();
+    }
+    // --------------------------------------------------------------------------
+    // Private
+    // --------------------------------------------------------------------------
+    attachSectionListeners(signal) {
+      document.addEventListener(
+        "shopify:section:load",
+        (event) => {
+          const sectionId = event.detail?.sectionId;
+          if (sectionId) {
+            for (const cb of this.loadCallbacks) {
+              try {
+                cb(sectionId);
+              } catch {
+              }
+            }
+          }
+        },
+        { signal }
+      );
+      document.addEventListener(
+        "shopify:section:unload",
+        (event) => {
+          const sectionId = event.detail?.sectionId;
+          if (sectionId) {
+            for (const cb of this.unloadCallbacks) {
+              try {
+                cb(sectionId);
+              } catch {
+              }
+            }
+          }
+        },
+        { signal }
+      );
+    }
+    waitForInitialSections(timeoutMs, signal) {
+      return new Promise((resolve) => {
+        if (document.querySelector(".shopify-section")) {
+          resolve();
+          return;
+        }
+        let resolved = false;
+        const done = () => {
+          if (resolved) return;
+          resolved = true;
+          resolve();
+        };
+        document.addEventListener("shopify:section:load", () => done(), { once: true, signal });
+        const timer = setTimeout(done, timeoutMs);
+        signal.addEventListener(
+          "abort",
+          () => {
+            clearTimeout(timer);
+            done();
+          },
+          { once: true }
+        );
+      });
+    }
+  };
+
+  // src/platform/detect.ts
+  var ADAPTERS = [() => new ShopifyAdapter()];
+  function detectPlatform() {
+    for (const create of ADAPTERS) {
+      const adapter = create();
+      if (adapter.detect()) {
+        return adapter;
+      }
+    }
+    return null;
+  }
+
+  // src/platform/shopify-cookie-contract.ts
+  var COOKIE_NAME = "syntro_experiments";
+  var COOKIE_VERSION = 1;
+
+  // src/platform/ShopifyPixelBridge.ts
+  var MAX_AGE_SECONDS = 30 * 24 * 60 * 60;
+  var ShopifyPixelBridge = class {
+    constructor(context) {
+      this.context = { ...context, telemetryHost: context.telemetryHost.replace(/\/$/, "") };
+      this.writeCookie();
+    }
+    /** Update the telemetry context (e.g., after consent is granted and
+     *  PostHog finally initializes and a real distinct_id becomes available). */
+    updateContext(context) {
+      this.context = { ...context, telemetryHost: context.telemetryHost.replace(/\/$/, "") };
+      this.writeCookie();
+    }
+    destroy() {
+      document.cookie = `${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Lax`;
+    }
+    writeCookie() {
+      const payload = {
+        version: COOKIE_VERSION,
+        distinct_id: this.context.distinctId,
+        telemetry_host: this.context.telemetryHost,
+        telemetry_key: this.context.telemetryKey
+      };
+      const value = encodeURIComponent(JSON.stringify(payload));
+      const cookieString = `${COOKIE_NAME}=${value}; max-age=${MAX_AGE_SECONDS}; path=/; SameSite=Lax`;
+      document.cookie = cookieString;
+    }
+  };
+
   // src/context/ContextManager.ts
   function createDefaultContext() {
     const now = Date.now();
@@ -33007,6 +33247,8 @@ ${cssRules}
         true
       );
     }
+    const platformAdapter = detectPlatform();
+    let shopifyPixelBridge;
     const onFeatureFlagsLoaded = (allFlags) => {
       debug("Syntro Bootstrap", "Phase 2: PostHog feature flags loaded");
       const segmentFlags = extractSegmentFlags(allFlags);
@@ -33023,6 +33265,16 @@ ${cssRules}
         debug("Syntro Bootstrap", "Updating GrowthBook with attributes:", updatedAttrs);
         experiments.setAttributes?.(updatedAttrs);
       }
+      if (shopifyPixelBridge && telemetry?.getDistinctId) {
+        const distinctId = telemetry.getDistinctId();
+        if (distinctId && telemetryHost && payload?.t) {
+          shopifyPixelBridge.updateContext({
+            distinctId,
+            telemetryHost,
+            telemetryKey: payload.t
+          });
+        }
+      }
     };
     let telemetry;
     if (payload?.t) {
@@ -33054,6 +33306,18 @@ ${cssRules}
       events.setPosthogCapture((name, props) => {
         telemetryForCapture.track?.(name, props);
       });
+      if (platformAdapter?.name === "shopify" && telemetryHost) {
+        try {
+          shopifyPixelBridge = new ShopifyPixelBridge({
+            distinctId: telemetry.getDistinctId?.() ?? "",
+            telemetryHost,
+            telemetryKey: payload.t
+          });
+          debug("Syntro Bootstrap", "ShopifyPixelBridge initialized for checkout attribution");
+        } catch (err) {
+          warn("Syntro Bootstrap", "ShopifyPixelBridge init failed", err);
+        }
+      }
     }
     let sessionMetrics;
     if (payload?.e) {
@@ -33063,7 +33327,11 @@ ${cssRules}
         // undefined falls back to adapter default
         // Phase 1: Use browser metadata + cached segment attributes for instant evaluation
         attributes: phaseOneAttrs,
-        // Wire experiment tracking to telemetry provider
+        // Wire experiment tracking to telemetry provider. PostHog registers
+        // the assignment as a super-property + fires `$experiment_started`;
+        // every future event from this distinct_id (including checkout events
+        // posted by the Shopify Web Pixel) is then auto-attributed to the
+        // variant server-side, so the pixel doesn't need to re-transmit.
         onExperimentViewed: telemetry?.trackExperiment ? (key, variationId, variationName) => {
           telemetry.trackExperiment(key, variationId, variationName);
         } : void 0
@@ -33255,13 +33523,23 @@ ${cssRules}
       }
       return config;
     } : void 0;
+    if (platformAdapter) {
+      debug("Syntro Bootstrap", `Detected platform: ${platformAdapter.name}`);
+      try {
+        await platformAdapter.onInit();
+        debug("Syntro Bootstrap", `Platform adapter initialized: ${platformAdapter.name}`);
+      } catch (err) {
+        warn("Syntro Bootstrap", `Platform adapter init failed: ${platformAdapter.name}`, err);
+      }
+    }
     const canvas = await createSmartCanvas({
       ...options.canvas,
       fetcher: appLoadingFetcher,
       integrations: { experiments, telemetry },
       editorUrl,
-      runtime: runtime8
+      runtime: runtime8,
       // Pass runtime so actions can be applied
+      platformAdapter: platformAdapter ?? void 0
     });
     return { canvas, runtime: runtime8, experiments, telemetry, sessionMetrics, appLoader };
   }
@@ -33691,7 +33969,7 @@ ${cssRules}
   }
 
   // src/index-lit.ts
-  var RUNTIME_SDK_BUILD = true ? `${"2026-04-23T15:26:01.916Z"} (${"9d88186d214"})` : "dev";
+  var RUNTIME_SDK_BUILD = true ? `${"2026-04-24T22:49:55.034Z"} (${"617ec713a54"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD} (Lit)`);
     const existing = window.SynOS;