@syntrologie/runtime-sdk 2.15.0 → 2.16.0

package/dist/SmartCanvasApp.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import type { BatchActionHandle } from './actions/types';
 import type { SmartCanvasController } from './controller';
 import type { ExperimentClient } from './experiments/types';
+import type { PlatformAdapter } from './platform/PlatformAdapter';
 import type { SmartCanvasRuntime } from './runtime';
 import type { TelemetryClient } from './telemetry/types';
 import type { CanvasThemeConfig } from './theme';
@@ -34,5 +35,7 @@ export interface SmartCanvasAppProps {
     initialBatchHandle?: BatchActionHandle | null;
     /** Workspace-level theme for 3-layer inheritance (defaults → workspace → config) */
     workspaceTheme?: CanvasThemeConfig;
+    /** Platform adapter for host-platform-specific integrations (Shopify, WordPress, etc.) */
+    platformAdapter?: PlatformAdapter;
 }
-export declare function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatureKey, configFeatureKey, fetchCredentials, pollIntervalMs, experiments, telemetry, runtime, overlayFetcher, overlayConfigUri, overlayConfigFeatureKey, overlayFetchCredentials, footerSlot, launcherLabel, canvasHost, initialBatchHandle, workspaceTheme, }: SmartCanvasAppProps): import("react/jsx-runtime").JSX.Element;
+export declare function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatureKey, configFeatureKey, fetchCredentials, pollIntervalMs, experiments, telemetry, runtime, overlayFetcher, overlayConfigUri, overlayConfigFeatureKey, overlayFetchCredentials, footerSlot, launcherLabel, canvasHost, initialBatchHandle, workspaceTheme, platformAdapter, }: SmartCanvasAppProps): import("react/jsx-runtime").JSX.Element;

package/dist/api.d.ts

@@ -6,6 +6,7 @@
  */
 import type { ExperimentClient } from './experiments/types';
 import type { OverlayRecipeFetcher } from './overlays/fetcher';
+import type { PlatformAdapter } from './platform/PlatformAdapter';
 import type { ActionHandler, AppearanceConfig, RenderProps } from './render/types';
 import type { SmartCanvasRuntime } from './runtime';
 import { type SmartCanvasElement } from './SmartCanvasElement';
@@ -45,6 +46,8 @@ export interface SmartCanvasConfig {
     actionHandlers?: ActionHandler;
     /** Workspace-level theme for 3-layer inheritance (defaults → workspace → config) */
     workspaceTheme?: CanvasThemeConfig;
+    /** Platform adapter for host-platform-specific integrations (Shopify, WordPress, etc.) */
+    platformAdapter?: PlatformAdapter;
 }
 /**
  * Handle for interacting with a SmartCanvas instance.

package/dist/bootstrap-init.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Get environment variable, supporting both Vite and Next.js patterns.
+ * CSP-safe: no eval() is used. Vite env access is resolved at build time
+ * via the __VITE_IMPORT_META_ENV__ define.
  */
 export declare function getEnvVar(name: string): string | undefined;
 /**

package/dist/{chunk-CVMZW3II.js → chunk-NVV7IWJC.js}

@@ -3640,7 +3640,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // src/version.ts
-var SDK_VERSION = "2.15.0";
+var SDK_VERSION = "2.16.0";
 
 // src/types.ts
 var SDK_SCHEMA_VERSION = "2.0";
@@ -6164,7 +6164,8 @@ function SmartCanvasApp({
   launcherLabel,
   canvasHost,
   initialBatchHandle,
-  workspaceTheme
+  workspaceTheme,
+  platformAdapter
 }) {
   if (runtime3) {
     return /* @__PURE__ */ jsx8(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx8(
@@ -6188,7 +6189,8 @@ function SmartCanvasApp({
         launcherLabel,
         canvasHost,
         initialBatchHandle,
-        workspaceTheme
+        workspaceTheme,
+        platformAdapter
       }
     ) });
   }
@@ -6212,7 +6214,8 @@ function SmartCanvasApp({
       launcherLabel,
       canvasHost,
       initialBatchHandle,
-      workspaceTheme
+      workspaceTheme,
+      platformAdapter
     }
   );
 }
@@ -6235,7 +6238,8 @@ function SmartCanvasAppInner({
   launcherLabel,
   canvasHost: _canvasHost,
   initialBatchHandle,
-  workspaceTheme
+  workspaceTheme,
+  platformAdapter
 }) {
   var _a2, _b, _c, _d, _e, _f;
   const [open, setOpen] = useState7(controller.getState().open);
@@ -6243,6 +6247,7 @@ function SmartCanvasAppInner({
   const [localUrl, setLocalUrl] = useState7(
     () => typeof window !== "undefined" ? window.location.href : "/"
   );
+  const [reapplyTick, setReapplyTick] = useState7(0);
   const pageUrl = (_a2 = pageContext == null ? void 0 : pageContext.url) != null ? _a2 : localUrl;
   useEffect8(() => {
     if (runtime3) return;
@@ -6334,7 +6339,7 @@ function SmartCanvasAppInner({
         batchHandleRef.current = null;
       }
     };
-  }, [runtime3, configState.actions, pageUrl]);
+  }, [runtime3, configState.actions, pageUrl, reapplyTick]);
   useEffect8(() => {
     if (!runtime3) return;
     return runtime3.events.subscribe(
@@ -6342,6 +6347,14 @@ function SmartCanvasAppInner({
       () => controller.setOpen(true)
     );
   }, [runtime3, controller]);
+  useEffect8(() => {
+    if (!platformAdapter || !(runtime3 == null ? void 0 : runtime3.actions)) return;
+    const unsub = platformAdapter.onRegionDidLoad((regionId) => {
+      console.log(`[SmartCanvasApp] Platform region reloaded: ${regionId}, re-applying actions`);
+      setReapplyTick((t) => t + 1);
+    });
+    return unsub;
+  }, [platformAdapter, runtime3]);
   const { shadowRoot } = useShadowRoot();
   const themeConfig = configState.theme;
   return /* @__PURE__ */ jsx8(
@@ -7150,7 +7163,8 @@ var createSmartCanvas = async (config = {}) => {
     configUriFeatureKey: config.configUriFeatureKey,
     fetchCredentials: config.fetchCredentials,
     initialBatchHandle: currentBatchHandle,
-    workspaceTheme: config.workspaceTheme
+    workspaceTheme: config.workspaceTheme,
+    platformAdapter: config.platformAdapter
   };
   host.mountReactApp(appProps);
   if (config.defaultOpen) {
@@ -10172,6 +10186,258 @@ var NavigationMonitor = class {
   }
 };
 
+// src/platform/ShopifyAntiFlicker.ts
+var ShopifyAntiFlicker = class {
+  constructor(adapter) {
+    __publicField(this, "adapter");
+    __publicField(this, "unsubUnload", null);
+    __publicField(this, "unsubLoad", null);
+    __publicField(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() {
+    var _a2, _b;
+    this.destroyed = true;
+    (_a2 = this.unsubUnload) == null ? void 0 : _a2.call(this);
+    (_b = this.unsubLoad) == null ? void 0 : _b.call(this);
+    this.unsubUnload = null;
+    this.unsubLoad = null;
+  }
+  hideContentInSection(sectionId) {
+    const selector = this.sectionSelector(sectionId);
+    const elements = document.querySelectorAll(`${selector} [data-syntro-action-id]`);
+    for (const el of elements) {
+      el.style.opacity = "0";
+      el.style.transition = "none";
+    }
+  }
+  revealContentInSection(sectionId) {
+    const selector = this.sectionSelector(sectionId);
+    requestAnimationFrame(() => {
+      if (this.destroyed) return;
+      const elements = document.querySelectorAll(
+        `${selector} [data-syntro-action-id]`
+      );
+      for (const el of elements) {
+        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) {
+    __publicField(this, "name", "shopify");
+    __publicField(this, "loadCallbacks", /* @__PURE__ */ new Set());
+    __publicField(this, "unloadCallbacks", /* @__PURE__ */ new Set());
+    __publicField(this, "abortController", null);
+    __publicField(this, "antiFlicker", null);
+    __publicField(this, "initTimeoutMs");
+    var _a2;
+    this.initTimeoutMs = (_a2 = options == null ? void 0 : options.initTimeoutMs) != null ? _a2 : 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 == null ? void 0 : section.id) {
+      const escaped = typeof CSS !== "undefined" ? CSS.escape(section.id) : section.id;
+      return `#${escaped} `;
+    }
+    return "";
+  }
+  // --------------------------------------------------------------------------
+  // Teardown
+  // --------------------------------------------------------------------------
+  destroy() {
+    var _a2;
+    (_a2 = this.antiFlicker) == null ? void 0 : _a2.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) => {
+        var _a2;
+        const sectionId = (_a2 = event.detail) == null ? void 0 : _a2.sectionId;
+        if (sectionId) {
+          for (const cb of this.loadCallbacks) {
+            try {
+              cb(sectionId);
+            } catch {
+            }
+          }
+        }
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "shopify:section:unload",
+      (event) => {
+        var _a2;
+        const sectionId = (_a2 = event.detail) == null ? void 0 : _a2.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) {
+    __publicField(this, "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/state/helpers/cooldowns.ts
 var COOLDOWN_PREFIX = "cooldown:";
 function createCooldownStore(storage) {
@@ -11424,16 +11690,13 @@ function encodeToken(payload) {
 }
 
 // src/bootstrap-init.ts
+var import_meta = {};
 function getEnvVar(name) {
   if (typeof process !== "undefined" && process.env) {
     return process.env[name];
   }
-  try {
-    const meta = (0, eval)("import.meta");
-    if (meta == null ? void 0 : meta.env) {
-      return meta.env[name];
-    }
-  } catch {
+  if (typeof import_meta.env !== "undefined" && import_meta.env) {
+    return import_meta.env[name];
   }
   return void 0;
 }
@@ -11826,7 +12089,7 @@ function createTelemetryClient(provider, config) {
 
 // src/bootstrap-runtime.ts
 async function _initCore(options) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   initLogger();
   debug("Syntro Bootstrap", "====== INIT ======");
   debug("Syntro Bootstrap", "Options:", {
@@ -11980,6 +12243,8 @@ async function _initCore(options) {
       true
     );
   }
+  const platformAdapter = detectPlatform();
+  let shopifyPixelBridge;
   const onFeatureFlagsLoaded = (allFlags) => {
     var _a3, _b2, _c2;
     debug("Syntro Bootstrap", "Phase 2: PostHog feature flags loaded");
@@ -11997,6 +12262,16 @@ async function _initCore(options) {
       debug("Syntro Bootstrap", "Updating GrowthBook with attributes:", updatedAttrs);
       (_c2 = experiments.setAttributes) == null ? void 0 : _c2.call(experiments, updatedAttrs);
     }
+    if (shopifyPixelBridge && (telemetry == null ? void 0 : telemetry.getDistinctId)) {
+      const distinctId = telemetry.getDistinctId();
+      if (distinctId && telemetryHost && (payload == null ? void 0 : payload.t)) {
+        shopifyPixelBridge.updateContext({
+          distinctId,
+          telemetryHost,
+          telemetryKey: payload.t
+        });
+      }
+    }
   };
   let telemetry;
   if (payload == null ? void 0 : payload.t) {
@@ -12029,6 +12304,18 @@ async function _initCore(options) {
       var _a3;
       (_a3 = telemetryForCapture.track) == null ? void 0 : _a3.call(telemetryForCapture, name, props);
     });
+    if ((platformAdapter == null ? void 0 : platformAdapter.name) === "shopify" && telemetryHost) {
+      try {
+        shopifyPixelBridge = new ShopifyPixelBridge({
+          distinctId: (_f = (_e = telemetry.getDistinctId) == null ? void 0 : _e.call(telemetry)) != null ? _f : "",
+          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 == null ? void 0 : payload.e) {
@@ -12038,7 +12325,11 @@ async function _initCore(options) {
       // 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 == null ? void 0 : telemetry.trackExperiment) ? (key, variationId, variationName) => {
         telemetry.trackExperiment(key, variationId, variationName);
       } : void 0
@@ -12094,7 +12385,7 @@ async function _initCore(options) {
     };
     debug("Syntro Bootstrap", "Global SynOS object exposed");
   }
-  const registeredApps = (_g = (_f = (_e = runtime3.apps).list) == null ? void 0 : _f.call(_e)) != null ? _g : [];
+  const registeredApps = (_i = (_h = (_g = runtime3.apps).list) == null ? void 0 : _h.call(_g)) != null ? _i : [];
   console.log(
     `[DIAG] Activation loop: ${registeredApps.length} apps in registry:`,
     registeredApps.map((a) => `${a.manifest.id}(${a.state})`).join(", ")
@@ -12125,20 +12416,20 @@ async function _initCore(options) {
   if (experiments && Object.keys(geoData).length > 0) {
     const mergedAttrs = { ...browserMetadata, ...geoData, ...appSignalsInit };
     debug("Syntro Bootstrap", "Merging geo data into GrowthBook attributes:", geoData);
-    (_h = experiments.setAttributes) == null ? void 0 : _h.call(experiments, mergedAttrs);
+    (_j = experiments.setAttributes) == null ? void 0 : _j.call(experiments, mergedAttrs);
   }
   const mcpHost = await mcpPromise;
   if (mcpHost && experiments) {
     browserMetadata.surface_type = "mcp-app";
     browserMetadata.surface_host = mcpHost.name;
-    (_i = experiments.setAttributes) == null ? void 0 : _i.call(experiments, { ...browserMetadata, ...geoData });
+    (_k = experiments.setAttributes) == null ? void 0 : _k.call(experiments, { ...browserMetadata, ...geoData });
     debug("Syntro Bootstrap", "MCP App detected:", mcpHost.name);
   }
   let baseFetcher;
   if (options.fetcher) {
     baseFetcher = options.fetcher;
   } else if (payload == null ? void 0 : payload.f) {
-    const configFetcher = createConfigFetcher(payload.f, (_j = payload.o) != null ? _j : {});
+    const configFetcher = createConfigFetcher(payload.f, (_l = payload.o) != null ? _l : {});
     baseFetcher = async () => {
       var _a3;
       const result = await configFetcher.fetch();
@@ -12152,7 +12443,7 @@ async function _initCore(options) {
   }
   const warnedAppFailures = /* @__PURE__ */ new Set();
   const appLoadingFetcher = baseFetcher ? async () => {
-    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l;
+    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
     const config = await baseFetcher();
     const tileCount = (_b2 = (_a3 = config.tiles) == null ? void 0 : _a3.length) != null ? _b2 : 0;
     const actionCount = (_d2 = (_c2 = config.actions) == null ? void 0 : _c2.length) != null ? _d2 : 0;
@@ -12178,9 +12469,9 @@ async function _initCore(options) {
       "[Syntro Bootstrap] Config fetched:",
       `tiles=${(_g2 = (_f2 = config.tiles) == null ? void 0 : _f2.length) != null ? _g2 : 0},`,
       `actions=${(_i2 = (_h2 = config.actions) == null ? void 0 : _h2.length) != null ? _i2 : 0},`,
-      `theme=${(_k = (_j2 = config.theme) == null ? void 0 : _j2.name) != null ? _k : "none"}`
+      `theme=${(_k2 = (_j2 = config.theme) == null ? void 0 : _j2.name) != null ? _k2 : "none"}`
     );
-    if (((_l = config.actions) == null ? void 0 : _l.length) > 0) {
+    if (((_l2 = config.actions) == null ? void 0 : _l2.length) > 0) {
       console.log(
         "[Syntro Bootstrap] Actions in config:",
         config.actions.map(
@@ -12233,13 +12524,23 @@ async function _initCore(options) {
     }
     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: runtime3
+    runtime: runtime3,
     // Pass runtime so actions can be applied
+    platformAdapter: platformAdapter != null ? platformAdapter : void 0
   });
   return { canvas, runtime: runtime3, experiments, telemetry, sessionMetrics, appLoader };
 }
@@ -12356,6 +12657,11 @@ export {
   createEventBus,
   EventHistory,
   NavigationMonitor,
+  ShopifyAntiFlicker,
+  ShopifyAdapter,
+  detectPlatform,
+  COOKIE_NAME,
+  ShopifyPixelBridge,
   StateStore,
   createStateStore,
   getSlotType,
@@ -12378,4 +12684,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-CVMZW3II.js.map
+//# sourceMappingURL=chunk-NVV7IWJC.js.map