@revenuecat/purchases-ui-js 4.7.6 → 4.8.1

package/dist/components/button/ButtonNode.stories.svelte

@@ -175,9 +175,6 @@
     action: {
       type: "workflow",
     },
-    triggers: {
-      on_press: "workflow-action-id",
-    },
     stack: {
       ...stackProps(5),
       background_color: {

package/dist/components/button/ButtonNode.svelte

@@ -67,12 +67,6 @@
           componentName: props.name,
           componentValue: "navigate_back",
         };
-      case "navigate_to_page":
-        return {
-          componentType: "button",
-          componentName: props.name,
-          componentValue: "navigate_to_page",
-        };
       case "close_workflow":
         return {
           componentType: "button",
@@ -149,7 +143,9 @@
 
   const onclick = () => {
     if (isDisabled) return;
-    const actionId = props.triggers?.on_press;
+    // For "workflow" actions, pass the component's own id so Workflow.svelte
+    // can look it up in the step's triggers array (component ID → action ID).
+    const actionId = action.type === "workflow" ? props.id : undefined;
     if (action.type === "navigate_to" && action.destination === "sheet") {
       if (action.sheet != null) {
         emitComponentInteraction(getSheetOpenInteractionData(action));
@@ -173,8 +169,6 @@
         return false;
       case "navigate_back":
         return !hideBackButtons;
-      case "navigate_to_page":
-        return true;
       case "close_workflow":
         return true;
       case "navigate_to":

package/dist/components/carousel/Carousel.stories.svelte

@@ -364,7 +364,7 @@
     title: "Components/Carousel",
     component: Carousel,
     decorators: [
-      viewportDecorator(400, 300, 0),
+      viewportDecorator(350, 300, 0),
       componentDecorator(),
       localizationDecorator({
         defaultLocale,

package/dist/components/carousel/Carousel.svelte

@@ -355,6 +355,7 @@
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
+    align-self: stretch;
   }
 
   .carousel-clip {
@@ -401,6 +402,8 @@
     transition-delay: 2500ms;
     transform: translateX(0);
 
+    touch-action: pan-y;
+
     cursor: grab;
 
     &:active {

package/dist/components/paywall/Paywall.stories.svelte

@@ -25,6 +25,7 @@
   import { waitForAnimations } from "storybook/internal/preview-api";
   import { viewportDecorator } from "../../stories/viewport-decorator";
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
+  import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
@@ -74,6 +75,20 @@
   }}
 />
 
+<!--
+  Regression story for fixed-height stacks being squeezed by the flex algorithm.
+  The root stack uses `space_between` and children's fixed heights sum to more than
+  the 400px viewport, so the empty spacer would collapse without `flex-shrink: 0`.
+  Chromatic diffs this story to block regressions of Stack.svelte's flex-shrink rule.
+-->
+<Story
+  name="Fixed-height stack (regression)"
+  decorators={[viewportDecorator(320, 400, 0)]}
+  args={{
+    paywallData: FIXED_HEIGHT_STACK_PAYWALL,
+  }}
+/>
+
 <Story
   name="Override paywall"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -71,11 +71,6 @@
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string, actionId: string) => void;
     onBackClicked?: () => void;
-    /**
-     * Called when a `navigate_to_page` button is pressed and there is no
-     * active nav_host context to handle it internally.
-     */
-    onNavigateToPage?: (pageId: string) => void;
     /** Called when a `close_workflow` button is pressed to dismiss the paywall/workflow. */
     onClose?: () => void;
     onVisitCustomerCenterClicked?: () => void;
@@ -135,7 +130,6 @@
     preferredColorMode,
     onPurchaseClicked,
     onBackClicked,
-    onNavigateToPage,
     onClose,
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
@@ -248,9 +242,6 @@
       case "navigate_back":
         onBackClicked?.();
         return;
-      case "navigate_to_page":
-        onNavigateToPage?.(action.page_id);
-        return;
       case "close_workflow":
         onClose?.();
         return;

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -28,11 +28,6 @@ interface Props {
     preferredColorMode?: ColorMode;
     onPurchaseClicked?: (selectedPackageId: string, actionId: string) => void;
     onBackClicked?: () => void;
-    /**
-     * Called when a `navigate_to_page` button is pressed and there is no
-     * active nav_host context to handle it internally.
-     */
-    onNavigateToPage?: (pageId: string) => void;
     /** Called when a `close_workflow` button is pressed to dismiss the paywall/workflow. */
     onClose?: () => void;
     onVisitCustomerCenterClicked?: () => void;

package/dist/components/paywall/fixtures/fixed-height-stack-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const FIXED_HEIGHT_STACK_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/fixed-height-stack-paywall.js

@@ -0,0 +1,87 @@
+// Regression fixture: fixed-height empty stack collapses under flex pressure.
+// Root `space_between` with children summing above viewport height. Pair with
+// `viewportDecorator` in the story so the parent is bounded; otherwise the
+// paywall grows to content height and no shrinkage happens.
+const solidStack = (id, height, hex) => ({
+    type: "stack",
+    id,
+    name: id,
+    components: [],
+    dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+    },
+    size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: height },
+    },
+    background: null,
+    background_color: { light: { type: "hex", value: hex } },
+    badge: null,
+    border: null,
+    margin: { bottom: 0, leading: 0, top: 0, trailing: 0 },
+    padding: { bottom: 0, leading: 0, top: 0, trailing: 0 },
+    shadow: null,
+    shape: {
+        type: "rectangle",
+        corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 0,
+            top_trailing: 0,
+        },
+    },
+    spacing: 0,
+});
+export const FIXED_HEIGHT_STACK_PAYWALL = {
+    id: "fixed_height_stack_paywall",
+    default_locale: "en_US",
+    components_localizations: { en_US: {} },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: { light: { type: "hex", value: "#ffffff" } },
+            },
+            stack: {
+                type: "stack",
+                id: "root",
+                name: "Root",
+                components: [
+                    solidStack("hero", 180, "#ff5f5f"),
+                    solidStack("empty_spacer", 50, "#11d483"),
+                    solidStack("card", 200, "#6366f1"),
+                    solidStack("cta", 48, "#000000"),
+                ],
+                dimension: {
+                    type: "vertical",
+                    alignment: "center",
+                    distribution: "space_between",
+                },
+                size: {
+                    width: { type: "fill" },
+                    height: { type: "fill" },
+                },
+                background: null,
+                background_color: null,
+                badge: null,
+                border: null,
+                margin: { bottom: 0, leading: 0, top: 0, trailing: 0 },
+                padding: { bottom: 16, leading: 16, top: 16, trailing: 16 },
+                shadow: null,
+                shape: {
+                    type: "rectangle",
+                    corners: {
+                        bottom_leading: 0,
+                        bottom_trailing: 0,
+                        top_leading: 0,
+                        top_trailing: 0,
+                    },
+                },
+                spacing: 12,
+            },
+            sticky_footer: null,
+        },
+    },
+};

package/dist/components/stack/Stack.svelte

@@ -32,7 +32,13 @@
     getHoverStateProps,
   } from "../../utils/style-utils";
   import type { Snippet } from "svelte";
-  import { mapBadge, mapDimension, mapLayerAlignment } from "./stack-utils";
+  import {
+    mapBadge,
+    mapDimension,
+    mapFixedHeightBounds,
+    mapFixedWidthBounds,
+    mapLayerAlignment,
+  } from "./stack-utils";
 
   interface MiscProps {
     onclick?: () => void;
@@ -89,6 +95,8 @@
       position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
+      ...mapFixedWidthBounds(size.width),
+      ...mapFixedHeightBounds(size.height),
       ...mapDimension(dimension),
       gap: px(spacing),
       margin: mapSpacing(margin),

package/dist/components/stack/stack-utils.d.ts

@@ -1,6 +1,9 @@
+import type { Size } from "../../types";
 import type { Dimension, ZAlignment } from "../../types/alignment";
 import type { Badge } from "../../types/components/stack";
 import { type CSS } from "../../utils/base-utils";
+export declare function mapFixedWidthBounds(width: Size): CSS;
+export declare function mapFixedHeightBounds(height: Size): CSS;
 export declare function mapDimension(dimension: Dimension): Record<string, string>;
 type JustifyAlign = {
     justifyContent: string;

package/dist/components/stack/stack-utils.js

@@ -14,6 +14,20 @@ const DISTRIBUTION_MAP = Object.freeze({
     center: "center",
     end: "flex-end",
 });
+export function mapFixedWidthBounds(width) {
+    if (width.type !== "fixed") {
+        return {};
+    }
+    const value = px(width.value);
+    return { "min-width": value, "max-width": value };
+}
+export function mapFixedHeightBounds(height) {
+    if (height.type !== "fixed") {
+        return {};
+    }
+    const value = px(height.value);
+    return { "min-height": value, "max-height": value };
+}
 export function mapDimension(dimension) {
     if (dimension.type === "zlayer") {
         return {};

package/dist/components/workflows/Screen.svelte

@@ -21,7 +21,6 @@
       actionId: string,
     ) => void | Promise<void>;
     onBackClicked?: () => void;
-    onNavigateToPage?: (pageId: string) => void;
     onClose?: () => void;
     containerId?: string;
     maxContentWidth?: string;
@@ -55,7 +54,6 @@
     onComponentInteraction,
     onPurchaseClicked,
     onBackClicked,
-    onNavigateToPage,
     onClose,
     containerId = "screen-container",
     maxContentWidth,
@@ -94,7 +92,6 @@
       {onCompleteWorkflowNavigate}
       onVisitCustomerCenterClicked={() => onVisitCustomerCenterClicked?.()}
       {onBackClicked}
-      {onNavigateToPage}
       {onClose}
       onRestorePurchasesClicked={() => onRestorePurchasesClicked?.()}
       onActionTriggered={(actionId: string) => {

package/dist/components/workflows/Screen.svelte.d.ts

@@ -16,7 +16,6 @@ interface Props {
     onComponentInteraction?: OnComponentInteraction;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
     onBackClicked?: () => void;
-    onNavigateToPage?: (pageId: string) => void;
     onClose?: () => void;
     containerId?: string;
     maxContentWidth?: string;

package/dist/components/workflows/Workflow.svelte

@@ -8,7 +8,25 @@
   import type { WalletButtonRender } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
-  import type { WorkflowNavData } from "../../types/workflow-nav";
+  import type {
+    WorkflowNavData,
+    WorkflowStepChangeEvent,
+  } from "../../types/workflow-nav";
+  import type {
+    WorkflowStepTriggerAction,
+    WorkflowStep,
+  } from "../../types/workflow";
+
+  type TriggerActionValue = WorkflowStep["trigger_actions"][string];
+
+  function isStepTriggerAction(
+    a: TriggerActionValue,
+  ): a is WorkflowStepTriggerAction {
+    return (
+      a.type === "step" &&
+      typeof (a as WorkflowStepTriggerAction).step_id === "string"
+    );
+  }
 
   interface Props {
     workflow: WorkflowNavData;
@@ -44,6 +62,12 @@
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;
+    /**
+     * Called whenever the current workflow step changes — on initial load,
+     * forward navigation, back navigation, and when leaving a step (close,
+     * purchase, error). Used by the host to fire workflow lifecycle events.
+     */
+    onStepChanged?: (event: WorkflowStepChangeEvent) => void;
   }
 
   const {
@@ -68,50 +92,203 @@
     onComponentInteraction,
     onClose,
     onExitBack,
+    onStepChanged,
   }: Props = $props();
 
   // ── Nav stack ─────────────────────────────────────────────────────────────
-  // The stack always has at least the initial page. The current page is the
-  // last entry. navigate_to_page pushes, navigate_back pops.
+  // Each entry pairs the screen ID (used to look up the page to render) with
+  // the step ID (used to resolve trigger_actions on button press). The current
+  // page is always the last entry; workflow actions push, navigate_back pops.
   //
   // We key the reset off workflow.initial_page_id (a stable string) rather
   // than workflow object identity, so hosts that recompute the prop object on
   // unrelated reactive updates don't accidentally snap the user back to the
   // first page mid-flow.
-  let navStack = $state<string[]>([]);
+  interface NavEntry {
+    pageId: string;
+    stepId: string;
+  }
+  let navStack = $state<NavEntry[]>([]);
   let trackedInitialPageId = $state<string>();
 
-  const currentPageId = $derived(
-    navStack[navStack.length - 1] ?? workflow.initial_page_id,
+  const current = $derived(
+    navStack[navStack.length - 1] ?? {
+      pageId: workflow.initial_page_id,
+      stepId: workflow.initial_step_id,
+    },
   );
-  const currentScreen = $derived(workflow.pages[currentPageId]);
+  const currentScreen = $derived(workflow.pages[current.pageId]);
 
   $effect.pre(() => {
     if (trackedInitialPageId !== workflow.initial_page_id) {
       trackedInitialPageId = workflow.initial_page_id;
-      navStack = [workflow.initial_page_id];
+      navStack = [
+        {
+          pageId: workflow.initial_page_id,
+          stepId: workflow.initial_step_id,
+        },
+      ];
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: workflow.initial_step_id,
+        fromStepId: undefined,
+        toStepId: undefined,
+        reason: "start",
+        ...stepFlags(workflow.initial_step_id),
+      });
     }
   });
 
-  function handleNavigateToPage(pageId: string) {
-    if (!workflow.pages[pageId]) {
-      console.warn(`[Workflow] navigate_to_page: unknown page_id "${pageId}"`);
+  function stepFlags(stepId: string): {
+    isFirstStep: boolean;
+    isLastStep: boolean;
+  } {
+    const step = workflow.steps[stepId];
+    return {
+      isFirstStep: stepId === workflow.initial_step_id,
+      // A step is "last" when it has no step-type trigger actions — i.e. no
+      // client-resolvable forward navigation. Condition-based actions fall back
+      // to onActionTriggered and are not counted here.
+      isLastStep:
+        step !== undefined &&
+        !Object.values(step.trigger_actions).some((a) =>
+          isStepTriggerAction(a),
+        ),
+    };
+  }
+
+  function emitStepChange(event: WorkflowStepChangeEvent) {
+    onStepChanged?.(event);
+  }
+
+  /**
+   * Resolves a "workflow"-type button action and navigates to the next screen.
+   *
+   * Flow: component ID → step.triggers[].action_id → trigger_actions[action_id]
+   *       → step_id → step.screen_id → push onto nav stack.
+   */
+  function handleActionTriggered(actionId: string) {
+    const currentStep = workflow.steps[current.stepId];
+    if (!currentStep) {
+      console.warn(
+        `[Workflow] onActionTriggered: no current step found for step_id "${current.stepId}"`,
+      );
+      return;
+    }
+
+    // Resolve the component ID to an action ID via the step's triggers array.
+    const resolvedActionId = currentStep.triggers.find(
+      (t) => t.component_id === actionId,
+    )?.action_id;
+
+    if (!resolvedActionId) {
+      console.warn(
+        `[Workflow] onActionTriggered: no trigger entry found for component "${actionId}" on step "${current.stepId}"`,
+      );
+      onActionTriggered?.(actionId);
+      return;
+    }
+
+    const triggerAction = currentStep.trigger_actions[resolvedActionId];
+    if (!triggerAction) {
+      console.warn(
+        `[Workflow] onActionTriggered: no trigger_action found for action_id "${resolvedActionId}" on step "${current.stepId}"`,
+      );
+      onActionTriggered?.(actionId);
+      return;
+    }
+
+    if (!isStepTriggerAction(triggerAction)) {
+      // Condition-based actions require a full workflow engine — fall back to
+      // the host's onActionTriggered for anything we can't resolve client-side.
+      console.warn(
+        `[Workflow] onActionTriggered: trigger_action is not a simple step action, falling back to onActionTriggered`,
+      );
+      onActionTriggered?.(actionId);
+      return;
+    }
+
+    const nextStep = workflow.steps[triggerAction.step_id];
+    if (!nextStep) {
+      console.warn(
+        `[Workflow] onActionTriggered: step_id "${triggerAction.step_id}" not found in workflow steps`,
+      );
       return;
     }
-    navStack = [...navStack, pageId];
+
+    const nextPageId = nextStep.screen_id;
+    if (!nextPageId) {
+      console.warn(
+        `[Workflow] onActionTriggered: step "${triggerAction.step_id}" has no screen_id (logic/experiment step?)`,
+      );
+      return;
+    }
+
+    if (!workflow.pages[nextPageId]) {
+      console.warn(
+        `[Workflow] onActionTriggered: screen_id "${nextPageId}" not found in workflow pages`,
+      );
+      return;
+    }
+
+    const fromStepId = current.stepId;
+    const toStepId = triggerAction.step_id;
+    emitStepChange({
+      workflowId: workflow.workflowId,
+      stepId: fromStepId,
+      fromStepId: undefined,
+      toStepId,
+      reason: "completed",
+      ...stepFlags(fromStepId),
+    });
+    navStack = [...navStack, { pageId: nextPageId, stepId: toStepId }];
+    emitStepChange({
+      workflowId: workflow.workflowId,
+      stepId: toStepId,
+      fromStepId,
+      toStepId: undefined,
+      reason: "forward",
+      ...stepFlags(toStepId),
+    });
   }
 
   function handleBackClicked() {
     if (navStack.length > 1) {
+      const fromStepId = current.stepId;
+      const toStepId = navStack[navStack.length - 2].stepId;
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: fromStepId,
+        fromStepId: undefined,
+        toStepId,
+        reason: "completed",
+        ...stepFlags(fromStepId),
+      });
       navStack = navStack.slice(0, -1);
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: toStepId,
+        fromStepId,
+        toStepId: undefined,
+        reason: "back",
+        ...stepFlags(toStepId),
+      });
     } else {
       // Already at root — bubble up to the host.
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: current.stepId,
+        fromStepId: undefined,
+        toStepId: undefined,
+        reason: "completed",
+        ...stepFlags(current.stepId),
+      });
       onExitBack?.();
     }
   }
 </script>
 
-{#key currentPageId}
+{#key current.pageId}
   <Screen
     paywallComponents={currentScreen}
     {uiConfig}
@@ -124,7 +301,7 @@
     {walletButtonRender}
     {safeAreaFallbackColor}
     {onPurchaseClicked}
-    {onActionTriggered}
+    onActionTriggered={handleActionTriggered}
     {onInputChanged}
     {onReservedAttributeChanged}
     {onCompleteWorkflowNavigate}
@@ -132,8 +309,17 @@
     {onRestorePurchasesClicked}
     {onVisitCustomerCenterClicked}
     {onComponentInteraction}
-    onNavigateToPage={handleNavigateToPage}
     onBackClicked={handleBackClicked}
-    {onClose}
+    onClose={() => {
+      emitStepChange({
+        workflowId: workflow.workflowId,
+        stepId: current.stepId,
+        fromStepId: undefined,
+        toStepId: undefined,
+        reason: "completed",
+        ...stepFlags(current.stepId),
+      });
+      onClose?.();
+    }}
   />
 {/key}

package/dist/components/workflows/Workflow.svelte.d.ts

@@ -6,7 +6,7 @@ import type { VariableDictionary } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
-import type { WorkflowNavData } from "../../types/workflow-nav";
+import type { WorkflowNavData, WorkflowStepChangeEvent } from "../../types/workflow-nav";
 interface Props {
     workflow: WorkflowNavData;
     uiConfig: UIConfig;
@@ -29,6 +29,12 @@ interface Props {
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;
+    /**
+     * Called whenever the current workflow step changes — on initial load,
+     * forward navigation, back navigation, and when leaving a step (close,
+     * purchase, error). Used by the host to fire workflow lifecycle events.
+     */
+    onStepChanged?: (event: WorkflowStepChangeEvent) => void;
 }
 declare const Workflow: import("svelte").Component<Props, {}, "">;
 type Workflow = ReturnType<typeof Workflow>;

package/dist/components/workflows/fixtures/two-page-workflow.d.ts

@@ -1,12 +1,10 @@
 import type { WorkflowNavData } from "../../../types/workflow-nav";
 /**
- * Two-page workflow fixture that exercises navigate_to_page, navigate_back,
- * and close_workflow button actions via the Workflow component.
+ * Two-page workflow fixture. The "Next" button uses a "workflow" action, whose
+ * destination is resolved client-side via the step's trigger_actions map.
  *
  * Page layout:
- *   "rcpaywall_welcome" — welcome screen with a "Next →" navigate_to_page button
+ *   "rcpaywall_welcome" — welcome screen with a "Next →" button
  *   "rcpaywall_details" — details screen with "← Back" and "✕ Close" buttons
- *
- * Page IDs match a paywall rc_public_id as they would in a real SDK response.
  */
 export declare const TWO_PAGE_WORKFLOW: WorkflowNavData;

package/dist/components/workflows/fixtures/two-page-workflow.js

@@ -1,15 +1,49 @@
 /**
- * Two-page workflow fixture that exercises navigate_to_page, navigate_back,
- * and close_workflow button actions via the Workflow component.
+ * Two-page workflow fixture. The "Next" button uses a "workflow" action, whose
+ * destination is resolved client-side via the step's trigger_actions map.
  *
  * Page layout:
- *   "rcpaywall_welcome" — welcome screen with a "Next →" navigate_to_page button
+ *   "rcpaywall_welcome" — welcome screen with a "Next →" button
  *   "rcpaywall_details" — details screen with "← Back" and "✕ Close" buttons
- *
- * Page IDs match a paywall rc_public_id as they would in a real SDK response.
  */
 export const TWO_PAGE_WORKFLOW = {
+    workflowId: "wf_two_page_fixture",
     initial_page_id: "rcpaywall_welcome",
+    initial_step_id: "step_welcome",
+    steps: {
+        step_welcome: {
+            id: "step_welcome",
+            screen_id: "rcpaywall_welcome",
+            type: "screen",
+            param_values: {},
+            trigger_actions: {
+                // "next_btn" is the action_id referenced by the triggers array entry
+                // for the "next_btn" button component. It resolves to step_details,
+                // whose screen_id is rcpaywall_details.
+                next_btn: { type: "step", step_id: "step_details" },
+            },
+            triggers: [
+                {
+                    action_id: "next_btn",
+                    component_id: "next_btn",
+                    type: "on_press",
+                    name: "Next button",
+                },
+            ],
+            outputs: {},
+            metadata: null,
+        },
+        step_details: {
+            id: "step_details",
+            screen_id: "rcpaywall_details",
+            type: "screen",
+            param_values: {},
+            trigger_actions: {},
+            triggers: [],
+            outputs: {},
+            metadata: null,
+        },
+    },
     pages: {
         rcpaywall_welcome: {
             id: "rcpaywall_welcome",
@@ -58,7 +92,6 @@ export const TWO_PAGE_WORKFLOW = {
                         shadow: null,
                         shape: null,
                         components: [
-                            // ── Title ────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "welcome_title",
@@ -79,7 +112,6 @@ export const TWO_PAGE_WORKFLOW = {
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── Body ─────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "welcome_body",
@@ -100,15 +132,11 @@ export const TWO_PAGE_WORKFLOW = {
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── navigate_to_page button ───────────────────────────
                             {
                                 type: "button",
                                 id: "next_btn",
                                 name: "Next",
-                                action: {
-                                    type: "navigate_to_page",
-                                    page_id: "rcpaywall_details",
-                                },
+                                action: { type: "workflow" },
                                 stack: {
                                     type: "stack",
                                     id: "next_btn_stack",
@@ -121,7 +149,12 @@ export const TWO_PAGE_WORKFLOW = {
                                     },
                                     spacing: 0,
                                     margin: { top: 0, bottom: 0, leading: 24, trailing: 24 },
-                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    padding: {
+                                        top: 16,
+                                        bottom: 16,
+                                        leading: 24,
+                                        trailing: 24,
+                                    },
                                     background: {
                                         type: "color",
                                         value: {
@@ -187,8 +220,8 @@ export const TWO_PAGE_WORKFLOW = {
                     background: {
                         type: "color",
                         value: {
-                            light: { type: "hex", value: "#fff4f0ff" },
-                            dark: { type: "hex", value: "#2e1a1aff" },
+                            light: { type: "hex", value: "#f0fff4ff" },
+                            dark: { type: "hex", value: "#1a2e1aff" },
                         },
                     },
                     stack: {
@@ -211,7 +244,6 @@ export const TWO_PAGE_WORKFLOW = {
                         shadow: null,
                         shape: null,
                         components: [
-                            // ── Title ────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "details_title",
@@ -224,15 +256,14 @@ export const TWO_PAGE_WORKFLOW = {
                                 margin: { top: 80, bottom: 16, leading: 24, trailing: 24 },
                                 padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
                                 color: {
-                                    light: { type: "hex", value: "#2e1a1aff" },
-                                    dark: { type: "hex", value: "#fff4f0ff" },
+                                    light: { type: "hex", value: "#1a2e1aff" },
+                                    dark: { type: "hex", value: "#f0fff4ff" },
                                 },
                                 background_color: {
                                     light: { type: "hex", value: "transparent" },
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── Body ─────────────────────────────────────────────────
                             {
                                 type: "text",
                                 id: "details_body",
@@ -245,15 +276,14 @@ export const TWO_PAGE_WORKFLOW = {
                                 margin: { top: 0, bottom: 48, leading: 24, trailing: 24 },
                                 padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
                                 color: {
-                                    light: { type: "hex", value: "#775555ff" },
-                                    dark: { type: "hex", value: "#ccaaaaff" },
+                                    light: { type: "hex", value: "#337733ff" },
+                                    dark: { type: "hex", value: "#88cc88ff" },
                                 },
                                 background_color: {
                                     light: { type: "hex", value: "transparent" },
                                     dark: { type: "hex", value: "transparent" },
                                 },
                             },
-                            // ── navigate_back button ──────────────────────────────
                             {
                                 type: "button",
                                 id: "back_btn",
@@ -271,7 +301,12 @@ export const TWO_PAGE_WORKFLOW = {
                                     },
                                     spacing: 0,
                                     margin: { top: 0, bottom: 12, leading: 24, trailing: 24 },
-                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    padding: {
+                                        top: 16,
+                                        bottom: 16,
+                                        leading: 24,
+                                        trailing: 24,
+                                    },
                                     background: {
                                         type: "color",
                                         value: {
@@ -314,7 +349,6 @@ export const TWO_PAGE_WORKFLOW = {
                                     ],
                                 },
                             },
-                            // ── close button ──────────────────────────────────────
                             {
                                 type: "button",
                                 id: "close_btn",
@@ -332,7 +366,12 @@ export const TWO_PAGE_WORKFLOW = {
                                     },
                                     spacing: 0,
                                     margin: { top: 0, bottom: 40, leading: 24, trailing: 24 },
-                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    padding: {
+                                        top: 16,
+                                        bottom: 16,
+                                        leading: 24,
+                                        trailing: 24,
+                                    },
                                     background: {
                                         type: "color",
                                         value: {

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { default as Workflow } from "./components/workflows/Workflow.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
-export { type WorkflowNavData, workflowDataToNavData, } from "./types/workflow-nav";
+export { type WorkflowNavData, type WorkflowStepChangeEvent, workflowDataToNavData, } from "./types/workflow-nav";
 export { type WorkflowData, type WorkflowStep } from "./types/workflow";
 export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";

package/dist/types/components/button.d.ts

@@ -11,10 +11,6 @@ interface RestorePurchasesAction {
 interface NavigateBackAction {
     type: "navigate_back";
 }
-interface NavigateToPageAction {
-    type: "navigate_to_page";
-    page_id: string;
-}
 interface CloseAction {
     type: "close_workflow";
 }
@@ -60,15 +56,12 @@ interface CompleteWorkflowAction {
     };
     url_query_params?: CompleteWorkflowUrlQueryParams;
 }
-export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToPageAction | CloseAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
+export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | CloseAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
 export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;
     stack: StackProps;
     transition?: null;
-    triggers?: {
-        on_press?: string;
-    };
     overrides?: Overrides<ButtonProps>;
 }
 export {};

package/dist/types/paywall-component-interaction.d.ts

@@ -16,7 +16,7 @@ interface PackageTransition {
     destinationPackageId: string;
     defaultPackageId?: string;
 }
-type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "navigate_to_page" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
+type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
 export type TabInteractionData = ComponentInteractionBase<"tab"> & IndexedTransition;
 export type SwitchInteractionData = ComponentInteractionBase<"switch", "on" | "off">;
 export type CarouselInteractionData = ComponentInteractionBase<"carousel"> & IndexedTransition;

package/dist/types/workflow-nav.d.ts

@@ -1,27 +1,50 @@
-import type { WorkflowData, WorkflowScreen } from "./workflow";
+import type { WorkflowData, WorkflowScreen, WorkflowStep } from "./workflow";
+export interface WorkflowStepChangeEvent {
+    workflowId: string;
+    stepId: string;
+    fromStepId: string | undefined;
+    toStepId: string | undefined;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    /**
+     * Why this event was emitted:
+     * - `"start"` / `"forward"` / `"back"` — step is being entered (fire step_started)
+     * - `"completed"` — step is being left (fire step_completed); toStepId is set
+     *   for forward nav, undefined when the workflow is dismissed/closed.
+     */
+    reason: "start" | "forward" | "back" | "completed";
+}
 /**
  * A self-contained multi-page workflow payload for use with the Workflow
  * component. This mirrors the shape of rc-workflows' WorkflowData but only
- * includes the fields needed for client-side page navigation — it does NOT
- * include step trigger_actions or experiment logic, which remain rc-workflows
- * concerns.
+ * includes the fields needed for client-side page navigation.
  */
 export interface WorkflowNavData {
+    /** The workflow's unique identifier. */
+    workflowId: string;
     /** ID of the first page to display. Must be a key in `pages`. */
     initial_page_id: string;
     /**
-     * All pages in this workflow keyed by page ID (the screen's rc_public_id).
-     * `navigate_to_page` actions reference these IDs directly.
+     * All pages in this workflow keyed by screen ID.
+     * Workflow step actions resolve to these IDs via `steps[stepId].screen_id`.
      */
     pages: Record<string, WorkflowScreen>;
+    /**
+     * All steps in this workflow keyed by step ID.
+     * Used to resolve `workflow`-type button actions: the button's component ID
+     * is looked up in the current step's `triggers` array to get an action_id,
+     * which maps to a `trigger_actions` entry pointing to the next step_id,
+     * whose screen_id is then used to navigate to the correct page.
+     */
+    steps: Record<string, WorkflowStep>;
+    /** The step ID of the first step, corresponding to `initial_page_id`. */
+    initial_step_id: string;
 }
 /**
  * Map a full `WorkflowData` SDK response to the `WorkflowNavData` shape
  * consumed by the `Workflow` component.
  *
- * - `pages` is taken directly from `WorkflowData.screens` (already keyed by
- *   screen/paywall rc_public_id, which is what `navigate_to_page` page_ids
- *   reference).
+ * - `pages` is taken directly from `WorkflowData.screens`, keyed by screen ID.
  * - `initial_page_id` is resolved by looking up the screen_id of the initial
  *   step, since `initial_step_id` is a step ID, not a screen ID.
  *

package/dist/types/workflow-nav.js

@@ -2,9 +2,7 @@
  * Map a full `WorkflowData` SDK response to the `WorkflowNavData` shape
  * consumed by the `Workflow` component.
  *
- * - `pages` is taken directly from `WorkflowData.screens` (already keyed by
- *   screen/paywall rc_public_id, which is what `navigate_to_page` page_ids
- *   reference).
+ * - `pages` is taken directly from `WorkflowData.screens`, keyed by screen ID.
  * - `initial_page_id` is resolved by looking up the screen_id of the initial
  *   step, since `initial_step_id` is a step ID, not a screen ID.
  *
@@ -26,9 +24,12 @@ export function workflowDataToNavData(data) {
         return null;
     }
     return {
+        workflowId: data.id,
         initial_page_id: initialPageId,
-        // Shared by reference intentionally — screens are never mutated after
+        initial_step_id: data.initial_step_id,
+        // Shared by reference intentionally — screens/steps are never mutated after
         // WorkflowData is received from the SDK, so a copy would be wasteful.
         pages: data.screens,
+        steps: data.steps,
     };
 }

package/dist/types/workflow.d.ts

@@ -13,6 +13,27 @@ export interface WorkflowScreen extends PaywallData {
     revision: number;
     template_name: string;
 }
+/**
+ * A trigger action that navigates directly to another step.
+ */
+export interface WorkflowStepTriggerAction {
+    type: "step";
+    step_id: string;
+}
+/**
+ * An entry in a step's `triggers` array that maps a component interaction
+ * (e.g. button press) to a named action_id, which in turn maps to a
+ * `trigger_actions` entry.
+ */
+export interface WorkflowStepTrigger {
+    /** The action ID to look up in `trigger_actions`. */
+    action_id: string;
+    /** The component (e.g. button) id that fires this trigger. */
+    component_id: string;
+    /** The interaction type, e.g. "on_press". */
+    type: string;
+    name?: string;
+}
 /**
  * A single step in a workflow, referencing a screen by ID.
  * Aligns with the SDK response shape from khepri.
@@ -22,8 +43,19 @@ export interface WorkflowStep {
     screen_id?: string;
     type: string;
     param_values: Record<string, unknown>;
-    trigger_actions: Record<string, unknown>;
-    triggers: Record<string, unknown>;
+    /**
+     * Maps action IDs (from `triggers[].action_id`) to the next step to navigate
+     * to. Currently only `type: "step"` is supported for client-side resolution;
+     * condition-based actions are ignored.
+     */
+    trigger_actions: Record<string, WorkflowStepTriggerAction | Record<string, unknown>>;
+    /**
+     * Array of trigger entries mapping component interactions to action IDs.
+     * Resolve a button press by matching its component `id` against
+     * `component_id`, then use the entry's `action_id` to look up
+     * `trigger_actions`.
+     */
+    triggers: WorkflowStepTrigger[];
     outputs: Record<string, unknown>;
     metadata: Record<string, unknown> | null;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.7.6",
+  "version": "4.8.1",
   "author": {
     "name": "RevenueCat, Inc."
   },