@founderhq/journeys 0.4.0 → 0.4.2

package/README.md

@@ -208,6 +208,12 @@ Capture is enabled by default after access validation succeeds. Pass `capture={f
 
 `apiKey`, `journeyId`, and the FounderHQ API URL are inherited from the root props and are not repeated inside `capture`.
 
+Capture events are batched and persisted locally with a TTL. The runtime flushes
+immediately for completion events, and browser embeds also try an exit-safe
+`sendBeacon`/`keepalive` flush on `visibilitychange` and `pagehide`. Beacon
+delivery is treated as best-effort; FounderHQ uses event IDs server-side so a
+later retry can safely duplicate a queued event.
+
 ## Config Shape
 
 A journey config is centered around:

package/dist/_tsup-dts-rollup.d.cts

@@ -323,7 +323,7 @@ declare type BlockPropsMap = {
 export { BlockPropsMap }
 export { BlockPropsMap as BlockPropsMap_alias_1 }
 
-export declare function BlockRenderer({ blocks, layout, answers, onNext, onBack, onGoToStep, scrollViewportRef, wrapInScrollViewport, }: BlockRendererProps): JSX.Element;
+export declare function BlockRenderer({ blocks, layout, answers, onNext, onBack, onGoToStep, isLastStep, scrollViewportRef, wrapInScrollViewport, }: BlockRendererProps): JSX.Element;
 
 declare type BlockRendererProps = {
     blocks: BlockConfig[];
@@ -332,6 +332,7 @@ declare type BlockRendererProps = {
     onNext: () => void;
     onBack: () => void;
     onGoToStep?: (stepId: string) => void;
+    isLastStep?: boolean;
     scrollViewportRef?: Ref<HTMLDivElement>;
     wrapInScrollViewport?: boolean;
 };
@@ -355,6 +356,8 @@ declare type ButtonAction = {
     type: "link";
     url: string;
     external?: boolean;
+    /** Final-step links complete before navigating by default. Set false to opt out, or true to force this on non-final steps. */
+    completeBeforeNavigate?: boolean;
 } | {
     type: "purchase";
     planVariable?: string;
@@ -370,7 +373,7 @@ declare type ButtonAction = {
 export { ButtonAction }
 export { ButtonAction as ButtonAction_alias_1 }
 
-export declare function ButtonBlock({ label, action, variant, className, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, disabled, }: ButtonBlockComponentProps): JSX.Element;
+export declare function ButtonBlock({ label, action, variant, className, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, disabled, isLastStep, }: ButtonBlockComponentProps): JSX.Element;
 
 declare type ButtonBlockComponentProps = ButtonBlockProps & {
     onNext?: () => void;
@@ -383,6 +386,7 @@ declare type ButtonBlockComponentProps = ButtonBlockProps & {
     onOpenDiscountCode?: () => void;
     /** Injected by BlockRenderer when sibling input blocks have unmet validation. */
     disabled?: boolean;
+    isLastStep?: boolean;
 };
 
 declare type ButtonBlockProps = {
@@ -572,13 +576,14 @@ declare type ColumnConfig = {
 export { ColumnConfig }
 export { ColumnConfig as ColumnConfig_alias_1 }
 
-export declare function ColumnsBlock({ columns, gap, responsive, className, answers, onNext, onBack, onGoToStep, }: ColumnsBlockComponentProps): JSX.Element;
+export declare function ColumnsBlock({ columns, gap, responsive, className, answers, onNext, onBack, onGoToStep, isLastStep, }: ColumnsBlockComponentProps): JSX.Element;
 
 declare type ColumnsBlockComponentProps = ColumnsBlockProps & {
     answers?: JourneyAnswers;
     onNext?: () => void;
     onBack?: () => void;
     onGoToStep?: (stepId: string) => void;
+    isLastStep?: boolean;
 };
 
 declare type ColumnsBlockProps = {
@@ -979,7 +984,7 @@ declare type ImageBlockProps = {
 export { ImageBlockProps }
 export { ImageBlockProps as ImageBlockProps_alias_1 }
 
-export declare function InfoPageStep({ config, onNext }: StepComponentProps): JSX.Element | null;
+export declare function InfoPageStep({ config, onNext, isLastStep, }: StepComponentProps): JSX.Element | null;
 
 export declare function Input({ className, type, ...props }: React_2.ComponentProps<"input">): React_2.JSX.Element;
 
@@ -1863,6 +1868,7 @@ declare type StepComponentProps = {
     answer: StepAnswer | undefined;
     onAnswer: (answer: StepAnswer) => void;
     onNext: () => void;
+    isLastStep?: boolean;
 };
 export { StepComponentProps }
 export { StepComponentProps as StepComponentProps_alias_1 }

package/dist/_tsup-dts-rollup.d.ts

@@ -323,7 +323,7 @@ declare type BlockPropsMap = {
 export { BlockPropsMap }
 export { BlockPropsMap as BlockPropsMap_alias_1 }
 
-export declare function BlockRenderer({ blocks, layout, answers, onNext, onBack, onGoToStep, scrollViewportRef, wrapInScrollViewport, }: BlockRendererProps): JSX.Element;
+export declare function BlockRenderer({ blocks, layout, answers, onNext, onBack, onGoToStep, isLastStep, scrollViewportRef, wrapInScrollViewport, }: BlockRendererProps): JSX.Element;
 
 declare type BlockRendererProps = {
     blocks: BlockConfig[];
@@ -332,6 +332,7 @@ declare type BlockRendererProps = {
     onNext: () => void;
     onBack: () => void;
     onGoToStep?: (stepId: string) => void;
+    isLastStep?: boolean;
     scrollViewportRef?: Ref<HTMLDivElement>;
     wrapInScrollViewport?: boolean;
 };
@@ -355,6 +356,8 @@ declare type ButtonAction = {
     type: "link";
     url: string;
     external?: boolean;
+    /** Final-step links complete before navigating by default. Set false to opt out, or true to force this on non-final steps. */
+    completeBeforeNavigate?: boolean;
 } | {
     type: "purchase";
     planVariable?: string;
@@ -370,7 +373,7 @@ declare type ButtonAction = {
 export { ButtonAction }
 export { ButtonAction as ButtonAction_alias_1 }
 
-export declare function ButtonBlock({ label, action, variant, className, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, disabled, }: ButtonBlockComponentProps): JSX.Element;
+export declare function ButtonBlock({ label, action, variant, className, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, disabled, isLastStep, }: ButtonBlockComponentProps): JSX.Element;
 
 declare type ButtonBlockComponentProps = ButtonBlockProps & {
     onNext?: () => void;
@@ -383,6 +386,7 @@ declare type ButtonBlockComponentProps = ButtonBlockProps & {
     onOpenDiscountCode?: () => void;
     /** Injected by BlockRenderer when sibling input blocks have unmet validation. */
     disabled?: boolean;
+    isLastStep?: boolean;
 };
 
 declare type ButtonBlockProps = {
@@ -572,13 +576,14 @@ declare type ColumnConfig = {
 export { ColumnConfig }
 export { ColumnConfig as ColumnConfig_alias_1 }
 
-export declare function ColumnsBlock({ columns, gap, responsive, className, answers, onNext, onBack, onGoToStep, }: ColumnsBlockComponentProps): JSX.Element;
+export declare function ColumnsBlock({ columns, gap, responsive, className, answers, onNext, onBack, onGoToStep, isLastStep, }: ColumnsBlockComponentProps): JSX.Element;
 
 declare type ColumnsBlockComponentProps = ColumnsBlockProps & {
     answers?: JourneyAnswers;
     onNext?: () => void;
     onBack?: () => void;
     onGoToStep?: (stepId: string) => void;
+    isLastStep?: boolean;
 };
 
 declare type ColumnsBlockProps = {
@@ -979,7 +984,7 @@ declare type ImageBlockProps = {
 export { ImageBlockProps }
 export { ImageBlockProps as ImageBlockProps_alias_1 }
 
-export declare function InfoPageStep({ config, onNext }: StepComponentProps): JSX.Element | null;
+export declare function InfoPageStep({ config, onNext, isLastStep, }: StepComponentProps): JSX.Element | null;
 
 export declare function Input({ className, type, ...props }: React_2.ComponentProps<"input">): React_2.JSX.Element;
 
@@ -1863,6 +1868,7 @@ declare type StepComponentProps = {
     answer: StepAnswer | undefined;
     onAnswer: (answer: StepAnswer) => void;
     onNext: () => void;
+    isLastStep?: boolean;
 };
 export { StepComponentProps }
 export { StepComponentProps as StepComponentProps_alias_1 }

package/dist/index.cjs

@@ -2698,9 +2698,11 @@ function ButtonBlock({
   onGoToStep,
   onPurchase,
   onOpenDiscountCode,
-  disabled
+  disabled,
+  isLastStep
 }) {
   const handleClick = () => {
+    var _a;
     if (!action) {
       onNext == null ? void 0 : onNext();
       return;
@@ -2720,6 +2722,9 @@ function ButtonBlock({
         }
         break;
       case "link":
+        if ((_a = action.completeBeforeNavigate) != null ? _a : isLastStep) {
+          onNext == null ? void 0 : onNext();
+        }
         if (action.external) {
           window.open(action.url, "_blank", "noopener,noreferrer");
         } else {
@@ -4210,7 +4215,8 @@ function ColumnsBlock({
   answers,
   onNext,
   onBack,
-  onGoToStep
+  onGoToStep,
+  isLastStep
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "jy-columns-container", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -4236,6 +4242,7 @@ function ColumnsBlock({
                 onBack: onBack != null ? onBack : (() => {
                 }),
                 onGoToStep,
+                isLastStep,
                 wrapInScrollViewport: false
               }
             )
@@ -7911,7 +7918,11 @@ function HiddenBlockSlot({ block }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn(widthClass, resolvedMaxWidth ? "mx-auto" : void 0, block.className),
+      className: cn(
+        widthClass,
+        resolvedMaxWidth ? "mx-auto" : void 0,
+        block.className
+      ),
       style: __spreadProps(__spreadValues(__spreadValues({}, resolvedMaxWidth ? { maxWidth: resolvedMaxWidth } : null), block.style), {
         visibility: "hidden"
       }),
@@ -8094,7 +8105,7 @@ function resolveAppliedDiscountForDialog(answers, discountVariable, planId) {
   if (!planId) return answer.planId ? void 0 : answer;
   return discountAppliesToPlan(answer, planId) ? answer : void 0;
 }
-function renderBlock(block, i, visibleIndexRef, answers, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, inputsValid) {
+function renderBlock(block, i, visibleIndexRef, answers, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, inputsValid, isLastStep) {
   var _a, _b;
   const conditionMet = !block.condition || evaluateCondition(block.condition, answers);
   const hasExitAnim = ((_a = block.exitAnimation) == null ? void 0 : _a.preset) && block.exitAnimation.preset !== "none";
@@ -8121,8 +8132,9 @@ function renderBlock(block, i, visibleIndexRef, answers, onNext, onBack, onGoToS
     onGoToStep,
     onPurchase,
     onOpenDiscountCode,
-    disabled: buttonDisabledForValidity(resolvedProps, inputsValid)
-  }) : block.type === "columns" ? __spreadProps(__spreadValues({}, resolvedProps), { answers, onNext, onBack, onGoToStep }) : block.type === "gravity_bin" ? __spreadProps(__spreadValues({}, resolvedProps), { answers }) : resolvedProps;
+    disabled: buttonDisabledForValidity(resolvedProps, inputsValid),
+    isLastStep
+  }) : block.type === "columns" ? __spreadProps(__spreadValues({}, resolvedProps), { answers, onNext, onBack, onGoToStep, isLastStep }) : block.type === "gravity_bin" ? __spreadProps(__spreadValues({}, resolvedProps), { answers }) : resolvedProps;
   const idx = visibleIndexRef.current;
   visibleIndexRef.current++;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8144,6 +8156,7 @@ function BlockRenderer({
   onNext,
   onBack,
   onGoToStep,
+  isLastStep,
   scrollViewportRef,
   wrapInScrollViewport = true
 }) {
@@ -8229,7 +8242,8 @@ function BlockRenderer({
       onGoToStep,
       onPurchase,
       onOpenDiscountCode,
-      inputsValid
+      inputsValid,
+      isLastStep
     );
   };
   if (!wrapInScrollViewport && stickyBlocks.length === 0) {
@@ -8252,7 +8266,11 @@ function BlockRenderer({
           "div",
           {
             className: layoutClasses(layout),
-            style: { gap: `${gap}rem`, maxWidth: layout == null ? void 0 : layout.maxWidth, width: "100%" },
+            style: {
+              gap: `${gap}rem`,
+              maxWidth: layout == null ? void 0 : layout.maxWidth,
+              width: "100%"
+            },
             children: contentBlocks.map((block, i) => renderOne(block, i))
           }
         )
@@ -8263,7 +8281,11 @@ function BlockRenderer({
     ) }) : null
   ] });
 }
-function InfoPageStep({ config, onNext }) {
+function InfoPageStep({
+  config,
+  onNext,
+  isLastStep
+}) {
   var _a;
   const { answers } = useJourneyState();
   const { goBack, goToStep } = useJourneyActions();
@@ -8271,9 +8293,7 @@ function InfoPageStep({ config, onNext }) {
   const sortedTimelineEvents = React.useMemo(
     () => {
       var _a2, _b;
-      return [...(_b = (_a2 = config.scrollTimeline) == null ? void 0 : _a2.events) != null ? _b : []].sort(
-        (a, b) => a.at - b.at
-      );
+      return [...(_b = (_a2 = config.scrollTimeline) == null ? void 0 : _a2.events) != null ? _b : []].sort((a, b) => a.at - b.at);
     },
     [(_a = config.scrollTimeline) == null ? void 0 : _a.events]
   );
@@ -8453,6 +8473,7 @@ function InfoPageStep({ config, onNext }) {
       onNext,
       onBack: goBack,
       onGoToStep: goToStep,
+      isLastStep,
       scrollViewportRef
     }
   );
@@ -9320,7 +9341,7 @@ var STEP_REGISTRY = {
 function StepRenderer({ config }) {
   var _a, _b;
   const { answers } = useJourneyState();
-  const { setAnswer, goNext } = useJourneyActions();
+  const { setAnswer, goNext, isLastStep } = useJourneyActions();
   const resolvedConfig = React.useMemo(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const hasTemplates = ((_a2 = config.preface) == null ? void 0 : _a2.includes("${")) || ((_b2 = config.question) == null ? void 0 : _b2.includes("${")) || ((_c = config.description) == null ? void 0 : _c.includes("${")) || ((_d = config.buttonText) == null ? void 0 : _d.includes("${")) || ((_e = config.footerText) == null ? void 0 : _e.includes("${")) || ((_g = (_f = config.swipeLabels) == null ? void 0 : _f.yes) == null ? void 0 : _g.includes("${")) || ((_i = (_h = config.swipeLabels) == null ? void 0 : _h.no) == null ? void 0 : _i.includes("${")) || ((_j = config.swipeCards) != null ? _j : []).some(
@@ -9373,7 +9394,8 @@ function StepRenderer({ config }) {
         }
         setAnswer(answerKey, answer);
       },
-      onNext: () => goNext()
+      onNext: () => goNext(),
+      isLastStep: isLastStep()
     }
   );
 }
@@ -9671,20 +9693,15 @@ function JourneyShell({ className, theme } = {}) {
   ] });
 }
 var JOURNEY_LIBRARY_NAME = "@founderhq/journeys";
-var JOURNEY_LIBRARY_VERSION = "0.4.0";
+var JOURNEY_LIBRARY_VERSION = "0.4.2";
+var DEFAULT_QUEUE_TTL_MS = 24 * 60 * 60 * 1e3;
+var MAX_QUEUED_CAPTURE_EVENTS = 100;
+var MAX_BEACON_BYTES = 60 * 1024;
 function randomId(prefix) {
   const cryptoRef = globalThis.crypto;
   if (cryptoRef == null ? void 0 : cryptoRef.randomUUID) return `${prefix}_${cryptoRef.randomUUID()}`;
   return `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
 }
-function readJson(storage, key, fallback) {
-  try {
-    const raw = storage.getItem(key);
-    return raw ? JSON.parse(raw) : fallback;
-  } catch (e) {
-    return fallback;
-  }
-}
 function getStoredId(storage, key, prefix) {
   try {
     const existing = storage.getItem(key);
@@ -9696,6 +9713,64 @@ function getStoredId(storage, key, prefix) {
     return randomId(prefix);
   }
 }
+function safeBrowserStorage(name) {
+  var _a;
+  if (typeof window === "undefined") return null;
+  try {
+    return (_a = window[name]) != null ? _a : null;
+  } catch (e) {
+    return null;
+  }
+}
+function isQueuedCaptureEvent(value) {
+  if (!isRecord(value)) return false;
+  const event = value.event;
+  return isRecord(event) && typeof event.id === "string" && typeof event.type === "string" && typeof event.occurredAt === "string" && typeof value.attempts === "number" && typeof value.createdAt === "number";
+}
+function pruneQueuedEvents(queue, now = Date.now(), ttlMs = DEFAULT_QUEUE_TTL_MS) {
+  const cutoff = now - ttlMs;
+  return queue.filter((item) => item.createdAt >= cutoff);
+}
+function readPersistedCaptureQueue(storage, key) {
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.visitorId !== "string" || typeof parsed.clientSessionId !== "string") {
+      return null;
+    }
+    const queue = Array.isArray(parsed.queue) ? pruneQueuedEvents(parsed.queue.filter(isQueuedCaptureEvent)) : [];
+    return {
+      visitorId: parsed.visitorId,
+      clientSessionId: parsed.clientSessionId,
+      updatedAt: typeof parsed.updatedAt === "number" ? parsed.updatedAt : Date.now(),
+      queue
+    };
+  } catch (e) {
+    return null;
+  }
+}
+function persistCaptureQueue(storage, runtime, queue) {
+  if (!storage) return;
+  try {
+    const pruned = pruneQueuedEvents(queue).slice(-MAX_QUEUED_CAPTURE_EVENTS);
+    if (pruned.length === 0) {
+      storage.removeItem(runtime.queueKey);
+      return;
+    }
+    storage.setItem(
+      runtime.queueKey,
+      JSON.stringify({
+        visitorId: runtime.visitorId,
+        clientSessionId: runtime.clientSessionId,
+        updatedAt: Date.now(),
+        queue: pruned
+      })
+    );
+  } catch (e) {
+  }
+}
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -9796,6 +9871,54 @@ function captureContext(capture, runtime) {
     screen: screenRef ? { width: screenRef.width, height: screenRef.height } : void 0
   }, customContext));
 }
+function captureUrl(capture) {
+  var _a;
+  const baseUrl = (_a = capture.baseUrl) != null ? _a : "https://getfounderhq.com";
+  return `${baseUrl}/api/v1/journeys/${encodeURIComponent(
+    capture.journeyId
+  )}/capture`;
+}
+function byteLength(value) {
+  try {
+    return new TextEncoder().encode(value).byteLength;
+  } catch (e) {
+    return value.length;
+  }
+}
+function safeSendBeacon() {
+  if (typeof navigator === "undefined") return null;
+  const beacon = navigator.sendBeacon;
+  return typeof beacon === "function" ? beacon.bind(navigator) : null;
+}
+async function sendCaptureBatch(capture, runtime, batch, options = {}) {
+  const body = JSON.stringify(__spreadProps(__spreadValues({}, options.preferBeacon ? { apiKey: capture.apiKey } : {}), {
+    clientSessionId: runtime.clientSessionId,
+    visitorId: runtime.visitorId,
+    context: captureContext(capture, runtime),
+    events: batch.map((item) => item.event)
+  }));
+  const url = captureUrl(capture);
+  if (options.preferBeacon && byteLength(body) <= MAX_BEACON_BYTES) {
+    const beacon = safeSendBeacon();
+    if (beacon == null ? void 0 : beacon(url, body)) {
+      return "queued";
+    }
+  }
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${capture.apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body,
+      keepalive: batch.length <= 5 || options.preferBeacon === true
+    });
+    return response.ok ? "acknowledged" : "failed";
+  } catch (e) {
+    return "failed";
+  }
+}
 function toJsonRecord(value) {
   return isRecord(value) ? value : {};
 }
@@ -9941,30 +10064,34 @@ function useJourneyCapture(params) {
   captureRef.current = params.capture;
   const persistQueue = React.useCallback(() => {
     const runtime = runtimeRef.current;
-    if (!runtime || typeof window === "undefined") return;
-    try {
-      sessionStorage.setItem(
-        runtime.queueKey,
-        JSON.stringify(queueRef.current)
-      );
-    } catch (e) {
-    }
+    if (!runtime) return;
+    persistCaptureQueue(
+      safeBrowserStorage("localStorage"),
+      runtime,
+      queueRef.current
+    );
   }, []);
   const ensureRuntime = React.useCallback((capture) => {
+    var _a, _b;
     if (typeof window === "undefined") return null;
+    const queueKey = `fhq_journey_queue:v2:${capture.apiKey.slice(
+      0,
+      16
+    )}:${capture.journeyId}`;
     const existing = runtimeRef.current;
-    if ((existing == null ? void 0 : existing.journeyId) === capture.journeyId) return existing;
-    const visitorId = getStoredId(
-      localStorage,
-      "fhq_journey_visitor_id",
-      "fhqv"
-    );
-    const clientSessionId = getStoredId(
-      sessionStorage,
-      `fhq_journey_session:${capture.journeyId}`,
-      "fhqs"
-    );
-    const queueKey = `fhq_journey_queue:${capture.journeyId}:${clientSessionId}`;
+    if ((existing == null ? void 0 : existing.journeyId) === capture.journeyId && existing.queueKey === queueKey) {
+      return existing;
+    }
+    const local = safeBrowserStorage("localStorage");
+    const session = safeBrowserStorage("sessionStorage");
+    const persisted = readPersistedCaptureQueue(local, queueKey);
+    const visitorId = (_a = persisted == null ? void 0 : persisted.visitorId) != null ? _a : local ? getStoredId(local, "fhq_journey_visitor_id", "fhqv") : randomId("fhqv");
+    const sessionKey = `fhq_journey_session:${capture.journeyId}`;
+    const clientSessionId = persisted && persisted.queue.length > 0 ? persisted.clientSessionId : session ? getStoredId(session, sessionKey, "fhqs") : randomId("fhqs");
+    try {
+      session == null ? void 0 : session.setItem(sessionKey, clientSessionId);
+    } catch (e) {
+    }
     const runtime = {
       journeyId: capture.journeyId,
       visitorId,
@@ -9972,51 +10099,46 @@ function useJourneyCapture(params) {
       queueKey
     };
     runtimeRef.current = runtime;
-    queueRef.current = readJson(
-      sessionStorage,
-      queueKey,
-      []
-    );
+    queueRef.current = (_b = persisted == null ? void 0 : persisted.queue) != null ? _b : [];
     return runtime;
   }, []);
-  const flush = React.useCallback(async () => {
-    var _a, _b, _c;
+  const flush = React.useCallback(async (options = {}) => {
+    var _a, _b;
     const capture = captureRef.current;
-    if (!capture || !configRef.current || flushingRef.current) return;
+    if (!capture || !configRef.current) return;
+    if (!options.preferBeacon && flushingRef.current) return;
     const runtime = ensureRuntime(capture);
     if (!runtime || queueRef.current.length === 0) return;
-    flushingRef.current = true;
+    queueRef.current = pruneQueuedEvents(queueRef.current);
     const batchSize = Math.max(1, (_a = capture.batchSize) != null ? _a : 10);
     const maxRetries = Math.max(1, (_b = capture.maxRetries) != null ? _b : 3);
-    const batch = queueRef.current.slice(0, batchSize);
-    const baseUrl = (_c = capture.baseUrl) != null ? _c : "https://getfounderhq.com";
+    const batch = queueRef.current.slice(
+      0,
+      options.preferBeacon ? Math.min(batchSize, 5) : batchSize
+    );
+    if (batch.length === 0) {
+      persistQueue();
+      return;
+    }
+    if (options.preferBeacon) {
+      await sendCaptureBatch(capture, runtime, batch, options);
+      persistQueue();
+      return;
+    }
+    flushingRef.current = true;
     try {
-      const response = await fetch(
-        `${baseUrl}/api/v1/journeys/${encodeURIComponent(
-          capture.journeyId
-        )}/capture`,
-        {
-          method: "POST",
-          headers: {
-            Authorization: `Bearer ${capture.apiKey}`,
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({
-            clientSessionId: runtime.clientSessionId,
-            visitorId: runtime.visitorId,
-            context: captureContext(capture, runtime),
-            events: batch.map((item) => item.event)
-          }),
-          keepalive: batch.length <= 5
-        }
-      );
-      if (!response.ok) throw new Error(`Capture failed: ${response.status}`);
-      queueRef.current = queueRef.current.slice(batch.length);
-    } catch (e) {
-      const failedIds = new Set(batch.map((item) => item.event.id));
-      queueRef.current = queueRef.current.map(
-        (item) => failedIds.has(item.event.id) ? __spreadProps(__spreadValues({}, item), { attempts: item.attempts + 1 }) : item
-      ).filter((item) => item.attempts < maxRetries);
+      const result = await sendCaptureBatch(capture, runtime, batch);
+      if (result === "acknowledged") {
+        const sentIds = new Set(batch.map((item) => item.event.id));
+        queueRef.current = queueRef.current.filter(
+          (item) => !sentIds.has(item.event.id)
+        );
+      } else {
+        const failedIds = new Set(batch.map((item) => item.event.id));
+        queueRef.current = queueRef.current.map(
+          (item) => failedIds.has(item.event.id) ? __spreadProps(__spreadValues({}, item), { attempts: item.attempts + 1 }) : item
+        ).filter((item) => item.attempts < maxRetries);
+      }
     } finally {
       persistQueue();
       flushingRef.current = false;
@@ -10032,15 +10154,18 @@ function useJourneyCapture(params) {
       Math.max(1e3, (_a = capture.flushIntervalMs) != null ? _a : 3e3)
     );
     const handleVisibility = () => {
-      if (document.visibilityState === "hidden") void flush();
+      if (document.visibilityState === "hidden") {
+        void flush({ preferBeacon: true });
+      }
     };
-    window.addEventListener("beforeunload", persistQueue);
+    const handlePageHide = () => void flush({ preferBeacon: true });
     document.addEventListener("visibilitychange", handleVisibility);
+    window.addEventListener("pagehide", handlePageHide);
     void flush();
     return () => {
       window.clearInterval(interval);
-      window.removeEventListener("beforeunload", persistQueue);
       document.removeEventListener("visibilitychange", handleVisibility);
+      window.removeEventListener("pagehide", handlePageHide);
       persistQueue();
     };
   }, [ensureRuntime, flush, persistQueue, params.capture]);
@@ -10056,11 +10181,17 @@ function useJourneyCapture(params) {
       sequenceRef.current += 1;
       queueRef.current.push({
         event: toCaptureEvent(config, event, sequenceRef.current, runtime),
-        attempts: 0
+        attempts: 0,
+        createdAt: Date.now()
       });
+      queueRef.current = pruneQueuedEvents(queueRef.current).slice(
+        -MAX_QUEUED_CAPTURE_EVENTS
+      );
       persistQueue();
       const batchSize = Math.max(1, (_b = capture.batchSize) != null ? _b : 10);
-      if (queueRef.current.length >= batchSize) void flush();
+      if (event.type === "complete" || queueRef.current.length >= batchSize) {
+        void flush();
+      }
     },
     [ensureRuntime, flush, persistQueue]
   );

package/dist/index.js

@@ -2673,9 +2673,11 @@ function ButtonBlock({
   onGoToStep,
   onPurchase,
   onOpenDiscountCode,
-  disabled
+  disabled,
+  isLastStep
 }) {
   const handleClick = () => {
+    var _a;
     if (!action) {
       onNext == null ? void 0 : onNext();
       return;
@@ -2695,6 +2697,9 @@ function ButtonBlock({
         }
         break;
       case "link":
+        if ((_a = action.completeBeforeNavigate) != null ? _a : isLastStep) {
+          onNext == null ? void 0 : onNext();
+        }
         if (action.external) {
           window.open(action.url, "_blank", "noopener,noreferrer");
         } else {
@@ -4185,7 +4190,8 @@ function ColumnsBlock({
   answers,
   onNext,
   onBack,
-  onGoToStep
+  onGoToStep,
+  isLastStep
 }) {
   return /* @__PURE__ */ jsx("div", { className: "jy-columns-container", children: /* @__PURE__ */ jsx(
     "div",
@@ -4211,6 +4217,7 @@ function ColumnsBlock({
                 onBack: onBack != null ? onBack : (() => {
                 }),
                 onGoToStep,
+                isLastStep,
                 wrapInScrollViewport: false
               }
             )
@@ -7886,7 +7893,11 @@ function HiddenBlockSlot({ block }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(widthClass, resolvedMaxWidth ? "mx-auto" : void 0, block.className),
+      className: cn(
+        widthClass,
+        resolvedMaxWidth ? "mx-auto" : void 0,
+        block.className
+      ),
       style: __spreadProps(__spreadValues(__spreadValues({}, resolvedMaxWidth ? { maxWidth: resolvedMaxWidth } : null), block.style), {
         visibility: "hidden"
       }),
@@ -8069,7 +8080,7 @@ function resolveAppliedDiscountForDialog(answers, discountVariable, planId) {
   if (!planId) return answer.planId ? void 0 : answer;
   return discountAppliesToPlan(answer, planId) ? answer : void 0;
 }
-function renderBlock(block, i, visibleIndexRef, answers, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, inputsValid) {
+function renderBlock(block, i, visibleIndexRef, answers, onNext, onBack, onGoToStep, onPurchase, onOpenDiscountCode, inputsValid, isLastStep) {
   var _a, _b;
   const conditionMet = !block.condition || evaluateCondition(block.condition, answers);
   const hasExitAnim = ((_a = block.exitAnimation) == null ? void 0 : _a.preset) && block.exitAnimation.preset !== "none";
@@ -8096,8 +8107,9 @@ function renderBlock(block, i, visibleIndexRef, answers, onNext, onBack, onGoToS
     onGoToStep,
     onPurchase,
     onOpenDiscountCode,
-    disabled: buttonDisabledForValidity(resolvedProps, inputsValid)
-  }) : block.type === "columns" ? __spreadProps(__spreadValues({}, resolvedProps), { answers, onNext, onBack, onGoToStep }) : block.type === "gravity_bin" ? __spreadProps(__spreadValues({}, resolvedProps), { answers }) : resolvedProps;
+    disabled: buttonDisabledForValidity(resolvedProps, inputsValid),
+    isLastStep
+  }) : block.type === "columns" ? __spreadProps(__spreadValues({}, resolvedProps), { answers, onNext, onBack, onGoToStep, isLastStep }) : block.type === "gravity_bin" ? __spreadProps(__spreadValues({}, resolvedProps), { answers }) : resolvedProps;
   const idx = visibleIndexRef.current;
   visibleIndexRef.current++;
   return /* @__PURE__ */ jsx(
@@ -8119,6 +8131,7 @@ function BlockRenderer({
   onNext,
   onBack,
   onGoToStep,
+  isLastStep,
   scrollViewportRef,
   wrapInScrollViewport = true
 }) {
@@ -8204,7 +8217,8 @@ function BlockRenderer({
       onGoToStep,
       onPurchase,
       onOpenDiscountCode,
-      inputsValid
+      inputsValid,
+      isLastStep
     );
   };
   if (!wrapInScrollViewport && stickyBlocks.length === 0) {
@@ -8227,7 +8241,11 @@ function BlockRenderer({
           "div",
           {
             className: layoutClasses(layout),
-            style: { gap: `${gap}rem`, maxWidth: layout == null ? void 0 : layout.maxWidth, width: "100%" },
+            style: {
+              gap: `${gap}rem`,
+              maxWidth: layout == null ? void 0 : layout.maxWidth,
+              width: "100%"
+            },
             children: contentBlocks.map((block, i) => renderOne(block, i))
           }
         )
@@ -8238,7 +8256,11 @@ function BlockRenderer({
     ) }) : null
   ] });
 }
-function InfoPageStep({ config, onNext }) {
+function InfoPageStep({
+  config,
+  onNext,
+  isLastStep
+}) {
   var _a;
   const { answers } = useJourneyState();
   const { goBack, goToStep } = useJourneyActions();
@@ -8246,9 +8268,7 @@ function InfoPageStep({ config, onNext }) {
   const sortedTimelineEvents = useMemo(
     () => {
       var _a2, _b;
-      return [...(_b = (_a2 = config.scrollTimeline) == null ? void 0 : _a2.events) != null ? _b : []].sort(
-        (a, b) => a.at - b.at
-      );
+      return [...(_b = (_a2 = config.scrollTimeline) == null ? void 0 : _a2.events) != null ? _b : []].sort((a, b) => a.at - b.at);
     },
     [(_a = config.scrollTimeline) == null ? void 0 : _a.events]
   );
@@ -8428,6 +8448,7 @@ function InfoPageStep({ config, onNext }) {
       onNext,
       onBack: goBack,
       onGoToStep: goToStep,
+      isLastStep,
       scrollViewportRef
     }
   );
@@ -9295,7 +9316,7 @@ var STEP_REGISTRY = {
 function StepRenderer({ config }) {
   var _a, _b;
   const { answers } = useJourneyState();
-  const { setAnswer, goNext } = useJourneyActions();
+  const { setAnswer, goNext, isLastStep } = useJourneyActions();
   const resolvedConfig = useMemo(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const hasTemplates = ((_a2 = config.preface) == null ? void 0 : _a2.includes("${")) || ((_b2 = config.question) == null ? void 0 : _b2.includes("${")) || ((_c = config.description) == null ? void 0 : _c.includes("${")) || ((_d = config.buttonText) == null ? void 0 : _d.includes("${")) || ((_e = config.footerText) == null ? void 0 : _e.includes("${")) || ((_g = (_f = config.swipeLabels) == null ? void 0 : _f.yes) == null ? void 0 : _g.includes("${")) || ((_i = (_h = config.swipeLabels) == null ? void 0 : _h.no) == null ? void 0 : _i.includes("${")) || ((_j = config.swipeCards) != null ? _j : []).some(
@@ -9348,7 +9369,8 @@ function StepRenderer({ config }) {
         }
         setAnswer(answerKey, answer);
       },
-      onNext: () => goNext()
+      onNext: () => goNext(),
+      isLastStep: isLastStep()
     }
   );
 }
@@ -9646,20 +9668,15 @@ function JourneyShell({ className, theme } = {}) {
   ] });
 }
 var JOURNEY_LIBRARY_NAME = "@founderhq/journeys";
-var JOURNEY_LIBRARY_VERSION = "0.4.0";
+var JOURNEY_LIBRARY_VERSION = "0.4.2";
+var DEFAULT_QUEUE_TTL_MS = 24 * 60 * 60 * 1e3;
+var MAX_QUEUED_CAPTURE_EVENTS = 100;
+var MAX_BEACON_BYTES = 60 * 1024;
 function randomId(prefix) {
   const cryptoRef = globalThis.crypto;
   if (cryptoRef == null ? void 0 : cryptoRef.randomUUID) return `${prefix}_${cryptoRef.randomUUID()}`;
   return `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
 }
-function readJson(storage, key, fallback) {
-  try {
-    const raw = storage.getItem(key);
-    return raw ? JSON.parse(raw) : fallback;
-  } catch (e) {
-    return fallback;
-  }
-}
 function getStoredId(storage, key, prefix) {
   try {
     const existing = storage.getItem(key);
@@ -9671,6 +9688,64 @@ function getStoredId(storage, key, prefix) {
     return randomId(prefix);
   }
 }
+function safeBrowserStorage(name) {
+  var _a;
+  if (typeof window === "undefined") return null;
+  try {
+    return (_a = window[name]) != null ? _a : null;
+  } catch (e) {
+    return null;
+  }
+}
+function isQueuedCaptureEvent(value) {
+  if (!isRecord(value)) return false;
+  const event = value.event;
+  return isRecord(event) && typeof event.id === "string" && typeof event.type === "string" && typeof event.occurredAt === "string" && typeof value.attempts === "number" && typeof value.createdAt === "number";
+}
+function pruneQueuedEvents(queue, now = Date.now(), ttlMs = DEFAULT_QUEUE_TTL_MS) {
+  const cutoff = now - ttlMs;
+  return queue.filter((item) => item.createdAt >= cutoff);
+}
+function readPersistedCaptureQueue(storage, key) {
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.visitorId !== "string" || typeof parsed.clientSessionId !== "string") {
+      return null;
+    }
+    const queue = Array.isArray(parsed.queue) ? pruneQueuedEvents(parsed.queue.filter(isQueuedCaptureEvent)) : [];
+    return {
+      visitorId: parsed.visitorId,
+      clientSessionId: parsed.clientSessionId,
+      updatedAt: typeof parsed.updatedAt === "number" ? parsed.updatedAt : Date.now(),
+      queue
+    };
+  } catch (e) {
+    return null;
+  }
+}
+function persistCaptureQueue(storage, runtime, queue) {
+  if (!storage) return;
+  try {
+    const pruned = pruneQueuedEvents(queue).slice(-MAX_QUEUED_CAPTURE_EVENTS);
+    if (pruned.length === 0) {
+      storage.removeItem(runtime.queueKey);
+      return;
+    }
+    storage.setItem(
+      runtime.queueKey,
+      JSON.stringify({
+        visitorId: runtime.visitorId,
+        clientSessionId: runtime.clientSessionId,
+        updatedAt: Date.now(),
+        queue: pruned
+      })
+    );
+  } catch (e) {
+  }
+}
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -9771,6 +9846,54 @@ function captureContext(capture, runtime) {
     screen: screenRef ? { width: screenRef.width, height: screenRef.height } : void 0
   }, customContext));
 }
+function captureUrl(capture) {
+  var _a;
+  const baseUrl = (_a = capture.baseUrl) != null ? _a : "https://getfounderhq.com";
+  return `${baseUrl}/api/v1/journeys/${encodeURIComponent(
+    capture.journeyId
+  )}/capture`;
+}
+function byteLength(value) {
+  try {
+    return new TextEncoder().encode(value).byteLength;
+  } catch (e) {
+    return value.length;
+  }
+}
+function safeSendBeacon() {
+  if (typeof navigator === "undefined") return null;
+  const beacon = navigator.sendBeacon;
+  return typeof beacon === "function" ? beacon.bind(navigator) : null;
+}
+async function sendCaptureBatch(capture, runtime, batch, options = {}) {
+  const body = JSON.stringify(__spreadProps(__spreadValues({}, options.preferBeacon ? { apiKey: capture.apiKey } : {}), {
+    clientSessionId: runtime.clientSessionId,
+    visitorId: runtime.visitorId,
+    context: captureContext(capture, runtime),
+    events: batch.map((item) => item.event)
+  }));
+  const url = captureUrl(capture);
+  if (options.preferBeacon && byteLength(body) <= MAX_BEACON_BYTES) {
+    const beacon = safeSendBeacon();
+    if (beacon == null ? void 0 : beacon(url, body)) {
+      return "queued";
+    }
+  }
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${capture.apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body,
+      keepalive: batch.length <= 5 || options.preferBeacon === true
+    });
+    return response.ok ? "acknowledged" : "failed";
+  } catch (e) {
+    return "failed";
+  }
+}
 function toJsonRecord(value) {
   return isRecord(value) ? value : {};
 }
@@ -9916,30 +10039,34 @@ function useJourneyCapture(params) {
   captureRef.current = params.capture;
   const persistQueue = useCallback(() => {
     const runtime = runtimeRef.current;
-    if (!runtime || typeof window === "undefined") return;
-    try {
-      sessionStorage.setItem(
-        runtime.queueKey,
-        JSON.stringify(queueRef.current)
-      );
-    } catch (e) {
-    }
+    if (!runtime) return;
+    persistCaptureQueue(
+      safeBrowserStorage("localStorage"),
+      runtime,
+      queueRef.current
+    );
   }, []);
   const ensureRuntime = useCallback((capture) => {
+    var _a, _b;
     if (typeof window === "undefined") return null;
+    const queueKey = `fhq_journey_queue:v2:${capture.apiKey.slice(
+      0,
+      16
+    )}:${capture.journeyId}`;
     const existing = runtimeRef.current;
-    if ((existing == null ? void 0 : existing.journeyId) === capture.journeyId) return existing;
-    const visitorId = getStoredId(
-      localStorage,
-      "fhq_journey_visitor_id",
-      "fhqv"
-    );
-    const clientSessionId = getStoredId(
-      sessionStorage,
-      `fhq_journey_session:${capture.journeyId}`,
-      "fhqs"
-    );
-    const queueKey = `fhq_journey_queue:${capture.journeyId}:${clientSessionId}`;
+    if ((existing == null ? void 0 : existing.journeyId) === capture.journeyId && existing.queueKey === queueKey) {
+      return existing;
+    }
+    const local = safeBrowserStorage("localStorage");
+    const session = safeBrowserStorage("sessionStorage");
+    const persisted = readPersistedCaptureQueue(local, queueKey);
+    const visitorId = (_a = persisted == null ? void 0 : persisted.visitorId) != null ? _a : local ? getStoredId(local, "fhq_journey_visitor_id", "fhqv") : randomId("fhqv");
+    const sessionKey = `fhq_journey_session:${capture.journeyId}`;
+    const clientSessionId = persisted && persisted.queue.length > 0 ? persisted.clientSessionId : session ? getStoredId(session, sessionKey, "fhqs") : randomId("fhqs");
+    try {
+      session == null ? void 0 : session.setItem(sessionKey, clientSessionId);
+    } catch (e) {
+    }
     const runtime = {
       journeyId: capture.journeyId,
       visitorId,
@@ -9947,51 +10074,46 @@ function useJourneyCapture(params) {
       queueKey
     };
     runtimeRef.current = runtime;
-    queueRef.current = readJson(
-      sessionStorage,
-      queueKey,
-      []
-    );
+    queueRef.current = (_b = persisted == null ? void 0 : persisted.queue) != null ? _b : [];
     return runtime;
   }, []);
-  const flush = useCallback(async () => {
-    var _a, _b, _c;
+  const flush = useCallback(async (options = {}) => {
+    var _a, _b;
     const capture = captureRef.current;
-    if (!capture || !configRef.current || flushingRef.current) return;
+    if (!capture || !configRef.current) return;
+    if (!options.preferBeacon && flushingRef.current) return;
     const runtime = ensureRuntime(capture);
     if (!runtime || queueRef.current.length === 0) return;
-    flushingRef.current = true;
+    queueRef.current = pruneQueuedEvents(queueRef.current);
     const batchSize = Math.max(1, (_a = capture.batchSize) != null ? _a : 10);
     const maxRetries = Math.max(1, (_b = capture.maxRetries) != null ? _b : 3);
-    const batch = queueRef.current.slice(0, batchSize);
-    const baseUrl = (_c = capture.baseUrl) != null ? _c : "https://getfounderhq.com";
+    const batch = queueRef.current.slice(
+      0,
+      options.preferBeacon ? Math.min(batchSize, 5) : batchSize
+    );
+    if (batch.length === 0) {
+      persistQueue();
+      return;
+    }
+    if (options.preferBeacon) {
+      await sendCaptureBatch(capture, runtime, batch, options);
+      persistQueue();
+      return;
+    }
+    flushingRef.current = true;
     try {
-      const response = await fetch(
-        `${baseUrl}/api/v1/journeys/${encodeURIComponent(
-          capture.journeyId
-        )}/capture`,
-        {
-          method: "POST",
-          headers: {
-            Authorization: `Bearer ${capture.apiKey}`,
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({
-            clientSessionId: runtime.clientSessionId,
-            visitorId: runtime.visitorId,
-            context: captureContext(capture, runtime),
-            events: batch.map((item) => item.event)
-          }),
-          keepalive: batch.length <= 5
-        }
-      );
-      if (!response.ok) throw new Error(`Capture failed: ${response.status}`);
-      queueRef.current = queueRef.current.slice(batch.length);
-    } catch (e) {
-      const failedIds = new Set(batch.map((item) => item.event.id));
-      queueRef.current = queueRef.current.map(
-        (item) => failedIds.has(item.event.id) ? __spreadProps(__spreadValues({}, item), { attempts: item.attempts + 1 }) : item
-      ).filter((item) => item.attempts < maxRetries);
+      const result = await sendCaptureBatch(capture, runtime, batch);
+      if (result === "acknowledged") {
+        const sentIds = new Set(batch.map((item) => item.event.id));
+        queueRef.current = queueRef.current.filter(
+          (item) => !sentIds.has(item.event.id)
+        );
+      } else {
+        const failedIds = new Set(batch.map((item) => item.event.id));
+        queueRef.current = queueRef.current.map(
+          (item) => failedIds.has(item.event.id) ? __spreadProps(__spreadValues({}, item), { attempts: item.attempts + 1 }) : item
+        ).filter((item) => item.attempts < maxRetries);
+      }
     } finally {
       persistQueue();
       flushingRef.current = false;
@@ -10007,15 +10129,18 @@ function useJourneyCapture(params) {
       Math.max(1e3, (_a = capture.flushIntervalMs) != null ? _a : 3e3)
     );
     const handleVisibility = () => {
-      if (document.visibilityState === "hidden") void flush();
+      if (document.visibilityState === "hidden") {
+        void flush({ preferBeacon: true });
+      }
     };
-    window.addEventListener("beforeunload", persistQueue);
+    const handlePageHide = () => void flush({ preferBeacon: true });
     document.addEventListener("visibilitychange", handleVisibility);
+    window.addEventListener("pagehide", handlePageHide);
     void flush();
     return () => {
       window.clearInterval(interval);
-      window.removeEventListener("beforeunload", persistQueue);
       document.removeEventListener("visibilitychange", handleVisibility);
+      window.removeEventListener("pagehide", handlePageHide);
       persistQueue();
     };
   }, [ensureRuntime, flush, persistQueue, params.capture]);
@@ -10031,11 +10156,17 @@ function useJourneyCapture(params) {
       sequenceRef.current += 1;
       queueRef.current.push({
         event: toCaptureEvent(config, event, sequenceRef.current, runtime),
-        attempts: 0
+        attempts: 0,
+        createdAt: Date.now()
       });
+      queueRef.current = pruneQueuedEvents(queueRef.current).slice(
+        -MAX_QUEUED_CAPTURE_EVENTS
+      );
       persistQueue();
       const batchSize = Math.max(1, (_b = capture.batchSize) != null ? _b : 10);
-      if (queueRef.current.length >= batchSize) void flush();
+      if (event.type === "complete" || queueRef.current.length >= batchSize) {
+        void flush();
+      }
     },
     [ensureRuntime, flush, persistQueue]
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@founderhq/journeys",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Config-driven interactive journey/questionnaire engine for React",
   "type": "module",
   "main": "./dist/index.cjs",