@revenuecat/purchases-ui-js 4.5.2 → 4.7.0

package/dist/components/button/ButtonNode.svelte

@@ -13,6 +13,10 @@
   import { readable } from "svelte/store";
 
   const props: ButtonProps = $props();
+  type SheetAction = Extract<
+    ButtonProps["action"],
+    { type: "navigate_to"; destination: "sheet" }
+  >;
 
   const selectedState = getSelectedStateContext();
   const { action } = $derived.by(() => {
@@ -63,6 +67,18 @@
           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",
+          componentName: props.name,
+          componentValue: "close_workflow",
+        };
       case "restore_purchases":
         return {
           componentType: "button",
@@ -122,28 +138,28 @@
     }
   };
 
-  const getSheetOpenInteractionData =
-    (): PackageSelectionSheetInteractionData => ({
-      componentType: "package_selection_sheet",
-      componentName: action.sheet?.name ?? props.name,
-      componentValue: "open",
-      currentPackageId: $selectedPackageId,
-    });
+  const getSheetOpenInteractionData = (
+    sheetAction: SheetAction,
+  ): PackageSelectionSheetInteractionData => ({
+    componentType: "package_selection_sheet",
+    componentName: sheetAction.sheet?.name ?? props.name,
+    componentValue: "open",
+    currentPackageId: $selectedPackageId,
+  });
 
   const onclick = () => {
     if (isDisabled) return;
     const actionId = props.triggers?.on_press;
-    const isSheetAction =
-      action.type === "navigate_to" && action.destination === "sheet";
-    const isSheetOpenAction = isSheetAction && action.sheet != null;
-    const isSheetCloseAction = isSheetAction && action.sheet == null;
+    if (action.type === "navigate_to" && action.destination === "sheet") {
+      if (action.sheet != null) {
+        emitComponentInteraction(getSheetOpenInteractionData(action));
+      }
 
-    if (isSheetOpenAction) {
-      emitComponentInteraction(getSheetOpenInteractionData());
-    } else if (!isSheetCloseAction) {
-      emitComponentInteraction(getButtonInteractionData());
+      onButtonAction(action, actionId);
+      return;
     }
 
+    emitComponentInteraction(getButtonInteractionData());
     onButtonAction(action, actionId);
   };
 
@@ -157,6 +173,10 @@
         return false;
       case "navigate_back":
         return !hideBackButtons;
+      case "navigate_to_page":
+        return true;
+      case "close_workflow":
+        return true;
       case "navigate_to":
         return action.destination !== "web_paywall_link";
       default:

package/dist/components/input-text/InputText.svelte

@@ -46,6 +46,7 @@
     size,
     padding,
     margin,
+    vertical_alignment,
     border,
     shape,
     shadow,
@@ -107,9 +108,18 @@
   } = getPaywallContext();
   const packageInfo = getOptionalPackageInfoContext();
 
+  const verticalAlignItems = $derived(
+    vertical_alignment === "top"
+      ? "flex-start"
+      : vertical_alignment === "bottom"
+        ? "flex-end"
+        : null,
+  );
+
   const wrapperStyle = $derived(
     css({
       display: "flex",
+      ...(verticalAlignItems ? { "align-items": verticalAlignItems } : {}),
       width: mapSize(size.width),
       height: mapSize(size.height),
       margin: mapSpacing(margin),
@@ -128,6 +138,7 @@
     const placeholderColor = mapTextColor(colorMode, placeholder_color);
 
     return css({
+      ...(verticalAlignItems ? { height: "auto" } : {}),
       padding: mapSpacing(padding),
       ...mapTextColor(colorMode, color),
       "text-align":

package/dist/components/paywall/Node.svelte

@@ -33,6 +33,11 @@
     nodeData: Component;
   }
 
+  type RenderableComponent = Exclude<
+    Component,
+    { type: "tab" | "fallback_header" }
+  >;
+
   const ComponentTypes = {
     button: ButtonNode,
     carousel: Carousel,
@@ -60,11 +65,15 @@
     video: Video,
     wallet_button: WalletButton,
   } satisfies {
-    [key in Component["type"]]: SvelteComponent<
-      Extract<Component, { type: key }>
+    [key in RenderableComponent["type"]]: SvelteComponent<
+      Extract<RenderableComponent, { type: key }>
     >;
   };
 
+  const isRenderableComponent = (
+    component: Component,
+  ): component is RenderableComponent => component.type in ComponentTypes;
+
   /**
    * This function returns the component class and the node data for a given paywall component.
    * It first checks if the component type is supported and returns the corresponding component class.
@@ -79,7 +88,7 @@
   ) => [SvelteComponent<Component>, Component] | undefined = (
     nodeData: Component,
   ) => {
-    if (ComponentTypes[nodeData.type]) {
+    if (isRenderableComponent(nodeData)) {
       return [
         ComponentTypes[nodeData.type] as SvelteComponent<Component>,
         nodeData,
@@ -91,7 +100,7 @@
     }
 
     const { fallback } = nodeData;
-    if (fallback && ComponentTypes[fallback?.type]) {
+    if (fallback && isRenderableComponent(fallback)) {
       return [
         ComponentTypes[fallback.type] as SvelteComponent<Component>,
         fallback,

package/dist/components/paywall/Paywall.svelte

@@ -71,6 +71,13 @@
     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;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;
@@ -128,6 +135,8 @@
     preferredColorMode,
     onPurchaseClicked,
     onBackClicked,
+    onNavigateToPage,
+    onClose,
     onVisitCustomerCenterClicked,
     onRestorePurchasesClicked,
     onNavigateToUrlClicked,
@@ -239,6 +248,12 @@
       case "navigate_back":
         onBackClicked?.();
         return;
+      case "navigate_to_page":
+        onNavigateToPage?.(action.page_id);
+        return;
+      case "close_workflow":
+        onClose?.();
+        return;
       case "restore_purchases":
         onRestorePurchasesClicked?.();
         return;

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

@@ -28,6 +28,13 @@ 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;
     onRestorePurchasesClicked?: () => void;
     onNavigateToUrlClicked?: (url: string) => void;

package/dist/components/workflows/Screen.svelte

@@ -21,6 +21,8 @@
       actionId: string,
     ) => void | Promise<void>;
     onBackClicked?: () => void;
+    onNavigateToPage?: (pageId: string) => void;
+    onClose?: () => void;
     containerId?: string;
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
@@ -49,6 +51,8 @@
     onComponentInteraction,
     onPurchaseClicked,
     onBackClicked,
+    onNavigateToPage,
+    onClose,
     containerId = "screen-container",
     maxContentWidth,
     variablesPerPackage,
@@ -77,6 +81,8 @@
       {onCompleteWorkflowNavigate}
       onVisitCustomerCenterClicked={() => {}}
       {onBackClicked}
+      {onNavigateToPage}
+      {onClose}
       onRestorePurchasesClicked={() => {}}
       onActionTriggered={(actionId: string) => {
         onActionTriggered?.(actionId);

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

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

package/dist/components/workflows/Workflow.stories.svelte

@@ -0,0 +1,53 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
+
+  import Workflow from "./Workflow.svelte";
+  import { uiConfigData } from "../../stories/fixtures";
+  import { TWO_PAGE_WORKFLOW } from "./fixtures/two-page-workflow";
+
+  const { Story } = defineMeta({
+    title: "Example/Workflow",
+    component: Workflow,
+    render: template,
+    args: {
+      workflow: TWO_PAGE_WORKFLOW,
+      uiConfig: uiConfigData,
+      onClose: () => alert("onClose — workflow dismissed"),
+      onExitBack: () => alert("onExitBack — backed out from root page"),
+      onPurchaseClicked: (packageId: string, actionId: string) =>
+        alert(`onPurchaseClicked — package: ${packageId}, action: ${actionId}`),
+    },
+  });
+</script>
+
+{#snippet template(props: ComponentProps<typeof Workflow>)}
+  <div class="viewport-frame">
+    <div class="content-wrapper">
+      <Workflow {...props} />
+    </div>
+  </div>
+{/snippet}
+
+<Story name="Two-page navigation" />
+
+<style>
+  .viewport-frame {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--rc-purchases-ui-bg-color, Canvas);
+    color-scheme: light dark;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    width: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import Workflow from "./Workflow.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Workflow: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Workflow = InstanceType<typeof Workflow>;
+export default Workflow;

package/dist/components/workflows/Workflow.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import Screen from "./Screen.svelte";
+  import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
+  import type { ColorScheme } from "../../types/colors";
+  import type { InitialInputSelections } from "../../stores/inputValidation";
+  import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
+  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";
+
+  interface Props {
+    workflow: WorkflowNavData;
+    uiConfig: UIConfig;
+    selectedLocale?: string;
+    globalVariables?: VariableDictionary;
+    variablesPerPackage?: Record<string, VariableDictionary>;
+    maxContentWidth?: string;
+    initialInputSelections?: InitialInputSelections;
+    containerId?: string;
+    walletButtonRender?: WalletButtonRender;
+    safeAreaFallbackColor?: ColorScheme | null;
+    onPurchaseClicked?: (
+      packageId: string,
+      actionId: string,
+    ) => void | Promise<void>;
+    onActionTriggered?: (actionId: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
+    onReservedAttributeChanged?: (
+      reservedAttribute: ReservedAttribute,
+      value: string,
+    ) => void;
+    onCompleteWorkflowNavigate?: (
+      args: CompleteWorkflowNavigateArgs,
+    ) => void | Promise<void>;
+    onComponentInteraction?: OnComponentInteraction;
+    onClose?: () => void;
+    onExitBack?: () => void;
+  }
+
+  const {
+    workflow,
+    uiConfig,
+    selectedLocale,
+    globalVariables,
+    variablesPerPackage,
+    maxContentWidth,
+    initialInputSelections,
+    containerId,
+    walletButtonRender,
+    safeAreaFallbackColor,
+    onPurchaseClicked,
+    onActionTriggered,
+    onInputChanged,
+    onReservedAttributeChanged,
+    onCompleteWorkflowNavigate,
+    onComponentInteraction,
+    onClose,
+    onExitBack,
+  }: 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.
+  //
+  // 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[]>([]);
+  let trackedInitialPageId = $state<string>();
+
+  const currentPageId = $derived(
+    navStack[navStack.length - 1] ?? workflow.initial_page_id,
+  );
+  const currentScreen = $derived(workflow.pages[currentPageId]);
+
+  $effect.pre(() => {
+    if (trackedInitialPageId !== workflow.initial_page_id) {
+      trackedInitialPageId = workflow.initial_page_id;
+      navStack = [workflow.initial_page_id];
+    }
+  });
+
+  function handleNavigateToPage(pageId: string) {
+    if (!workflow.pages[pageId]) {
+      console.warn(`[Workflow] navigate_to_page: unknown page_id "${pageId}"`);
+      return;
+    }
+    navStack = [...navStack, pageId];
+  }
+
+  function handleBackClicked() {
+    if (navStack.length > 1) {
+      navStack = navStack.slice(0, -1);
+    } else {
+      // Already at root — bubble up to the host.
+      onExitBack?.();
+    }
+  }
+</script>
+
+{#key currentPageId}
+  <Screen
+    paywallComponents={currentScreen}
+    {uiConfig}
+    {selectedLocale}
+    {globalVariables}
+    {variablesPerPackage}
+    {maxContentWidth}
+    {initialInputSelections}
+    {containerId}
+    {walletButtonRender}
+    {safeAreaFallbackColor}
+    {onPurchaseClicked}
+    {onActionTriggered}
+    {onInputChanged}
+    {onReservedAttributeChanged}
+    {onCompleteWorkflowNavigate}
+    {onComponentInteraction}
+    onNavigateToPage={handleNavigateToPage}
+    onBackClicked={handleBackClicked}
+    {onClose}
+  />
+{/key}

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

@@ -0,0 +1,32 @@
+import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
+import type { ColorScheme } from "../../types/colors";
+import type { InitialInputSelections } from "../../stores/inputValidation";
+import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
+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";
+interface Props {
+    workflow: WorkflowNavData;
+    uiConfig: UIConfig;
+    selectedLocale?: string;
+    globalVariables?: VariableDictionary;
+    variablesPerPackage?: Record<string, VariableDictionary>;
+    maxContentWidth?: string;
+    initialInputSelections?: InitialInputSelections;
+    containerId?: string;
+    walletButtonRender?: WalletButtonRender;
+    safeAreaFallbackColor?: ColorScheme | null;
+    onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
+    onActionTriggered?: (actionId: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+    onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
+    onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
+    onComponentInteraction?: OnComponentInteraction;
+    onClose?: () => void;
+    onExitBack?: () => void;
+}
+declare const Workflow: import("svelte").Component<Props, {}, "">;
+type Workflow = ReturnType<typeof Workflow>;
+export default Workflow;

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

@@ -0,0 +1,12 @@
+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.
+ *
+ * Page layout:
+ *   "rcpaywall_welcome" — welcome screen with a "Next →" navigate_to_page 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

@@ -0,0 +1,378 @@
+/**
+ * Two-page workflow fixture that exercises navigate_to_page, navigate_back,
+ * and close_workflow button actions via the Workflow component.
+ *
+ * Page layout:
+ *   "rcpaywall_welcome" — welcome screen with a "Next →" navigate_to_page 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 = {
+    initial_page_id: "rcpaywall_welcome",
+    pages: {
+        rcpaywall_welcome: {
+            id: "rcpaywall_welcome",
+            default_locale: "en_US",
+            name: "Welcome",
+            template_name: "stack",
+            revision: 1,
+            asset_base_url: "https://assets.pawwalls.com",
+            config: {},
+            localized_strings: {},
+            localized_strings_by_tier: {},
+            offering_id: null,
+            components_localizations: {
+                en_US: {
+                    welcome_title: "Welcome",
+                    welcome_body: "This is page 1 of 2. Tap the button below to navigate to page 2.",
+                    next_btn: "Next →",
+                },
+            },
+            components_config: {
+                base: {
+                    background: {
+                        type: "color",
+                        value: {
+                            light: { type: "hex", value: "#f0f4ffff" },
+                            dark: { type: "hex", value: "#1a1f2eff" },
+                        },
+                    },
+                    stack: {
+                        type: "stack",
+                        id: "welcome_root",
+                        name: "Root",
+                        size: { width: { type: "fill" }, height: { type: "fill" } },
+                        dimension: {
+                            type: "vertical",
+                            alignment: "center",
+                            distribution: "start",
+                        },
+                        spacing: 0,
+                        margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                        padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                        background: null,
+                        background_color: null,
+                        badge: null,
+                        border: null,
+                        shadow: null,
+                        shape: null,
+                        components: [
+                            // ── Title ────────────────────────────────────────────────
+                            {
+                                type: "text",
+                                id: "welcome_title",
+                                name: "Title",
+                                text_lid: "welcome_title",
+                                font_size: "heading_xl",
+                                font_weight: "bold",
+                                horizontal_alignment: "center",
+                                size: { width: { type: "fill" }, height: { type: "fit" } },
+                                margin: { top: 80, bottom: 16, leading: 24, trailing: 24 },
+                                padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                color: {
+                                    light: { type: "hex", value: "#1a1f2eff" },
+                                    dark: { type: "hex", value: "#f0f4ffff" },
+                                },
+                                background_color: {
+                                    light: { type: "hex", value: "transparent" },
+                                    dark: { type: "hex", value: "transparent" },
+                                },
+                            },
+                            // ── Body ─────────────────────────────────────────────────
+                            {
+                                type: "text",
+                                id: "welcome_body",
+                                name: "Body",
+                                text_lid: "welcome_body",
+                                font_size: "body_m",
+                                font_weight: "regular",
+                                horizontal_alignment: "center",
+                                size: { width: { type: "fill" }, height: { type: "fit" } },
+                                margin: { top: 0, bottom: 48, leading: 24, trailing: 24 },
+                                padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                color: {
+                                    light: { type: "hex", value: "#555577ff" },
+                                    dark: { type: "hex", value: "#aaaaccff" },
+                                },
+                                background_color: {
+                                    light: { type: "hex", value: "transparent" },
+                                    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",
+                                },
+                                stack: {
+                                    type: "stack",
+                                    id: "next_btn_stack",
+                                    name: "Next button stack",
+                                    size: { width: { type: "fill" }, height: { type: "fit" } },
+                                    dimension: {
+                                        type: "horizontal",
+                                        alignment: "center",
+                                        distribution: "center",
+                                    },
+                                    spacing: 0,
+                                    margin: { top: 0, bottom: 0, leading: 24, trailing: 24 },
+                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    background: {
+                                        type: "color",
+                                        value: {
+                                            light: { type: "hex", value: "#3366ffff" },
+                                            dark: { type: "hex", value: "#4d7fffff" },
+                                        },
+                                    },
+                                    background_color: null,
+                                    badge: null,
+                                    border: null,
+                                    shadow: null,
+                                    shape: { type: "pill" },
+                                    components: [
+                                        {
+                                            type: "text",
+                                            id: "next_btn_text",
+                                            name: "next_btn_text",
+                                            text_lid: "next_btn",
+                                            font_size: "body_m",
+                                            font_weight: "medium",
+                                            horizontal_alignment: "center",
+                                            size: { width: { type: "fit" }, height: { type: "fit" } },
+                                            margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                            padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                            color: {
+                                                light: { type: "hex", value: "#ffffffff" },
+                                                dark: { type: "hex", value: "#ffffffff" },
+                                            },
+                                            background_color: {
+                                                light: { type: "hex", value: "transparent" },
+                                                dark: { type: "hex", value: "transparent" },
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+        rcpaywall_details: {
+            id: "rcpaywall_details",
+            default_locale: "en_US",
+            name: "Details",
+            template_name: "stack",
+            revision: 1,
+            asset_base_url: "https://assets.pawwalls.com",
+            config: {},
+            localized_strings: {},
+            localized_strings_by_tier: {},
+            offering_id: null,
+            components_localizations: {
+                en_US: {
+                    details_title: "Details",
+                    details_body: "This is page 2 of 2. Use the buttons below to navigate back or close the workflow entirely.",
+                    back_btn: "← Back",
+                    close_btn: "✕ Close",
+                },
+            },
+            components_config: {
+                base: {
+                    background: {
+                        type: "color",
+                        value: {
+                            light: { type: "hex", value: "#fff4f0ff" },
+                            dark: { type: "hex", value: "#2e1a1aff" },
+                        },
+                    },
+                    stack: {
+                        type: "stack",
+                        id: "details_root",
+                        name: "Root",
+                        size: { width: { type: "fill" }, height: { type: "fill" } },
+                        dimension: {
+                            type: "vertical",
+                            alignment: "center",
+                            distribution: "start",
+                        },
+                        spacing: 0,
+                        margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                        padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                        background: null,
+                        background_color: null,
+                        badge: null,
+                        border: null,
+                        shadow: null,
+                        shape: null,
+                        components: [
+                            // ── Title ────────────────────────────────────────────────
+                            {
+                                type: "text",
+                                id: "details_title",
+                                name: "Title",
+                                text_lid: "details_title",
+                                font_size: "heading_xl",
+                                font_weight: "bold",
+                                horizontal_alignment: "center",
+                                size: { width: { type: "fill" }, height: { type: "fit" } },
+                                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" },
+                                },
+                                background_color: {
+                                    light: { type: "hex", value: "transparent" },
+                                    dark: { type: "hex", value: "transparent" },
+                                },
+                            },
+                            // ── Body ─────────────────────────────────────────────────
+                            {
+                                type: "text",
+                                id: "details_body",
+                                name: "Body",
+                                text_lid: "details_body",
+                                font_size: "body_m",
+                                font_weight: "regular",
+                                horizontal_alignment: "center",
+                                size: { width: { type: "fill" }, height: { type: "fit" } },
+                                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" },
+                                },
+                                background_color: {
+                                    light: { type: "hex", value: "transparent" },
+                                    dark: { type: "hex", value: "transparent" },
+                                },
+                            },
+                            // ── navigate_back button ──────────────────────────────
+                            {
+                                type: "button",
+                                id: "back_btn",
+                                name: "Back",
+                                action: { type: "navigate_back" },
+                                stack: {
+                                    type: "stack",
+                                    id: "back_btn_stack",
+                                    name: "Back button stack",
+                                    size: { width: { type: "fill" }, height: { type: "fit" } },
+                                    dimension: {
+                                        type: "horizontal",
+                                        alignment: "center",
+                                        distribution: "center",
+                                    },
+                                    spacing: 0,
+                                    margin: { top: 0, bottom: 12, leading: 24, trailing: 24 },
+                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    background: {
+                                        type: "color",
+                                        value: {
+                                            light: { type: "hex", value: "transparent" },
+                                            dark: { type: "hex", value: "transparent" },
+                                        },
+                                    },
+                                    background_color: null,
+                                    badge: null,
+                                    border: {
+                                        width: 1.5,
+                                        color: {
+                                            light: { type: "hex", value: "#3366ffff" },
+                                            dark: { type: "hex", value: "#4d7fffff" },
+                                        },
+                                    },
+                                    shadow: null,
+                                    shape: { type: "pill" },
+                                    components: [
+                                        {
+                                            type: "text",
+                                            id: "back_btn_text",
+                                            name: "back_btn_text",
+                                            text_lid: "back_btn",
+                                            font_size: "body_m",
+                                            font_weight: "medium",
+                                            horizontal_alignment: "center",
+                                            size: { width: { type: "fit" }, height: { type: "fit" } },
+                                            margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                            padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                            color: {
+                                                light: { type: "hex", value: "#3366ffff" },
+                                                dark: { type: "hex", value: "#4d7fffff" },
+                                            },
+                                            background_color: {
+                                                light: { type: "hex", value: "transparent" },
+                                                dark: { type: "hex", value: "transparent" },
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            // ── close button ──────────────────────────────────────
+                            {
+                                type: "button",
+                                id: "close_btn",
+                                name: "Close",
+                                action: { type: "close_workflow" },
+                                stack: {
+                                    type: "stack",
+                                    id: "close_btn_stack",
+                                    name: "Close button stack",
+                                    size: { width: { type: "fill" }, height: { type: "fit" } },
+                                    dimension: {
+                                        type: "horizontal",
+                                        alignment: "center",
+                                        distribution: "center",
+                                    },
+                                    spacing: 0,
+                                    margin: { top: 0, bottom: 40, leading: 24, trailing: 24 },
+                                    padding: { top: 16, bottom: 16, leading: 24, trailing: 24 },
+                                    background: {
+                                        type: "color",
+                                        value: {
+                                            light: { type: "hex", value: "#ff3b30ff" },
+                                            dark: { type: "hex", value: "#ff453aff" },
+                                        },
+                                    },
+                                    background_color: null,
+                                    badge: null,
+                                    border: null,
+                                    shadow: null,
+                                    shape: { type: "pill" },
+                                    components: [
+                                        {
+                                            type: "text",
+                                            id: "close_btn_text",
+                                            name: "close_btn_text",
+                                            text_lid: "close_btn",
+                                            font_size: "body_m",
+                                            font_weight: "medium",
+                                            horizontal_alignment: "center",
+                                            size: { width: { type: "fit" }, height: { type: "fit" } },
+                                            margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                            padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+                                            color: {
+                                                light: { type: "hex", value: "#ffffffff" },
+                                                dark: { type: "hex", value: "#ffffffff" },
+                                            },
+                                            background_color: {
+                                                light: { type: "hex", value: "transparent" },
+                                                dark: { type: "hex", value: "transparent" },
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    },
+};

package/dist/index.d.ts

@@ -13,9 +13,12 @@ export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
 export { default as Screen } from "./components/workflows/Screen.svelte";
+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 WorkflowData, type WorkflowStep } from "./types/workflow";
 export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";
 export { type WalletButtonRender, type WalletButtonTheme, } from "./types/wallet";

package/dist/index.js

@@ -14,9 +14,12 @@ export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
 export { default as Screen } from "./components/workflows/Screen.svelte";
+export { default as Workflow } from "./components/workflows/Workflow.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export {} from "./types/paywall";
+export { workflowDataToNavData, } from "./types/workflow-nav";
+export {} from "./types/workflow";
 export {} from "./stores/inputValidation";
 export {} from "./types/ui-config";
 export {} from "./types/wallet";

package/dist/types/component.d.ts

@@ -1,6 +1,7 @@
 import type { ButtonProps } from "./components/button";
 import type { CarouselProps } from "./components/carousel";
 import type { CountdownProps } from "./components/countdown";
+import type { FallbackHeaderProps } from "./components/fallback-header";
 import type { FooterProps } from "./components/footer";
 import type { IconProps } from "./components/icon";
 import type { ImageProps } from "./components/image";
@@ -18,4 +19,4 @@ import type { WalletButtonProps } from "./components/wallet-button";
 import type { SkeletonLoaderProps } from "./components/skeleton-loader-props";
 import type { ExpressPurchaseButtonProps } from "./components/express-purchase-button-props";
 import type { HeaderProps } from "./components/header";
-export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FooterProps | HeaderProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | InputTextProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps;
+export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FallbackHeaderProps | FooterProps | HeaderProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | InputTextProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps;

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

@@ -11,6 +11,13 @@ interface RestorePurchasesAction {
 interface NavigateBackAction {
     type: "navigate_back";
 }
+interface NavigateToPageAction {
+    type: "navigate_to_page";
+    page_id: string;
+}
+interface CloseAction {
+    type: "close_workflow";
+}
 interface NavigateToAction {
     type: "navigate_to";
     destination: "customer_center" | "offer_code" | "screen_redirect";
@@ -53,7 +60,7 @@ interface CompleteWorkflowAction {
     };
     url_query_params?: CompleteWorkflowUrlQueryParams;
 }
-export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
+export type Action = WorkflowAction | RestorePurchasesAction | NavigateBackAction | NavigateToPageAction | CloseAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction | CompleteWorkflowAction;
 export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;

package/dist/types/components/fallback-header.d.ts

@@ -0,0 +1,9 @@
+import type { BaseComponent } from "../base";
+/**
+ * Sentinel component type emitted by the backend when a component has no
+ * known renderer on this client. `Node` skips rendering and falls back to
+ * the component's `fallback` child (if present) instead.
+ */
+export interface FallbackHeaderProps extends BaseComponent {
+    type: "fallback_header";
+}

package/dist/types/components/fallback-header.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/input-text.d.ts

@@ -1,4 +1,5 @@
 import type { BorderType, ShapeType, ShadowType, SizeType, Spacing, TextAlignments } from "..";
+import type { VerticalAlignment } from "../alignment";
 import type { BaseComponent } from "../base";
 import type { ColorGradientScheme } from "../colors";
 import type { Overrides } from "../overrides";
@@ -17,6 +18,7 @@ export interface InputTextProps extends BaseComponent {
     size: SizeType;
     padding: Spacing;
     margin: Spacing;
+    vertical_alignment?: VerticalAlignment | null;
     border?: BorderType | null;
     shape?: ShapeType | null;
     shadow?: ShadowType | null;

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" | "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" | "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";
 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

@@ -0,0 +1,30 @@
+import type { WorkflowData, WorkflowScreen } from "./workflow";
+/**
+ * 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.
+ */
+export interface WorkflowNavData {
+    /** 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.
+     */
+    pages: Record<string, WorkflowScreen>;
+}
+/**
+ * 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).
+ * - `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.
+ *
+ * Returns `null` if the initial step or its screen cannot be resolved.
+ */
+export declare function workflowDataToNavData(data: WorkflowData): WorkflowNavData | null;

package/dist/types/workflow-nav.js

@@ -0,0 +1,34 @@
+/**
+ * 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).
+ * - `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.
+ *
+ * Returns `null` if the initial step or its screen cannot be resolved.
+ */
+export function workflowDataToNavData(data) {
+    const initialStep = data.steps[data.initial_step_id];
+    if (!initialStep) {
+        console.warn(`[workflowDataToNavData] initial_step_id "${data.initial_step_id}" not found in steps`);
+        return null;
+    }
+    const initialPageId = initialStep.screen_id;
+    if (!initialPageId) {
+        console.warn(`[workflowDataToNavData] initial step "${data.initial_step_id}" has no screen_id (logic/experiment step?)`);
+        return null;
+    }
+    if (!data.screens[initialPageId]) {
+        console.warn(`[workflowDataToNavData] screen_id "${initialPageId}" not found in screens`);
+        return null;
+    }
+    return {
+        initial_page_id: initialPageId,
+        // Shared by reference intentionally — screens are never mutated after
+        // WorkflowData is received from the SDK, so a copy would be wasteful.
+        pages: data.screens,
+    };
+}

package/dist/types/workflow.d.ts

@@ -13,3 +13,32 @@ export interface WorkflowScreen extends PaywallData {
     revision: number;
     template_name: string;
 }
+/**
+ * A single step in a workflow, referencing a screen by ID.
+ * Aligns with the SDK response shape from khepri.
+ */
+export interface WorkflowStep {
+    id: string;
+    screen_id?: string;
+    type: string;
+    param_values: Record<string, unknown>;
+    trigger_actions: Record<string, unknown>;
+    triggers: Record<string, unknown>;
+    outputs: Record<string, unknown>;
+    metadata: Record<string, unknown> | null;
+}
+/**
+ * The full workflow payload returned by the RevenueCat SDK.
+ * Aligns with rc-workflows' WorkflowData type — rc-workflows imports
+ * WorkflowScreen from this package and can import WorkflowData here too.
+ */
+export interface WorkflowData {
+    id: string;
+    display_name: string;
+    initial_step_id: string;
+    steps: Record<string, WorkflowStep>;
+    screens: Record<string, WorkflowScreen>;
+    ui_config: Record<string, unknown>;
+    content_max_width: number | null;
+    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.5.2",
+  "version": "4.7.0",
   "author": {
     "name": "RevenueCat, Inc."
   },