@appfunnel-dev/sdk 2.0.0-canary.4 → 2.0.0-canary.5

package/dist/index.cjs

@@ -1,7 +1,9 @@
 'use strict';
 
-var chunkJSRKA375_cjs = require('./chunk-JSRKA375.cjs');
-var chunkLJYLGLFS_cjs = require('./chunk-LJYLGLFS.cjs');
+var chunkG44BUG6G_cjs = require('./chunk-G44BUG6G.cjs');
+var chunkWYUDL4FI_cjs = require('./chunk-WYUDL4FI.cjs');
+var chunkQMAZGLGV_cjs = require('./chunk-QMAZGLGV.cjs');
+require('./chunk-EMMSS5I5.cjs');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -385,7 +387,27 @@ function createBus(accessors, now2 = () => Date.now()) {
       }
     }
   };
-  return { on, off, events, emit, ...accessors };
+  let nav = null;
+  let warnedNoNav = false;
+  const currentNav = () => {
+    if (!nav && !warnedNoNav) {
+      warnedNoNav = true;
+      console.warn("[appfunnel] window.appfunnel navigation called before the funnel flow mounted \u2014 ignored");
+    }
+    return nav;
+  };
+  const registerNavigation = (n) => {
+    nav = n;
+    warnedNoNav = false;
+    return () => {
+      if (nav === n) nav = null;
+    };
+  };
+  const goTo = (pageKey) => currentNav()?.goTo(pageKey) ?? false;
+  const goNext = () => currentNav()?.goNext();
+  const goPrevious = () => currentNav()?.goPrevious();
+  const navigation = () => nav?.snapshot() ?? null;
+  return { on, off, events, emit, registerNavigation, goTo, goNext, goPrevious, navigation, ...accessors };
 }
 function withBus(tracker, bus) {
   return {
@@ -407,7 +429,19 @@ function withBus(tracker, bus) {
 function attachBus(bus) {
   if (typeof window === "undefined") return () => {
   };
-  const { on, off, getVariable, getVariables, getCurrentPageId, getCustomerId, getVisitorId } = bus;
+  const {
+    on,
+    off,
+    getVariable,
+    getVariables,
+    getCurrentPageId,
+    getCustomerId,
+    getVisitorId,
+    goTo,
+    goNext,
+    goPrevious,
+    navigation
+  } = bus;
   const api = {
     on,
     off,
@@ -416,6 +450,11 @@ function attachBus(bus) {
     getCurrentPageId,
     getCustomerId,
     getVisitorId,
+    // Flow control (bound closures over the bus's live nav registration).
+    goTo,
+    goNext,
+    goPrevious,
+    navigation,
     get events() {
       return bus.events;
     }
@@ -452,9 +491,9 @@ function LocaleProvider({
   override,
   children
 }) {
-  const [locale, setLocale] = React.useState(() => chunkJSRKA375_cjs.resolveLocale(config, detected, override));
+  const [locale, setLocale] = React.useState(() => chunkG44BUG6G_cjs.resolveLocale(config, detected, override));
   React.useEffect(() => {
-    setLocale(chunkJSRKA375_cjs.resolveLocale(config, detected, override));
+    setLocale(chunkG44BUG6G_cjs.resolveLocale(config, detected, override));
   }, [config, detected, override]);
   const value = React.useMemo(
     () => ({ locale, setLocale, config, catalog }),
@@ -526,7 +565,7 @@ function useTranslation() {
     fmt,
     locale,
     setLocale,
-    dir: chunkJSRKA375_cjs.isRtl(locale) ? "rtl" : "ltr",
+    dir: chunkG44BUG6G_cjs.isRtl(locale) ? "rtl" : "ltr",
     locales: config?.supported ?? [locale]
   };
 }
@@ -547,16 +586,112 @@ function useProduct(id) {
   const catalog = useCatalog();
   const locale = useActiveLocale();
   const resolved = id ? catalog.get(id) : void 0;
-  return React.useMemo(() => resolved ? chunkJSRKA375_cjs.formatProduct(resolved, locale) : void 0, [resolved, locale]);
+  return React.useMemo(() => resolved ? chunkG44BUG6G_cjs.formatProduct(resolved, locale) : void 0, [resolved, locale]);
 }
 function useProducts() {
   const catalog = useCatalog();
   const locale = useActiveLocale();
   return React.useMemo(
-    () => Array.from(catalog.values()).map((r) => chunkJSRKA375_cjs.formatProduct(r, locale)),
+    () => Array.from(catalog.values()).map((r) => chunkG44BUG6G_cjs.formatProduct(r, locale)),
     [catalog, locale]
   );
 }
+
+// src/flow/screenshot.ts
+var MIME = { png: "image/png", jpeg: "image/jpeg", webp: "image/webp" };
+var ScreenshotError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+  }
+};
+function resolveTarget(t) {
+  if (!t || t.kind === "page") return document.getElementById("root") ?? document.body;
+  if (t.kind === "viewport") return document.body;
+  return document.querySelector(t.selector);
+}
+var delay = (ms) => new Promise((r) => setTimeout(r, ms));
+function hideAll(selectors) {
+  const touched = [];
+  for (const sel of selectors) {
+    document.querySelectorAll(sel).forEach((el) => {
+      touched.push([el, el.style.visibility]);
+      el.style.visibility = "hidden";
+    });
+  }
+  return () => touched.forEach(([el, v]) => el.style.visibility = v);
+}
+async function scrollThrough(el) {
+  const prev = el.scrollTop;
+  const step = el.clientHeight || window.innerHeight;
+  for (let y = 0; y < el.scrollHeight; y += step) {
+    el.scrollTop = y;
+    await delay(16);
+  }
+  el.scrollTop = prev;
+  await delay(16);
+}
+function blobToDataURL(blob) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => resolve(String(fr.result));
+    fr.onerror = () => reject(fr.error);
+    fr.readAsDataURL(blob);
+  });
+}
+async function captureScreenshot(params = {}) {
+  const el = resolveTarget(params.target);
+  if (!el) throw new ScreenshotError("bad_params", "screenshot target not found");
+  const restore = params.hideSelectors?.length ? hideAll(params.hideSelectors) : null;
+  const scale = Math.min(params.scale ?? 2, params.maxScale ?? 3);
+  const format = params.format ?? "png";
+  const timeout = params.timeout ?? 1e4;
+  try {
+    if (params.waitForFonts !== false && document.fonts?.ready) {
+      await Promise.race([document.fonts.ready, delay(timeout)]);
+    }
+    if (params.triggerLazyLoad) await scrollThrough(el);
+    if (params.waitForImages !== false) {
+      await Promise.all(
+        Array.from(el.querySelectorAll("img")).map(
+          (img) => typeof img.decode === "function" ? img.decode().catch(() => {
+          }) : Promise.resolve()
+        )
+      );
+    }
+    const { domToBlob } = await import('modern-screenshot');
+    let blob;
+    try {
+      blob = await domToBlob(el, {
+        type: MIME[format],
+        quality: params.quality ?? 0.92,
+        scale,
+        width: params.width,
+        height: params.height,
+        // `null` = transparent (png/webp); only fall back to white when the caller omitted it. `??`
+        // would wrongly collapse an explicit `null` to white.
+        backgroundColor: params.backgroundColor === void 0 ? "#ffffff" : params.backgroundColor,
+        timeout
+      });
+    } catch (e) {
+      throw new ScreenshotError("failed", `capture failed (an image/font may be served without CORS '*'): ${String(e?.message || e)}`);
+    }
+    const result = {
+      mime: MIME[format],
+      width: Math.round((params.width ?? el.clientWidth) * scale),
+      height: Math.round((params.height ?? el.scrollHeight) * scale),
+      scale,
+      bytesApprox: blob.size
+    };
+    if ((params.encoding ?? "blob") === "dataURL") result.dataURL = await blobToDataURL(blob);
+    else result.blob = blob;
+    return result;
+  } finally {
+    restore?.();
+  }
+}
+
+// src/flow/flow.tsx
 var NavContext = React.createContext(null);
 var ExperimentContext = React.createContext({});
 function useExperiment(id) {
@@ -609,6 +744,7 @@ function usePageExitTimer(tracker, currentKey) {
 function FunnelView({
   pages,
   initialKey,
+  trustInitialKey = false,
   layout,
   fallback,
   prefetch: prefetchMode = "auto",
@@ -634,10 +770,10 @@ function FunnelView({
     [pages]
   );
   const seedRef = React.useRef(null);
-  if (seedRef.current === null) seedRef.current = chunkJSRKA375_cjs.bucketingSeed(funnel.context);
+  if (seedRef.current === null) seedRef.current = chunkG44BUG6G_cjs.bucketingSeed(funnel.context);
   const seed = seedRef.current;
   const experiments = React.useMemo(
-    () => chunkJSRKA375_cjs.resolveExperiments(pages, funnel.experiments, seed),
+    () => chunkG44BUG6G_cjs.resolveExperiments(pages, funnel.experiments, seed),
     [pages, funnel.experiments, seed]
   );
   const toSlot = React.useCallback((k) => experiments.slotOf[k] ?? k, [experiments]);
@@ -656,8 +792,9 @@ function FunnelView({
     if (!initialKey || initialKey === start) return start ? [start] : [];
     const target = toSlot(initialKey);
     const page2 = flowPages.find((p) => p.key === target);
-    const guard = chunkJSRKA375_cjs.entryGuard(page2?.meta);
-    const ok = page2 && (!guard || chunkJSRKA375_cjs.evaluateGate(guard, funnel.snapshot()));
+    if (trustInitialKey) return page2 ? [target] : start ? [start] : [];
+    const guard = chunkG44BUG6G_cjs.entryGuard(page2?.meta);
+    const ok = page2 && (!guard || chunkG44BUG6G_cjs.evaluateGate(guard, funnel.snapshot()));
     const first = ok ? target : start;
     return first ? [first] : [];
   });
@@ -665,7 +802,7 @@ function FunnelView({
   const index = history.length - 1;
   const startKey = history[0];
   const total = React.useMemo(
-    () => chunkJSRKA375_cjs.expectedPathLength(flow, startKey, funnel.snapshot()),
+    () => chunkG44BUG6G_cjs.expectedPathLength(flow, startKey, funnel.snapshot()),
     // currentKey in deps: re-trace as each step's answers settle the branch.
     [flow, startKey, currentKey, funnel]
   );
@@ -700,7 +837,7 @@ function FunnelView({
   usePageExitTimer(tracker, currentKey);
   const [isNavigating, startNav] = React.useTransition();
   const next = React.useCallback(() => {
-    const target = chunkJSRKA375_cjs.nextPage(flow, currentKey, funnel.snapshot());
+    const target = chunkG44BUG6G_cjs.nextPage(flow, currentKey, funnel.snapshot());
     const resolved = target ? toSlot(target) : target;
     if (resolved) startNav(() => setHistory((h) => [...h, resolved]));
   }, [flow, currentKey, funnel, toSlot]);
@@ -724,7 +861,7 @@ function FunnelView({
     [loaders, toRenderKey]
   );
   const nextCandidates = React.useMemo(
-    () => [...new Set(chunkJSRKA375_cjs.outgoingKeys(flow, currentKey).map(toRenderKey))],
+    () => [...new Set(chunkG44BUG6G_cjs.outgoingKeys(flow, currentKey).map(toRenderKey))],
     [flow, currentKey, toRenderKey]
   );
   React.useEffect(() => {
@@ -741,6 +878,44 @@ function FunnelView({
     canGoBack: history.length > 1,
     isNavigating
   };
+  const bus = useBusInternal();
+  const navRef = React.useRef(value);
+  navRef.current = value;
+  React.useEffect(() => {
+    if (!bus) return;
+    const control = {
+      goTo: (key) => {
+        if (!components.has(toRenderKey(key))) return false;
+        navRef.current.go(key);
+        return true;
+      },
+      goNext: () => navRef.current.next(),
+      goPrevious: () => navRef.current.back(),
+      snapshot: () => {
+        const v = navRef.current;
+        return {
+          key: v.page.key,
+          index: v.page.index,
+          total: v.page.total,
+          progressPercentage: v.page.progressPercentage,
+          canGoBack: v.canGoBack,
+          nextCandidates: v.nextCandidates
+        };
+      }
+    };
+    return bus.registerNavigation(control);
+  }, [bus]);
+  React.useEffect(() => {
+    const v = navRef.current;
+    bus?.emit("navigation", {
+      key: v.page.key,
+      index: v.page.index,
+      total: v.page.total,
+      progressPercentage: v.page.progressPercentage,
+      canGoBack: v.canGoBack,
+      nextCandidates: v.nextCandidates
+    });
+  }, [bus, currentKey]);
   const renderKey = toRenderKey(currentKey);
   const Current = components.get(renderKey);
   const pageEl = React.createElement(React.Suspense, { fallback: fallback ?? null }, Current ? React.createElement(Current) : null);
@@ -756,6 +931,81 @@ function useNavigation() {
   if (!ctx) throw new Error("useNavigation must be used inside <FunnelView>");
   return ctx;
 }
+var EMBED_CAPABILITIES = {
+  methods: ["nav.snapshot", "nav.goTo", "nav.goNext", "nav.goPrevious", "screenshot"],
+  events: ["navigation"]
+};
+function EmbedBridge() {
+  const bus = useBusInternal();
+  React.useEffect(() => {
+    if (!bus || typeof window === "undefined" || window.parent === window) return;
+    const parent = window.parent;
+    let disposed = false;
+    const send = (msg) => {
+      try {
+        parent.postMessage({ af: chunkWYUDL4FI_cjs.AF_PROTOCOL, source: "af-preview", ...msg }, "*");
+      } catch {
+      }
+    };
+    const hello = () => send({ kind: "hello", role: "funnel", protocol: chunkWYUDL4FI_cjs.AF_PROTOCOL, capabilities: EMBED_CAPABILITIES });
+    const sendSnapshot = () => {
+      const s = bus.navigation();
+      if (s) send({ kind: "event", event: "navigation", data: s });
+    };
+    async function invoke(method, params) {
+      switch (method) {
+        case "nav.snapshot":
+          return bus.navigation();
+        case "nav.goTo": {
+          const key = params?.key;
+          if (typeof key !== "string" || !bus.goTo(key)) throw { code: "bad_params", message: `unknown page key: ${String(key)}` };
+          return void 0;
+        }
+        case "nav.goNext":
+          bus.goNext();
+          return void 0;
+        case "nav.goPrevious":
+          bus.goPrevious();
+          return void 0;
+        case "screenshot":
+          return await captureScreenshot(params ?? {});
+        default:
+          throw { code: "unknown_method", message: `unknown method: ${method}` };
+      }
+    }
+    async function onMsg(e) {
+      if (e.source !== parent) return;
+      const d = e.data;
+      if (!d || typeof d !== "object" || d.af !== chunkWYUDL4FI_cjs.AF_PROTOCOL || d.source !== "af-host") return;
+      if (d.kind === "hello") {
+        hello();
+        sendSnapshot();
+        return;
+      }
+      if (d.kind !== "request" || typeof d.id !== "string") return;
+      try {
+        const result = await invoke(d.method, d.params);
+        if (!disposed) send({ kind: "response", id: d.id, ok: true, result });
+      } catch (err) {
+        const e2 = err;
+        const error = e2 && typeof e2.code === "string" ? { code: e2.code, message: String(e2.message ?? e2.code) } : { code: "failed", message: String(e2?.message ?? err) };
+        if (!disposed) send({ kind: "response", id: d.id, ok: false, error });
+      }
+    }
+    window.addEventListener("message", onMsg);
+    const offNav = bus.on("navigation", (data) => {
+      if (!disposed) send({ kind: "event", event: "navigation", data });
+    });
+    hello();
+    sendSnapshot();
+    return () => {
+      disposed = true;
+      offNav();
+      window.removeEventListener("message", onMsg);
+    };
+  }, [bus]);
+  return null;
+}
 function usePage() {
   return useNavigation().page;
 }
@@ -1072,7 +1322,7 @@ function Modal(props) {
 // src/commerce/checkout.tsx
 function createMockDriver(provider = "stripe", options = {}) {
   const success = options.result ?? { ok: true, amountMinor: 0, currency: "USD" };
-  const offError = typeof options.failOffSession === "object" ? options.failOffSession : chunkLJYLGLFS_cjs.checkoutError("authentication_required", "off-session charge declined (mock)");
+  const offError = typeof options.failOffSession === "object" ? options.failOffSession : chunkQMAZGLGV_cjs.checkoutError("authentication_required", "off-session charge declined (mock)");
   return {
     provider,
     start: (req) => {
@@ -1087,7 +1337,7 @@ function createMockDriver(provider = "stripe", options = {}) {
         onClick: () => {
           cb.onStart?.();
           if (success.ok) cb.onSuccess(success);
-          else cb.onError(success.error ?? chunkLJYLGLFS_cjs.checkoutError("processing_error", "failed (mock)"));
+          else cb.onError(success.error ?? chunkQMAZGLGV_cjs.checkoutError("processing_error", "failed (mock)"));
         }
       },
       `Pay (mock ${req.surface})`
@@ -1188,7 +1438,7 @@ function useCheckout(opts = {}) {
     },
     [tracker, productFacts]
   );
-  const hostInSheet = (surface) => surface === "sheet" || chunkLJYLGLFS_cjs.isInlineSurface(surface) && !!chunkLJYLGLFS_cjs.PROVIDER_PROFILES[driver.provider]?.surfaces.sheet;
+  const hostInSheet = (surface) => surface === "sheet" || chunkQMAZGLGV_cjs.isInlineSurface(surface) && !!chunkQMAZGLGV_cjs.PROVIDER_PROFILES[driver.provider]?.surfaces.sheet;
   const startRecovery = (product, surface) => {
     recovering.current = true;
     if (hostInSheet(surface)) {
@@ -1239,7 +1489,7 @@ function useCheckout(opts = {}) {
           recovering.current = true;
           if (!surface) {
             if (intent === "upsell") void attemptRef.current(product);
-            else startRecovery(product, chunkLJYLGLFS_cjs.PROVIDER_PROFILES[driver.provider]?.surfaces.sheet ? "sheet" : "popup");
+            else startRecovery(product, chunkQMAZGLGV_cjs.PROVIDER_PROFILES[driver.provider]?.surfaces.sheet ? "sheet" : "popup");
             return;
           }
           startRecovery(product, surface);
@@ -1255,10 +1505,10 @@ function useCheckout(opts = {}) {
     try {
       const result = await driver.start({ product, intent, surface, kind });
       if (result.ok) succeedRef.current(result, product);
-      else failRef.current(result.error ?? chunkLJYLGLFS_cjs.checkoutError("unknown", "Checkout failed"), product);
+      else failRef.current(result.error ?? chunkQMAZGLGV_cjs.checkoutError("unknown", "Checkout failed"), product);
       return result;
     } catch (e) {
-      const err = chunkLJYLGLFS_cjs.checkoutError("processing_error", e instanceof Error ? e.message : "Checkout failed");
+      const err = chunkQMAZGLGV_cjs.checkoutError("processing_error", e instanceof Error ? e.message : "Checkout failed");
       failRef.current(err, product);
       return { ok: false, error: err };
     }
@@ -1297,7 +1547,7 @@ var CheckoutSheet = defineModal(({ product, surface, intent, kind, onSuccess, on
     if (!hostable) {
       resolved.current = true;
       onErrorRef.current(
-        chunkLJYLGLFS_cjs.checkoutError("processing_error", "This checkout driver has no inline surface to host in the sheet")
+        chunkQMAZGLGV_cjs.checkoutError("processing_error", "This checkout driver has no inline surface to host in the sheet")
       );
       void modal.hide();
       modal.remove();
@@ -1305,7 +1555,7 @@ var CheckoutSheet = defineModal(({ product, surface, intent, kind, onSuccess, on
     }
     return () => {
       if (!resolved.current) {
-        onErrorRef.current(chunkLJYLGLFS_cjs.checkoutError("canceled", "Checkout was dismissed before completing"));
+        onErrorRef.current(chunkQMAZGLGV_cjs.checkoutError("canceled", "Checkout was dismissed before completing"));
       }
     };
   }, []);
@@ -1350,7 +1600,7 @@ function Checkout({
   const driver = useDriver();
   const checkout = useCheckout(options);
   const intent = options.intent ?? "purchase";
-  if (chunkLJYLGLFS_cjs.isInlineSurface(surface)) {
+  if (chunkQMAZGLGV_cjs.isInlineSurface(surface)) {
     return driver.renderInline ? React.createElement(
       "div",
       { key: product, className },
@@ -1412,7 +1662,7 @@ function CheckoutResume(options = {}) {
         window.history.replaceState(window.history.state, "", url.toString());
         cb.onSuccess(result);
       } else {
-        cb.onError(result.error ?? chunkLJYLGLFS_cjs.checkoutError("unknown", "The checkout could not be verified"));
+        cb.onError(result.error ?? chunkQMAZGLGV_cjs.checkoutError("unknown", "The checkout could not be verified"));
       }
     });
   }, []);
@@ -2573,6 +2823,7 @@ var FunnelCtx = React.createContext(null);
 function FunnelProvider({
   config,
   sessionValues,
+  deferSessionValues = false,
   tracker,
   context: contextOpts,
   products,
@@ -2588,7 +2839,12 @@ function FunnelProvider({
   const [value] = React.useState(() => {
     const s = store ?? createFunnelStore(
       { responses: config?.responses, data: config?.data },
-      sessionValues
+      // FLASH-FREE HYDRATION: with deferSessionValues the initial render is seeded with
+      // DEFAULTS ONLY, so the client's first render is byte-identical to the build-time
+      // DEFAULT-state prerender it hydrates against (clean match). The visitor's saved
+      // answers arrive as a post-hydration setMany below. Without the flag, sessionValues
+      // seed the store at construction (SSR + non-prerendered paths).
+      deferSessionValues ? void 0 : sessionValues
     );
     const ctx = buildContext({
       funnelId: config?.id,
@@ -2606,7 +2862,7 @@ function FunnelProvider({
       const value2 = s.get("user.email");
       return typeof value2 === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value2) ? value2 : void 0;
     };
-    const catalog = chunkJSRKA375_cjs.buildCatalog(products ?? []);
+    const catalog = chunkG44BUG6G_cjs.buildCatalog(products ?? []);
     return {
       funnel: createFunnel(s, ctx, busTracker, experiments ?? []),
       store: s,
@@ -2620,6 +2876,12 @@ function FunnelProvider({
     };
   });
   React.useEffect(() => attachBus(value.bus), [value.bus]);
+  React.useEffect(() => {
+    if (!deferSessionValues || !sessionValues) return;
+    const updates = {};
+    for (const [key, v] of Object.entries(sessionValues)) if (v !== void 0) updates[key] = v;
+    if (Object.keys(updates).length > 0) value.store.setMany(updates);
+  }, []);
   React.useEffect(() => {
     value.tracker.setAcquisition?.(buildAcquisition(value.context));
   }, [value]);
@@ -2655,6 +2917,9 @@ function useFunnelCtx() {
 function useFunnel() {
   return useFunnelCtx().funnel;
 }
+function useBusInternal() {
+  return React.useContext(FunnelCtx)?.bus ?? null;
+}
 function useStoreKey(store, key) {
   const subscribe = React.useCallback(
     (cb) => store.subscribe(cb, { keys: [key] }),
@@ -2718,6 +2983,152 @@ function useContextValue(path) {
   );
 }
 
+// src/tracking/snapshotPersistence.ts
+function createSnapshotPersistence(opts) {
+  const baseDelay = opts.baseDelayMs ?? 1e3;
+  const maxDelay = opts.maxDelayMs ?? 3e4;
+  const setT = opts.timers?.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+  const clearT = opts.timers?.clearTimeout ?? ((h) => clearTimeout(h));
+  const rand = opts.random ?? Math.random;
+  let pending = null;
+  let seq = 0;
+  let pendingSeq = 0;
+  let inFlight = false;
+  let attempt = 0;
+  let retryTimer = null;
+  let disposed = false;
+  let fatalSeq = -1;
+  const clearRetry = () => {
+    if (retryTimer !== null) {
+      clearT(retryTimer);
+      retryTimer = null;
+    }
+  };
+  const buildBody = (snapshot, s) => JSON.stringify({ sessionId: opts.getSessionId(), userData: snapshot, seq: s });
+  const trySend = () => {
+    if (disposed || inFlight || pending === null) return;
+    if (retryTimer !== null) return;
+    const sessionId = opts.getSessionId();
+    if (!sessionId) return;
+    if (typeof navigator !== "undefined" && navigator.onLine === false) return;
+    if (pendingSeq === fatalSeq) return;
+    const snapshot = pending;
+    const sentSeq = pendingSeq;
+    const body = buildBody(snapshot, sentSeq);
+    inFlight = true;
+    void fetch(opts.url, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body,
+      keepalive: true
+    }).then((res) => {
+      inFlight = false;
+      if (disposed) return;
+      if (res.ok) {
+        attempt = 0;
+        if (pendingSeq === sentSeq) pending = null;
+        else trySend();
+        return;
+      }
+      if (res.status >= 400 && res.status < 500) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[appfunnel] snapshot persist rejected ${res.status} (dropping snapshot; check session/payload)`
+          );
+        }
+        fatalSeq = sentSeq;
+        if (pendingSeq === sentSeq) pending = null;
+        else trySend();
+        return;
+      }
+      scheduleRetry();
+    }).catch(() => {
+      inFlight = false;
+      if (disposed) return;
+      scheduleRetry();
+    });
+  };
+  const scheduleRetry = () => {
+    if (disposed || pending === null) return;
+    const exp = Math.min(maxDelay, baseDelay * 2 ** attempt);
+    const delay2 = Math.round(exp * (0.5 + rand() * 0.5));
+    attempt++;
+    clearRetry();
+    retryTimer = setT(() => {
+      retryTimer = null;
+      trySend();
+    }, delay2);
+  };
+  const push = (snapshot) => {
+    if (disposed) return;
+    pending = snapshot;
+    pendingSeq = ++seq;
+    if (fatalSeq !== -1 && pendingSeq !== fatalSeq) fatalSeq = -1;
+    if (retryTimer === null) trySend();
+  };
+  const flushBeacon = () => {
+    if (disposed || pending === null) return;
+    const sessionId = opts.getSessionId();
+    if (!sessionId) return;
+    const body = buildBody(pending, pendingSeq);
+    let delivered = false;
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      try {
+        delivered = navigator.sendBeacon(
+          opts.url,
+          new Blob([body], { type: "application/json" })
+        );
+      } catch {
+        delivered = false;
+      }
+    }
+    if (!delivered) {
+      try {
+        void fetch(opts.url, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body,
+          keepalive: true
+        }).catch(() => {
+        });
+        delivered = true;
+      } catch {
+        delivered = false;
+      }
+    }
+    if (delivered) pending = null;
+  };
+  const onHidden = () => {
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+      flushBeacon();
+    }
+  };
+  const onPageHide = () => flushBeacon();
+  const onOnline = () => trySend();
+  if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+    try {
+      document.addEventListener("visibilitychange", onHidden);
+      window.addEventListener("pagehide", onPageHide);
+      window.addEventListener("online", onOnline);
+    } catch {
+    }
+  }
+  const dispose = () => {
+    disposed = true;
+    clearRetry();
+    pending = null;
+    if (typeof window !== "undefined" && typeof window.removeEventListener === "function") {
+      try {
+        document.removeEventListener("visibilitychange", onHidden);
+        window.removeEventListener("pagehide", onPageHide);
+        window.removeEventListener("online", onOnline);
+      } catch {
+      }
+    }
+  };
+  return { push, flushBeacon, dispose };
+}
+
 // src/tracking/platformTracker.ts
 function validClickIds(acq) {
   return Object.entries(acq.clickIds ?? {}).filter(
@@ -2823,32 +3234,35 @@ function createPlatformTracker(cfg) {
     }
   };
   const VARS_DEBOUNCE_MS = 800;
+  const dataUrl = `${base}/campaign/${encodeURIComponent(cfg.campaignId)}/event/session/data`;
   let pendingVars = null;
   let varsTimer = null;
+  const persistence = createSnapshotPersistence({
+    url: dataUrl,
+    getSessionId: () => sessionId
+  });
   const flushVars = () => {
     if (varsTimer) {
       clearTimeout(varsTimer);
       varsTimer = null;
     }
     if (!pendingVars) return;
-    const doPost = () => {
-      if (!pendingVars || !sessionId) return;
-      const userData = pendingVars;
-      pendingVars = null;
-      void fetch(`${base}/campaign/${encodeURIComponent(cfg.campaignId)}/event/session/data`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ sessionId, userData }),
-        keepalive: true
-      }).catch((e) => {
-        if (process.env.NODE_ENV !== "production") console.warn("[appfunnel] variable persist failed:", e);
-      });
-    };
-    if (sessionId) doPost();
-    else chain = chain.then(doPost);
+    const snapshot = pendingVars;
+    pendingVars = null;
+    persistence.push(snapshot);
+    if (!sessionId) chain = chain.then(() => {
+      persistence.push(snapshot);
+    });
+  };
+  const drainOnExit = () => {
+    if (pendingVars) {
+      flushVars();
+      persistence.flushBeacon();
+    }
   };
   try {
-    window.addEventListener("pagehide", flushVars);
+    window.addEventListener("visibilitychange", drainOnExit);
+    window.addEventListener("pagehide", drainOnExit);
   } catch {
   }
   if (cfg.experiment?.id && cfg.experiment.variant) {
@@ -2891,6 +3305,7 @@ function createFunnelTree({
 }) {
   return function tree(opts) {
     const mode = opts.mode ?? "live";
+    const embedEnabled = opts.embed ?? false;
     const tracker = opts.tracking ? createPlatformTracker({
       ...opts.tracking,
       visitorId: opts.visitorId,
@@ -2912,6 +3327,7 @@ function createFunnelTree({
         React.Fragment,
         null,
         React.createElement(CheckoutResume, null),
+        embedEnabled ? React.createElement(EmbedBridge, null) : null,
         layout ? React.createElement(layout, null, children) : children
       );
     };
@@ -2925,6 +3341,7 @@ function createFunnelTree({
         tracker,
         checkout,
         sessionValues: opts.sessionValues,
+        deferSessionValues: opts.deferSessionValues,
         experiments: opts.experiments,
         context: {
           mode,
@@ -2936,6 +3353,13 @@ function createFunnelTree({
           pages,
           layout: layoutWithResume,
           initialKey: opts.initialKey,
+          // FLASH-FREE HYDRATION (Option B, FIX 1): trust the SERVER-resolved initialKey instead of
+          // re-running the entry guard. The CLIENT sets this via deferSessionValues (its deferred
+          // snapshot is empty, so re-running the guard would bounce a qualified deep-link and
+          // mismatch the markup). The build-time PRERENDER sets `trustInitialKey` explicitly so a
+          // guarded page prerenders its OWN default-state markup (the renderer picks target-vs-bounce
+          // at serve time). Live SSR fallback leaves both off → the guard runs against real values.
+          trustInitialKey: opts.trustInitialKey ?? opts.deferSessionValues,
           prefetch: "off"
           // renderer background-modulepreloads all chunks
         })
@@ -3084,147 +3508,147 @@ function Script({
 
 Object.defineProperty(exports, "assignVariant", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.assignVariant; }
+  get: function () { return chunkG44BUG6G_cjs.assignVariant; }
 });
 Object.defineProperty(exports, "bucketingSeed", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.bucketingSeed; }
+  get: function () { return chunkG44BUG6G_cjs.bucketingSeed; }
 });
 Object.defineProperty(exports, "buildCatalog", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.buildCatalog; }
+  get: function () { return chunkG44BUG6G_cjs.buildCatalog; }
 });
 Object.defineProperty(exports, "compileManifest", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.compileManifest; }
+  get: function () { return chunkG44BUG6G_cjs.compileManifest; }
 });
 Object.defineProperty(exports, "currencyExponent", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.currencyExponent; }
+  get: function () { return chunkG44BUG6G_cjs.currencyExponent; }
 });
 Object.defineProperty(exports, "defineFunnel", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.defineFunnel; }
+  get: function () { return chunkG44BUG6G_cjs.defineFunnel; }
 });
 Object.defineProperty(exports, "definePage", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.definePage; }
+  get: function () { return chunkG44BUG6G_cjs.definePage; }
 });
 Object.defineProperty(exports, "entryGuard", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.entryGuard; }
+  get: function () { return chunkG44BUG6G_cjs.entryGuard; }
 });
 Object.defineProperty(exports, "evaluateCondition", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.evaluateCondition; }
+  get: function () { return chunkG44BUG6G_cjs.evaluateCondition; }
 });
 Object.defineProperty(exports, "evaluateGate", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.evaluateGate; }
+  get: function () { return chunkG44BUG6G_cjs.evaluateGate; }
 });
 Object.defineProperty(exports, "expectedPathLength", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.expectedPathLength; }
+  get: function () { return chunkG44BUG6G_cjs.expectedPathLength; }
 });
 Object.defineProperty(exports, "fnv1a", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.fnv1a; }
+  get: function () { return chunkG44BUG6G_cjs.fnv1a; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.formatMoney; }
+  get: function () { return chunkG44BUG6G_cjs.formatMoney; }
 });
 Object.defineProperty(exports, "formatProduct", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.formatProduct; }
+  get: function () { return chunkG44BUG6G_cjs.formatProduct; }
 });
 Object.defineProperty(exports, "hashToUnit", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.hashToUnit; }
+  get: function () { return chunkG44BUG6G_cjs.hashToUnit; }
 });
 Object.defineProperty(exports, "isRtl", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.isRtl; }
+  get: function () { return chunkG44BUG6G_cjs.isRtl; }
 });
 Object.defineProperty(exports, "isVariantKey", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.isVariantKey; }
+  get: function () { return chunkG44BUG6G_cjs.isVariantKey; }
 });
 Object.defineProperty(exports, "nextPage", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.nextPage; }
+  get: function () { return chunkG44BUG6G_cjs.nextPage; }
 });
 Object.defineProperty(exports, "outgoingKeys", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.outgoingKeys; }
+  get: function () { return chunkG44BUG6G_cjs.outgoingKeys; }
 });
 Object.defineProperty(exports, "pageMeta", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.pageMeta; }
+  get: function () { return chunkG44BUG6G_cjs.pageMeta; }
 });
 Object.defineProperty(exports, "parseSlotKey", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.parseSlotKey; }
+  get: function () { return chunkG44BUG6G_cjs.parseSlotKey; }
 });
 Object.defineProperty(exports, "pickByWeight", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.pickByWeight; }
+  get: function () { return chunkG44BUG6G_cjs.pickByWeight; }
 });
 Object.defineProperty(exports, "resolveExperiments", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.resolveExperiments; }
+  get: function () { return chunkG44BUG6G_cjs.resolveExperiments; }
 });
 Object.defineProperty(exports, "resolveLocale", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.resolveLocale; }
+  get: function () { return chunkG44BUG6G_cjs.resolveLocale; }
 });
 Object.defineProperty(exports, "resolveProduct", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.resolveProduct; }
+  get: function () { return chunkG44BUG6G_cjs.resolveProduct; }
 });
 Object.defineProperty(exports, "resolveRoute", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.resolveRoute; }
+  get: function () { return chunkG44BUG6G_cjs.resolveRoute; }
 });
 Object.defineProperty(exports, "validateExperiments", {
   enumerable: true,
-  get: function () { return chunkJSRKA375_cjs.validateExperiments; }
+  get: function () { return chunkG44BUG6G_cjs.validateExperiments; }
 });
 Object.defineProperty(exports, "INLINE_SURFACES", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.INLINE_SURFACES; }
+  get: function () { return chunkQMAZGLGV_cjs.INLINE_SURFACES; }
 });
 Object.defineProperty(exports, "PROVIDER_PROFILES", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.PROVIDER_PROFILES; }
+  get: function () { return chunkQMAZGLGV_cjs.PROVIDER_PROFILES; }
 });
 Object.defineProperty(exports, "checkoutError", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.checkoutError; }
+  get: function () { return chunkQMAZGLGV_cjs.checkoutError; }
 });
 Object.defineProperty(exports, "isInlineSurface", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.isInlineSurface; }
+  get: function () { return chunkQMAZGLGV_cjs.isInlineSurface; }
 });
 Object.defineProperty(exports, "isMerchantOfRecord", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.isMerchantOfRecord; }
+  get: function () { return chunkQMAZGLGV_cjs.isMerchantOfRecord; }
 });
 Object.defineProperty(exports, "isOrchestrator", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.isOrchestrator; }
+  get: function () { return chunkQMAZGLGV_cjs.isOrchestrator; }
 });
 Object.defineProperty(exports, "surfacesFor", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.surfacesFor; }
+  get: function () { return chunkQMAZGLGV_cjs.surfacesFor; }
 });
 Object.defineProperty(exports, "validateCheckout", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.validateCheckout; }
+  get: function () { return chunkQMAZGLGV_cjs.validateCheckout; }
 });
 Object.defineProperty(exports, "validateUpsell", {
   enumerable: true,
-  get: function () { return chunkLJYLGLFS_cjs.validateUpsell; }
+  get: function () { return chunkQMAZGLGV_cjs.validateUpsell; }
 });
 exports.AssetsContext = AssetsContext;
 exports.AssetsProvider = AssetsProvider;