@founderhq/journeys 0.3.61 → 0.3.62

package/README.md

@@ -63,9 +63,28 @@ In the journey config, reference the injected value with a whole-value template:
 
 Keys declared in `computedVariables` are ignored in `initialAnswers`; computed values always come from their formulas.
 
+## Injecting Runtime Options (`initialOptions`)
+
+Pass `initialOptions` to override option lists at render time without storing large dynamic lists in the journey config. Keys are answer keys: top-level steps use `step.variable ?? step.id`, and `single_select` / `multi_select` blocks use `props.variable`.
+
+```tsx
+<Journey
+  apiKey="fos_..."
+  journeyId="abc-123"
+  initialOptions={{
+    country: countries.map((country) => ({
+      id: country.code,
+      label: country.name,
+    })),
+  }}
+/>
+```
+
+When a key is present in `initialOptions`, that list is used even if it is empty. When no key is present, the inspector-configured options remain the fallback.
+
 ## Event Payloads
 
-`onEvent` payloads keep user-provided answers and computed values separate:
+`onEvent` payloads keep user-provided answers and computed values separate. `step_submit` and `navigate` events include the rendered step config, but option arrays are omitted from those event configs so large `initialOptions` lists are not copied into every payload.
 
 ```ts
 onEvent={(event) => {

package/dist/index.cjs

@@ -537,6 +537,131 @@ function normalizeStepOrder(config) {
   }
   return __spreadProps(__spreadValues({}, config), { steps: ordered });
 }
+function getRuntimeOptionOverride(overrides, key) {
+  if (!overrides || !key) return void 0;
+  if (!Object.prototype.hasOwnProperty.call(overrides, key)) return void 0;
+  return overrides[key];
+}
+function applyRuntimeOptionOverridesToBlocks(blocks, overrides) {
+  if (!overrides) return blocks;
+  let changed = false;
+  const nextBlocks = blocks.map((block) => {
+    let next = block;
+    if (block.type === "single_select" || block.type === "multi_select") {
+      const options = getRuntimeOptionOverride(overrides, block.props.variable);
+      if (options !== void 0) {
+        next = __spreadProps(__spreadValues({}, block), {
+          props: __spreadProps(__spreadValues({}, block.props), { options })
+        });
+        changed = true;
+      }
+    }
+    if (block.type === "columns") {
+      let columnsChanged = false;
+      const columns = block.props.columns.map((column) => {
+        const columnBlocks = applyRuntimeOptionOverridesToBlocks(
+          column.blocks,
+          overrides
+        );
+        if (columnBlocks === column.blocks) return column;
+        columnsChanged = true;
+        return __spreadProps(__spreadValues({}, column), { blocks: columnBlocks });
+      });
+      if (columnsChanged) {
+        next = __spreadProps(__spreadValues({}, block), {
+          props: __spreadProps(__spreadValues({}, block.props), { columns })
+        });
+        changed = true;
+      }
+    }
+    return next;
+  });
+  return changed ? nextBlocks : blocks;
+}
+function applyRuntimeOptionOverrides(config, overrides) {
+  if (!overrides || Object.keys(overrides).length === 0) return config;
+  let changed = false;
+  const steps = config.steps.map((step) => {
+    var _a;
+    let next = step;
+    const stepUsesOptions = step.type === "single_select" || step.type === "multi_select" || step.type === "counter_select";
+    const options = stepUsesOptions ? getRuntimeOptionOverride(overrides, (_a = step.variable) != null ? _a : step.id) : void 0;
+    if (options !== void 0) {
+      next = __spreadProps(__spreadValues({}, step), { options });
+      changed = true;
+    }
+    if (step.blocks) {
+      const blocks = applyRuntimeOptionOverridesToBlocks(
+        step.blocks,
+        overrides
+      );
+      if (blocks !== step.blocks) {
+        next = __spreadProps(__spreadValues({}, next), { blocks });
+        changed = true;
+      }
+    }
+    return next;
+  });
+  return changed ? __spreadProps(__spreadValues({}, config), { steps }) : config;
+}
+function stripOptionsFromEventBlocks(blocks) {
+  let changed = false;
+  const nextBlocks = blocks.map((block) => {
+    let next = block;
+    if (block.type === "single_select" || block.type === "multi_select") {
+      const props = __spreadValues({}, block.props);
+      delete props.options;
+      next = __spreadProps(__spreadValues({}, block), { props });
+      changed = true;
+    }
+    if (block.type === "columns") {
+      let columnsChanged = false;
+      const columns = block.props.columns.map((column) => {
+        const columnBlocks = stripOptionsFromEventBlocks(column.blocks);
+        if (columnBlocks === column.blocks) return column;
+        columnsChanged = true;
+        return __spreadProps(__spreadValues({}, column), { blocks: columnBlocks });
+      });
+      if (columnsChanged) {
+        next = __spreadProps(__spreadValues({}, block), {
+          props: __spreadProps(__spreadValues({}, block.props), { columns })
+        });
+        changed = true;
+      }
+    }
+    return next;
+  });
+  return changed ? nextBlocks : blocks;
+}
+function stripOptionsFromEventStep(step) {
+  var _a;
+  let changed = false;
+  let next = step;
+  if (step.options !== void 0) {
+    next = __spreadValues({}, next);
+    delete next.options;
+    changed = true;
+  }
+  if ((_a = step.fields) == null ? void 0 : _a.some((field) => field.options !== void 0)) {
+    next = __spreadProps(__spreadValues({}, next), {
+      fields: step.fields.map((field) => {
+        if (field.options === void 0) return field;
+        const nextField = __spreadValues({}, field);
+        delete nextField.options;
+        return nextField;
+      })
+    });
+    changed = true;
+  }
+  if (step.blocks) {
+    const blocks = stripOptionsFromEventBlocks(step.blocks);
+    if (blocks !== step.blocks) {
+      next = __spreadProps(__spreadValues({}, next), { blocks });
+      changed = true;
+    }
+  }
+  return changed ? next : step;
+}
 var JourneyContext = React.createContext(null);
 function JourneyProvider({
   config: rawConfig,
@@ -544,6 +669,7 @@ function JourneyProvider({
   theme,
   onEvent,
   initialAnswers,
+  initialOptions,
   onDiscountCodeApply,
   children
 }) {
@@ -554,7 +680,14 @@ function JourneyProvider({
   React.useEffect(() => {
     onEventRef.current = onEvent;
   }, [onEvent]);
-  const config = React.useMemo(() => normalizeStepOrder(rawConfig), [rawConfig]);
+  const normalizedConfig = React.useMemo(
+    () => normalizeStepOrder(rawConfig),
+    [rawConfig]
+  );
+  const config = React.useMemo(
+    () => applyRuntimeOptionOverrides(normalizedConfig, initialOptions),
+    [normalizedConfig, initialOptions]
+  );
   const computedVariableIds = React.useMemo(
     () => getComputedVariableIds(config.computedVariables),
     [config.computedVariables]
@@ -599,8 +732,8 @@ function JourneyProvider({
     rawAnswersRef.current = rawAnswers;
   }, [rawAnswers]);
   const allVariables = React.useMemo(
-    () => config.steps.flatMap(getStepVariables),
-    [config.steps]
+    () => normalizedConfig.steps.flatMap(getStepVariables),
+    [normalizedConfig.steps]
   );
   const setAnswer = React.useCallback((stepId, answer) => {
     if (computedVariableIds.has(stepId)) return;
@@ -669,7 +802,7 @@ function JourneyProvider({
       const submitted = getSubmittedAnswer(currentStep, latestAnswers);
       (_c = onEventRef.current) == null ? void 0 : _c.call(onEventRef, __spreadProps(__spreadValues({
         type: "step_submit",
-        step: currentStep,
+        step: stripOptionsFromEventStep(currentStep),
         submitted
       }, eventAnswers), {
         variables: allVariables
@@ -679,8 +812,8 @@ function JourneyProvider({
         navigateToIndex(nextIndex);
         (_d = onEventRef.current) == null ? void 0 : _d.call(onEventRef, __spreadValues({
           type: "navigate",
-          from: currentStep,
-          to: config.steps[nextIndex],
+          from: stripOptionsFromEventStep(currentStep),
+          to: stripOptionsFromEventStep(config.steps[nextIndex]),
           direction: "forward"
         }, eventAnswers));
       } else {
@@ -712,13 +845,18 @@ function JourneyProvider({
         navigateToIndex(idx);
         (_a = onEventRef.current) == null ? void 0 : _a.call(onEventRef, __spreadValues({
           type: "navigate",
-          from: fromStep,
-          to: config.steps[idx],
+          from: stripOptionsFromEventStep(fromStep),
+          to: stripOptionsFromEventStep(config.steps[idx]),
           direction: idx > currentStepIndex ? "forward" : "backward"
         }, getEventAnswers(config.computedVariables, rawAnswersRef.current)));
       }
     },
-    [config.computedVariables, config.steps, currentStepIndex, navigateToIndex]
+    [
+      config.computedVariables,
+      config.steps,
+      currentStepIndex,
+      navigateToIndex
+    ]
   );
   const goBack = React.useCallback(() => {
     var _a;
@@ -754,8 +892,8 @@ function JourneyProvider({
         setDirection(dir);
         (_b2 = onEventRef.current) == null ? void 0 : _b2.call(onEventRef, __spreadValues({
           type: "navigate",
-          from: config.steps[prev],
-          to: config.steps[step],
+          from: stripOptionsFromEventStep(config.steps[prev]),
+          to: stripOptionsFromEventStep(config.steps[step]),
           direction: dir
         }, getEventAnswers(config.computedVariables, rawAnswersRef.current)));
         return step;
@@ -763,7 +901,11 @@ function JourneyProvider({
     };
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
-  }, [config.allowBackNavigation, config.computedVariables, config.steps]);
+  }, [
+    config.allowBackNavigation,
+    config.computedVariables,
+    config.steps
+  ]);
   const getStepAnswer = React.useCallback(
     (stepId) => {
       var _a;
@@ -783,17 +925,22 @@ function JourneyProvider({
   );
   const firePurchaseIntent = React.useCallback(
     (variable, plan, discount) => {
-      var _a, _b;
-      const currentStep = config.steps[currentStepIndex];
-      (_b = onEventRef.current) == null ? void 0 : _b.call(onEventRef, __spreadValues(__spreadProps(__spreadValues({
+      var _a, _b, _c;
+      const currentStep = (_a = normalizedConfig.steps[currentStepIndex]) != null ? _a : config.steps[currentStepIndex];
+      (_c = onEventRef.current) == null ? void 0 : _c.call(onEventRef, __spreadValues(__spreadProps(__spreadValues({
         type: "purchase_intent",
         variable,
         plan
       }, discount ? { discount } : {}), {
-        stepId: (_a = currentStep == null ? void 0 : currentStep.id) != null ? _a : ""
+        stepId: (_b = currentStep == null ? void 0 : currentStep.id) != null ? _b : ""
       }), getEventAnswers(config.computedVariables, rawAnswersRef.current)));
     },
-    [config.computedVariables, config.steps, currentStepIndex]
+    [
+      config.computedVariables,
+      config.steps,
+      currentStepIndex,
+      normalizedConfig.steps
+    ]
   );
   const openDiscountCodeDialog = React.useCallback(
     (state2) => {
@@ -9301,6 +9448,7 @@ function JourneyRemote({
   className,
   theme,
   initialAnswers,
+  initialOptions,
   onDiscountCodeApply,
   loadingComponent,
   errorComponent
@@ -9320,6 +9468,7 @@ function JourneyRemote({
       theme,
       onEvent,
       initialAnswers,
+      initialOptions,
       onDiscountCodeApply,
       children: /* @__PURE__ */ jsxRuntime.jsx(JourneyShell, { className, theme })
     }
@@ -9336,6 +9485,7 @@ function Journey(props) {
     className,
     theme,
     initialAnswers,
+    initialOptions,
     onDiscountCodeApply
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9346,6 +9496,7 @@ function Journey(props) {
       theme,
       onEvent,
       initialAnswers,
+      initialOptions,
       onDiscountCodeApply,
       children: /* @__PURE__ */ jsxRuntime.jsx(JourneyShell, { className, theme })
     }

package/dist/index.d.cts

@@ -11,6 +11,7 @@ type StepOption = {
     /** Optional image URL used in gravity bin physics visualization */
     image?: string;
 };
+type JourneyOptionOverrides = Record<string, StepOption[]>;
 type SwipeCardItem = {
     variable: string;
     text: string;
@@ -1257,6 +1258,8 @@ type JourneyCommonProps = {
     theme?: string;
     /** Seed answers available at first render. Useful for runtime-injected data (e.g. live pricing plans referenced via `"${pricingPlans}"` templates). Keys declared in `computedVariables` are ignored because formulas own those values. */
     initialAnswers?: JourneyAnswers;
+    /** Runtime option lists keyed by answer key (`step.variable ?? step.id`, or select block `props.variable`). Values override inspector-configured options for rendering only. */
+    initialOptions?: JourneyOptionOverrides;
     /** Consumer-owned discount validation/repricing callback. Journeys only handles UI/state. */
     onDiscountCodeApply?: (request: DiscountCodeApplyRequest) => Promise<DiscountCodeApplyResult> | DiscountCodeApplyResult;
     /** Custom loading component shown while fetching config */
@@ -1343,11 +1346,15 @@ type JourneyProviderProps = {
      *  `computedVariables` are ignored here because formulas own those values. Refreshed prices
      *  always win over a stale snapshot in storage. */
     initialAnswers?: JourneyAnswers;
+    /** Runtime option lists keyed by answer key (`step.variable ?? step.id`, or select block
+     *  `props.variable`). These override editor-configured options in the rendered journey only;
+     *  they are not persisted in answers. Event step configs omit option arrays. */
+    initialOptions?: JourneyOptionOverrides;
     /** Consumer-owned discount validation/repricing callback. Journeys only handles UI/state. */
     onDiscountCodeApply?: (request: DiscountCodeApplyRequest) => Promise<DiscountCodeApplyResult> | DiscountCodeApplyResult;
     children: ReactNode;
 };
-declare function JourneyProvider({ config: rawConfig, storageKey, theme, onEvent, initialAnswers, onDiscountCodeApply, children, }: JourneyProviderProps): react_jsx_runtime.JSX.Element;
+declare function JourneyProvider({ config: rawConfig, storageKey, theme, onEvent, initialAnswers, initialOptions, onDiscountCodeApply, children, }: JourneyProviderProps): react_jsx_runtime.JSX.Element;
 declare function useJourneyState(): JourneyState;
 declare function useJourneyActions(): JourneyActions;
 
@@ -1427,4 +1434,4 @@ declare function GravityBin({ items, height, gravity, restitution, friction, ico
 
 declare function TimelineBlock({ items, iconPlacement, labelPlacement, nodeSize, lineThickness, itemSpacing, titleDescGap, lineStyle, lineColor, lineOpacity, startLine, endLine, animated, entryAnimation, staggerDelay, className, }: TimelineBlockProps): react_jsx_runtime.JSX.Element;
 
-export { type AccordionBlockProps, type AccordionItem, type AnimationPreset, type AppliedDiscountAnswer, type AppliedDiscountPricing, type Arc, type AvatarGroupBlockProps, type AvatarItem, BLOCK_META, type BadgeBlockProps, type BadgeItem, type BadgeVariant, type BeforeAfterBlockProps, type BeforeAfterSide, type BlobConfig, type BlockAnimation, type BlockCondition, type BlockConfig, type BlockExitAnimation, type BlockPropsMap, type BlockType, type ButtonAction, type ButtonBlockProps, type CalloutBlockProps, type CardBlockProps, type CarouselBlockProps, type CarouselSlide, type ChartLine, type ChartLineEndDot, type ChecklistBlockProps, type ChecklistItem, type CircularProgressBlockProps, type ColumnConfig, type ColumnsBlockProps, type ComparisonBar, type ComparisonBarBlockProps, type ComputedVariable, type ContinuousScrollTimelineEvent, type CounterBlockProps, type CounterStyle, type DecoratedTextBlockProps, type DeviceFrameBlockProps, type DiscountCodeApplyRequest, type DiscountCodeApplyResult, DiscountCodeDialog, type DiscountCodeDialogState, type DiscountCodeSummaryLine, type DividerBlockProps, type ExitAnimationPreset, type FeatureRowBlockProps, type FeatureRowIconBg, type FetchState, type FloatingLabelBlockProps, GravityBin, type GravityBinBlockProps, type GravityBinItem, type GravityBinProps, type HeadingBlockProps, type IconBlockProps, type ImageBlockProps, Journey, type JourneyAnswers, type JourneyConfig, JourneyContext, type JourneyEvent, type JourneyEventComputedVariables, type JourneyProps, JourneyProvider, type JourneyProviderProps, JourneyShell, type LineChartBlockProps, type ListBlockProps, type LottieBlockProps, type MediaSlide, type MetricBlockProps, type MetricVariant, type MultiSelectBlockProps, type NavigationDirection, type NotificationColor, type NotificationItem, type NotificationStackBlockProps, type PageLayout, type PauseScrollTimelineEvent, type PricingPlan, type PricingPlanFeature, type PricingPlanPeriod, type PricingPlansBlockProps, type PricingStyle, type ProgressBarBlockProps, type ProgressSegment, type QuoteBlockProps, type QuoteSlide, type RoutingRule, type ScrollTimelineBehavior, type ScrollTimelineEvent, type ScrollToTimelineEvent, SegmentedProgress, type SelectedPlanAnswer, type SingleSelectBlockProps, type SliderStyle, type SpacerBlockProps, type StatBlockProps, type StepAnswer, type StepBackground, type StepComponentProps, type StepConfig, type StepField, type StepOption, StepRenderer, type StepRouting, type StepScrollTimeline, type StepType, type StepValidation, type SwipeCardAlign, type SwipeCardItem, type SwipeIconStyle, type SwipeLabels, type TableBlockProps, type TableCell, type TableColumn, type TableRowLabel, type TextBlockProps, type TextSegment, TimelineBlock, type TimelineBlockProps, type TimelineColor, type TimelineItem, type VideoBlockProps, type WidgetStyle, arePageInputsValid, evaluateCondition, hasVisibleProgress, normalizeStepOrder, resolveComputedVariableValues, resolveComputedVariables, useJourneyActions, useJourneyConfig, useJourneyState };
+export { type AccordionBlockProps, type AccordionItem, type AnimationPreset, type AppliedDiscountAnswer, type AppliedDiscountPricing, type Arc, type AvatarGroupBlockProps, type AvatarItem, BLOCK_META, type BadgeBlockProps, type BadgeItem, type BadgeVariant, type BeforeAfterBlockProps, type BeforeAfterSide, type BlobConfig, type BlockAnimation, type BlockCondition, type BlockConfig, type BlockExitAnimation, type BlockPropsMap, type BlockType, type ButtonAction, type ButtonBlockProps, type CalloutBlockProps, type CardBlockProps, type CarouselBlockProps, type CarouselSlide, type ChartLine, type ChartLineEndDot, type ChecklistBlockProps, type ChecklistItem, type CircularProgressBlockProps, type ColumnConfig, type ColumnsBlockProps, type ComparisonBar, type ComparisonBarBlockProps, type ComputedVariable, type ContinuousScrollTimelineEvent, type CounterBlockProps, type CounterStyle, type DecoratedTextBlockProps, type DeviceFrameBlockProps, type DiscountCodeApplyRequest, type DiscountCodeApplyResult, DiscountCodeDialog, type DiscountCodeDialogState, type DiscountCodeSummaryLine, type DividerBlockProps, type ExitAnimationPreset, type FeatureRowBlockProps, type FeatureRowIconBg, type FetchState, type FloatingLabelBlockProps, GravityBin, type GravityBinBlockProps, type GravityBinItem, type GravityBinProps, type HeadingBlockProps, type IconBlockProps, type ImageBlockProps, Journey, type JourneyAnswers, type JourneyConfig, JourneyContext, type JourneyEvent, type JourneyEventComputedVariables, type JourneyOptionOverrides, type JourneyProps, JourneyProvider, type JourneyProviderProps, JourneyShell, type LineChartBlockProps, type ListBlockProps, type LottieBlockProps, type MediaSlide, type MetricBlockProps, type MetricVariant, type MultiSelectBlockProps, type NavigationDirection, type NotificationColor, type NotificationItem, type NotificationStackBlockProps, type PageLayout, type PauseScrollTimelineEvent, type PricingPlan, type PricingPlanFeature, type PricingPlanPeriod, type PricingPlansBlockProps, type PricingStyle, type ProgressBarBlockProps, type ProgressSegment, type QuoteBlockProps, type QuoteSlide, type RoutingRule, type ScrollTimelineBehavior, type ScrollTimelineEvent, type ScrollToTimelineEvent, SegmentedProgress, type SelectedPlanAnswer, type SingleSelectBlockProps, type SliderStyle, type SpacerBlockProps, type StatBlockProps, type StepAnswer, type StepBackground, type StepComponentProps, type StepConfig, type StepField, type StepOption, StepRenderer, type StepRouting, type StepScrollTimeline, type StepType, type StepValidation, type SwipeCardAlign, type SwipeCardItem, type SwipeIconStyle, type SwipeLabels, type TableBlockProps, type TableCell, type TableColumn, type TableRowLabel, type TextBlockProps, type TextSegment, TimelineBlock, type TimelineBlockProps, type TimelineColor, type TimelineItem, type VideoBlockProps, type WidgetStyle, arePageInputsValid, evaluateCondition, hasVisibleProgress, normalizeStepOrder, resolveComputedVariableValues, resolveComputedVariables, useJourneyActions, useJourneyConfig, useJourneyState };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ type StepOption = {
     /** Optional image URL used in gravity bin physics visualization */
     image?: string;
 };
+type JourneyOptionOverrides = Record<string, StepOption[]>;
 type SwipeCardItem = {
     variable: string;
     text: string;
@@ -1257,6 +1258,8 @@ type JourneyCommonProps = {
     theme?: string;
     /** Seed answers available at first render. Useful for runtime-injected data (e.g. live pricing plans referenced via `"${pricingPlans}"` templates). Keys declared in `computedVariables` are ignored because formulas own those values. */
     initialAnswers?: JourneyAnswers;
+    /** Runtime option lists keyed by answer key (`step.variable ?? step.id`, or select block `props.variable`). Values override inspector-configured options for rendering only. */
+    initialOptions?: JourneyOptionOverrides;
     /** Consumer-owned discount validation/repricing callback. Journeys only handles UI/state. */
     onDiscountCodeApply?: (request: DiscountCodeApplyRequest) => Promise<DiscountCodeApplyResult> | DiscountCodeApplyResult;
     /** Custom loading component shown while fetching config */
@@ -1343,11 +1346,15 @@ type JourneyProviderProps = {
      *  `computedVariables` are ignored here because formulas own those values. Refreshed prices
      *  always win over a stale snapshot in storage. */
     initialAnswers?: JourneyAnswers;
+    /** Runtime option lists keyed by answer key (`step.variable ?? step.id`, or select block
+     *  `props.variable`). These override editor-configured options in the rendered journey only;
+     *  they are not persisted in answers. Event step configs omit option arrays. */
+    initialOptions?: JourneyOptionOverrides;
     /** Consumer-owned discount validation/repricing callback. Journeys only handles UI/state. */
     onDiscountCodeApply?: (request: DiscountCodeApplyRequest) => Promise<DiscountCodeApplyResult> | DiscountCodeApplyResult;
     children: ReactNode;
 };
-declare function JourneyProvider({ config: rawConfig, storageKey, theme, onEvent, initialAnswers, onDiscountCodeApply, children, }: JourneyProviderProps): react_jsx_runtime.JSX.Element;
+declare function JourneyProvider({ config: rawConfig, storageKey, theme, onEvent, initialAnswers, initialOptions, onDiscountCodeApply, children, }: JourneyProviderProps): react_jsx_runtime.JSX.Element;
 declare function useJourneyState(): JourneyState;
 declare function useJourneyActions(): JourneyActions;
 
@@ -1427,4 +1434,4 @@ declare function GravityBin({ items, height, gravity, restitution, friction, ico
 
 declare function TimelineBlock({ items, iconPlacement, labelPlacement, nodeSize, lineThickness, itemSpacing, titleDescGap, lineStyle, lineColor, lineOpacity, startLine, endLine, animated, entryAnimation, staggerDelay, className, }: TimelineBlockProps): react_jsx_runtime.JSX.Element;
 
-export { type AccordionBlockProps, type AccordionItem, type AnimationPreset, type AppliedDiscountAnswer, type AppliedDiscountPricing, type Arc, type AvatarGroupBlockProps, type AvatarItem, BLOCK_META, type BadgeBlockProps, type BadgeItem, type BadgeVariant, type BeforeAfterBlockProps, type BeforeAfterSide, type BlobConfig, type BlockAnimation, type BlockCondition, type BlockConfig, type BlockExitAnimation, type BlockPropsMap, type BlockType, type ButtonAction, type ButtonBlockProps, type CalloutBlockProps, type CardBlockProps, type CarouselBlockProps, type CarouselSlide, type ChartLine, type ChartLineEndDot, type ChecklistBlockProps, type ChecklistItem, type CircularProgressBlockProps, type ColumnConfig, type ColumnsBlockProps, type ComparisonBar, type ComparisonBarBlockProps, type ComputedVariable, type ContinuousScrollTimelineEvent, type CounterBlockProps, type CounterStyle, type DecoratedTextBlockProps, type DeviceFrameBlockProps, type DiscountCodeApplyRequest, type DiscountCodeApplyResult, DiscountCodeDialog, type DiscountCodeDialogState, type DiscountCodeSummaryLine, type DividerBlockProps, type ExitAnimationPreset, type FeatureRowBlockProps, type FeatureRowIconBg, type FetchState, type FloatingLabelBlockProps, GravityBin, type GravityBinBlockProps, type GravityBinItem, type GravityBinProps, type HeadingBlockProps, type IconBlockProps, type ImageBlockProps, Journey, type JourneyAnswers, type JourneyConfig, JourneyContext, type JourneyEvent, type JourneyEventComputedVariables, type JourneyProps, JourneyProvider, type JourneyProviderProps, JourneyShell, type LineChartBlockProps, type ListBlockProps, type LottieBlockProps, type MediaSlide, type MetricBlockProps, type MetricVariant, type MultiSelectBlockProps, type NavigationDirection, type NotificationColor, type NotificationItem, type NotificationStackBlockProps, type PageLayout, type PauseScrollTimelineEvent, type PricingPlan, type PricingPlanFeature, type PricingPlanPeriod, type PricingPlansBlockProps, type PricingStyle, type ProgressBarBlockProps, type ProgressSegment, type QuoteBlockProps, type QuoteSlide, type RoutingRule, type ScrollTimelineBehavior, type ScrollTimelineEvent, type ScrollToTimelineEvent, SegmentedProgress, type SelectedPlanAnswer, type SingleSelectBlockProps, type SliderStyle, type SpacerBlockProps, type StatBlockProps, type StepAnswer, type StepBackground, type StepComponentProps, type StepConfig, type StepField, type StepOption, StepRenderer, type StepRouting, type StepScrollTimeline, type StepType, type StepValidation, type SwipeCardAlign, type SwipeCardItem, type SwipeIconStyle, type SwipeLabels, type TableBlockProps, type TableCell, type TableColumn, type TableRowLabel, type TextBlockProps, type TextSegment, TimelineBlock, type TimelineBlockProps, type TimelineColor, type TimelineItem, type VideoBlockProps, type WidgetStyle, arePageInputsValid, evaluateCondition, hasVisibleProgress, normalizeStepOrder, resolveComputedVariableValues, resolveComputedVariables, useJourneyActions, useJourneyConfig, useJourneyState };
+export { type AccordionBlockProps, type AccordionItem, type AnimationPreset, type AppliedDiscountAnswer, type AppliedDiscountPricing, type Arc, type AvatarGroupBlockProps, type AvatarItem, BLOCK_META, type BadgeBlockProps, type BadgeItem, type BadgeVariant, type BeforeAfterBlockProps, type BeforeAfterSide, type BlobConfig, type BlockAnimation, type BlockCondition, type BlockConfig, type BlockExitAnimation, type BlockPropsMap, type BlockType, type ButtonAction, type ButtonBlockProps, type CalloutBlockProps, type CardBlockProps, type CarouselBlockProps, type CarouselSlide, type ChartLine, type ChartLineEndDot, type ChecklistBlockProps, type ChecklistItem, type CircularProgressBlockProps, type ColumnConfig, type ColumnsBlockProps, type ComparisonBar, type ComparisonBarBlockProps, type ComputedVariable, type ContinuousScrollTimelineEvent, type CounterBlockProps, type CounterStyle, type DecoratedTextBlockProps, type DeviceFrameBlockProps, type DiscountCodeApplyRequest, type DiscountCodeApplyResult, DiscountCodeDialog, type DiscountCodeDialogState, type DiscountCodeSummaryLine, type DividerBlockProps, type ExitAnimationPreset, type FeatureRowBlockProps, type FeatureRowIconBg, type FetchState, type FloatingLabelBlockProps, GravityBin, type GravityBinBlockProps, type GravityBinItem, type GravityBinProps, type HeadingBlockProps, type IconBlockProps, type ImageBlockProps, Journey, type JourneyAnswers, type JourneyConfig, JourneyContext, type JourneyEvent, type JourneyEventComputedVariables, type JourneyOptionOverrides, type JourneyProps, JourneyProvider, type JourneyProviderProps, JourneyShell, type LineChartBlockProps, type ListBlockProps, type LottieBlockProps, type MediaSlide, type MetricBlockProps, type MetricVariant, type MultiSelectBlockProps, type NavigationDirection, type NotificationColor, type NotificationItem, type NotificationStackBlockProps, type PageLayout, type PauseScrollTimelineEvent, type PricingPlan, type PricingPlanFeature, type PricingPlanPeriod, type PricingPlansBlockProps, type PricingStyle, type ProgressBarBlockProps, type ProgressSegment, type QuoteBlockProps, type QuoteSlide, type RoutingRule, type ScrollTimelineBehavior, type ScrollTimelineEvent, type ScrollToTimelineEvent, SegmentedProgress, type SelectedPlanAnswer, type SingleSelectBlockProps, type SliderStyle, type SpacerBlockProps, type StatBlockProps, type StepAnswer, type StepBackground, type StepComponentProps, type StepConfig, type StepField, type StepOption, StepRenderer, type StepRouting, type StepScrollTimeline, type StepType, type StepValidation, type SwipeCardAlign, type SwipeCardItem, type SwipeIconStyle, type SwipeLabels, type TableBlockProps, type TableCell, type TableColumn, type TableRowLabel, type TextBlockProps, type TextSegment, TimelineBlock, type TimelineBlockProps, type TimelineColor, type TimelineItem, type VideoBlockProps, type WidgetStyle, arePageInputsValid, evaluateCondition, hasVisibleProgress, normalizeStepOrder, resolveComputedVariableValues, resolveComputedVariables, useJourneyActions, useJourneyConfig, useJourneyState };

package/dist/index.js

@@ -512,6 +512,131 @@ function normalizeStepOrder(config) {
   }
   return __spreadProps(__spreadValues({}, config), { steps: ordered });
 }
+function getRuntimeOptionOverride(overrides, key) {
+  if (!overrides || !key) return void 0;
+  if (!Object.prototype.hasOwnProperty.call(overrides, key)) return void 0;
+  return overrides[key];
+}
+function applyRuntimeOptionOverridesToBlocks(blocks, overrides) {
+  if (!overrides) return blocks;
+  let changed = false;
+  const nextBlocks = blocks.map((block) => {
+    let next = block;
+    if (block.type === "single_select" || block.type === "multi_select") {
+      const options = getRuntimeOptionOverride(overrides, block.props.variable);
+      if (options !== void 0) {
+        next = __spreadProps(__spreadValues({}, block), {
+          props: __spreadProps(__spreadValues({}, block.props), { options })
+        });
+        changed = true;
+      }
+    }
+    if (block.type === "columns") {
+      let columnsChanged = false;
+      const columns = block.props.columns.map((column) => {
+        const columnBlocks = applyRuntimeOptionOverridesToBlocks(
+          column.blocks,
+          overrides
+        );
+        if (columnBlocks === column.blocks) return column;
+        columnsChanged = true;
+        return __spreadProps(__spreadValues({}, column), { blocks: columnBlocks });
+      });
+      if (columnsChanged) {
+        next = __spreadProps(__spreadValues({}, block), {
+          props: __spreadProps(__spreadValues({}, block.props), { columns })
+        });
+        changed = true;
+      }
+    }
+    return next;
+  });
+  return changed ? nextBlocks : blocks;
+}
+function applyRuntimeOptionOverrides(config, overrides) {
+  if (!overrides || Object.keys(overrides).length === 0) return config;
+  let changed = false;
+  const steps = config.steps.map((step) => {
+    var _a;
+    let next = step;
+    const stepUsesOptions = step.type === "single_select" || step.type === "multi_select" || step.type === "counter_select";
+    const options = stepUsesOptions ? getRuntimeOptionOverride(overrides, (_a = step.variable) != null ? _a : step.id) : void 0;
+    if (options !== void 0) {
+      next = __spreadProps(__spreadValues({}, step), { options });
+      changed = true;
+    }
+    if (step.blocks) {
+      const blocks = applyRuntimeOptionOverridesToBlocks(
+        step.blocks,
+        overrides
+      );
+      if (blocks !== step.blocks) {
+        next = __spreadProps(__spreadValues({}, next), { blocks });
+        changed = true;
+      }
+    }
+    return next;
+  });
+  return changed ? __spreadProps(__spreadValues({}, config), { steps }) : config;
+}
+function stripOptionsFromEventBlocks(blocks) {
+  let changed = false;
+  const nextBlocks = blocks.map((block) => {
+    let next = block;
+    if (block.type === "single_select" || block.type === "multi_select") {
+      const props = __spreadValues({}, block.props);
+      delete props.options;
+      next = __spreadProps(__spreadValues({}, block), { props });
+      changed = true;
+    }
+    if (block.type === "columns") {
+      let columnsChanged = false;
+      const columns = block.props.columns.map((column) => {
+        const columnBlocks = stripOptionsFromEventBlocks(column.blocks);
+        if (columnBlocks === column.blocks) return column;
+        columnsChanged = true;
+        return __spreadProps(__spreadValues({}, column), { blocks: columnBlocks });
+      });
+      if (columnsChanged) {
+        next = __spreadProps(__spreadValues({}, block), {
+          props: __spreadProps(__spreadValues({}, block.props), { columns })
+        });
+        changed = true;
+      }
+    }
+    return next;
+  });
+  return changed ? nextBlocks : blocks;
+}
+function stripOptionsFromEventStep(step) {
+  var _a;
+  let changed = false;
+  let next = step;
+  if (step.options !== void 0) {
+    next = __spreadValues({}, next);
+    delete next.options;
+    changed = true;
+  }
+  if ((_a = step.fields) == null ? void 0 : _a.some((field) => field.options !== void 0)) {
+    next = __spreadProps(__spreadValues({}, next), {
+      fields: step.fields.map((field) => {
+        if (field.options === void 0) return field;
+        const nextField = __spreadValues({}, field);
+        delete nextField.options;
+        return nextField;
+      })
+    });
+    changed = true;
+  }
+  if (step.blocks) {
+    const blocks = stripOptionsFromEventBlocks(step.blocks);
+    if (blocks !== step.blocks) {
+      next = __spreadProps(__spreadValues({}, next), { blocks });
+      changed = true;
+    }
+  }
+  return changed ? next : step;
+}
 var JourneyContext = createContext(null);
 function JourneyProvider({
   config: rawConfig,
@@ -519,6 +644,7 @@ function JourneyProvider({
   theme,
   onEvent,
   initialAnswers,
+  initialOptions,
   onDiscountCodeApply,
   children
 }) {
@@ -529,7 +655,14 @@ function JourneyProvider({
   useEffect(() => {
     onEventRef.current = onEvent;
   }, [onEvent]);
-  const config = useMemo(() => normalizeStepOrder(rawConfig), [rawConfig]);
+  const normalizedConfig = useMemo(
+    () => normalizeStepOrder(rawConfig),
+    [rawConfig]
+  );
+  const config = useMemo(
+    () => applyRuntimeOptionOverrides(normalizedConfig, initialOptions),
+    [normalizedConfig, initialOptions]
+  );
   const computedVariableIds = useMemo(
     () => getComputedVariableIds(config.computedVariables),
     [config.computedVariables]
@@ -574,8 +707,8 @@ function JourneyProvider({
     rawAnswersRef.current = rawAnswers;
   }, [rawAnswers]);
   const allVariables = useMemo(
-    () => config.steps.flatMap(getStepVariables),
-    [config.steps]
+    () => normalizedConfig.steps.flatMap(getStepVariables),
+    [normalizedConfig.steps]
   );
   const setAnswer = useCallback((stepId, answer) => {
     if (computedVariableIds.has(stepId)) return;
@@ -644,7 +777,7 @@ function JourneyProvider({
       const submitted = getSubmittedAnswer(currentStep, latestAnswers);
       (_c = onEventRef.current) == null ? void 0 : _c.call(onEventRef, __spreadProps(__spreadValues({
         type: "step_submit",
-        step: currentStep,
+        step: stripOptionsFromEventStep(currentStep),
         submitted
       }, eventAnswers), {
         variables: allVariables
@@ -654,8 +787,8 @@ function JourneyProvider({
         navigateToIndex(nextIndex);
         (_d = onEventRef.current) == null ? void 0 : _d.call(onEventRef, __spreadValues({
           type: "navigate",
-          from: currentStep,
-          to: config.steps[nextIndex],
+          from: stripOptionsFromEventStep(currentStep),
+          to: stripOptionsFromEventStep(config.steps[nextIndex]),
           direction: "forward"
         }, eventAnswers));
       } else {
@@ -687,13 +820,18 @@ function JourneyProvider({
         navigateToIndex(idx);
         (_a = onEventRef.current) == null ? void 0 : _a.call(onEventRef, __spreadValues({
           type: "navigate",
-          from: fromStep,
-          to: config.steps[idx],
+          from: stripOptionsFromEventStep(fromStep),
+          to: stripOptionsFromEventStep(config.steps[idx]),
           direction: idx > currentStepIndex ? "forward" : "backward"
         }, getEventAnswers(config.computedVariables, rawAnswersRef.current)));
       }
     },
-    [config.computedVariables, config.steps, currentStepIndex, navigateToIndex]
+    [
+      config.computedVariables,
+      config.steps,
+      currentStepIndex,
+      navigateToIndex
+    ]
   );
   const goBack = useCallback(() => {
     var _a;
@@ -729,8 +867,8 @@ function JourneyProvider({
         setDirection(dir);
         (_b2 = onEventRef.current) == null ? void 0 : _b2.call(onEventRef, __spreadValues({
           type: "navigate",
-          from: config.steps[prev],
-          to: config.steps[step],
+          from: stripOptionsFromEventStep(config.steps[prev]),
+          to: stripOptionsFromEventStep(config.steps[step]),
           direction: dir
         }, getEventAnswers(config.computedVariables, rawAnswersRef.current)));
         return step;
@@ -738,7 +876,11 @@ function JourneyProvider({
     };
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
-  }, [config.allowBackNavigation, config.computedVariables, config.steps]);
+  }, [
+    config.allowBackNavigation,
+    config.computedVariables,
+    config.steps
+  ]);
   const getStepAnswer = useCallback(
     (stepId) => {
       var _a;
@@ -758,17 +900,22 @@ function JourneyProvider({
   );
   const firePurchaseIntent = useCallback(
     (variable, plan, discount) => {
-      var _a, _b;
-      const currentStep = config.steps[currentStepIndex];
-      (_b = onEventRef.current) == null ? void 0 : _b.call(onEventRef, __spreadValues(__spreadProps(__spreadValues({
+      var _a, _b, _c;
+      const currentStep = (_a = normalizedConfig.steps[currentStepIndex]) != null ? _a : config.steps[currentStepIndex];
+      (_c = onEventRef.current) == null ? void 0 : _c.call(onEventRef, __spreadValues(__spreadProps(__spreadValues({
         type: "purchase_intent",
         variable,
         plan
       }, discount ? { discount } : {}), {
-        stepId: (_a = currentStep == null ? void 0 : currentStep.id) != null ? _a : ""
+        stepId: (_b = currentStep == null ? void 0 : currentStep.id) != null ? _b : ""
       }), getEventAnswers(config.computedVariables, rawAnswersRef.current)));
     },
-    [config.computedVariables, config.steps, currentStepIndex]
+    [
+      config.computedVariables,
+      config.steps,
+      currentStepIndex,
+      normalizedConfig.steps
+    ]
   );
   const openDiscountCodeDialog = useCallback(
     (state2) => {
@@ -9276,6 +9423,7 @@ function JourneyRemote({
   className,
   theme,
   initialAnswers,
+  initialOptions,
   onDiscountCodeApply,
   loadingComponent,
   errorComponent
@@ -9295,6 +9443,7 @@ function JourneyRemote({
       theme,
       onEvent,
       initialAnswers,
+      initialOptions,
       onDiscountCodeApply,
       children: /* @__PURE__ */ jsx(JourneyShell, { className, theme })
     }
@@ -9311,6 +9460,7 @@ function Journey(props) {
     className,
     theme,
     initialAnswers,
+    initialOptions,
     onDiscountCodeApply
   } = props;
   return /* @__PURE__ */ jsx(
@@ -9321,6 +9471,7 @@ function Journey(props) {
       theme,
       onEvent,
       initialAnswers,
+      initialOptions,
       onDiscountCodeApply,
       children: /* @__PURE__ */ jsx(JourneyShell, { className, theme })
     }

package/package.json

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