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

package/dist/index.js

@@ -1,7 +1,9 @@
-import { isRtl, formatProduct, bucketingSeed, resolveExperiments, entryGuard, evaluateGate, expectedPathLength, nextPage, outgoingKeys, buildCatalog, resolveLocale } from './chunk-AKO6XKXP.js';
-export { assignVariant, bucketingSeed, buildCatalog, compileManifest, currencyExponent, defineFunnel, definePage, entryGuard, evaluateCondition, evaluateGate, expectedPathLength, fnv1a, formatMoney, formatProduct, hashToUnit, isRtl, isVariantKey, nextPage, outgoingKeys, pageMeta, parseSlotKey, pickByWeight, resolveExperiments, resolveLocale, resolveProduct, resolveRoute, validateExperiments } from './chunk-AKO6XKXP.js';
-import { checkoutError, isInlineSurface, PROVIDER_PROFILES } from './chunk-YY375F2B.js';
-export { INLINE_SURFACES, PROVIDER_PROFILES, checkoutError, isInlineSurface, isMerchantOfRecord, isOrchestrator, surfacesFor, validateCheckout, validateUpsell } from './chunk-YY375F2B.js';
+import { isRtl, formatOffering, bucketingSeed, resolveExperiments, entryGuard, evaluateGate, expectedPathLength, nextPage, outgoingKeys, buildCatalog, resolveLocale } from './chunk-7YQLPPPG.js';
+export { assignVariant, bucketingSeed, buildCatalog, compileManifest, currencyExponent, defineFunnel, definePage, entryGuard, evaluateCondition, evaluateGate, expectedPathLength, fnv1a, formatMoney, formatOffering, hashToUnit, isRtl, isVariantKey, nextPage, outgoingKeys, pageMeta, parseSlotKey, pickByWeight, resolveExperiments, resolveLocale, resolveOffering, resolveRoute } from './chunk-7YQLPPPG.js';
+import { AF_PROTOCOL } from './chunk-ZZJG4EYL.js';
+import { checkoutError, isInlineSurface, PROVIDER_PROFILES } from './chunk-TNLRQPVY.js';
+export { INLINE_SURFACES, PROVIDER_PROFILES, checkoutError, isInlineSurface, isMerchantOfRecord, isOrchestrator, surfacesFor, validateCheckout, validateUpsell } from './chunk-TNLRQPVY.js';
+import './chunk-G3PMV62Z.js';
 import React, { createContext, createElement, useCallback, useContext, useMemo, lazy, useRef, useState, useEffect, useTransition, Suspense, Fragment, isValidElement, cloneElement, useReducer, useSyncExternalStore } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
@@ -380,7 +382,40 @@ 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 {
@@ -402,7 +437,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,
@@ -411,6 +458,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;
     }
@@ -538,20 +590,119 @@ function useCatalog() {
   return useContext(CatalogContext) ?? EMPTY;
 }
 var EMPTY = /* @__PURE__ */ new Map();
-function useProduct(id) {
+function useOffering(id) {
   const catalog = useCatalog();
   const locale = useActiveLocale();
   const resolved = id ? catalog.get(id) : void 0;
-  return useMemo(() => resolved ? formatProduct(resolved, locale) : void 0, [resolved, locale]);
+  return useMemo(
+    () => resolved ? formatOffering(resolved, locale) : void 0,
+    [resolved, locale]
+  );
 }
-function useProducts() {
+function useOfferings() {
   const catalog = useCatalog();
   const locale = useActiveLocale();
   return useMemo(
-    () => Array.from(catalog.values()).map((r) => formatProduct(r, locale)),
+    () => Array.from(catalog.values()).map((r) => formatOffering(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 = createContext(null);
 var ExperimentContext = createContext({});
 function useExperiment(id) {
@@ -604,6 +755,7 @@ function usePageExitTimer(tracker, currentKey) {
 function FunnelView({
   pages,
   initialKey,
+  trustInitialKey = false,
   layout,
   fallback,
   prefetch: prefetchMode = "auto",
@@ -643,14 +795,19 @@ function FunnelView({
     [experiments, pageByKey]
   );
   const flow = useMemo(
-    () => flowPages.map((p) => ({ key: p.key, meta: p.meta })),
-    [flowPages]
+    () => flowPages.map((p) => {
+      const servedVariant = experiments.render[p.key];
+      const variantNext = servedVariant ? pageByKey.get(servedVariant)?.meta?.next : void 0;
+      return variantNext ? { key: p.key, meta: { ...p.meta ?? {}, next: variantNext } } : { key: p.key, meta: p.meta };
+    }),
+    [flowPages, experiments, pageByKey]
   );
   const [history, setHistory] = useState(() => {
     const start = flowPages[0]?.key;
     if (!initialKey || initialKey === start) return start ? [start] : [];
     const target = toSlot(initialKey);
     const page2 = flowPages.find((p) => p.key === target);
+    if (trustInitialKey) return page2 ? [target] : start ? [start] : [];
     const guard = entryGuard(page2?.meta);
     const ok = page2 && (!guard || evaluateGate(guard, funnel.snapshot()));
     const first = ok ? target : start;
@@ -736,6 +893,44 @@ function FunnelView({
     canGoBack: history.length > 1,
     isNavigating
   };
+  const bus = useBusInternal();
+  const navRef = useRef(value);
+  navRef.current = value;
+  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]);
+  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 = createElement(Suspense, { fallback: fallback ?? null }, Current ? createElement(Current) : null);
@@ -751,10 +946,85 @@ 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();
+  useEffect(() => {
+    if (!bus || typeof window === "undefined" || window.parent === window) return;
+    const parent = window.parent;
+    let disposed = false;
+    const send = (msg) => {
+      try {
+        parent.postMessage({ af: AF_PROTOCOL, source: "af-preview", ...msg }, "*");
+      } catch {
+      }
+    };
+    const hello = () => send({ kind: "hello", role: "funnel", protocol: 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 !== 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;
 }
-var symModalId = /* @__PURE__ */ Symbol("AppFunnelModalId");
+var symModalId = /* @__PURE__ */ Symbol("AppfunnelModalId");
 var initialState = {};
 var ModalStateContext = createContext(initialState);
 var ModalIdContext = createContext(null);
@@ -769,7 +1039,9 @@ var runtimeStack = [];
 var dispatch = (action) => {
   const top = runtimeStack[runtimeStack.length - 1];
   if (!top) {
-    throw new Error("No modal dispatch \u2014 render inside <FunnelProvider> (which mounts the modal runtime).");
+    throw new Error(
+      "No modal dispatch \u2014 render inside <FunnelProvider> (which mounts the modal runtime)."
+    );
   }
   top(action);
 };
@@ -868,26 +1140,42 @@ function useModal(modal, args) {
   const d = useContext(ModalDispatchContext) ?? dispatch;
   const isComponent = !!modal && typeof modal !== "string";
   const id = modal ? idOf(modal) : contextId;
-  if (!id) throw new Error("useModal: no modal id (call inside a defineModal component, or pass an id/component).");
+  if (!id)
+    throw new Error(
+      "useModal: no modal id (call inside a defineModal component, or pass an id/component)."
+    );
   useEffect(() => {
-    if (isComponent && !REGISTRY[id]) registerModal(id, modal, args);
+    if (isComponent && !REGISTRY[id])
+      registerModal(id, modal, args);
   }, [isComponent, id, modal, args]);
   const info = modals[id];
-  const show = useCallback((a) => showModalVia(d, id, a), [d, id]);
+  const show = useCallback(
+    (a) => showModalVia(d, id, a),
+    [d, id]
+  );
   const hide = useCallback(() => hideModalVia(d, id), [d, id]);
   const remove = useCallback(() => removeModalVia(d, id), [d, id]);
-  const resolve = useCallback((v) => {
-    modalCallbacks[id]?.resolve(v);
-    delete modalCallbacks[id];
-  }, [id]);
-  const reject = useCallback((v) => {
-    modalCallbacks[id]?.reject(v);
-    delete modalCallbacks[id];
-  }, [id]);
-  const resolveHide = useCallback((v) => {
-    hideCallbacks[id]?.resolve(v);
-    delete hideCallbacks[id];
-  }, [id]);
+  const resolve = useCallback(
+    (v) => {
+      modalCallbacks[id]?.resolve(v);
+      delete modalCallbacks[id];
+    },
+    [id]
+  );
+  const reject = useCallback(
+    (v) => {
+      modalCallbacks[id]?.reject(v);
+      delete modalCallbacks[id];
+    },
+    [id]
+  );
+  const resolveHide = useCallback(
+    (v) => {
+      hideCallbacks[id]?.resolve(v);
+      delete hideCallbacks[id];
+    },
+    [id]
+  );
   return useMemo(
     () => ({
       id,
@@ -901,11 +1189,27 @@ function useModal(modal, args) {
       reject,
       resolveHide
     }),
-    [id, info?.args, info?.visible, info?.keepMounted, show, hide, remove, resolve, reject, resolveHide]
+    [
+      id,
+      info?.args,
+      info?.visible,
+      info?.keepMounted,
+      show,
+      hide,
+      remove,
+      resolve,
+      reject,
+      resolveHide
+    ]
   );
 }
 function defineModal(Comp) {
-  return function Wrapped({ id, defaultVisible, keepMounted, ...props }) {
+  return function Wrapped({
+    id,
+    defaultVisible,
+    keepMounted,
+    ...props
+  }) {
     const { args, show } = useModal(id);
     const modals = useContext(ModalStateContext);
     const d = useContext(ModalDispatchContext) ?? dispatch;
@@ -938,7 +1242,9 @@ function ModalRoot() {
   return createElement(
     "div",
     { "data-appfunnel-modal-root": "" },
-    ...toRender.map((t) => createElement(t.comp, { key: t.id, id: t.id, ...t.props }))
+    ...toRender.map(
+      (t) => createElement(t.comp, { key: t.id, id: t.id, ...t.props })
+    )
   );
 }
 function ModalRuntime({ children }) {
@@ -1066,12 +1372,20 @@ 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 : checkoutError("authentication_required", "off-session charge declined (mock)");
+  const success = options.result ?? {
+    ok: true,
+    amountMinor: 0,
+    currency: "USD"
+  };
+  const offError = typeof options.failOffSession === "object" ? options.failOffSession : checkoutError(
+    "authentication_required",
+    "off-session charge declined (mock)"
+  );
   return {
     provider,
     start: (req) => {
-      if (options.failOffSession && !req.surface) return Promise.resolve({ ok: false, error: offError });
+      if (options.failOffSession && !req.surface)
+        return Promise.resolve({ ok: false, error: offError });
       return Promise.resolve(success);
     },
     renderInline: (req, cb) => createElement(
@@ -1082,7 +1396,13 @@ function createMockDriver(provider = "stripe", options = {}) {
         onClick: () => {
           cb.onStart?.();
           if (success.ok) cb.onSuccess(success);
-          else cb.onError(success.error ?? checkoutError("processing_error", "failed (mock)"));
+          else
+            cb.onError(
+              success.error ?? checkoutError(
+                "processing_error",
+                "failed (mock)"
+              )
+            );
         }
       },
       `Pay (mock ${req.surface})`
@@ -1140,11 +1460,11 @@ function useCheckout(opts = {}) {
     [catalog, kind]
   );
   const recovering = useRef(false);
-  const failRef = useRef(() => {
-  });
-  const attemptRef = useRef(
-    async () => ({ ok: false })
+  const failRef = useRef(
+    () => {
+    }
   );
+  const attemptRef = useRef(async () => ({ ok: false }));
   const succeed = useCallback(
     (result, product) => {
       setStatus("success");
@@ -1158,7 +1478,12 @@ function useCheckout(opts = {}) {
         // server-minted (browser↔CAPI dedup); undefined if none
       });
       if (isSubscription) {
-        tracker.track("subscription.created", { amount, currency: result.currency, productId, eventId: result.eventId });
+        tracker.track("subscription.created", {
+          amount,
+          currency: result.currency,
+          productId,
+          eventId: result.eventId
+        });
       }
       opts.onSuccess?.(result);
       if (advance) nav.next();
@@ -1172,14 +1497,25 @@ function useCheckout(opts = {}) {
       setStatus("loading");
       setError(null);
       const { productId, amount, currency } = productFacts(product);
-      tracker.track("checkout.start", { productId, amount, currency, surface, eventId: newEventId() });
+      tracker.track("checkout.start", {
+        productId,
+        amount,
+        currency,
+        surface,
+        eventId: newEventId()
+      });
     },
     [tracker, productFacts]
   );
   const paymentAdded = useCallback(
     (product) => {
       const { productId, amount, currency } = productFacts(product);
-      tracker.track("checkout.payment_added", { productId, amount, currency, eventId: newEventId() });
+      tracker.track("checkout.payment_added", {
+        productId,
+        amount,
+        currency,
+        eventId: newEventId()
+      });
     },
     [tracker, productFacts]
   );
@@ -1202,7 +1538,9 @@ function useCheckout(opts = {}) {
     }
   };
   failRef.current = (err, product) => {
-    setStatus(err.category === "authentication_required" ? "requires_action" : "error");
+    setStatus(
+      err.category === "authentication_required" ? "requires_action" : "error"
+    );
     setError(err);
     tracker.track("checkout.failed", {
       category: err.category,
@@ -1233,35 +1571,59 @@ function useCheckout(opts = {}) {
           if (!product) return;
           recovering.current = true;
           if (!surface) {
-            if (intent === "upsell") void attemptRef.current(product);
-            else startRecovery(product, PROVIDER_PROFILES[driver.provider]?.surfaces.sheet ? "sheet" : "popup");
+            if (intent === "upsell")
+              void attemptRef.current(product);
+            else
+              startRecovery(
+                product,
+                PROVIDER_PROFILES[driver.provider]?.surfaces.sheet ? "sheet" : "popup"
+              );
             return;
           }
           startRecovery(product, surface);
         }
       };
-      void showModal(route.modal, props);
+      void showModal(
+        route.modal,
+        props
+      );
     } else if ("fallback" in route) {
-      if (product && !recovering.current) startRecovery(product, route.fallback);
+      if (product && !recovering.current)
+        startRecovery(product, route.fallback);
     }
   };
   attemptRef.current = async (product, surface) => {
     begin(product, surface);
     try {
-      const result = await driver.start({ product, intent, surface, kind });
+      const result = await driver.start({
+        product,
+        intent,
+        surface,
+        kind
+      });
       if (result.ok) succeedRef.current(result, product);
-      else failRef.current(result.error ?? checkoutError("unknown", "Checkout failed"), product);
+      else
+        failRef.current(
+          result.error ?? checkoutError("unknown", "Checkout failed"),
+          product
+        );
       return result;
     } catch (e) {
-      const err = checkoutError("processing_error", e instanceof Error ? e.message : "Checkout failed");
+      const err = checkoutError(
+        "processing_error",
+        e instanceof Error ? e.message : "Checkout failed"
+      );
       failRef.current(err, product);
       return { ok: false, error: err };
     }
   };
-  const open = useCallback(async (product, surface) => {
-    recovering.current = false;
-    return attemptRef.current(product, surface);
-  }, []);
+  const open = useCallback(
+    async (product, surface) => {
+      recovering.current = false;
+      return attemptRef.current(product, surface);
+    },
+    []
+  );
   const callbacksFor = useCallback(
     (product, surface) => ({
       onStart: () => {
@@ -1279,7 +1641,14 @@ function useCheckout(opts = {}) {
     setStatus("idle");
     setError(null);
   }, []);
-  return { open, status, error, isLoading: status === "loading", reset, callbacksFor };
+  return {
+    open,
+    status,
+    error,
+    isLoading: status === "loading",
+    reset,
+    callbacksFor
+  };
 }
 var CheckoutSheet = defineModal(({ product, surface, intent, kind, onSuccess, onError, onPaymentAdded }) => {
   const driver = useDriver();
@@ -1292,7 +1661,10 @@ var CheckoutSheet = defineModal(({ product, surface, intent, kind, onSuccess, on
     if (!hostable) {
       resolved.current = true;
       onErrorRef.current(
-        checkoutError("processing_error", "This checkout driver has no inline surface to host in the sheet")
+        checkoutError(
+          "processing_error",
+          "This checkout driver has no inline surface to host in the sheet"
+        )
       );
       void modal.hide();
       modal.remove();
@@ -1300,7 +1672,12 @@ var CheckoutSheet = defineModal(({ product, surface, intent, kind, onSuccess, on
     }
     return () => {
       if (!resolved.current) {
-        onErrorRef.current(checkoutError("canceled", "Checkout was dismissed before completing"));
+        onErrorRef.current(
+          checkoutError(
+            "canceled",
+            "Checkout was dismissed before completing"
+          )
+        );
       }
     };
   }, []);
@@ -1327,21 +1704,31 @@ var CheckoutSheet = defineModal(({ product, surface, intent, kind, onSuccess, on
     )
   });
 });
-function trigger(onClick, { asChild, children, className, disabled }) {
+function trigger(onClick, {
+  asChild,
+  children,
+  className,
+  disabled
+}) {
   if (asChild && isValidElement(children)) {
     const child = children;
     return cloneElement(child, { onClick });
   }
-  return createElement("button", { type: "button", className, disabled, onClick }, children ?? "Continue");
+  return createElement(
+    "button",
+    { type: "button", className, disabled, onClick },
+    children ?? "Continue"
+  );
 }
 function Checkout({
-  product,
+  offering,
   surface,
   asChild,
   children,
   className,
   ...options
 }) {
+  const product = offering;
   const driver = useDriver();
   const checkout = useCheckout(options);
   const intent = options.intent ?? "purchase";
@@ -1349,7 +1736,10 @@ function Checkout({
     return driver.renderInline ? createElement(
       "div",
       { key: product, className },
-      driver.renderInline({ product, intent, surface }, checkout.callbacksFor(product, surface))
+      driver.renderInline(
+        { product, intent, surface },
+        checkout.callbacksFor(product, surface)
+      )
     ) : null;
   }
   if (surface === "sheet") {
@@ -1366,7 +1756,12 @@ function Checkout({
         onPaymentAdded: cb.onPaymentAdded
       });
     };
-    return trigger(open, { asChild, children, className, disabled: checkout.isLoading });
+    return trigger(open, {
+      asChild,
+      children,
+      className,
+      disabled: checkout.isLoading
+    });
   }
   return trigger(() => checkout.open(product, surface), {
     asChild,
@@ -1375,18 +1770,29 @@ function Checkout({
     disabled: checkout.isLoading
   });
 }
-function Upsell({ product, fallback, asChild, children, className, ...options }) {
+function Upsell({
+  offering,
+  fallback,
+  asChild,
+  children,
+  className,
+  ...options
+}) {
+  const product = offering;
   const checkout = useCheckout({
     ...options,
     intent: "upsell",
     recoverySurface: fallback ?? options.recoverySurface
   });
-  return trigger(() => void checkout.open(product), {
-    asChild,
-    children: children ?? "Add to my plan",
-    className,
-    disabled: checkout.isLoading
-  });
+  return trigger(
+    () => void checkout.open(product),
+    {
+      asChild,
+      children: children ?? "Add to my plan",
+      className,
+      disabled: checkout.isLoading
+    }
+  );
 }
 var consumedResumes = /* @__PURE__ */ new Set();
 function CheckoutResume(options = {}) {
@@ -1404,10 +1810,19 @@ function CheckoutResume(options = {}) {
       const cb = callbacksRef.current();
       if (result.ok) {
         url.searchParams.delete("af_checkout");
-        window.history.replaceState(window.history.state, "", url.toString());
+        window.history.replaceState(
+          window.history.state,
+          "",
+          url.toString()
+        );
         cb.onSuccess(result);
       } else {
-        cb.onError(result.error ?? checkoutError("unknown", "The checkout could not be verified"));
+        cb.onError(
+          result.error ?? checkoutError(
+            "unknown",
+            "The checkout could not be verified"
+          )
+        );
       }
     });
   }, []);
@@ -2522,7 +2937,8 @@ var Namespace = class {
     const out = {};
     const all = this.store.getState();
     for (const key in all) {
-      if (key.startsWith(this.dot)) out[key.slice(this.dot.length)] = all[key];
+      if (key.startsWith(this.dot))
+        out[key.slice(this.dot.length)] = all[key];
     }
     return out;
   }
@@ -2568,9 +2984,10 @@ var FunnelCtx = createContext(null);
 function FunnelProvider({
   config,
   sessionValues,
+  deferSessionValues = false,
   tracker,
   context: contextOpts,
-  products,
+  offerings,
   experiments,
   checkout,
   messages,
@@ -2583,7 +3000,12 @@ function FunnelProvider({
   const [value] = 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,
@@ -2601,7 +3023,7 @@ function FunnelProvider({
       const value2 = s.get("user.email");
       return typeof value2 === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value2) ? value2 : void 0;
     };
-    const catalog = buildCatalog(products ?? []);
+    const catalog = buildCatalog(offerings ?? []);
     return {
       funnel: createFunnel(s, ctx, busTracker, experiments ?? []),
       store: s,
@@ -2609,12 +3031,25 @@ function FunnelProvider({
       catalog,
       // Slot → catalog-key resolution wraps the email-enriching driver, so the wire charges the real
       // catalog key while pages + analytics keep the durable SLOT identity (req.product).
-      driver: driverWithCatalog(driverWithEmail(checkout ?? createMockDriver(), emailForCheckout), catalog),
+      driver: driverWithCatalog(
+        driverWithEmail(
+          checkout ?? createMockDriver(),
+          emailForCheckout
+        ),
+        catalog
+      ),
       tracker: busTracker,
       bus
     };
   });
   useEffect(() => attachBus(value.bus), [value.bus]);
+  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);
+  }, []);
   useEffect(() => {
     value.tracker.setAcquisition?.(buildAcquisition(value.context));
   }, [value]);
@@ -2643,13 +3078,18 @@ var FALLBACK_TRACKER = createConsoleTracker({ silent: true });
 function useFunnelCtx() {
   const ctx = useContext(FunnelCtx);
   if (!ctx) {
-    throw new Error("useFunnel/useResponse/\u2026 must be used inside <FunnelProvider>");
+    throw new Error(
+      "useFunnel/useResponse/\u2026 must be used inside <FunnelProvider>"
+    );
   }
   return ctx;
 }
 function useFunnel() {
   return useFunnelCtx().funnel;
 }
+function useBusInternal() {
+  return useContext(FunnelCtx)?.bus ?? null;
+}
 function useStoreKey(store, key) {
   const subscribe = useCallback(
     (cb) => store.subscribe(cb, { keys: [key] }),
@@ -2678,7 +3118,9 @@ function useField(path) {
   const key = path.slice(dot + 1);
   const { funnel, store } = useFunnelCtx();
   if (!(ns in NAMESPACE_PREFIX)) {
-    throw new Error(`useField: "${path}" is not a writable namespace (user/responses/data)`);
+    throw new Error(
+      `useField: "${path}" is not a writable namespace (user/responses/data)`
+    );
   }
   const value = useStoreKey(store, `${NAMESPACE_PREFIX[ns]}.${key}`);
   const set = useCallback(
@@ -2708,11 +3150,160 @@ function useSystem() {
 function useContextValue(path) {
   const ctx = useContextObject();
   return useMemo(
-    () => path.split(".").reduce((acc, k) => acc?.[k], ctx),
+    () => path.split(".").reduce(
+      (acc, k) => acc?.[k],
+      ctx
+    ),
     [ctx, 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(
@@ -2818,32 +3409,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) {
@@ -2886,6 +3480,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,
@@ -2907,6 +3502,7 @@ function createFunnelTree({
         Fragment,
         null,
         createElement(CheckoutResume, null),
+        embedEnabled ? createElement(EmbedBridge, null) : null,
         layout ? createElement(layout, null, children) : children
       );
     };
@@ -2914,12 +3510,13 @@ function createFunnelTree({
       assets: opts.assets,
       children: createElement(FunnelProvider, {
         config,
-        products: opts.products ?? [],
+        offerings: opts.offerings ?? [],
         messages: opts.messages ?? messages,
         locale: opts.locale,
         tracker,
         checkout,
         sessionValues: opts.sessionValues,
+        deferSessionValues: opts.deferSessionValues,
         experiments: opts.experiments,
         context: {
           mode,
@@ -2931,6 +3528,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
         })
@@ -3077,6 +3681,6 @@ function Script({
   return null;
 }
 
-export { AssetsContext, AssetsProvider, Back, Checkout, CheckoutResume, Choice, EVENT_CATALOG, FunnelProvider, FunnelToaster, FunnelView, Modal, Next, Script, Sheet, Upsell, VariableStore, attachBus, buildAcquisition, buildContext, createBus, createConsoleTracker, createFunnelStore, createFunnelTree, createMockDriver, createPlatformTracker, defineModal, driverWithEmail, hideModal, integrationEvents, isIntegrationEvent, isTrackableEvent, newEventId, registerModal, removeModal, showModal, toast, unregisterModal, useActiveLocale, useAsset, useAssets, useCheckout, useClickIds, useContextValue, useData, useDevice, useExperiment, useField, useFunnel, useLocale, useModal, useNavigation, usePage, useProduct, useProducts, useResponse, useSystem, useTracker, useTranslation, useUserAttribute, useUtm, withBus };
+export { AssetsContext, AssetsProvider, Back, Checkout, CheckoutResume, Choice, EVENT_CATALOG, FunnelProvider, FunnelToaster, FunnelView, Modal, Next, Script, Sheet, Upsell, VariableStore, attachBus, buildAcquisition, buildContext, createBus, createConsoleTracker, createFunnelStore, createFunnelTree, createMockDriver, createPlatformTracker, defineModal, driverWithEmail, hideModal, integrationEvents, isIntegrationEvent, isTrackableEvent, newEventId, registerModal, removeModal, showModal, toast, unregisterModal, useActiveLocale, useAsset, useAssets, useCheckout, useClickIds, useContextValue, useData, useDevice, useExperiment, useField, useFunnel, useLocale, useModal, useNavigation, useOffering, useOfferings, usePage, useResponse, useSystem, useTracker, useTranslation, useUserAttribute, useUtm, withBus };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map