@appfunnel-dev/sdk 0.16.0 → 2.0.0-canary.0

package/dist/index.js

@@ -1,1642 +1,2024 @@
-import { useNavigation, useResponses } from './chunk-IA5WCBUS.js';
-export { useNavigation, useResponse, useResponses } from './chunk-IA5WCBUS.js';
-import { useFunnelContext } from './chunk-FDAIQSVU.js';
-export { FunnelProvider, registerIntegration } from './chunk-FDAIQSVU.js';
-import { forwardRef, useMemo, useRef, useEffect, useCallback, useImperativeHandle, useState, useSyncExternalStore } from 'react';
-import { loadStripe } from '@stripe/stripe-js';
-import { toast } from 'sonner';
+import { createContext, createElement, useCallback, useContext, useMemo, lazy, useState, useRef, useEffect, Suspense, Fragment, isValidElement, cloneElement, useReducer, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { Toaster } from 'sonner';
 export { toast } from 'sonner';
-import { useStripe, useElements, PaymentElement, EmbeddedCheckoutProvider, EmbeddedCheckout, Elements } from '@stripe/react-stripe-js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/config.ts
-function defineConfig(config) {
-  return config;
-}
-function definePage(definition) {
-  return definition;
-}
-function useVariable(id) {
-  const { variableStore } = useFunnelContext();
-  const subscribe = useCallback(
-    (callback) => variableStore.subscribe(callback, { keys: [id] }),
-    [variableStore, id]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.get(id),
-    [variableStore, id]
-  );
-  const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const setValue = useCallback(
-    (v) => variableStore.set(id, v),
-    [variableStore, id]
-  );
-  return [value, setValue];
-}
-function useVariables() {
-  const { variableStore } = useFunnelContext();
-  const subscribe = useCallback(
-    (callback) => variableStore.subscribe(callback),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
-  );
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
+// src/state/namespaces.ts
 
-// src/utils/date.ts
-function toISODate(input) {
-  if (!input || !input.trim()) return "";
-  const s = input.trim();
-  if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
-  if (/^\d{4}-\d{2}-\d{2}T/.test(s)) return s.slice(0, 10);
-  const sepMatch = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
-  if (sepMatch) {
-    const a = parseInt(sepMatch[1], 10);
-    const b = parseInt(sepMatch[2], 10);
-    const year = sepMatch[3];
-    let month;
-    let day;
-    if (a > 12 && b <= 12) {
-      day = a;
-      month = b;
-    } else if (b > 12 && a <= 12) {
-      month = a;
-      day = b;
-    } else {
-      month = a;
-      day = b;
+// src/state/variableStore.ts
+var VariableStore = class {
+  constructor(initial) {
+    this.listeners = /* @__PURE__ */ new Set();
+    /** Tracks which keys changed in the last mutation — used by scoped notify */
+    this.changedKeys = [];
+    this.state = { ...initial };
+  }
+  getState() {
+    return this.state;
+  }
+  get(key) {
+    return this.state[key];
+  }
+  set(key, value) {
+    if (this.state[key] === value) return;
+    this.state = { ...this.state, [key]: value };
+    this.changedKeys = [key];
+    this.notify();
+  }
+  setState(updater) {
+    const prev = this.state;
+    const next = updater(prev);
+    if (next === prev) return;
+    this.state = next;
+    this.changedKeys = [];
+    for (const key of Object.keys(next)) {
+      if (next[key] !== prev[key]) this.changedKeys.push(key);
     }
-    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
-      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    for (const key of Object.keys(prev)) {
+      if (!(key in next) && prev[key] !== void 0) this.changedKeys.push(key);
     }
+    this.notify();
   }
-  const ymdSlash = s.match(/^(\d{4})[/\-.](\d{1,2})[/\-.](\d{1,2})$/);
-  if (ymdSlash) {
-    const year = ymdSlash[1];
-    const month = parseInt(ymdSlash[2], 10);
-    const day = parseInt(ymdSlash[3], 10);
-    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
-      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+  /** Batch set multiple variables at once */
+  setMany(updates) {
+    const changed = [];
+    const next = { ...this.state };
+    for (const [key, value] of Object.entries(updates)) {
+      if (next[key] !== value) {
+        next[key] = value;
+        changed.push(key);
+      }
     }
+    if (changed.length === 0) return;
+    this.state = next;
+    this.changedKeys = changed;
+    this.notify();
   }
-  if (/^\d{8}$/.test(s)) {
-    const a = parseInt(s.slice(0, 2), 10);
-    const b = parseInt(s.slice(2, 4), 10);
-    const year = s.slice(4, 8);
-    let month;
-    let day;
-    if (a > 12 && b <= 12) {
-      day = a;
-      month = b;
-    } else {
-      month = a;
-      day = b;
-    }
-    if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
-      return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+  /**
+   * Subscribe to store changes.
+   *
+   * @param listener - callback fired when relevant keys change
+   * @param scope - optional scope to limit notifications:
+   *   - `{ keys: ['data.x', 'user.email'] }` — only fire when these exact keys change
+   *   - `{ prefix: 'answers.' }` — only fire when any key starting with this prefix changes
+   *   - omit or `{}` — fire on every change (global listener)
+   */
+  subscribe(listener, scope) {
+    const entry = {
+      listener,
+      keys: scope?.keys || null,
+      prefix: scope?.prefix || null
+    };
+    this.listeners.add(entry);
+    return () => this.listeners.delete(entry);
+  }
+  notify() {
+    const changed = this.changedKeys;
+    for (const entry of this.listeners) {
+      if (!entry.keys && !entry.prefix) {
+        entry.listener();
+        continue;
+      }
+      if (entry.keys) {
+        if (changed.some((k) => entry.keys.includes(k))) {
+          entry.listener();
+        }
+        continue;
+      }
+      if (entry.prefix) {
+        if (changed.some((k) => k.startsWith(entry.prefix))) {
+          entry.listener();
+        }
+      }
     }
   }
-  throw new Error(
-    `[AppFunnel] Invalid date format: "${input}". Expected a date string like MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, or MMDDYYYY.`
-  );
-}
-function toISODateWithFormat(input, format) {
-  if (!input || !input.trim()) return "";
-  const s = input.trim();
-  if (/^\d{4}-\d{2}-\d{2}$/.test(s) || /^\d{4}-\d{2}-\d{2}T/.test(s)) {
-    return s.slice(0, 10);
+};
+
+// src/state/store.ts
+var NAMESPACE_PREFIX = {
+  user: "user",
+  responses: "responses",
+  data: "data"
+};
+var BUILTIN_USER = {
+  "user.email": "",
+  "user.name": ""
+};
+function defaultFor(type) {
+  switch (type) {
+    case "string":
+      return "";
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+    case "stringArray":
+      return [];
+    default:
+      return "";
   }
-  const digits = s.replace(/[^\d]/g, "");
-  if (format === "YYYY-MM-DD") {
-    const m = s.match(/^(\d{4})[/\-.](\d{1,2})[/\-.](\d{1,2})$/);
-    if (m) return `${m[1]}-${m[2].padStart(2, "0")}-${m[3].padStart(2, "0")}`;
-    if (digits.length === 8) {
-      return `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6, 8)}`;
-    }
+}
+function createFunnelStore(config = {}, sessionValues) {
+  const initial = { ...BUILTIN_USER };
+  for (const [key, cfg] of Object.entries(config.responses ?? {})) {
+    initial[`responses.${key}`] = cfg.default ?? defaultFor(cfg.type);
   }
-  if (format === "MM/DD/YYYY") {
-    const m = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
-    if (m) return `${m[3]}-${m[1].padStart(2, "0")}-${m[2].padStart(2, "0")}`;
-    if (digits.length === 8) {
-      return `${digits.slice(4, 8)}-${digits.slice(0, 2)}-${digits.slice(2, 4)}`;
-    }
+  for (const [key, cfg] of Object.entries(config.data ?? {})) {
+    initial[`data.${key}`] = cfg.default ?? defaultFor(cfg.type);
   }
-  if (format === "DD/MM/YYYY") {
-    const m = s.match(/^(\d{1,2})[/\-.](\d{1,2})[/\-.](\d{4})$/);
-    if (m) return `${m[3]}-${m[2].padStart(2, "0")}-${m[1].padStart(2, "0")}`;
-    if (digits.length === 8) {
-      return `${digits.slice(4, 8)}-${digits.slice(2, 4)}-${digits.slice(0, 2)}`;
+  if (sessionValues) {
+    for (const [key, value] of Object.entries(sessionValues)) {
+      if (value !== void 0) initial[key] = value;
     }
   }
-  throw new Error(
-    `[AppFunnel] Invalid date format: "${input}". Expected format ${format} (e.g. ${{
-      "MM/DD/YYYY": "03/15/1990 or 03151990",
-      "DD/MM/YYYY": "15/03/1990 or 15031990",
-      "YYYY-MM-DD": "1990-03-15 or 19900315"
-    }[format]}).`
-  );
+  return new VariableStore(initial);
 }
 
-// src/hooks/useUser.ts
-function useUser() {
-  const { variableStore, tracker } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { prefix: "user." }),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
-  );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return useMemo(
-    () => ({
-      email: variables["user.email"] || "",
-      name: variables["user.name"] || "",
-      stripeCustomerId: variables["user.stripeCustomerId"] || "",
-      paddleCustomerId: variables["user.paddleCustomerId"] || "",
-      dateOfBirth: variables["user.dateOfBirth"] || "",
-      marketingConsent: variables["user.marketingConsent"] === true,
-      setEmail(email) {
-        variableStore.set("user.email", email);
-      },
-      setName(name) {
-        variableStore.set("user.name", name);
-      },
-      setDateOfBirth(dateOfBirth) {
-        variableStore.set("user.dateOfBirth", toISODate(dateOfBirth));
+// src/state/context.ts
+var cached = null;
+function extractVersion(ua, regex) {
+  return ua.match(regex)?.[1] ?? "0";
+}
+function detect() {
+  if (cached) return cached;
+  if (typeof window === "undefined") {
+    cached = {
+      device: {
+        type: "desktop",
+        isMobile: false,
+        isTablet: false,
+        screenWidth: 0,
+        screenHeight: 0,
+        viewportWidth: 0,
+        viewportHeight: 0,
+        colorDepth: 24,
+        pixelRatio: 1
       },
-      setMarketingConsent(consent) {
-        variableStore.set("user.marketingConsent", consent);
-        if (consent) {
-          tracker.track("marketing.consent_given");
-        }
+      browser: {
+        name: "Unknown",
+        version: "0",
+        userAgent: "unknown",
+        language: "en",
+        cookieEnabled: true,
+        online: true
       },
-      identify(email) {
-        tracker.identify(email);
-      }
-    }),
-    [variables, variableStore, tracker]
-  );
+      os: { name: "Unknown", timezone: "UTC" },
+      locale: { locale: "en", language: "en", region: "", timeZone: "UTC" }
+    };
+    return cached;
+  }
+  const ua = navigator.userAgent;
+  const l = ua.toLowerCase();
+  let name = "Unknown";
+  let version = "0";
+  if (l.includes("firefox")) {
+    name = "Firefox";
+    version = extractVersion(ua, /Firefox\/(\d+[\d.]*)/);
+  } else if (l.includes("edg")) {
+    name = "Edge";
+    version = extractVersion(ua, /Edg\/(\d+[\d.]*)/);
+  } else if (l.includes("chrome") && !l.includes("edg")) {
+    name = "Chrome";
+    version = extractVersion(ua, /Chrome\/(\d+[\d.]*)/);
+  } else if (l.includes("safari") && !l.includes("chrome")) {
+    name = "Safari";
+    version = extractVersion(ua, /Version\/(\d+[\d.]*)/);
+  }
+  let osName = "Unknown";
+  if (l.includes("win")) osName = "Windows";
+  else if (l.includes("mac")) osName = "macOS";
+  else if (l.includes("linux") && !l.includes("android")) osName = "Linux";
+  else if (l.includes("android")) osName = "Android";
+  else if (/iphone|ipad|ipod/.test(l)) osName = "iOS";
+  let type = "desktop";
+  if (/mobile|android(?!.*tablet)|iphone|ipod/.test(l)) type = "mobile";
+  else if (/tablet|ipad/.test(l)) type = "tablet";
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  const fullLocale = navigator.language || "en";
+  const [language = "en", region = ""] = fullLocale.split("-");
+  cached = {
+    device: {
+      type,
+      isMobile: type === "mobile",
+      isTablet: type === "tablet",
+      screenWidth: window.screen?.width || 0,
+      screenHeight: window.screen?.height || 0,
+      viewportWidth: window.innerWidth || 0,
+      viewportHeight: window.innerHeight || 0,
+      colorDepth: window.screen?.colorDepth || 24,
+      pixelRatio: window.devicePixelRatio || 1
+    },
+    browser: {
+      name,
+      version,
+      userAgent: ua,
+      language: fullLocale,
+      cookieEnabled: navigator.cookieEnabled ?? true,
+      online: navigator.onLine ?? true
+    },
+    os: { name: osName, timezone: timeZone },
+    locale: { locale: fullLocale, language, region, timeZone }
+  };
+  return cached;
 }
-function useUserProperty(field) {
-  const { variableStore } = useFunnelContext();
-  const key = `user.${field}`;
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: [key] }),
-    [variableStore, key]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.get(key) || "",
-    [variableStore, key]
-  );
-  const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const setValue = useCallback(
-    (v) => variableStore.set(key, v),
-    [variableStore, key]
-  );
-  return [value, setValue];
+function collectUtm() {
+  if (typeof window === "undefined") return {};
+  const out = {};
+  const params = new URLSearchParams(window.location.search);
+  params.forEach((value, key) => {
+    if (key.startsWith("utm_")) out[key.slice(4)] = value;
+  });
+  return out;
 }
-function useDateOfBirth(format = "MM/DD/YYYY") {
-  const { variableStore } = useFunnelContext();
-  const key = "user.dateOfBirth";
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: [key] }),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.get(key) || "",
-    [variableStore]
-  );
-  const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const setValue = useCallback(
-    (v) => variableStore.set(key, toISODateWithFormat(v, format)),
-    [variableStore, format]
-  );
-  return [value, setValue];
+var CLICK_ID_PARAMS = [
+  "fbclid",
+  "gclid",
+  "gbraid",
+  "wbraid",
+  "msclkid",
+  "ttclid",
+  "twclid",
+  "sccid",
+  "li_fat_id",
+  "epik",
+  "rdt_cid",
+  "dclid",
+  "irclickid"
+];
+function collectClickIds() {
+  if (typeof window === "undefined") return {};
+  const out = {};
+  const params = new URLSearchParams(window.location.search);
+  for (const key of CLICK_ID_PARAMS) {
+    const v = params.get(key);
+    if (v) out[key] = v;
+  }
+  return out;
 }
-function useQueryParams() {
-  const { variableStore } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { prefix: "query." }),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
+function readCookie(name) {
+  if (typeof document === "undefined") return void 0;
+  const m = document.cookie.match(new RegExp("(?:^|; )" + name + "=([^;]*)"));
+  return m ? decodeURIComponent(m[1]) : void 0;
+}
+function buildAcquisition(context) {
+  return {
+    utm: context.utm,
+    clickIds: context.clickIds,
+    cookies: { fbp: readCookie("_fbp"), fbc: readCookie("_fbc") },
+    referrer: context.session.referrer,
+    landingPath: typeof window !== "undefined" ? window.location.pathname : ""
+  };
+}
+function buildContext(opts = {}) {
+  const raw = detect();
+  const now = opts.now ?? 0;
+  const referrer = typeof document !== "undefined" ? document.referrer : "";
+  const base2 = {
+    device: raw.device,
+    browser: raw.browser,
+    os: raw.os,
+    locale: raw.locale,
+    utm: collectUtm(),
+    clickIds: collectClickIds(),
+    page: { key: "", slug: "", index: 0, total: 0, progressPercentage: 0, startedAt: now },
+    session: { id: opts.sessionId ?? null, startedAt: now, referrer },
+    identity: { customerId: opts.customerId ?? null, visitorId: opts.visitorId ?? null },
+    system: {
+      funnelId: opts.funnelId ?? "",
+      campaignId: opts.campaignId ?? "",
+      mode: opts.mode ?? "live",
+      now
+    }
+  };
+  if (!opts.overrides) return base2;
+  return {
+    ...base2,
+    ...opts.overrides,
+    device: { ...base2.device, ...opts.overrides.device },
+    browser: { ...base2.browser, ...opts.overrides.browser },
+    os: { ...base2.os, ...opts.overrides.os },
+    locale: { ...base2.locale, ...opts.overrides.locale },
+    utm: { ...base2.utm, ...opts.overrides.utm },
+    clickIds: { ...base2.clickIds, ...opts.overrides.clickIds },
+    page: { ...base2.page, ...opts.overrides.page },
+    session: { ...base2.session, ...opts.overrides.session },
+    identity: { ...base2.identity, ...opts.overrides.identity },
+    system: { ...base2.system, ...opts.overrides.system }
+  };
+}
+var _eventIdCounter = 0;
+function newEventId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  return `af_${Date.now().toString(36)}_${(_eventIdCounter++).toString(36)}`;
+}
+function createConsoleTracker(opts = {}) {
+  const log = (label, ...args) => {
+    if (!opts.silent) console.info(`[appfunnel] ${label}`, ...args);
+  };
+  return {
+    track: (event, data) => log(`track ${event}`, data ?? {}),
+    identify: (email, eventId) => log("identify", email, eventId),
+    setVariables: (vars) => log("vars", vars),
+    setAcquisition: (acq) => log("acquisition", acq)
+  };
+}
+var TrackerContext = createContext(null);
+function TrackerProvider({
+  tracker,
+  children
+}) {
+  return createElement(TrackerContext.Provider, { value: tracker }, children);
+}
+function useTrackerRef() {
+  return useContext(TrackerContext) ?? FALLBACK;
+}
+var FALLBACK = createConsoleTracker({ silent: true });
+function useTracker() {
+  const tracker = useTrackerRef();
+  const track = useCallback(
+    (event, data, userData) => tracker.track(event, data, userData),
+    [tracker]
   );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return useMemo(() => {
-    const params = {};
-    for (const [key, value] of Object.entries(variables)) {
-      if (key.startsWith("query.") && typeof value === "string") {
-        params[key.slice(6)] = value;
+  return { track };
+}
+
+// src/tracking/bus.ts
+var MAX_HISTORY = 250;
+function createBus(accessors, now = () => Date.now()) {
+  const listeners = /* @__PURE__ */ new Map();
+  const events = [];
+  const on = (event, cb) => {
+    let set = listeners.get(event);
+    if (!set) listeners.set(event, set = /* @__PURE__ */ new Set());
+    set.add(cb);
+    return () => off(event, cb);
+  };
+  const off = (event, cb) => {
+    listeners.get(event)?.delete(cb);
+  };
+  const emit = (event, data) => {
+    events.push({ event, data, ts: now() });
+    if (events.length > MAX_HISTORY) events.shift();
+    for (const cb of listeners.get(event) ?? []) {
+      try {
+        cb(data);
+      } catch {
       }
     }
-    return params;
-  }, [variables]);
+    for (const cb of listeners.get("*") ?? []) {
+      try {
+        cb({ event, data });
+      } catch {
+      }
+    }
+  };
+  return { on, off, events, emit, ...accessors };
 }
-function useQueryParam(key) {
-  const { variableStore } = useFunnelContext();
-  const prefixedKey = `query.${key}`;
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
-    [variableStore, prefixedKey]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.get(prefixedKey) || "",
-    [variableStore, prefixedKey]
-  );
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+function withBus(tracker, bus) {
+  return {
+    // Spread preserves the original call arity (don't append an undefined userData).
+    track: ((...args) => {
+      tracker.track(...args);
+      bus.emit(args[0], args[1]);
+    }),
+    identify: (email, eventId) => {
+      const id = eventId ?? newEventId();
+      tracker.identify(email, id);
+      bus.emit("user.registered", { email, eventId: id });
+    },
+    setVariables: tracker.setVariables ? (v) => tracker.setVariables(v) : void 0,
+    // Acquisition is persistence (session + first-touch Customer), not a bus event.
+    setAcquisition: tracker.setAcquisition ? (a) => tracker.setAcquisition(a) : void 0
+  };
 }
-function useData(key) {
-  const { variableStore } = useFunnelContext();
-  const prefixedKey = `data.${key}`;
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: [prefixedKey] }),
-    [variableStore, prefixedKey]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.get(prefixedKey),
-    [variableStore, prefixedKey]
-  );
-  const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const setValue = useCallback(
-    (v) => variableStore.set(prefixedKey, v),
-    [variableStore, prefixedKey]
+function attachBus(bus) {
+  if (typeof window === "undefined") return () => {
+  };
+  const { on, off, getVariable, getVariables, getCurrentPageId, getCustomerId, getVisitorId } = bus;
+  const api = {
+    on,
+    off,
+    getVariable,
+    getVariables,
+    getCurrentPageId,
+    getCustomerId,
+    getVisitorId,
+    get events() {
+      return bus.events;
+    }
+  };
+  window.appfunnel = api;
+  return () => {
+    if (window.appfunnel === api) delete window.appfunnel;
+  };
+}
+var RTL_LANGS = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur", "ps", "sd", "dv", "yi"]);
+function isRtl(locale) {
+  return RTL_LANGS.has(locale.split("-")[0]);
+}
+var base = (l) => l?.split("-")[0];
+function resolveLocale(config, detected, override) {
+  const supported = config?.supported ?? (config?.default ? [config.default] : ["en"]);
+  const def = config?.default ?? supported[0] ?? "en";
+  const pick = (l) => {
+    if (!l) return void 0;
+    if (supported.includes(l)) return l;
+    return supported.find((s) => base(s) === base(l));
+  };
+  return pick(override) ?? pick(detected) ?? def;
+}
+function interpolate(str, params) {
+  if (!params) return str;
+  return str.replace(/\{\{(\w+)\}\}/g, (_, k) => k in params ? String(params[k]) : `{{${k}}}`);
+}
+function lookup(catalog, chain, key) {
+  for (const loc of chain) {
+    const v = catalog[loc]?.[key];
+    if (v !== void 0) return v;
+  }
+  return void 0;
+}
+function devWarn(message) {
+  const env = globalThis.process?.env?.NODE_ENV;
+  if (env === "production") return;
+  try {
+    console.warn(message);
+  } catch {
+  }
+}
+var LocaleContext = createContext(null);
+function LocaleProvider({
+  config,
+  catalog = {},
+  detected,
+  override,
+  children
+}) {
+  const [locale, setLocale] = useState(() => resolveLocale(config, detected, override));
+  const value = useMemo(
+    () => ({ locale, setLocale, config, catalog }),
+    [locale, config, catalog]
   );
-  return [value, setValue];
+  return createElement(LocaleContext.Provider, { value }, children);
 }
-function useLocale() {
-  return useMemo(() => {
-    if (typeof navigator === "undefined") {
-      return {
-        locale: "en-US",
-        language: "en",
-        region: "US",
-        languages: ["en-US"],
-        timeZone: "UTC",
-        is24Hour: false
-      };
-    }
-    const locale = navigator.language || "en-US";
-    const [language, region] = locale.split("-");
-    const languages = [...navigator.languages || [locale]];
-    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
-    const is24Hour = detect24Hour(locale);
-    return {
-      locale,
-      language: language || "en",
-      region: region?.toUpperCase() || "US",
-      languages,
-      timeZone,
-      is24Hour
+function useActiveLocale() {
+  return useContext(LocaleContext)?.locale ?? "en";
+}
+function useTranslation() {
+  const ctx = useContext(LocaleContext);
+  if (!ctx) throw new Error("useTranslation must be used inside <FunnelProvider>");
+  const { locale, setLocale, config, catalog } = ctx;
+  const chain = useMemo(() => {
+    const def = config?.default;
+    const fb = config?.fallback;
+    return Array.from(new Set([locale, fb, def].filter(Boolean)));
+  }, [locale, config]);
+  const t = useMemo(() => {
+    const fn = ((key, params) => {
+      const raw = lookup(catalog, chain, key);
+      if (raw === void 0) {
+        devWarn(`[appfunnel] missing translation: "${key}" (${locale})`);
+        return key;
+      }
+      return interpolate(raw, params);
+    });
+    fn.plural = (n, forms, params) => {
+      const rule = new Intl.PluralRules(locale).select(n);
+      const form = forms[rule] ?? forms.other ?? "";
+      return interpolate(form.replace(/#/g, String(n)), params);
     };
-  }, []);
+    return fn;
+  }, [catalog, chain, locale]);
+  const fmt = useMemo(
+    () => ({
+      number: (n, opts) => new Intl.NumberFormat(locale, opts).format(n),
+      date: (d, opts) => new Intl.DateTimeFormat(locale, opts).format(d),
+      percent: (n, opts) => new Intl.NumberFormat(locale, { style: "percent", ...opts }).format(n)
+    }),
+    [locale]
+  );
+  return {
+    t,
+    fmt,
+    locale,
+    setLocale,
+    dir: isRtl(locale) ? "rtl" : "ltr",
+    locales: config?.supported ?? [locale]
+  };
+}
+
+// src/commerce/catalog.ts
+var PERIOD_DAYS = {
+  day: 1,
+  week: 7,
+  month: 30,
+  year: 365,
+  one_time: 0
+};
+function periodDays(interval, count) {
+  return PERIOD_DAYS[interval] * count;
+}
+function intervalLabel(interval, count) {
+  if (interval === "one_time") return { period: "one-time", periodly: "one-time" };
+  if (interval === "month" && count === 3) return { period: "quarter", periodly: "quarterly" };
+  if (interval === "month" && count === 6) return { period: "6 months", periodly: "semiannually" };
+  if (interval === "week" && count === 2) return { period: "2 weeks", periodly: "biweekly" };
+  if (count === 1) {
+    const periodly = { day: "daily", week: "weekly", month: "monthly", year: "yearly" }[interval];
+    return { period: interval, periodly };
+  }
+  return { period: `${count} ${interval}s`, periodly: `every ${count} ${interval}s` };
+}
+function resolveProduct(input) {
+  const interval = input.interval ?? "one_time";
+  const count = input.intervalCount ?? 1;
+  const days = periodDays(interval, count);
+  const perDayMinor = days > 0 ? input.amount / days : input.amount;
+  const label = intervalLabel(interval, count);
+  return {
+    id: input.id,
+    name: input.name ?? input.id,
+    displayName: input.displayName ?? input.name ?? input.id,
+    provider: input.provider ?? "stripe",
+    currency: input.currency,
+    priceMinor: input.amount,
+    perDayMinor,
+    perWeekMinor: perDayMinor * 7,
+    perMonthMinor: perDayMinor * 30,
+    perYearMinor: perDayMinor * 365,
+    period: label.period,
+    periodly: label.periodly,
+    hasTrial: (input.trialDays ?? 0) > 0,
+    trialDays: input.trialDays ?? 0,
+    trialMinor: input.trialAmount ?? 0
+  };
+}
+function buildCatalog(inputs) {
+  return new Map(inputs.map((i) => [i.id, resolveProduct(i)]));
 }
-function detect24Hour(locale) {
+function formatMoney(minor, currency, locale) {
+  const amount = minor / 100;
+  const code = currency.toUpperCase();
+  let formatted;
   try {
-    const formatted = new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(/* @__PURE__ */ new Date());
-    return !formatted.match(/am|pm/i);
+    formatted = new Intl.NumberFormat(locale, { style: "currency", currency: code }).format(amount);
   } catch {
-    return false;
+    formatted = `${code} ${amount.toFixed(2)}`;
   }
+  return { amount, minor, currency: code, formatted };
 }
-function useTranslation() {
-  const { i18n } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => i18n.subscribe(cb),
-    [i18n]
+function formatProduct(r, locale) {
+  const m = (minor) => formatMoney(minor, r.currency, locale);
+  return {
+    id: r.id,
+    name: r.name,
+    displayName: r.displayName,
+    provider: r.provider,
+    price: m(r.priceMinor),
+    period: r.period,
+    periodly: r.periodly,
+    perDay: m(r.perDayMinor),
+    perWeek: m(r.perWeekMinor),
+    perMonth: m(r.perMonthMinor),
+    perYear: m(r.perYearMinor),
+    hasTrial: r.hasTrial,
+    trialDays: r.trialDays,
+    trialPrice: r.hasTrial ? m(r.trialMinor) : null
+  };
+}
+var CatalogContext = createContext(null);
+function CatalogProvider({
+  catalog,
+  children
+}) {
+  return createElement(CatalogContext.Provider, { value: catalog }, children);
+}
+function useCatalog() {
+  return useContext(CatalogContext) ?? EMPTY;
+}
+var EMPTY = /* @__PURE__ */ new Map();
+function useProduct(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]);
+}
+function useProducts() {
+  const catalog = useCatalog();
+  const locale = useActiveLocale();
+  return useMemo(
+    () => Array.from(catalog.values()).map((r) => formatProduct(r, locale)),
+    [catalog, locale]
   );
-  const getSnapshot = useCallback(
-    () => i18n.getLocale(),
-    [i18n]
+}
+
+// src/flow/spine.ts
+function readField(s, field) {
+  let cur = s;
+  for (const part of field.split(".")) {
+    if (cur == null) return void 0;
+    cur = cur[part];
+  }
+  return cur;
+}
+function evaluateCondition(cond, s) {
+  const val = readField(s, cond.field);
+  const { op, value } = cond;
+  switch (op) {
+    case "eq":
+      return val === value;
+    case "neq":
+      return val !== value;
+    case "in":
+      return Array.isArray(value) && value.includes(val);
+    case "gt":
+      return typeof val === "number" && typeof value === "number" && val > value;
+    case "gte":
+      return typeof val === "number" && typeof value === "number" && val >= value;
+    case "lt":
+      return typeof val === "number" && typeof value === "number" && val < value;
+    case "lte":
+      return typeof val === "number" && typeof value === "number" && val <= value;
+    case "contains":
+      if (typeof val === "string") return val.includes(String(value));
+      if (Array.isArray(val)) return val.includes(value);
+      return false;
+    case "exists":
+      return val !== void 0 && val !== null && val !== "";
+    case "empty":
+      return val === void 0 || val === null || val === "" || Array.isArray(val) && val.length === 0;
+    default:
+      return false;
+  }
+}
+function evaluateGate(gate, s) {
+  return typeof gate === "function" ? gate(s) : evaluateCondition(gate, s);
+}
+function resolveRoute(routes, s) {
+  if (!routes) return void 0;
+  for (const route of routes) {
+    if (!route.when || evaluateGate(route.when, s)) return route.to;
+  }
+  return void 0;
+}
+function pageMeta(meta) {
+  return meta;
+}
+var TYPE_GUARDS = {
+  paywall: { field: "user.email", op: "exists" },
+  upsell: { field: "user.email", op: "exists" }
+};
+function entryGuard(meta) {
+  return meta?.guard ?? (meta?.type ? TYPE_GUARDS[meta.type] : void 0);
+}
+function definePage(component) {
+  return component;
+}
+function nextPage(pages, currentKey, s) {
+  const idx = pages.findIndex((p) => p.key === currentKey);
+  if (idx === -1) return void 0;
+  const routed = resolveRoute(pages[idx].meta?.next, s);
+  if (routed) return routed;
+  return pages[idx + 1]?.key;
+}
+function outgoingKeys(pages, currentKey) {
+  const idx = pages.findIndex((p) => p.key === currentKey);
+  if (idx === -1) return [];
+  const out = /* @__PURE__ */ new Set();
+  for (const route of pages[idx].meta?.next ?? []) out.add(route.to);
+  const linear = pages[idx + 1]?.key;
+  if (linear) out.add(linear);
+  return [...out];
+}
+function expectedPathLength(pages, startKey, s) {
+  const seen = /* @__PURE__ */ new Set();
+  let key = startKey;
+  let count = 0;
+  while (key && !seen.has(key)) {
+    seen.add(key);
+    count++;
+    if (pages.find((p) => p.key === key)?.meta?.type === "finish") break;
+    key = nextPage(pages, key, s);
+  }
+  return count;
+}
+function defineFunnel(def) {
+  return def;
+}
+
+// src/flow/experiments.ts
+function fnv1a(input) {
+  let h = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i);
+    h = h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24)) >>> 0;
+  }
+  return h >>> 0;
+}
+function hashToUnit(seed) {
+  return fnv1a(seed) / 4294967296;
+}
+function pickByWeight(weights, u) {
+  const entries = Object.entries(weights).filter(([, w]) => w > 0);
+  if (entries.length === 0) return Object.keys(weights)[0] ?? "";
+  const total = entries.reduce((sum, [, w]) => sum + w, 0);
+  const target = u * total;
+  let acc = 0;
+  for (const [key, w] of entries) {
+    acc += w;
+    if (target < acc) return key;
+  }
+  return entries[entries.length - 1][0];
+}
+function assignVariant(experimentId, seed, weights) {
+  return pickByWeight(weights, hashToUnit(`${experimentId}:${seed}`));
+}
+function bucketingSeed(context) {
+  return context.identity.customerId ?? context.identity.visitorId ?? null;
+}
+function parseSlotKey(key) {
+  const at = key.indexOf("@");
+  return at === -1 ? { slot: key } : { slot: key.slice(0, at), variant: key.slice(at + 1) };
+}
+function isVariantKey(key) {
+  return parseSlotKey(key).variant !== void 0;
+}
+function weightsOf(exp) {
+  const out = {};
+  for (const [label, v] of Object.entries(exp.variants)) out[label] = v.weight;
+  return out;
+}
+function resolveExperiments(pages, experiments, seed) {
+  const assignments = {};
+  const render = {};
+  const experimentOf = {};
+  for (const exp of experiments) {
+    const status = exp.status ?? "running";
+    let label;
+    if (status === "stopped" && exp.winner) label = exp.winner;
+    else if (status === "running" && seed) label = assignVariant(exp.id, seed, weightsOf(exp));
+    else continue;
+    const arm = exp.variants[label];
+    if (!arm) continue;
+    assignments[exp.id] = label;
+    experimentOf[exp.slot] = exp.id;
+    if (arm.page !== exp.slot) render[exp.slot] = arm.page;
+  }
+  const slotOf = {};
+  const activeKeys = [];
+  for (const p of pages) {
+    const { slot, variant } = parseSlotKey(p.key);
+    if (variant !== void 0) slotOf[p.key] = slot;
+    else activeKeys.push(p.key);
+  }
+  return { assignments, activeKeys, render, slotOf, experimentOf };
+}
+function validateExperiments(experiments, pages) {
+  const errors = [];
+  const warnings = [];
+  const pageKeys = new Set(pages.map((p) => p.key));
+  const seenIds = /* @__PURE__ */ new Set();
+  const slotOwner = /* @__PURE__ */ new Map();
+  const renderedVariantPages = /* @__PURE__ */ new Set();
+  for (const exp of experiments) {
+    const err = (code, message) => errors.push({ experimentId: exp.id, code, message });
+    const warn = (code, message) => warnings.push({ experimentId: exp.id, code, message });
+    if (seenIds.has(exp.id)) err("duplicate_id", `Experiment id "${exp.id}" is used more than once.`);
+    seenIds.add(exp.id);
+    if (!pageKeys.has(exp.slot)) err("slot_missing", `Slot "${exp.slot}" is not a page in the funnel.`);
+    if (isVariantKey(exp.slot)) err("slot_is_variant", `Slot "${exp.slot}" is a variant page; a slot must be a real flow page.`);
+    if (slotOwner.has(exp.slot)) {
+      err("slot_conflict", `Slot "${exp.slot}" is already targeted by experiment "${slotOwner.get(exp.slot)}".`);
+    } else {
+      slotOwner.set(exp.slot, exp.id);
+    }
+    const arms = Object.entries(exp.variants);
+    if (arms.length < 2) warn("single_arm", `Experiment "${exp.id}" has fewer than two variants \u2014 nothing to test.`);
+    let hasControl = false;
+    let totalWeight = 0;
+    for (const [label, arm] of arms) {
+      if (!pageKeys.has(arm.page)) {
+        err("variant_page_missing", `Variant "${label}" references page "${arm.page}", which doesn't exist.`);
+      }
+      if (arm.page === exp.slot) hasControl = true;
+      else if (isVariantKey(arm.page)) {
+        renderedVariantPages.add(arm.page);
+        if (parseSlotKey(arm.page).slot !== exp.slot) {
+          err("variant_slot_mismatch", `Variant "${label}" page "${arm.page}" belongs to a different slot than "${exp.slot}".`);
+        }
+      }
+      if (arm.weight < 0) err("negative_weight", `Variant "${label}" has a negative weight (${arm.weight}).`);
+      totalWeight += arm.weight;
+    }
+    if (!hasControl) err("no_control", `No variant of "${exp.id}" renders the slot "${exp.slot}" itself (the control/baseline).`);
+    if (totalWeight <= 0) err("no_traffic", `Experiment "${exp.id}" has no positive weight \u2014 no traffic would enter it.`);
+    if (exp.status === "stopped" && exp.winner && !exp.variants[exp.winner]) {
+      err("bad_winner", `Stopped experiment "${exp.id}" names winner "${exp.winner}", which isn't one of its variants.`);
+    }
+  }
+  const running = new Set(experiments.filter((e) => (e.status ?? "running") === "running").flatMap(
+    (e) => Object.values(e.variants).map((v) => v.page)
+  ));
+  for (const p of pages) {
+    if (isVariantKey(p.key) && !running.has(p.key)) {
+      warnings.push({ experimentId: "*", code: "orphan_variant", message: `Variant page "${p.key}" is rendered by no running experiment.` });
+    }
+  }
+  return { ok: errors.length === 0, errors, warnings };
+}
+
+// src/flow/flow.tsx
+var NavContext = createContext(null);
+var ExperimentContext = createContext({});
+function useExperiment(id) {
+  return useContext(ExperimentContext)[id];
+}
+function pageContextFor(currentKey, slug, index, total, startedAt) {
+  const denom = Math.max(total, index + 1);
+  return {
+    key: currentKey,
+    slug,
+    index,
+    total: denom,
+    progressPercentage: denom > 0 ? Math.min(100, Math.round((index + 1) / denom * 100)) : 0,
+    startedAt
+  };
+}
+function FunnelView({
+  pages,
+  initialKey,
+  layout,
+  fallback,
+  prefetch: prefetchMode = "auto",
+  onNavigate
+}) {
+  const funnel = useFunnel();
+  const tracker = useTrackerRef();
+  const components = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of pages) {
+      if (p.Component) map.set(p.key, p.Component);
+      else if (p.load) {
+        const load = p.load;
+        map.set(p.key, lazy(() => Promise.resolve(load()).then(
+          (m) => typeof m === "function" ? { default: m } : m
+        )));
+      }
+    }
+    return map;
+  }, [pages]);
+  const loaders = useMemo(
+    () => new Map(pages.filter((p) => p.load).map((p) => [p.key, p.load])),
+    [pages]
   );
-  const locale = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const t = useCallback(
-    (key, params) => i18n.t(key, params),
-    [i18n, locale]
-    // eslint-disable-line react-hooks/exhaustive-deps
+  const seed = bucketingSeed(funnel.context);
+  const experiments = useMemo(
+    () => resolveExperiments(pages, funnel.experiments, seed),
+    [pages, funnel.experiments, seed]
   );
-  const setLocale = useCallback(
-    (l) => i18n.setLocale(l),
-    [i18n]
+  const pageByKey = useMemo(() => new Map(pages.map((p) => [p.key, p])), [pages]);
+  const flowPages = useMemo(
+    () => experiments.activeKeys.map((k) => pageByKey.get(k)).filter(Boolean),
+    [experiments, pageByKey]
   );
-  const availableLocales = i18n.getAvailableLocales();
-  return { t, locale, setLocale, availableLocales };
-}
-function useProducts() {
-  const { products, variableStore, selectProduct: ctxSelect } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: ["products.selectedProductId"] }),
-    [variableStore]
+  const flow = useMemo(
+    () => flowPages.map((p) => ({ key: p.key, meta: p.meta })),
+    [flowPages]
   );
-  const getSnapshot = useCallback(
-    () => variableStore.get("products.selectedProductId"),
-    [variableStore]
+  const [history, setHistory] = useState(() => {
+    const start = flowPages[0]?.key;
+    if (!initialKey || initialKey === start) return [start].filter(Boolean);
+    const target = experiments.slotOf[initialKey] ?? initialKey;
+    const page2 = flowPages.find((p) => p.key === target);
+    const guard = entryGuard(page2?.meta);
+    const ok = page2 && (!guard || evaluateGate(guard, funnel.snapshot()));
+    return [ok ? target : start].filter(Boolean);
+  });
+  const currentKey = history[history.length - 1];
+  const index = history.length - 1;
+  const startKey = history[0];
+  const total = useMemo(
+    () => expectedPathLength(flow, startKey, funnel.snapshot()),
+    // currentKey in deps: re-trace as each step's answers settle the branch.
+    [flow, startKey, currentKey, funnel]
   );
-  const selectedId = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const selected = products.find((p) => p.id === selectedId) || null;
-  const select = useCallback((productId) => {
-    ctxSelect(productId);
-  }, [ctxSelect]);
-  return { products, selected, select };
-}
-function useTracking() {
-  const { tracker } = useFunnelContext();
-  const track = useCallback(
-    (eventName, data) => {
-      tracker.track(eventName, data);
-    },
-    [tracker]
+  const slug = pageByKey.get(currentKey)?.meta?.slug ?? currentKey;
+  const page = useMemo(
+    () => pageContextFor(currentKey, slug, index, total, funnel.context.system.now),
+    [currentKey, slug, index, total, funnel.context.system.now]
   );
-  return { track };
-}
-var API_BASE_URL = "https://api.appfunnel.net";
-var PAYMENT_KEYS = ["payment.loading", "payment.error"];
-function usePayment() {
-  const { variableStore, products, campaignId, tracker, config } = useFunnelContext();
-  const showToasts = !config.settings?.disableToasts;
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: PAYMENT_KEYS }),
-    [variableStore]
+  funnel.context.page = page;
+  const started = useRef(false);
+  useEffect(() => {
+    if (started.current) return;
+    started.current = true;
+    tracker.track("funnel.start", {});
+  }, [tracker]);
+  useEffect(() => {
+    if (!currentKey) return;
+    tracker.track("page.view", { pageId: currentKey, pageKey: currentKey, isInitial: index === 0, eventId: newEventId() });
+  }, [tracker, currentKey, index]);
+  useEffect(() => {
+    if (currentKey && onNavigate) onNavigate(currentKey, slug);
+  }, [onNavigate, currentKey, slug]);
+  const exposed = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const expId = experiments.experimentOf[currentKey];
+    if (!expId || exposed.current.has(expId)) return;
+    exposed.current.add(expId);
+    tracker.track("experiment.exposure", { experimentId: expId, variant: experiments.assignments[expId] });
+  }, [tracker, currentKey, experiments]);
+  const timer = useRef(null);
+  const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+  const emitExit = useCallback(() => {
+    const t = timer.current;
+    if (!t) return;
+    const at = now();
+    const hidden = t.hidden + (t.hiddenSince != null ? at - t.hiddenSince : 0);
+    const durationMs = Math.round(at - t.enteredAt);
+    tracker.track("page.exit", { pageId: t.key, durationMs, activeMs: Math.max(0, Math.round(durationMs - hidden)) });
+  }, [tracker]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const onVis = () => {
+      const t = timer.current;
+      if (!t) return;
+      if (document.visibilityState === "hidden") t.hiddenSince = now();
+      else if (t.hiddenSince != null) {
+        t.hidden += now() - t.hiddenSince;
+        t.hiddenSince = null;
+      }
+    };
+    document.addEventListener("visibilitychange", onVis);
+    return () => document.removeEventListener("visibilitychange", onVis);
+  }, []);
+  useEffect(() => {
+    if (!currentKey) return;
+    if (timer.current && timer.current.key !== currentKey) emitExit();
+    const hidden = typeof document !== "undefined" && document.visibilityState === "hidden";
+    timer.current = { key: currentKey, enteredAt: now(), hidden: 0, hiddenSince: hidden ? now() : null };
+  }, [currentKey, emitExit]);
+  useEffect(() => () => emitExit(), [emitExit]);
+  const next = useCallback(() => {
+    const target = nextPage(flow, currentKey, funnel.snapshot());
+    const resolved = target ? experiments.slotOf[target] ?? target : target;
+    if (resolved) setHistory((h) => [...h, resolved]);
+  }, [flow, currentKey, funnel, experiments]);
+  const back = useCallback(
+    () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h),
+    []
   );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
+  const go = useCallback(
+    (key) => setHistory((h) => [...h, experiments.slotOf[key] ?? key]),
+    [experiments]
   );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const purchase = useCallback(
-    async (productId, options) => {
-      console.log("[Purchase] Starting purchase for product:", productId);
-      if (globalThis.__APPFUNNEL_DEV__) {
-        console.log(
-          "[Purchase] Dev mode \u2014 simulating success (500ms delay)"
-        );
-        variableStore.set("payment.loading", true);
-        await new Promise((r) => setTimeout(r, 500));
-        variableStore.set("payment.error", "");
-        console.log("[Purchase] Dev mode \u2014 success");
-        options?.onSuccess?.();
-        return true;
-      }
-      const customerId = variableStore.get(
-        "user.stripeCustomerId"
-      );
-      console.log("[Purchase] Customer ID:", customerId || "(none)");
-      if (!customerId) {
-        const msg = "Please complete payment authorization first";
-        console.error("[Purchase] Failed:", msg);
-        variableStore.set("payment.error", msg);
-        if (showToasts) toast.error(msg);
-        options?.onError?.(msg);
-        return false;
-      }
-      const product = products.find((p) => p.id === productId);
-      console.log(
-        "[Purchase] Product found:",
-        product ? {
-          id: product.id,
-          name: product.name,
-          stripePriceId: product.stripePriceId
-        } : "(not found)"
-      );
-      if (!product?.stripePriceId) {
-        const msg = "Product not found or missing Stripe price";
-        console.error("[Purchase] Failed:", msg);
-        variableStore.set("payment.error", msg);
-        if (showToasts) toast.error(msg);
-        options?.onError?.(msg);
-        return false;
-      }
-      const trialPeriodDays = product.hasTrial ? product.trialDays : void 0;
-      const trialChargePriceId = product.paidTrial && product.trialStorePriceId ? product.trialStorePriceId : void 0;
-      console.log("[Purchase] Trial config:", {
-        trialPeriodDays,
-        trialChargePriceId,
-        hasTrial: product.hasTrial,
-        paidTrial: product.paidTrial
-      });
-      variableStore.set("payment.loading", true);
-      variableStore.set("payment.error", "");
-      const requestBody = {
-        campaignId,
-        sessionId: tracker.getSessionId(),
-        stripePriceId: product.stripePriceId,
-        trialPeriodDays,
-        trialChargePriceId
-      };
-      console.log(
-        "[Purchase] Sending request:",
-        `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
-        requestBody
-      );
-      try {
-        const response = await fetch(
-          `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(requestBody)
-          }
-        );
-        console.log("[Purchase] Response status:", response.status);
-        let result = await response.json();
-        console.log("[Purchase] Response body:", result);
-        if (!result.success && result.requiresAction) {
-          console.log(
-            "[Purchase] 3DS authentication required, loading Stripe..."
-          );
-          const stripeInstance = await loadStripe(
-            result.publishableKey
-          );
-          if (!stripeInstance) {
-            const msg = "Failed to load payment processor";
-            console.error("[Purchase] Failed:", msg);
-            variableStore.set("payment.error", msg);
-            if (showToasts) toast.error(msg);
-            options?.onError?.(msg);
-            return false;
-          }
-          console.log(
-            "[Purchase] Confirming card payment with 3DS..."
-          );
-          const { error: confirmError, paymentIntent: confirmedPi } = await stripeInstance.confirmCardPayment(
-            result.clientSecret,
-            {
-              payment_method: result.paymentMethodId
-            }
-          );
-          if (confirmError || !confirmedPi || confirmedPi.status !== "succeeded") {
-            const msg = confirmError?.message || "Payment authentication failed";
-            console.error("[Purchase] 3DS failed:", msg);
-            variableStore.set("payment.error", msg);
-            if (showToasts) toast.error(msg);
-            options?.onError?.(msg);
-            return false;
-          }
-          console.log(
-            "[Purchase] 3DS succeeded, retrying purchase with confirmed PI:",
-            confirmedPi.id
-          );
-          const retryResponse = await fetch(
-            `${API_BASE_URL}/campaign/${campaignId}/stripe/purchase`,
-            {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                campaignId,
-                sessionId: tracker.getSessionId(),
-                stripePriceId: product.stripePriceId,
-                trialPeriodDays,
-                trialChargePriceId,
-                onSessionPiId: confirmedPi.id
-              })
-            }
-          );
-          result = await retryResponse.json();
-          console.log("[Purchase] Retry response:", result);
-        }
-        if (result.success) {
-          console.log("[Purchase] Success! Type:", result.type);
-          variableStore.set("payment.error", "");
-          if (result.type === "validate_only") {
-            console.log(
-              "[Purchase] Validate-only \u2014 setting card variables"
-            );
-            if (result.card) {
-              variableStore.setMany({
-                "card.last4": result.card.last4,
-                "card.brand": result.card.brand,
-                "card.expMonth": result.card.expMonth,
-                "card.expYear": result.card.expYear,
-                "card.funding": result.card.funding
-              });
-            }
-            if (result.eventId) {
-              console.log(
-                "[Purchase] Tracking purchase.complete (validate_only), eventId:",
-                result.eventId
-              );
-              tracker.track("purchase.complete", {
-                eventId: result.eventId,
-                amount: product.rawPrice ? product.rawPrice / 100 : 0,
-                currency: product.currencyCode || "USD"
-              });
-            }
-          } else if (result.type === "one_time") {
-            console.log(
-              "[Purchase] One-time charge \u2014 paymentIntentId:",
-              result.paymentIntentId
-            );
-            variableStore.set(
-              "stripe.paymentIntentId",
-              result.paymentIntentId
-            );
-            variableStore.set("payment.status", result.status);
-            if (result.eventId) {
-              console.log(
-                "[Purchase] Tracking purchase.complete (one_time), eventId:",
-                result.eventId
-              );
-              tracker.track("purchase.complete", {
-                eventId: result.eventId,
-                amount: product.rawPrice ? product.rawPrice / 100 : 0,
-                currency: product.currencyCode || "USD"
-              });
-            }
-          } else {
-            console.log(
-              "[Purchase] Subscription \u2014 subscriptionId:",
-              result.subscriptionId,
-              "status:",
-              result.status
-            );
-            variableStore.set(
-              "stripe.subscriptionId",
-              result.subscriptionId
-            );
-            variableStore.set("subscription.status", result.status);
-            if (result.trialCharge) {
-              console.log(
-                "[Purchase] Tracking trial charge purchase.complete"
-              );
-              tracker.track("purchase.complete", {
-                eventId: result.eventIds?.trialCharge,
-                amount: result.trialCharge.amount / 100,
-                currency: "USD"
-              });
-            }
-            if (result.eventIds?.subscription) {
-              console.log(
-                "[Purchase] Tracking subscription.created, eventId:",
-                result.eventIds.subscription
-              );
-              tracker.track("subscription.created", {
-                eventId: result.eventIds.subscription,
-                subscriptionId: result.subscriptionId,
-                status: result.status
-              });
-            }
-            if (result.eventIds?.firstPeriod) {
-              console.log(
-                "[Purchase] Tracking first-period purchase.complete, eventId:",
-                result.eventIds.firstPeriod
-              );
-              tracker.track("purchase.complete", {
-                eventId: result.eventIds.firstPeriod,
-                amount: product.rawPrice ? product.rawPrice / 100 : 0,
-                currency: product.currencyCode || "USD"
-              });
-            }
-          }
-          console.log("[Purchase] Calling onSuccess callback");
-          options?.onSuccess?.();
-          return true;
-        } else {
-          const msg = result.error || "Purchase failed";
-          console.error("[Purchase] Failed:", msg);
-          variableStore.set("payment.error", msg);
-          if (showToasts) toast.error(msg);
-          options?.onError?.(msg);
-          return false;
-        }
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : "Purchase failed";
-        console.error("[Purchase] Exception:", err);
-        variableStore.set("payment.error", msg);
-        if (showToasts) toast.error(msg);
-        options?.onError?.(msg);
-        return false;
-      } finally {
-        console.log("[Purchase] Done \u2014 setting loading to false");
-        variableStore.set("payment.loading", false);
-      }
+  const prefetched = useRef(/* @__PURE__ */ new Set());
+  const prefetch = useCallback(
+    (key) => {
+      const target = experiments.render[key] ?? key;
+      const load = loaders.get(target);
+      if (!load || prefetched.current.has(target)) return;
+      prefetched.current.add(target);
+      load().catch(() => prefetched.current.delete(target));
     },
-    [variableStore, products, campaignId, tracker, showToasts]
+    [loaders, experiments]
+  );
+  const nextCandidates = useMemo(
+    () => [...new Set(outgoingKeys(flow, currentKey).map((k) => experiments.render[k] ?? k))],
+    [flow, currentKey, experiments]
+  );
+  useEffect(() => {
+    if (prefetchMode !== "auto") return;
+    for (const key of nextCandidates) prefetch(key);
+  }, [prefetchMode, nextCandidates, prefetch]);
+  const value = {
+    page,
+    next,
+    back,
+    go,
+    prefetch,
+    nextCandidates,
+    canGoBack: history.length > 1
+  };
+  const renderKey = experiments.render[currentKey] ?? currentKey;
+  const Current = components.get(renderKey);
+  const pageEl = createElement(Suspense, { fallback: fallback ?? null }, Current ? createElement(Current) : null);
+  const content = layout ? createElement(layout, null, pageEl) : pageEl;
+  return createElement(
+    ExperimentContext.Provider,
+    { value: experiments.assignments },
+    createElement(NavContext.Provider, { value }, content)
   );
+}
+function useNavigation() {
+  const ctx = useContext(NavContext);
+  if (!ctx) throw new Error("useNavigation must be used inside <FunnelView>");
+  return ctx;
+}
+function usePage() {
+  return useNavigation().page;
+}
+var symModalId = /* @__PURE__ */ Symbol("AppFunnelModalId");
+var initialState = {};
+var ModalStateContext = createContext(initialState);
+var ModalIdContext = createContext(null);
+var REGISTRY = {};
+var ALREADY_MOUNTED = {};
+var modalCallbacks = {};
+var hideCallbacks = {};
+var uid = 0;
+var getUid = () => `_af_modal_${uid++}`;
+var dispatch = () => {
+  throw new Error("No modal dispatch \u2014 render inside <FunnelProvider> (which mounts the modal runtime).");
+};
+var modalReducer = (state = initialState, action) => {
+  const { modalId, args, flags } = action.payload;
+  switch (action.type) {
+    case "show":
+      return {
+        ...state,
+        [modalId]: {
+          ...state[modalId],
+          id: modalId,
+          args,
+          // Mount first, then flip visible on the next effect → enter transition.
+          visible: !!ALREADY_MOUNTED[modalId],
+          delayVisible: !ALREADY_MOUNTED[modalId]
+        }
+      };
+    case "hide":
+      return state[modalId] ? { ...state, [modalId]: { ...state[modalId], visible: false } } : state;
+    case "remove": {
+      const next = { ...state };
+      delete next[modalId];
+      return next;
+    }
+    case "set-flags":
+      return { ...state, [modalId]: { ...state[modalId], ...flags } };
+    default:
+      return state;
+  }
+};
+function idOf(modal) {
+  if (typeof modal === "string") return modal;
+  const m = modal;
+  if (!m[symModalId]) m[symModalId] = getUid();
+  return m[symModalId];
+}
+function registerModal(id, comp, props) {
+  if (!REGISTRY[id]) REGISTRY[id] = { comp, props };
+  else REGISTRY[id].props = props;
+}
+function unregisterModal(id) {
+  delete REGISTRY[id];
+}
+function showModal(modal, args) {
+  const id = idOf(modal);
+  if (typeof modal !== "string" && !REGISTRY[id]) registerModal(id, modal);
+  dispatch({ type: "show", payload: { modalId: id, args } });
+  if (!modalCallbacks[id]) {
+    let res;
+    let rej;
+    const promise = new Promise((resolve, reject) => {
+      res = resolve;
+      rej = reject;
+    });
+    modalCallbacks[id] = { resolve: res, reject: rej, promise };
+  }
+  return modalCallbacks[id].promise;
+}
+function hideModal(modal) {
+  const id = idOf(modal);
+  dispatch({ type: "hide", payload: { modalId: id } });
+  delete modalCallbacks[id];
+  if (!hideCallbacks[id]) {
+    let res;
+    let rej;
+    const promise = new Promise((resolve, reject) => {
+      res = resolve;
+      rej = reject;
+    });
+    hideCallbacks[id] = { resolve: res, reject: rej, promise };
+  }
+  return hideCallbacks[id].promise;
+}
+function removeModal(modal) {
+  const id = idOf(modal);
+  dispatch({ type: "remove", payload: { modalId: id } });
+  delete modalCallbacks[id];
+  delete hideCallbacks[id];
+}
+function setFlags(id, flags) {
+  dispatch({ type: "set-flags", payload: { modalId: id, flags } });
+}
+function useModal(modal, args) {
+  const modals = useContext(ModalStateContext);
+  const contextId = useContext(ModalIdContext);
+  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).");
+  useEffect(() => {
+    if (isComponent && !REGISTRY[id]) registerModal(id, modal, args);
+  }, [isComponent, id, modal, args]);
+  const info = modals[id];
+  const show = useCallback((a) => showModal(id, a), [id]);
+  const hide = useCallback(() => hideModal(id), [id]);
+  const remove = useCallback(() => removeModal(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(
     () => ({
-      loading: !!variables["payment.loading"],
-      error: variables["payment.error"] || null,
-      purchase
+      id,
+      args: info?.args,
+      visible: !!info?.visible,
+      keepMounted: !!info?.keepMounted,
+      show,
+      hide,
+      remove,
+      resolve,
+      reject,
+      resolveHide
     }),
-    [variables, purchase]
+    [id, info?.args, info?.visible, info?.keepMounted, show, hide, remove, resolve, reject, resolveHide]
   );
 }
-var DEVICE_KEYS = [
-  "os.name",
-  "os.timezone",
-  "device.type",
-  "device.isMobile",
-  "device.isTablet",
-  "device.screenWidth",
-  "device.screenHeight",
-  "device.viewportWidth",
-  "device.viewportHeight",
-  "device.colorDepth",
-  "device.pixelRatio",
-  "browser.name",
-  "browser.version",
-  "browser.userAgent",
-  "browser.cookieEnabled",
-  "browser.online",
-  "browser.language"
-];
-function useDeviceInfo() {
-  const { variableStore } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: DEVICE_KEYS }),
-    [variableStore]
+function defineModal(Comp) {
+  return function Wrapped({ id, defaultVisible, keepMounted, ...props }) {
+    const { args, show } = useModal(id);
+    const modals = useContext(ModalStateContext);
+    const shouldMount = !!modals[id];
+    useEffect(() => {
+      if (defaultVisible) show();
+      ALREADY_MOUNTED[id] = true;
+      return () => {
+        delete ALREADY_MOUNTED[id];
+      };
+    }, [id, show, defaultVisible]);
+    useEffect(() => {
+      if (keepMounted) setFlags(id, { keepMounted: true });
+    }, [id, keepMounted]);
+    const delayVisible = modals[id]?.delayVisible;
+    useEffect(() => {
+      if (delayVisible) show(args);
+    }, [delayVisible, args, show]);
+    if (!shouldMount) return null;
+    return createElement(
+      ModalIdContext.Provider,
+      { value: id },
+      createElement(Comp, { ...props, ...args })
+    );
+  };
+}
+function ModalRoot() {
+  const modals = useContext(ModalStateContext);
+  const toRender = Object.keys(modals).filter((id) => REGISTRY[id]).map((id) => ({ id, ...REGISTRY[id] }));
+  return createElement(
+    "div",
+    { "data-appfunnel-modal-root": "" },
+    ...toRender.map((t) => createElement(t.comp, { key: t.id, id: t.id, ...t.props }))
   );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
+}
+function ModalRuntime({ children }) {
+  const [state, localDispatch] = useReducer(modalReducer, initialState);
+  dispatch = localDispatch;
+  return createElement(
+    ModalStateContext.Provider,
+    { value: state },
+    children,
+    createElement(ModalRoot, null)
   );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return useMemo(() => ({
-    os: {
-      name: variables["os.name"] || "",
-      timezone: variables["os.timezone"] || ""
-    },
-    device: {
-      type: variables["device.type"] || "desktop",
-      isMobile: !!variables["device.isMobile"],
-      isTablet: !!variables["device.isTablet"],
-      screenWidth: variables["device.screenWidth"] || 0,
-      screenHeight: variables["device.screenHeight"] || 0,
-      viewportWidth: variables["device.viewportWidth"] || 0,
-      viewportHeight: variables["device.viewportHeight"] || 0,
-      colorDepth: variables["device.colorDepth"] || 24,
-      pixelRatio: variables["device.pixelRatio"] || 1
-    },
-    browser: {
-      name: variables["browser.name"] || "",
-      version: variables["browser.version"] || "",
-      userAgent: variables["browser.userAgent"] || "",
-      cookieEnabled: variables["browser.cookieEnabled"] !== false,
-      online: variables["browser.online"] !== false,
-      language: variables["browser.language"] || "en"
-    }
-  }), [variables]);
 }
-function useSafeArea() {
-  const [insets, setInsets] = useState({ top: 0, right: 0, bottom: 0, left: 0 });
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const el = document.createElement("div");
-    el.style.cssText = [
-      "position:fixed",
-      "top:env(safe-area-inset-top,0px)",
-      "right:env(safe-area-inset-right,0px)",
-      "bottom:env(safe-area-inset-bottom,0px)",
-      "left:env(safe-area-inset-left,0px)",
-      "pointer-events:none",
-      "visibility:hidden",
-      "z-index:-1"
-    ].join(";");
-    document.body.appendChild(el);
-    function read() {
-      const style = getComputedStyle(el);
-      setInsets({
-        top: parseFloat(style.top) || 0,
-        right: parseFloat(style.right) || 0,
-        bottom: parseFloat(style.bottom) || 0,
-        left: parseFloat(style.left) || 0
-      });
+
+// src/modals/sheet.tsx
+function useModalControl() {
+  const m = useModal();
+  return {
+    open: m.visible,
+    onClose: () => {
+      m.hide();
+      m.resolveHide();
+      if (!m.keepMounted) m.remove();
     }
-    read();
-    const observer = new ResizeObserver(read);
-    observer.observe(el);
-    window.addEventListener("resize", read);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("resize", read);
-      el.remove();
-    };
-  }, []);
-  return insets;
+  };
 }
-function useKeyboard() {
-  const [state, setState] = useState({ isOpen: false, height: 0 });
-  const timeoutRef = useRef();
+function OverlayShell({
+  open,
+  onClose,
+  className,
+  backdropClassName,
+  dismissOnBackdrop = true,
+  ariaLabel,
+  container,
+  panel,
+  children
+}) {
   useEffect(() => {
-    if (typeof window === "undefined") return;
-    if ("virtualKeyboard" in navigator) {
-      const vk = navigator.virtualKeyboard;
-      vk.overlaysContent = true;
-      const handler = () => {
-        const h = vk.boundingRect.height;
-        setState((prev) => {
-          if (prev.height === h && prev.isOpen === h > 0) return prev;
-          return { isOpen: h > 0, height: h };
-        });
-      };
-      vk.addEventListener("geometrychange", handler);
-      handler();
-      return () => vk.removeEventListener("geometrychange", handler);
-    }
-    const vv = window.visualViewport;
-    if (!vv) return;
-    let layoutHeight = window.innerHeight;
-    function compute() {
-      const kbHeight = Math.max(0, layoutHeight - vv.height);
-      const h = kbHeight > 40 ? Math.round(kbHeight) : 0;
-      setState((prev) => {
-        if (prev.height === h && prev.isOpen === h > 0) return prev;
-        return { isOpen: h > 0, height: h };
-      });
-    }
-    function onViewportResize() {
-      compute();
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(compute, 1e3);
-    }
-    function onWindowResize() {
-      layoutHeight = window.innerHeight;
-      compute();
-    }
-    vv.addEventListener("resize", onViewportResize);
-    window.addEventListener("resize", onWindowResize);
-    window.addEventListener("orientationchange", onWindowResize);
-    compute();
+    if (!open || typeof document === "undefined") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", onKey);
     return () => {
-      clearTimeout(timeoutRef.current);
-      vv.removeEventListener("resize", onViewportResize);
-      window.removeEventListener("resize", onWindowResize);
-      window.removeEventListener("orientationchange", onWindowResize);
+      document.body.style.overflow = prev;
+      document.removeEventListener("keydown", onKey);
     };
-  }, []);
-  return state;
-}
-var PAGE_KEYS = [
-  "page.currentId",
-  "page.currentIndex",
-  "page.current",
-  "page.total",
-  "page.progressPercentage",
-  "page.startedAt"
-];
-function usePageData() {
-  const { variableStore } = useFunnelContext();
-  const subscribe = useCallback(
-    (cb) => variableStore.subscribe(cb, { keys: PAGE_KEYS }),
-    [variableStore]
-  );
-  const getSnapshot = useCallback(
-    () => variableStore.getState(),
-    [variableStore]
+  }, [open, onClose]);
+  if (!open || typeof document === "undefined") return null;
+  const overlay = createElement(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": true,
+      "aria-label": ariaLabel,
+      "data-appfunnel-overlay": "",
+      style: { position: "fixed", inset: 0, zIndex: 1e3, display: "flex", ...container }
+    },
+    createElement("div", {
+      "data-appfunnel-overlay-backdrop": "",
+      className: backdropClassName,
+      onClick: dismissOnBackdrop ? onClose : void 0,
+      style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" }
+    }),
+    createElement(
+      "div",
+      { "data-appfunnel-overlay-panel": "", className, style: { position: "relative", background: "#fff", ...panel } },
+      children
+    )
   );
-  const variables = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return useMemo(() => ({
-    currentId: variables["page.currentId"] || "",
-    currentIndex: variables["page.currentIndex"] || 0,
-    current: variables["page.current"] || 1,
-    total: variables["page.total"] || 0,
-    progressPercentage: variables["page.progressPercentage"] || 0,
-    startedAt: variables["page.startedAt"] || 0
-  }), [variables]);
+  return createPortal(overlay, document.body);
+}
+var SHEET_LAYOUT = {
+  bottom: { container: { justifyContent: "flex-end", alignItems: "stretch" }, panel: { borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16, maxHeight: "90vh", overflow: "auto" } },
+  top: { container: { justifyContent: "flex-start", alignItems: "stretch" }, panel: { borderBottomLeftRadius: 16, borderBottomRightRadius: 16, padding: 16, maxHeight: "90vh", overflow: "auto" } },
+  left: { container: { justifyContent: "flex-start", alignItems: "stretch" }, panel: { height: "100%", width: "min(420px, 90vw)", padding: 16, overflow: "auto" } },
+  right: { container: { justifyContent: "flex-end", alignItems: "stretch" }, panel: { height: "100%", width: "min(420px, 90vw)", padding: 16, overflow: "auto" } }
+};
+function Sheet(props) {
+  const control = useModalControl();
+  const layout = SHEET_LAYOUT[props.side ?? "bottom"];
+  return createElement(OverlayShell, {
+    ...control,
+    className: props.className,
+    backdropClassName: props.backdropClassName,
+    dismissOnBackdrop: props.dismissOnBackdrop,
+    ariaLabel: props.ariaLabel,
+    container: layout.container,
+    panel: layout.panel,
+    children: props.children
+  });
+}
+function Modal(props) {
+  const control = useModalControl();
+  return createElement(OverlayShell, {
+    ...control,
+    className: props.className,
+    backdropClassName: props.backdropClassName,
+    dismissOnBackdrop: props.dismissOnBackdrop,
+    ariaLabel: props.ariaLabel,
+    container: { justifyContent: "center", alignItems: "center" },
+    panel: { borderRadius: 16, padding: 24, width: "min(480px, 92vw)", maxHeight: "90vh", overflow: "auto" },
+    children: props.children
+  });
 }
 
-// src/hooks/useFunnel.ts
-function useFunnel() {
-  const { funnelId, campaignId, tracker } = useFunnelContext();
-  return {
-    funnelId,
-    campaignId,
-    sessionId: tracker.getSessionId(),
-    variables: useVariables(),
-    user: useUser(),
-    responses: useResponses(),
-    queryParams: useQueryParams(),
-    navigation: useNavigation(),
-    products: useProducts(),
-    tracking: useTracking(),
-    payment: usePayment()
-  };
+// src/commerce/checkout.tsx
+var INLINE_SURFACES = /* @__PURE__ */ new Set([
+  "express",
+  "element",
+  "embedded"
+]);
+function isInlineSurface(surface) {
+  return INLINE_SURFACES.has(surface);
 }
-var FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-var inputStyle = (focused) => ({
-  width: "100%",
-  padding: "12px",
-  border: `1px solid ${focused ? "#666" : "#e0e0e0"}`,
-  borderRadius: "6px",
-  fontSize: "14px",
-  fontFamily: FONT,
-  outline: "none",
-  backgroundColor: "#fff",
-  boxSizing: "border-box",
-  transition: "border-color 0.15s"
-});
-var labelStyle = {
-  display: "block",
-  fontSize: "14px",
-  fontWeight: 500,
-  color: "#333",
-  marginBottom: "6px",
-  fontFamily: FONT
+var ON = { purchase: true, wallets: true, offSession: "reliable" };
+var MANAGED = { purchase: true, wallets: true, offSession: "conditional" };
+var ALL_UPSELLS = ["subscription", "one-time", "upgrade"];
+var PROVIDER_PROFILES = {
+  // PSP; you hold the PaymentMethod and fire your own off-session PaymentIntent on
+  // the Elements surfaces (reliable). **Managed** Checkout (`embedded`/`redirect`)
+  // upsells too, but as a direct charge against Stripe's vaulted card → conditional.
+  // No provider "popup" surface.
+  stripe: {
+    isMoR: false,
+    offSessionUpsells: ALL_UPSELLS,
+    tokenModel: "merchant",
+    orchestrator: false,
+    surfaces: { express: ON, element: ON, sheet: ON, embedded: MANAGED, redirect: MANAGED }
+  },
+  // Merchant-of-Record; card entry is always Paddle's frame → no own element/sheet/
+  // express. Off-session via subscription one-time charge / collection_mode, but
+  // **no 2nd concurrent subscription** (upgrade + one-time only), provider-initiated.
+  paddle: {
+    isMoR: true,
+    offSessionUpsells: ["one-time", "upgrade"],
+    tokenModel: "provider",
+    orchestrator: false,
+    surfaces: { embedded: ON, popup: ON, redirect: ON }
+  },
+  // Merchant-of-Record; iframe-only (no raw card field). Off-session works
+  // (provider-initiated, async via webhooks). `sheet` = our chrome hosting their embed.
+  whop: {
+    isMoR: true,
+    offSessionUpsells: ALL_UPSELLS,
+    tokenModel: "provider",
+    orchestrator: false,
+    surfaces: { embedded: ON, redirect: ON, sheet: ON }
+  },
+  // Pure orchestrator (PSP-side); Headless renders express/element/sheet/embedded.
+  // No hosted redirect page, no popup checkout. Off-session is PSP-conditional.
+  primer: {
+    isMoR: false,
+    offSessionUpsells: ALL_UPSELLS,
+    tokenModel: "merchant",
+    orchestrator: true,
+    surfaces: { express: ON, element: ON, sheet: ON, embedded: ON }
+  },
+  // PSP **and** orchestrator (own acquiring + connectors routing across Stripe/Adyen/
+  // PayPal). One Payment Form (element/sheet/embedded) + hosted page + wallet button.
+  // Strong native off-session (Recurring API). No popup.
+  solidgate: {
+    isMoR: false,
+    offSessionUpsells: ALL_UPSELLS,
+    tokenModel: "merchant",
+    orchestrator: true,
+    surfaces: { express: ON, element: ON, sheet: ON, embedded: ON, redirect: ON }
+  }
 };
-function CardBrandBadges() {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 700, color: "#1a1f71", background: "#fff", border: "1px solid #e0e0e0", borderRadius: "3px", padding: "2px 4px", fontFamily: FONT }, children: "VISA" }),
-    /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 700, color: "#eb001b", background: "#fff", border: "1px solid #e0e0e0", borderRadius: "3px", padding: "2px 4px", fontFamily: FONT }, children: "MC" }),
-    /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: 700, color: "#ff6000", background: "#fff", border: "1px solid #e0e0e0", borderRadius: "3px", padding: "2px 4px", fontFamily: FONT }, children: "DISC" })
-  ] });
-}
-function CvcIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "16", viewBox: "0 0 20 16", fill: "none", style: { opacity: 0.4 }, children: [
-    /* @__PURE__ */ jsx("rect", { x: "0.5", y: "0.5", width: "19", height: "15", rx: "2", stroke: "#888" }),
-    /* @__PURE__ */ jsx("rect", { x: "0", y: "4", width: "20", height: "3", fill: "#888" }),
-    /* @__PURE__ */ jsx("rect", { x: "3", y: "10", width: "8", height: "2", rx: "1", fill: "#ccc" }),
-    /* @__PURE__ */ jsx("text", { x: "14", y: "12", fontSize: "6", fill: "#888", fontFamily: FONT, children: "123" })
-  ] });
-}
-function DemoElementsForm({ onReady }) {
-  const [cardNumber, setCardNumber] = useState("");
-  const [expiry, setExpiry] = useState("");
-  const [cvc, setCvc] = useState("");
-  const [country, setCountry] = useState("Denmark");
-  const [focusedField, setFocusedField] = useState(null);
-  const readyFired = useRef(false);
-  useEffect(() => {
-    if (!readyFired.current) {
-      readyFired.current = true;
-      onReady?.();
-    }
-  }, [onReady]);
-  const formatCardNumber = (val) => {
-    const digits = val.replace(/\D/g, "").slice(0, 16);
-    return digits.replace(/(.{4})/g, "$1 ").trim();
-  };
-  const formatExpiry = (val) => {
-    const digits = val.replace(/\D/g, "").slice(0, 4);
-    if (digits.length > 2) return digits.slice(0, 2) + " / " + digits.slice(2);
-    return digits;
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { fontFamily: FONT }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "14px" }, children: [
-      /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Card number" }),
-      /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: cardNumber,
-            onChange: (e) => setCardNumber(formatCardNumber(e.target.value)),
-            onFocus: () => setFocusedField("card"),
-            onBlur: () => setFocusedField(null),
-            placeholder: "1234 1234 1234 1234",
-            style: inputStyle(focusedField === "card")
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsx(CardBrandBadges, {}) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", marginBottom: "14px" }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Expiry date" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: expiry,
-            onChange: (e) => setExpiry(formatExpiry(e.target.value)),
-            onFocus: () => setFocusedField("expiry"),
-            onBlur: () => setFocusedField(null),
-            placeholder: "MM / YY",
-            style: inputStyle(focusedField === "expiry")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Security code" }),
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value: cvc,
-              onChange: (e) => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4)),
-              onFocus: () => setFocusedField("cvc"),
-              onBlur: () => setFocusedField(null),
-              placeholder: "CVC",
-              style: inputStyle(focusedField === "cvc")
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsx(CvcIcon, {}) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "14px" }, children: [
-      /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Country" }),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: country,
-          onChange: (e) => setCountry(e.target.value),
-          onFocus: () => setFocusedField("country"),
-          onBlur: () => setFocusedField(null),
-          style: {
-            ...inputStyle(focusedField === "country"),
-            appearance: "none",
-            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E")`,
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "right 12px center",
-            paddingRight: "32px"
-          },
-          children: [
-            /* @__PURE__ */ jsx("option", { children: "Australia" }),
-            /* @__PURE__ */ jsx("option", { children: "Austria" }),
-            /* @__PURE__ */ jsx("option", { children: "Belgium" }),
-            /* @__PURE__ */ jsx("option", { children: "Brazil" }),
-            /* @__PURE__ */ jsx("option", { children: "Canada" }),
-            /* @__PURE__ */ jsx("option", { children: "Denmark" }),
-            /* @__PURE__ */ jsx("option", { children: "Finland" }),
-            /* @__PURE__ */ jsx("option", { children: "France" }),
-            /* @__PURE__ */ jsx("option", { children: "Germany" }),
-            /* @__PURE__ */ jsx("option", { children: "Ireland" }),
-            /* @__PURE__ */ jsx("option", { children: "Italy" }),
-            /* @__PURE__ */ jsx("option", { children: "Japan" }),
-            /* @__PURE__ */ jsx("option", { children: "Netherlands" }),
-            /* @__PURE__ */ jsx("option", { children: "New Zealand" }),
-            /* @__PURE__ */ jsx("option", { children: "Norway" }),
-            /* @__PURE__ */ jsx("option", { children: "Poland" }),
-            /* @__PURE__ */ jsx("option", { children: "Portugal" }),
-            /* @__PURE__ */ jsx("option", { children: "Spain" }),
-            /* @__PURE__ */ jsx("option", { children: "Sweden" }),
-            /* @__PURE__ */ jsx("option", { children: "Switzerland" }),
-            /* @__PURE__ */ jsx("option", { children: "United Kingdom" }),
-            /* @__PURE__ */ jsx("option", { children: "United States" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#6b7280", lineHeight: 1.5, margin: 0, fontFamily: FONT }, children: "By providing your card information, you allow the merchant to charge your card for future payments in accordance with their terms." })
-  ] });
-}
-function DemoEmbeddedForm({ product, onReady }) {
-  const readyFired = useRef(false);
-  const [email, setEmail] = useState("");
-  const [cardNumber, setCardNumber] = useState("");
-  const [expiry, setExpiry] = useState("");
-  const [cvc, setCvc] = useState("");
-  const [name, setName] = useState("");
-  const [country, setCountry] = useState("Denmark");
-  const [focusedField, setFocusedField] = useState(null);
-  useEffect(() => {
-    if (!readyFired.current) {
-      readyFired.current = true;
-      onReady?.();
-    }
-  }, [onReady]);
-  const formatCardNumber = (val) => {
-    const digits = val.replace(/\D/g, "").slice(0, 16);
-    return digits.replace(/(.{4})/g, "$1 ").trim();
-  };
-  const formatExpiry = (val) => {
-    const digits = val.replace(/\D/g, "").slice(0, 4);
-    if (digits.length > 2) return digits.slice(0, 2) + " / " + digits.slice(2);
-    return digits;
+function surfacesFor(provider) {
+  return Object.keys(PROVIDER_PROFILES[provider]?.surfaces ?? {});
+}
+function isMerchantOfRecord(provider) {
+  return PROVIDER_PROFILES[provider]?.isMoR ?? false;
+}
+function isOrchestrator(provider) {
+  return PROVIDER_PROFILES[provider]?.orchestrator ?? false;
+}
+function validateCheckout(provider, surface) {
+  const cap = PROVIDER_PROFILES[provider]?.surfaces[surface];
+  if (!cap) return { ok: false, reason: `${provider} has no '${surface}' surface` };
+  return cap.purchase ? { ok: true } : { ok: false, reason: `'${surface}' can't take a purchase on ${provider}` };
+}
+function validateUpsell(provider, paywallSurface, kind = "subscription") {
+  const profile = PROVIDER_PROFILES[provider];
+  if (!profile) return { ok: false, reason: `unknown provider '${provider}'` };
+  if (!profile.offSessionUpsells.includes(kind)) {
+    const can = profile.offSessionUpsells.length ? ` (it supports: ${profile.offSessionUpsells.join(", ")})` : "";
+    return { ok: false, reason: `${provider} can't charge a '${kind}' upsell off-session${can}` };
+  }
+  const cap = profile.surfaces[paywallSurface];
+  if (!cap) return { ok: false, reason: `${provider} has no '${paywallSurface}' surface to upsell after` };
+  if (cap.offSession === "none") {
+    return { ok: false, reason: `a purchase on '${paywallSurface}' retains no chargeable method for an upsell` };
+  }
+  if (cap.offSession === "conditional") {
+    return { ok: true, note: `off-session upsell after ${provider} '${paywallSurface}' (managed checkout) may decline \u2014 prefer element/sheet/express` };
+  }
+  return { ok: true };
+}
+function checkoutError(category, message, extra = {}) {
+  const retryable = extra.retryable ?? (category === "authentication_required" || category === "requires_payment_method" || category === "processing_error");
+  return { category, message, declineCode: extra.declineCode, retryable };
+}
+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)");
+  return {
+    provider,
+    start: (req) => {
+      if (options.failOffSession && !req.surface) return Promise.resolve({ ok: false, error: offError });
+      return Promise.resolve(success);
+    },
+    renderInline: (req, cb) => createElement(
+      "button",
+      {
+        type: "button",
+        "data-mock-surface": req.surface,
+        onClick: () => success.ok ? cb.onSuccess(success) : cb.onError(success.error ?? checkoutError("processing_error", "failed (mock)"))
+      },
+      `Pay (mock ${req.surface})`
+    )
   };
-  const embeddedInputStyle = (focused) => ({
-    width: "100%",
-    padding: "10px 12px",
-    border: "none",
-    borderBottom: `1px solid ${focused ? "#666" : "#e0e0e0"}`,
-    fontSize: "14px",
-    fontFamily: FONT,
-    outline: "none",
-    backgroundColor: "#fff",
-    boxSizing: "border-box"
-  });
-  const displayPrice = product?.hasTrial ? product.trialPrice : product?.price;
-  return /* @__PURE__ */ jsxs("div", { style: { fontFamily: FONT, border: "1px solid #e0e0e0", borderRadius: "12px", overflow: "hidden", background: "#fff" }, children: [
-    product && /* @__PURE__ */ jsxs("div", { style: { padding: "24px 20px", borderBottom: "1px solid #e0e0e0" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px", color: "#666", marginBottom: "4px" }, children: [
-        "Pay ",
-        product.displayName || product.name
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { fontSize: "28px", fontWeight: 700, color: "#333", marginBottom: "4px" }, children: [
-        product.currencyCode?.toUpperCase(),
-        displayPrice
-      ] }),
-      product.hasTrial && /* @__PURE__ */ jsxs("div", { style: { fontSize: "13px", color: "#666" }, children: [
-        "Then ",
-        /* @__PURE__ */ jsxs("span", { style: { textDecoration: "underline" }, children: [
-          product.currencyCode?.toUpperCase(),
-          product.price
-        ] }),
-        " every ",
-        product.period
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          style: {
-            marginTop: "12px",
-            padding: "6px 14px",
-            borderRadius: "6px",
-            border: "1px solid #e0e0e0",
-            backgroundColor: "#fff",
-            color: "#333",
-            fontSize: "13px",
-            cursor: "default",
-            fontFamily: FONT
-          },
-          children: "View details \u25BE"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { padding: "20px" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
-        /* @__PURE__ */ jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Email" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            onFocus: () => setFocusedField("email"),
-            onBlur: () => setFocusedField(null),
-            placeholder: "you@example.com",
-            style: embeddedInputStyle(focusedField === "email")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
-        /* @__PURE__ */ jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Card information" }),
-        /* @__PURE__ */ jsxs("div", { style: { border: "1px solid #e0e0e0", borderRadius: "6px", overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: cardNumber,
-                onChange: (e) => setCardNumber(formatCardNumber(e.target.value)),
-                onFocus: () => setFocusedField("card"),
-                onBlur: () => setFocusedField(null),
-                placeholder: "1234 1234 1234 1234",
-                style: { ...embeddedInputStyle(focusedField === "card"), padding: "12px" }
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsx(CardBrandBadges, {}) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr" }, children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: expiry,
-                onChange: (e) => setExpiry(formatExpiry(e.target.value)),
-                onFocus: () => setFocusedField("expiry"),
-                onBlur: () => setFocusedField(null),
-                placeholder: "MM / YY",
-                style: { ...embeddedInputStyle(focusedField === "expiry"), borderRight: "1px solid #e0e0e0", padding: "12px" }
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  value: cvc,
-                  onChange: (e) => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4)),
-                  onFocus: () => setFocusedField("cvc"),
-                  onBlur: () => setFocusedField(null),
-                  placeholder: "CVC",
-                  style: { ...embeddedInputStyle(focusedField === "cvc"), padding: "12px" }
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { style: { position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }, children: /* @__PURE__ */ jsx(CvcIcon, {}) })
-            ] })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
-        /* @__PURE__ */ jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Cardholder name" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: name,
-            onChange: (e) => setName(e.target.value),
-            onFocus: () => setFocusedField("name"),
-            onBlur: () => setFocusedField(null),
-            placeholder: "Full name on card",
-            style: inputStyle(focusedField === "name")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
-        /* @__PURE__ */ jsx("label", { style: { ...labelStyle, fontSize: "13px", color: "#666" }, children: "Country or region" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            value: country,
-            onChange: (e) => setCountry(e.target.value),
-            onFocus: () => setFocusedField("country"),
-            onBlur: () => setFocusedField(null),
-            style: {
-              ...inputStyle(focusedField === "country"),
-              appearance: "none",
-              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E")`,
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "right 12px center",
-              paddingRight: "32px"
-            },
-            children: [
-              /* @__PURE__ */ jsx("option", { children: "Australia" }),
-              /* @__PURE__ */ jsx("option", { children: "Austria" }),
-              /* @__PURE__ */ jsx("option", { children: "Belgium" }),
-              /* @__PURE__ */ jsx("option", { children: "Brazil" }),
-              /* @__PURE__ */ jsx("option", { children: "Canada" }),
-              /* @__PURE__ */ jsx("option", { children: "Denmark" }),
-              /* @__PURE__ */ jsx("option", { children: "Finland" }),
-              /* @__PURE__ */ jsx("option", { children: "France" }),
-              /* @__PURE__ */ jsx("option", { children: "Germany" }),
-              /* @__PURE__ */ jsx("option", { children: "Ireland" }),
-              /* @__PURE__ */ jsx("option", { children: "Italy" }),
-              /* @__PURE__ */ jsx("option", { children: "Japan" }),
-              /* @__PURE__ */ jsx("option", { children: "Netherlands" }),
-              /* @__PURE__ */ jsx("option", { children: "New Zealand" }),
-              /* @__PURE__ */ jsx("option", { children: "Norway" }),
-              /* @__PURE__ */ jsx("option", { children: "Poland" }),
-              /* @__PURE__ */ jsx("option", { children: "Portugal" }),
-              /* @__PURE__ */ jsx("option", { children: "Spain" }),
-              /* @__PURE__ */ jsx("option", { children: "Sweden" }),
-              /* @__PURE__ */ jsx("option", { children: "Switzerland" }),
-              /* @__PURE__ */ jsx("option", { children: "United Kingdom" }),
-              /* @__PURE__ */ jsx("option", { children: "United States" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          disabled: true,
-          style: {
-            width: "100%",
-            padding: "14px",
-            borderRadius: "6px",
-            border: "none",
-            backgroundColor: "#0570de",
-            color: "#fff",
-            fontSize: "16px",
-            fontWeight: 600,
-            cursor: "default",
-            fontFamily: FONT,
-            opacity: 0.7
-          },
-          children: "Subscribe"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginTop: "12px", fontSize: "12px", color: "#aaa" }, children: [
-        "Powered by ",
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, letterSpacing: "-0.3px" }, children: "stripe" })
-      ] })
-    ] })
-  ] });
-}
-var DemoStripePaymentForm = forwardRef(
-  function DemoStripePaymentForm2({
-    productId,
-    mode = "checkout",
-    variant = "elements",
-    onSuccess,
-    onError,
-    onReady,
-    className
-  }, ref) {
-    const { variableStore, tracker, products } = useFunnelContext();
-    const validateOnly = mode === "validate-only";
-    const product = useMemo(() => {
-      if (productId) return products.find((p) => p.id === productId) || null;
-      const selectedId = variableStore.get("products.selectedProductId");
-      return products.find((p) => p.id === selectedId) || null;
-    }, [productId, products, variableStore]);
-    const hasFiredStart = useRef(false);
-    useEffect(() => {
-      if (hasFiredStart.current) return;
-      hasFiredStart.current = true;
-      variableStore.set("payment.loading", false);
-      tracker.track("checkout.start", {
-        productId: product?.id,
-        priceId: product?.stripePriceId || product?.storePriceId,
-        productName: product?.displayName
+}
+var DriverContext = createContext(null);
+function CheckoutDriverProvider({
+  driver,
+  children
+}) {
+  return createElement(DriverContext.Provider, { value: driver }, children);
+}
+function useDriver() {
+  return useContext(DriverContext) ?? FALLBACK_DRIVER;
+}
+var FALLBACK_DRIVER = createMockDriver();
+function useCheckout(opts = {}) {
+  const driver = useDriver();
+  const tracker = useTrackerRef();
+  const nav = useNavigation();
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const intent = opts.intent ?? "purchase";
+  const kind = opts.kind;
+  const advance = opts.advanceOnSuccess ?? true;
+  const succeed = useCallback(
+    (result) => {
+      setStatus("success");
+      tracker.track("purchase.complete", {
+        amount: result.amountMinor != null ? result.amountMinor / 100 : void 0,
+        currency: result.currency,
+        eventId: result.eventId
+        // server-minted (browser↔CAPI dedup); undefined if none
       });
-    }, [product, tracker, variableStore]);
-    const handleSubmit = useCallback(async () => {
-      variableStore.set("payment.loading", true);
-      await new Promise((r) => setTimeout(r, 800));
-      try {
-        tracker.track("checkout.payment_added");
-        if (validateOnly) {
-          variableStore.setMany({
-            "card.last4": "4242",
-            "card.brand": "visa",
-            "card.expMonth": 12,
-            "card.expYear": 2030,
-            "card.funding": "credit",
-            "payment.error": ""
-          });
-          onSuccess?.();
-          return;
-        }
-        variableStore.set("payment.error", "");
-        tracker.track("purchase.complete", {
-          amount: product?.rawPrice ? product.rawPrice / 100 : 0,
-          currency: product?.currencyCode || "USD"
-        });
-        onSuccess?.();
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : "An error occurred";
-        variableStore.set("payment.error", msg);
-        onError?.(msg);
-      } finally {
-        variableStore.set("payment.loading", false);
-      }
-    }, [validateOnly, variableStore, tracker, product, onSuccess, onError]);
-    useImperativeHandle(ref, () => ({ submit: handleSubmit }), [handleSubmit]);
-    return /* @__PURE__ */ jsx("div", { className, children: variant === "embedded" ? /* @__PURE__ */ jsx(DemoEmbeddedForm, { product, onReady }) : /* @__PURE__ */ jsx(DemoElementsForm, { onReady }) });
-  }
-);
-var API_BASE_URL2 = "https://api.appfunnel.net";
-var isDevMode = () => typeof globalThis !== "undefined" && !!globalThis.__APPFUNNEL_DEV__;
-var InnerPaymentForm = forwardRef(
-  function InnerPaymentForm2({ paymentMode, validateOnly, onSuccess, onError, onReady, layout }, ref) {
-    const stripe = useStripe();
-    const elements = useElements();
-    const [error, setError] = useState(null);
-    const { variableStore, campaignId, tracker, products, config } = useFunnelContext();
-    const showToasts = !config.settings?.disableToasts;
-    const readyFired = useRef(false);
-    useEffect(() => {
-      if (stripe && elements && !readyFired.current) {
-        readyFired.current = true;
-        onReady?.();
-      }
-    }, [stripe, elements, onReady]);
-    const handleSubmit = useCallback(async () => {
-      if (!stripe || !elements) {
-        const msg = "Stripe not loaded";
-        setError(msg);
-        onError?.(msg);
-        return;
-      }
+      opts.onSuccess?.(result);
+      if (advance) nav.next();
+    },
+    [tracker, nav, advance, opts]
+  );
+  const fail = useCallback(
+    (err, product) => {
+      setStatus(err.category === "authentication_required" ? "requires_action" : "error");
+      setError(err);
+      tracker.track("checkout.failed", {
+        category: err.category,
+        declineCode: err.declineCode,
+        productId: product,
+        intent
+      });
+      opts.onError?.(err);
+    },
+    [tracker, intent, opts]
+  );
+  const begin = useCallback(
+    (product, surface) => {
+      setStatus("loading");
       setError(null);
-      variableStore.set("payment.loading", true);
+      tracker.track("checkout.start", { productId: product, surface });
+    },
+    [tracker]
+  );
+  const paymentAdded = useCallback(() => tracker.track("checkout.payment_added", {}), [tracker]);
+  const open = useCallback(
+    async (product, surface) => {
+      begin(product, surface);
       try {
-        const confirmFn = paymentMode === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
-        const confirmResult = await confirmFn({
-          elements,
-          redirect: "if_required",
-          confirmParams: { return_url: window.location.href }
-        });
-        if (confirmResult.error) {
-          const msg = confirmResult.error.message || "Payment failed";
-          setError(msg);
-          variableStore.set("payment.error", msg);
-          if (showToasts) toast.error(msg);
-          onError?.(msg);
-          return;
-        }
-        tracker.track("checkout.payment_added");
-        if (validateOnly) {
-          const piId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent : void 0;
-          if (!piId?.id) {
-            const msg = "PaymentIntent not found after confirmation";
-            setError(msg);
-            variableStore.set("payment.error", msg);
-            if (showToasts) toast.error(msg);
-            onError?.(msg);
-            return;
-          }
-          const response2 = await fetch(
-            `${API_BASE_URL2}/campaign/${campaignId}/stripe/validate-card`,
-            {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                campaignId,
-                sessionId: tracker.getSessionId(),
-                paymentIntentId: piId.id
-              })
-            }
-          );
-          const result2 = await response2.json();
-          if (!result2.success) {
-            const msg = result2.error || "Card validation failed";
-            setError(msg);
-            variableStore.set("payment.error", msg);
-            if (showToasts) toast.error(msg);
-            onError?.(msg);
-            return;
-          }
-          variableStore.setMany({
-            "card.last4": result2.card.last4,
-            "card.brand": result2.card.brand,
-            "card.expMonth": result2.card.expMonth,
-            "card.expYear": result2.card.expYear,
-            "card.funding": result2.card.funding,
-            "payment.error": ""
-          });
-          onSuccess?.();
-          return;
-        }
-        const paymentIntentId = "paymentIntent" in confirmResult ? confirmResult.paymentIntent?.id : void 0;
-        const selectedId = variableStore.get("products.selectedProductId");
-        const product = products.find((p) => p.id === selectedId);
-        if (!product?.stripePriceId) {
-          const msg = "No product selected or missing Stripe price";
-          setError(msg);
-          variableStore.set("payment.error", msg);
-          if (showToasts) toast.error(msg);
-          onError?.(msg);
-          return;
-        }
-        const response = await fetch(
-          `${API_BASE_URL2}/campaign/${campaignId}/stripe/purchase`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              campaignId,
-              sessionId: tracker.getSessionId(),
-              stripePriceId: product.stripePriceId,
-              trialPeriodDays: product.hasTrial ? product.trialDays : void 0,
-              onSessionPiId: paymentMode === "payment" ? paymentIntentId : void 0
-            })
-          }
-        );
-        const result = await response.json();
-        if (result.success) {
-          variableStore.set("payment.error", "");
-          if (result.eventId || result.eventIds?.firstPeriod) {
-            tracker.track("purchase.complete", {
-              amount: product.rawPrice ? product.rawPrice / 100 : 0,
-              currency: product.currencyCode || "USD"
-            });
-          }
-          onSuccess?.();
-        } else {
-          const msg = result.error || "Failed to process payment";
-          setError(msg);
-          variableStore.set("payment.error", msg);
-          if (showToasts) toast.error(msg);
-          onError?.(msg);
+        const result = await driver.start({ product, intent, surface, kind });
+        if (result.ok) succeed(result);
+        else fail(result.error ?? checkoutError("unknown", "Checkout failed"), product);
+        return result;
+      } catch (e) {
+        const err = checkoutError("processing_error", e instanceof Error ? e.message : "Checkout failed");
+        fail(err, product);
+        return { ok: false, error: err };
+      }
+    },
+    [driver, intent, kind, begin, succeed, fail]
+  );
+  const callbacksFor = useCallback(
+    (product, surface) => ({
+      onStart: () => begin(product, surface),
+      onSuccess: (result) => succeed(result),
+      onError: (err) => fail(err, product),
+      onPaymentAdded: () => paymentAdded()
+    }),
+    [begin, succeed, fail, paymentAdded]
+  );
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setError(null);
+  }, []);
+  return { open, status, error, isLoading: status === "loading", reset, callbacksFor };
+}
+var CheckoutSheet = defineModal(({ product, surface, intent, onSuccess, onError }) => {
+  const driver = useDriver();
+  const modal = useModal();
+  if (!driver.renderInline) return null;
+  return createElement(Sheet, {
+    children: driver.renderInline(
+      { product, intent, surface },
+      {
+        onSuccess: (r) => {
+          modal.hide();
+          onSuccess(r);
+        },
+        onError: (e) => {
+          modal.hide();
+          onError(e);
         }
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : "An error occurred";
-        setError(msg);
-        variableStore.set("payment.error", msg);
-        if (showToasts) toast.error(msg);
-        onError?.(msg);
-      } finally {
-        variableStore.set("payment.loading", false);
       }
-    }, [stripe, elements, paymentMode, validateOnly, variableStore, campaignId, tracker, products, onSuccess, onError]);
-    useImperativeHandle(ref, () => ({ submit: handleSubmit }), [handleSubmit]);
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(PaymentElement, { options: { layout: layout || "tabs" } }),
-      error && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "14px", marginTop: "12px" }, children: error })
-    ] });
+    )
+  });
+});
+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");
+}
+function Checkout({
+  product,
+  surface,
+  asChild,
+  children,
+  className,
+  ...options
+}) {
+  const driver = useDriver();
+  const checkout = useCheckout(options);
+  const intent = options.intent ?? "purchase";
+  if (isInlineSurface(surface)) {
+    return driver.renderInline ? createElement(
+      "div",
+      { key: product, className },
+      driver.renderInline({ product, intent, surface }, checkout.callbacksFor(product, surface))
+    ) : null;
+  }
+  if (surface === "sheet") {
+    const cb = checkout.callbacksFor(product, surface);
+    const open = () => {
+      cb.onStart();
+      showModal(CheckoutSheet, { product, surface, intent, onSuccess: cb.onSuccess, onError: cb.onError });
+    };
+    return trigger(open, { asChild, children, className, disabled: checkout.isLoading });
   }
-);
-var RealStripePaymentForm = forwardRef(
-  function RealStripePaymentForm2({
-    productId,
-    mode = "checkout",
-    variant = "elements",
-    successPageKey,
-    automaticTax = false,
-    managedPayments = false,
-    allowPromotionCodes = false,
-    onSuccess,
-    onError,
-    onReady,
+  return trigger(() => checkout.open(product, surface), {
+    asChild,
+    children,
     className,
-    appearance,
-    layout
-  }, ref) {
-    const { campaignId, tracker, variableStore, products, router, config } = useFunnelContext();
-    const showToasts = !config.settings?.disableToasts;
-    const [email] = useVariable("user.email");
-    const validateOnly = mode === "validate-only";
-    const product = useMemo(() => {
-      if (productId) return products.find((p) => p.id === productId) || null;
-      const selectedId = variableStore.get("products.selectedProductId");
-      return products.find((p) => p.id === selectedId) || null;
-    }, [productId, products, variableStore]);
-    const paymentMode = useMemo(() => {
-      if (validateOnly) return "payment";
-      if (product?.hasTrial && !product.paidTrial) return "setup";
-      return "payment";
-    }, [product, validateOnly]);
-    const [stripePromise, setStripePromise] = useState(null);
-    const [clientSecret, setClientSecret] = useState(null);
-    const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const hasInitialized = useRef(false);
-    useEffect(() => {
-      if (!email || !campaignId || hasInitialized.current) return;
-      if (!product?.storePriceId) return;
-      hasInitialized.current = true;
-      setIsLoading(true);
-      variableStore.set("payment.loading", true);
-      const createIntent = async () => {
-        try {
-          if (variant === "embedded") {
-            const origin = typeof window !== "undefined" ? window.location.origin : "";
-            let returnUrl = origin + "/";
-            if (successPageKey) {
-              const pageUrl = router.getPageUrl(successPageKey);
-              returnUrl = `${origin}${pageUrl}?checkout=success&session_id={CHECKOUT_SESSION_ID}`;
-            }
-            const apiCheckoutMode = managedPayments ? "embedded" : variant;
-            const body = {
-              campaignId,
-              sessionId: tracker.getSessionId(),
-              customerEmail: email,
-              priceId: product.storePriceId,
-              returnUrl,
-              checkoutMode: apiCheckoutMode,
-              automaticTax,
-              managedPayments,
-              allowPromotionCodes
-            };
-            if (product.hasTrial && product.trialDays > 0) {
-              body.trialPeriodDays = product.trialDays;
-              if (product.paidTrial && product.trialStorePriceId) {
-                body.paidTrialPriceId = product.trialStorePriceId;
-              }
-            }
-            const response = await fetch(
-              `${API_BASE_URL2}/campaign/${campaignId}/stripe/checkout-session`,
-              {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(body)
-              }
-            );
-            const result = await response.json();
-            if (!result.success) throw new Error(result.error || "Failed to create checkout session");
-            setStripePromise(loadStripe(result.publishableKey));
-            setClientSecret(result.clientSecret);
-          } else {
-            const endpoint = paymentMode === "setup" ? `/campaign/${campaignId}/stripe/setup-intent` : `/campaign/${campaignId}/stripe/payment-intent`;
-            const body = {
-              campaignId,
-              sessionId: tracker.getSessionId(),
-              customerEmail: email,
-              priceId: product.storePriceId
-            };
-            if (validateOnly) body.validateOnly = true;
-            const response = await fetch(`${API_BASE_URL2}${endpoint}`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify(body)
-            });
-            const result = await response.json();
-            if (!result.success) throw new Error(result.error || "Failed to create intent");
-            setStripePromise(loadStripe(result.publishableKey));
-            setClientSecret(result.clientSecret);
-            variableStore.set("user.stripeCustomerId", result.customerId);
-          }
-          tracker.track("checkout.start", {
-            productId: product.id,
-            priceId: product.stripePriceId || product.storePriceId,
-            productName: product.displayName
-          });
-        } catch (err) {
-          const msg = err instanceof Error ? err.message : "Failed to initialize payment";
-          setError(msg);
-          variableStore.set("payment.error", msg);
-          if (showToasts) toast.error(msg);
-        } finally {
-          setIsLoading(false);
-          variableStore.set("payment.loading", false);
-        }
-      };
-      createIntent();
-    }, [email, campaignId, product, paymentMode, validateOnly, variant, successPageKey, automaticTax, managedPayments, allowPromotionCodes, router, tracker, variableStore]);
-    if (isLoading) {
-      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Loading payment form..." });
-    }
-    if (!email) {
-      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: "Email is required to initialize payment" });
+    disabled: checkout.isLoading
+  });
+}
+function Upsell({ product, fallback, asChild, children, className, ...options }) {
+  const checkout = useCheckout({ ...options, intent: "upsell" });
+  const start = async () => {
+    const result = await checkout.open(product);
+    if (result.ok || !fallback) return;
+    const cb = checkout.callbacksFor(product, fallback);
+    if (fallback === "sheet") {
+      cb.onStart();
+      showModal(CheckoutSheet, { product, surface: "sheet", intent: "upsell", onSuccess: cb.onSuccess, onError: cb.onError });
+    } else {
+      await checkout.open(product, fallback);
     }
-    if (error) {
-      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: error });
+  };
+  return trigger(start, {
+    asChild,
+    children: children ?? "Add to my plan",
+    className,
+    disabled: checkout.isLoading
+  });
+}
+function FunnelToaster(props = {}) {
+  return createElement(Toaster, { position: "top-center", ...props });
+}
+function renderToaster(toaster) {
+  if (toaster === false) return null;
+  return createElement(Toaster, { position: "top-center", ...toaster === true ? {} : toaster });
+}
+
+// src/state/namespaces.ts
+var Namespace = class {
+  constructor(store, name, onWrite) {
+    this.store = store;
+    this.name = name;
+    this.onWrite = onWrite;
+    this.dot = `${NAMESPACE_PREFIX[name]}.`;
+  }
+  /** Fully-qualified store key for a namespace-relative key. */
+  storeKey(key) {
+    return this.dot + key;
+  }
+  /** The store-key prefix this namespace reads/writes (e.g. `user.`). */
+  get prefix() {
+    return this.dot;
+  }
+  /** Read the whole namespace as a flat object (prefix stripped). */
+  getAll() {
+    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 (!stripePromise || !clientSecret) {
-      return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#6b7280" }, children: "Initializing payment..." });
+    return out;
+  }
+  get(key) {
+    return key === void 0 ? this.getAll() : this.store.get(this.storeKey(key));
+  }
+  /** Write one or more keys from a plain object (batched + side-effected). */
+  set(values) {
+    const updates = {};
+    for (const key in values) {
+      updates[this.storeKey(key)] = values[key];
     }
-    if (variant === "embedded") {
-      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-        EmbeddedCheckoutProvider,
-        {
-          stripe: stripePromise,
-          options: { clientSecret },
-          children: /* @__PURE__ */ jsx(EmbeddedCheckout, {})
-        }
-      ) });
+    this.store.setMany(updates);
+    this.onWrite(this.name, values);
+  }
+};
+function createFunnel(store, context, tracker, experiments = []) {
+  const onWrite = (ns, values) => {
+    if (ns === "user" && typeof values.email === "string" && values.email) {
+      tracker.identify(values.email);
     }
-    const defaultAppearance = {
-      theme: "stripe",
-      variables: { colorPrimary: "#3b82f6", borderRadius: "8px" }
+    tracker.setVariables?.(store.getState());
+  };
+  const user = new Namespace(store, "user", onWrite);
+  const responses = new Namespace(store, "responses", onWrite);
+  const data = new Namespace(store, "data", onWrite);
+  return {
+    user,
+    responses,
+    data,
+    context,
+    experiments,
+    track: (event, eventData, userData) => tracker.track(event, eventData, userData),
+    snapshot: () => ({
+      user: user.getAll(),
+      responses: responses.getAll(),
+      data: data.getAll(),
+      context
+    })
+  };
+}
+var FunnelCtx = createContext(null);
+function FunnelProvider({
+  config,
+  sessionValues,
+  tracker,
+  context: contextOpts,
+  products,
+  experiments,
+  checkout,
+  messages,
+  locale: localeOverride,
+  toaster = true,
+  store,
+  children
+}) {
+  const resolvedTracker = tracker ?? FALLBACK_TRACKER;
+  const [value] = useState(() => {
+    const s = store ?? createFunnelStore(
+      { responses: config?.responses, data: config?.data },
+      sessionValues
+    );
+    const ctx = buildContext({
+      funnelId: config?.id,
+      ...contextOpts
+    });
+    const bus = createBus({
+      getVariable: (key) => s.get(key),
+      getVariables: () => s.getState(),
+      getCurrentPageId: () => ctx.page.key || null,
+      getCustomerId: () => ctx.identity.customerId,
+      getVisitorId: () => ctx.identity.visitorId
+    });
+    const busTracker = withBus(resolvedTracker, bus);
+    return {
+      funnel: createFunnel(s, ctx, busTracker, experiments ?? []),
+      store: s,
+      context: ctx,
+      catalog: buildCatalog(products ?? []),
+      driver: checkout ?? createMockDriver(),
+      tracker: busTracker,
+      bus
     };
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options: { clientSecret, appearance: appearance || defaultAppearance }, children: /* @__PURE__ */ jsx(
-      InnerPaymentForm,
-      {
-        ref,
-        paymentMode,
-        validateOnly,
-        onSuccess,
-        onError,
-        onReady,
-        layout
-      }
-    ) }) });
+  });
+  useEffect(() => attachBus(value.bus), [value.bus]);
+  useEffect(() => {
+    value.tracker.setAcquisition?.(buildAcquisition(value.context));
+  }, [value]);
+  const tree = createElement(TrackerProvider, {
+    tracker: value.tracker,
+    children: createElement(CheckoutDriverProvider, {
+      driver: value.driver,
+      children: createElement(CatalogProvider, {
+        catalog: value.catalog,
+        children: createElement(FunnelCtx.Provider, {
+          value,
+          children: createElement(LocaleProvider, {
+            config: config?.locales,
+            catalog: messages,
+            detected: value.context.locale.locale,
+            override: localeOverride,
+            children: createElement(ModalRuntime, { children })
+          })
+        })
+      })
+    })
+  });
+  return createElement(Fragment, null, tree, renderToaster(toaster));
+}
+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>");
   }
-);
-var StripePaymentForm = forwardRef(
-  function StripePaymentForm2(props, ref) {
-    if (isDevMode()) {
-      return /* @__PURE__ */ jsx(DemoStripePaymentForm, { ref, ...props });
-    }
-    return /* @__PURE__ */ jsx(RealStripePaymentForm, { ref, ...props });
+  return ctx;
+}
+function useFunnel() {
+  return useFunnelCtx().funnel;
+}
+function useStoreKey(store, key) {
+  const subscribe = useCallback(
+    (cb) => store.subscribe(cb, { keys: [key] }),
+    [store, key]
+  );
+  const getSnapshot = useCallback(() => store.get(key), [store, key]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function makeFieldHook(ns) {
+  return function useNamespaceField(key) {
+    const { funnel, store } = useFunnelCtx();
+    const value = useStoreKey(store, `${NAMESPACE_PREFIX[ns]}.${key}`);
+    const set = useCallback(
+      (v) => funnel[ns].set({ [key]: v }),
+      [funnel, key]
+    );
+    return [value, set];
+  };
+}
+var useResponse = makeFieldHook("responses");
+var useUserAttribute = makeFieldHook("user");
+var useData = makeFieldHook("data");
+function useField(path) {
+  const dot = path.indexOf(".");
+  const ns = path.slice(0, dot);
+  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)`);
   }
-);
-function PaddleCheckout({
-  productId,
-  mode = "overlay",
-  onSuccess,
-  onError,
-  className
+  const value = useStoreKey(store, `${NAMESPACE_PREFIX[ns]}.${key}`);
+  const set = useCallback(
+    (v) => funnel[ns].set({ [key]: v }),
+    [funnel, ns, key]
+  );
+  return { value, set };
+}
+function useContextObject() {
+  return useFunnelCtx().context;
+}
+function useDevice() {
+  return useContextObject().device;
+}
+function useLocale() {
+  return useContextObject().locale;
+}
+function useUtm() {
+  return useContextObject().utm;
+}
+function useClickIds() {
+  return useContextObject().clickIds;
+}
+function useSystem() {
+  return useContextObject().system;
+}
+function useContextValue(path) {
+  const ctx = useContextObject();
+  return useMemo(
+    () => path.split(".").reduce((acc, k) => acc?.[k], ctx),
+    [ctx, path]
+  );
+}
+function Choice({
+  bind,
+  options,
+  className,
+  selectedClassName,
+  advanceOnSelect
+}) {
+  const { value, set } = useField(bind);
+  const nav = useNavigation();
+  return options.map((opt) => {
+    const o = typeof opt === "string" ? { value: opt } : opt;
+    const selected = value === o.value;
+    return createElement(
+      "button",
+      {
+        key: o.value,
+        type: "button",
+        "aria-pressed": selected,
+        "data-selected": selected || void 0,
+        className: selected && selectedClassName ? `${className ?? ""} ${selectedClassName}`.trim() : className,
+        onClick: () => {
+          set(o.value);
+          if (advanceOnSelect) nav.next();
+        }
+      },
+      o.label ?? o.value
+    );
+  });
+}
+function Next({ children, onClick, ...rest }) {
+  const { next } = useNavigation();
+  return createElement(
+    "button",
+    {
+      type: "button",
+      ...rest,
+      onClick: (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) next();
+      }
+    },
+    children ?? "Continue"
+  );
+}
+function Back({ children, onClick, ...rest }) {
+  const { back, canGoBack } = useNavigation();
+  if (!canGoBack) return null;
+  return createElement(
+    "button",
+    {
+      type: "button",
+      ...rest,
+      onClick: (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) back();
+      }
+    },
+    children ?? "Back"
+  );
+}
+
+// src/tracking/catalog.ts
+var EVENT_CATALOG = {
+  // ── Runtime / navigation (JS subscriptions; not persisted) ──
+  "funnel.start": { sources: ["frontend"], tracking: false, integrations: false, runtime: true },
+  "experiment.exposure": { sources: ["frontend"], tracking: true, integrations: false },
+  // ── Frontend, tracked; some also go to pixels ──
+  "page.view": { sources: ["frontend"], tracking: true, integrations: true },
+  "page.exit": { sources: ["frontend"], tracking: true, integrations: false },
+  "user.registered": { sources: ["frontend"], tracking: true, integrations: true },
+  "checkout.start": { sources: ["frontend"], tracking: true, integrations: true },
+  "checkout.payment_added": { sources: ["frontend"], tracking: true, integrations: true },
+  "checkout.failed": { sources: ["frontend"], tracking: true, integrations: false },
+  // ── Backend-originated money events (server mints the eventId; client fires the pixel) ──
+  "purchase.complete": { sources: ["backend"], tracking: true, integrations: true },
+  "customer.first_purchase": { sources: ["backend"], tracking: true, integrations: true },
+  "subscription.created": { sources: ["backend"], tracking: true, integrations: true },
+  "subscription.renewal": { sources: ["backend"], tracking: true, integrations: true }
+};
+function isTrackableEvent(name) {
+  return EVENT_CATALOG[name]?.tracking ?? false;
+}
+function isIntegrationEvent(name) {
+  return EVENT_CATALOG[name]?.integrations ?? false;
+}
+function integrationEvents() {
+  return Object.keys(EVENT_CATALOG).filter((e) => EVENT_CATALOG[e].integrations);
+}
+var injected = /* @__PURE__ */ new Set();
+function Script({
+  src,
+  strategy = "afterInteractive",
+  id,
+  async = true,
+  defer,
+  nonce,
+  attributes,
+  onLoad,
+  onError
 }) {
-  const { variableStore, tracker, products } = useFunnelContext();
-  const containerRef = useRef(null);
-  const initializedRef = useRef(false);
-  const product = productId ? products.find((p) => p.id === productId) : products.find((p) => p.id === variableStore.get("products.selectedProductId"));
-  const handleCheckoutComplete = useCallback(() => {
-    tracker.track("purchase.complete", {
-      amount: product?.rawPrice ? product.rawPrice / 100 : 0,
-      currency: product?.currencyCode || "USD"
-    });
-    onSuccess?.();
-  }, [tracker, product, onSuccess]);
   useEffect(() => {
-    if (initializedRef.current || !product?.paddlePriceId) return;
-    initializedRef.current = true;
-    if (!window.Paddle) {
-      onError?.("Paddle.js not loaded. Include the Paddle script in your HTML.");
+    if (typeof document === "undefined") return;
+    const key = id ?? src;
+    if (injected.has(key)) {
+      onLoad?.();
       return;
     }
-    const email = variableStore.get("user.email") || "";
-    if (mode === "overlay") {
-      window.Paddle.Checkout.open({
-        items: [{ priceId: product.paddlePriceId, quantity: 1 }],
-        customer: email ? { email } : void 0,
-        successCallback: handleCheckoutComplete,
-        closeCallback: () => {
-        }
+    const inject = () => {
+      if (injected.has(key)) return;
+      injected.add(key);
+      const el = document.createElement("script");
+      el.src = src;
+      if (id) el.id = id;
+      if (async) el.async = true;
+      if (defer) el.defer = true;
+      if (nonce) el.nonce = nonce;
+      if (attributes) for (const [k, v] of Object.entries(attributes)) el.setAttribute(k, v);
+      el.addEventListener("load", () => onLoad?.());
+      el.addEventListener("error", () => {
+        injected.delete(key);
+        onError?.();
       });
-    } else {
-      if (containerRef.current) {
-        window.Paddle.Checkout.open({
-          items: [{ priceId: product.paddlePriceId, quantity: 1 }],
-          customer: email ? { email } : void 0,
-          settings: {
-            displayMode: "inline",
-            frameTarget: containerRef.current.id || "paddle-checkout",
-            frameInitialHeight: 450,
-            frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
-          },
-          successCallback: handleCheckoutComplete
-        });
+      document.head.appendChild(el);
+    };
+    if (strategy === "lazyOnload") {
+      const ric = window.requestIdleCallback;
+      if (ric) {
+        ric(inject);
+      } else {
+        const t = setTimeout(inject, 0);
+        return () => clearTimeout(t);
       }
+      return;
     }
-    tracker.track("checkout.start", {
-      productId: product.id,
-      priceId: product.paddlePriceId,
-      productName: product.displayName
-    });
-  }, [product, mode, variableStore, tracker, handleCheckoutComplete, onError]);
-  if (!product) {
-    return /* @__PURE__ */ jsx("div", { className, style: { padding: "20px", textAlign: "center", color: "#ef4444", fontSize: "14px" }, children: "No product selected" });
-  }
-  if (mode === "inline") {
-    return /* @__PURE__ */ jsx("div", { ref: containerRef, id: "paddle-checkout", className });
-  }
+    inject();
+  }, [src, id]);
   return null;
 }
 
-export { PaddleCheckout, StripePaymentForm, defineConfig, definePage, useData, useDateOfBirth, useDeviceInfo, useFunnel, useKeyboard, useLocale, usePageData, usePayment, useProducts, useQueryParam, useQueryParams, useSafeArea, useTracking, useTranslation, useUser, useUserProperty, useVariable, useVariables };
+// src/manifest/manifest.ts
+function isVariantNode(page) {
+  return isVariantKey(page.key);
+}
+function serializeGate(when) {
+  if (!when) return void 0;
+  if (typeof when === "function") return { kind: "predicate" };
+  return { kind: "declarative", condition: when };
+}
+function compileManifest(input) {
+  const { funnel, pages } = input;
+  const keys = new Set(pages.map((p) => p.key));
+  const manifestPages = pages.map((p, index) => ({
+    id: p.key,
+    key: p.key,
+    type: p.meta?.type ?? "default",
+    slug: p.meta?.slug ?? p.key,
+    index,
+    variantOf: isVariantKey(p.key) ? parseSlotKey(p.key).slot : void 0
+  }));
+  const edges = [];
+  const badTargets = [];
+  const nextAnchor = (from) => {
+    for (let j = from + 1; j < pages.length; j++) {
+      if (!isVariantNode(pages[j])) return pages[j];
+    }
+    return void 0;
+  };
+  pages.forEach((p, i) => {
+    if (isVariantNode(p)) return;
+    const routes = p.meta?.next ?? [];
+    let hasUnconditional = false;
+    for (const route of routes) {
+      if (!keys.has(route.to)) {
+        badTargets.push({ from: p.key, to: route.to });
+        continue;
+      }
+      edges.push({ from: p.key, to: route.to, kind: "branch", condition: serializeGate(route.when) });
+      if (!route.when) hasUnconditional = true;
+    }
+    const next = nextAnchor(i);
+    if (!hasUnconditional && next && p.meta?.type !== "finish") {
+      edges.push({ from: p.key, to: next.key, kind: "linear" });
+    }
+  });
+  const startPage = pages.find((p) => !isVariantNode(p));
+  const start = startPage?.key ?? null;
+  const variantKeys = new Set(pages.filter(isVariantNode).map((p) => p.key));
+  const validation = validate(manifestPages, edges, badTargets, start, variantKeys);
+  return {
+    id: funnel.id,
+    pages: manifestPages,
+    flow: { start, nodes: manifestPages.map((p) => p.id), edges },
+    products: funnel.products ?? [],
+    locales: funnel.locales,
+    validation
+  };
+}
+function validate(pages, edges, badTargets, start, variantKeys) {
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const e of edges) outgoing.set(e.from, (outgoing.get(e.from) ?? 0) + 1);
+  const deadEnds = pages.filter((p) => p.type !== "finish" && !variantKeys.has(p.id) && !(outgoing.get(p.id) > 0)).map((p) => p.id);
+  const reachable = /* @__PURE__ */ new Set();
+  if (start) {
+    const adj = /* @__PURE__ */ new Map();
+    for (const e of edges) {
+      const list = adj.get(e.from);
+      if (list) list.push(e.to);
+      else adj.set(e.from, [e.to]);
+    }
+    const stack = [start];
+    while (stack.length) {
+      const id = stack.pop();
+      if (reachable.has(id)) continue;
+      reachable.add(id);
+      for (const to of adj.get(id) ?? []) stack.push(to);
+    }
+  }
+  const unreachable = pages.filter((p) => !variantKeys.has(p.id) && !reachable.has(p.id)).map((p) => p.id);
+  const missingEmailCapture = !pages.some((p) => p.type === "email-capture");
+  return {
+    ok: deadEnds.length === 0 && unreachable.length === 0 && badTargets.length === 0 && !missingEmailCapture,
+    deadEnds,
+    unreachable,
+    badTargets,
+    missingEmailCapture
+  };
+}
+
+export { Back, Checkout, Choice, EVENT_CATALOG, FunnelProvider, FunnelToaster, FunnelView, INLINE_SURFACES, Modal, Next, PROVIDER_PROFILES, Script, Sheet, Upsell, VariableStore, assignVariant, attachBus, bucketingSeed, buildAcquisition, buildCatalog, checkoutError, compileManifest, createBus, createConsoleTracker, createFunnelStore, createMockDriver, defineFunnel, defineModal, definePage, entryGuard, evaluateCondition, evaluateGate, expectedPathLength, fnv1a, formatProduct, hashToUnit, hideModal, integrationEvents, isInlineSurface, isIntegrationEvent, isMerchantOfRecord, isOrchestrator, isRtl, isTrackableEvent, isVariantKey, newEventId, nextPage, outgoingKeys, pageMeta, parseSlotKey, pickByWeight, registerModal, removeModal, resolveExperiments, resolveLocale, resolveProduct, resolveRoute, showModal, surfacesFor, unregisterModal, useCheckout, useClickIds, useContextValue, useData, useDevice, useExperiment, useField, useFunnel, useLocale, useModal, useNavigation, usePage, useProduct, useProducts, useResponse, useSystem, useTracker, useTranslation, useUserAttribute, useUtm, validateCheckout, validateExperiments, validateUpsell, withBus };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map