@revenuecat/purchases-ui-js 3.11.5 → 3.12.0

package/dist/components/options/InputOption.svelte

@@ -10,7 +10,7 @@
   const props: InputOptionProps = $props();
   const { stack, option_id } = props;
 
-  const { onButtonAction } = getPaywallContext();
+  const { onButtonAction, onInputChanged } = getPaywallContext();
   const inputChoiceContext = getInputChoiceContext();
 
   // Derive selected state from context (similar to Package)
@@ -41,6 +41,15 @@
     // Update selection state
     inputChoiceContext?.selectOption(option_id);
 
+    // Notify host (e.g. workflows) so selections can be persisted when every option shares
+    // the same workflow `on_press` id (e.g. `btn_*`); `onActionTriggered` alone is ambiguous.
+    // The trailing actionId lets hosts skip this callback when their own action path
+    // already persists the selection (e.g. a legacy input_option_* action handler).
+    const fieldId = inputChoiceContext?.fieldId;
+    if (fieldId) {
+      onInputChanged?.(fieldId, option_id, actionId);
+    }
+
     // Trigger navigation
     onButtonAction({ type: "workflow" }, actionId);
   };

package/dist/components/options/InputOptionTestWrapper.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { setPaywallContext } from "../../stores/paywall";
+  import {
+    createInputChoiceContext,
+    setInputChoiceContext,
+  } from "../../stores/inputChoice";
+  import { readable, writable } from "svelte/store";
+  import InputOption from "./InputOption.svelte";
+  import type { InputOptionProps } from "../../types/components/options";
+
+  interface Props extends InputOptionProps {
+    fieldId?: string;
+    selectionMode?: "single" | "multiple";
+    onButtonAction?: (action: { type: string }, actionId?: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
+  }
+
+  const {
+    fieldId,
+    selectionMode = "single",
+    onButtonAction = () => {},
+    onInputChanged,
+    ...optionProps
+  }: Props = $props();
+
+  if (fieldId !== undefined) {
+    setInputChoiceContext(createInputChoiceContext(fieldId, selectionMode));
+  }
+
+  setPaywallContext({
+    selectedPackageId: writable(undefined),
+    variablesPerPackage: readable(undefined),
+    baseVariables: readable(undefined),
+    infoPerPackage: readable(undefined),
+    onPurchase: () => {},
+    onButtonAction: onButtonAction as never,
+    onInputChanged,
+    uiConfig: {} as never,
+    hideBackButtons: false,
+  });
+</script>
+
+<InputOption {...optionProps} />

package/dist/components/options/InputOptionTestWrapper.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { InputOptionProps } from "../../types/components/options";
+interface Props extends InputOptionProps {
+    fieldId?: string;
+    selectionMode?: "single" | "multiple";
+    onButtonAction?: (action: {
+        type: string;
+    }, actionId?: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
+}
+declare const InputOptionTestWrapper: import("svelte").Component<Props, {}, "">;
+type InputOptionTestWrapper = ReturnType<typeof InputOptionTestWrapper>;
+export default InputOptionTestWrapper;

package/dist/components/paywall/Paywall.svelte

@@ -82,7 +82,11 @@
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**

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

@@ -39,7 +39,7 @@ interface Props {
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     maxContentWidth?: string;
     initialInputSelections?: InitialInputSelections;
     /**

package/dist/components/stack/Stack.stories.svelte

@@ -5,6 +5,7 @@
   import { localizations } from "../../stories/fixtures";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import type { StackProps } from "../../types/components/stack";
+  import type { Component } from "../../types/component";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
@@ -58,6 +59,53 @@
     },
   ] as unknown as TextNodeProps[];
 
+  /** Z-layer: full-bleed image (layer 0), text label (layer 1). */
+  const zlayerImageUnderText: Component[] = [
+    {
+      type: "image",
+      id: "zlayer-bg",
+      name: "Background image",
+      size: { width: { type: "fill" }, height: { type: "fill" } },
+      fit_mode: "fill",
+      source: {
+        light: {
+          width: 600,
+          height: 400,
+          original:
+            "https://placehold.co/600x400/1e293b/94a3b8?text=Layer+0+%28back%29",
+          heic: "https://placehold.co/600x400",
+          heic_low_res: "https://placehold.co/600x400",
+          webp: "https://placehold.co/600x400",
+          webp_low_res: "https://placehold.co/600x400",
+        },
+        dark: null,
+      },
+      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    },
+    {
+      type: "text",
+      id: "zlayer-top",
+      name: "Top label",
+      text_lid: "id1",
+      color: {
+        light: { type: "hex", value: "#f8fafc" },
+        dark: { type: "hex", value: "#f8fafc" },
+      },
+      font_name: null,
+      font_size: "heading_m",
+      font_weight: "semibold",
+      horizontal_alignment: "center",
+      background_color: {
+        light: { type: "hex", value: "#0f172acc" },
+        dark: { type: "hex", value: "#0f172acc" },
+      },
+      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+      padding: { top: 12, bottom: 12, leading: 16, trailing: 16 },
+      size: { width: { type: "fit" }, height: { type: "fit" } },
+    },
+  ];
+
   const { Story } = defineMeta({
     title: "Components/Stack",
     component: Stack,
@@ -140,6 +188,46 @@
   }}
 />
 
+<Story
+  name="Z layer — image under text"
+  args={{
+    components: zlayerImageUnderText,
+    size: {
+      width: { type: "fixed", value: 320 },
+      height: { type: "fixed", value: 220 },
+    },
+    dimension: {
+      type: "zlayer",
+      alignment: "center",
+    },
+    background: {
+      type: "color",
+      value: {
+        light: { type: "hex", value: "#0f172a" },
+      },
+    },
+    border: {
+      width: 1,
+      color: {
+        light: { type: "hex", value: "#334155" },
+        dark: { type: "hex", value: "#334155" },
+      },
+    },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 12,
+        top_trailing: 12,
+        bottom_leading: 12,
+        bottom_trailing: 12,
+      },
+    },
+  }}
+  parameters={{
+    chromatic: { disable: true },
+  }}
+/>
+
 <Story
   name="Space Around"
   args={{

package/dist/components/stack/Stack.svelte

@@ -114,7 +114,10 @@
   {/if}
 
   {#if dimension.type === "zlayer"}
-    <div style="position: relative; width: 100%; height: 100%;">
+    <!-- isolate: layer z-index values only sort within this stack, not the host page -->
+    <div
+      style="position: relative; width: 100%; height: 100%; isolation: isolate;"
+    >
       {#each components as component, index}
         <div style={getLayerStyle(index)}>
           <Node nodeData={component} />

package/dist/components/workflows/Screen.svelte

@@ -23,7 +23,11 @@
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (
+      fieldId: string,
+      value: string,
+      actionId?: string,
+    ) => void;
     onCompleteWorkflowNavigate?: (
       args: CompleteWorkflowNavigateArgs,
     ) => void | Promise<void>;

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

@@ -18,7 +18,7 @@ interface Props {
     maxContentWidth?: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
     initialInputSelections?: InitialInputSelections;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     onCompleteWorkflowNavigate?: (args: CompleteWorkflowNavigateArgs) => void | Promise<void>;
     walletButtonRender?: WalletButtonRender;
 }

package/dist/stores/paywall.d.ts

@@ -20,7 +20,7 @@ type PaywallContext = Readonly<{
     onPurchase: (actionId?: string) => void;
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;
-    onInputChanged?: (fieldId: string, value: string) => void;
+    onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     onButtonAction: (action: Action, actionId?: string) => void;

package/package.json

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