@revenuecat/purchases-ui-js 3.11.5 → 3.12.1

package/dist/components/button/ButtonNodeTestWrapper.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { setLocalizationContext } from "../../stores/localization";
+  import { setPackageInfoContext } from "../../stores/packageInfo";
   import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
   import { writable, readable } from "svelte/store";
   import ButtonNode from "./ButtonNode.svelte";
   import type { ButtonProps } from "../../types/components/button";
@@ -30,6 +32,8 @@
     uiConfig: {} as never,
     hideBackButtons,
   });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
 </script>
 
 <ButtonNode {...buttonProps} />

package/dist/components/countdown/Countdown.svelte

@@ -50,6 +50,10 @@
     // Otherwise show countdown_stack
     return countdown_stack;
   });
+
+  const isVisible = $derived(props.visible !== false);
 </script>
 
-<Stack {...activeStack} />
+{#if isVisible}
+  <Stack {...activeStack} />
+{/if}

package/dist/components/express-purchase-button/ExpressPurchaseButton.svelte

@@ -31,8 +31,8 @@
   const shouldShowAvailableStack = $derived(
     Boolean(
       wallet_available_stack &&
-        walletButtonAvailable &&
-        !shouldShowWalletSkeleton,
+      walletButtonAvailable &&
+      !shouldShowWalletSkeleton,
     ),
   );
 
@@ -52,9 +52,9 @@
 </script>
 
 <Stack {...wrapperStackProps}>
-  <Stack
-    {...{ ...wallet_available_stack, visible: shouldShowAvailableStack }}
-  />
+  <div class={shouldShowAvailableStack ? "wallet-slot" : "wallet-slot-hidden"}>
+    <Stack {...wallet_available_stack} />
+  </div>
 
   {#if shouldShowWalletSkeleton}
     <Stack {...wallet_unknown_stack} />
@@ -62,3 +62,12 @@
     <Stack {...wallet_unavailable_stack} />
   {/if}
 </Stack>
+
+<style>
+  .wallet-slot {
+    display: contents;
+  }
+  .wallet-slot-hidden {
+    display: none;
+  }
+</style>

package/dist/components/icon/Icon.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { IconProps } from "../../types/components/icon";
   import {
     css,
@@ -11,10 +14,16 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
 
   const props: IconProps = $props();
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     base_url,
     formats,
@@ -66,8 +75,22 @@
       "-webkit-mask-repeat": "no-repeat",
     }),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={container}>
-  <div style={icon}></div>
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={container}>
+    <div style={icon}></div>
+  </div>
+{/if}

package/dist/components/image/Image.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import type { ImageProps } from "../../types/components/image";
   import {
     css,
@@ -10,13 +13,19 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import {
+    evaluateVisibilityConditions,
+    getActiveStateProps,
+  } from "../../utils/style-utils";
   import ClipPath from "./ClipPath.svelte";
   import Overlay from "./Overlay.svelte";
 
   const props: ImageProps = $props();
 
   const selectedState = getSelectedStateContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const { selectedPackageId } = getPaywallContext();
+  const variables = getOptionalVariablesContext();
   const {
     id,
     source,
@@ -112,68 +121,82 @@
   const overlay = $derived(
     color_overlay && mapColorMode(colorMode, color_overlay),
   );
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div {style} bind:clientWidth={wrapperWidth}>
-  <svg
-    bind:contentRect={svgRect}
-    width="100%"
-    height="100%"
-    {viewBox}
-    style={svgStyle}
-  >
-    <defs>
-      <clipPath id={`${id}-path`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </clipPath>
-
-      <g id={`${id}-border`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </g>
+{#if isVisible}
+  <div {style} bind:clientWidth={wrapperWidth}>
+    <svg
+      bind:contentRect={svgRect}
+      width="100%"
+      height="100%"
+      {viewBox}
+      style={svgStyle}
+    >
+      <defs>
+        <clipPath id={`${id}-path`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </clipPath>
+
+        <g id={`${id}-border`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </g>
+
+        <Overlay id={`${id}-overlay`} {overlay} />
+        {#if border && border.width > 0}
+          <Overlay
+            id={`${id}-border-color`}
+            overlay={mapColorMode(colorMode, border.color)}
+          />
+        {/if}
+      </defs>
 
-      <Overlay id={`${id}-overlay`} {overlay} />
       {#if border && border.width > 0}
-        <Overlay
-          id={`${id}-border-color`}
-          overlay={mapColorMode(colorMode, border.color)}
-        />
-      {/if}
-    </defs>
-
-    {#if border && border.width > 0}
-      <use href={`#${id}-border`} fill="transparent" />
-    {/if}
-
-    <g clip-path={`url(#${id}-path)`}>
-      <foreignObject x="0" y="0" width="100%" height="100%">
-        <img
-          src={image.original}
-          style="object-fit:{mapFitMode(fit_mode)}"
-          alt=""
-        />
-      </foreignObject>
-
-      {#if overlay}
-        <rect
-          x="0"
-          y="0"
-          height="100%"
-          width="100%"
-          fill={`url(#${id}-overlay)`}
-        />
+        <use href={`#${id}-border`} fill="transparent" />
       {/if}
 
-      {#if border && border.width > 0}
-        <use
-          href={`#${id}-border`}
-          fill="none"
-          stroke={`url(#${id}-border-color)`}
-          stroke-width={border.width * 2}
-        />
-      {/if}
-    </g>
-  </svg>
-</div>
+      <g clip-path={`url(#${id}-path)`}>
+        <foreignObject x="0" y="0" width="100%" height="100%">
+          <img
+            src={image.original}
+            style="object-fit:{mapFitMode(fit_mode)}"
+            alt=""
+          />
+        </foreignObject>
+
+        {#if overlay}
+          <rect
+            x="0"
+            y="0"
+            height="100%"
+            width="100%"
+            fill={`url(#${id}-overlay)`}
+          />
+        {/if}
+
+        {#if border && border.width > 0}
+          <use
+            href={`#${id}-border`}
+            fill="none"
+            stroke={`url(#${id}-border-color)`}
+            stroke-width={border.width * 2}
+          />
+        {/if}
+      </g>
+    </svg>
+  </div>
+{/if}
 
 <style>
   img {

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

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getVariablesContext } from "../../stores/variables";
+  import { getOptionalVariablesContext } from "../../stores/variables";
   import { FontWeights, TextAlignments } from "../../types";
   import type {
     InputTextKeyboardType,
@@ -22,6 +23,7 @@
     isFontRCFMManaged,
   } from "../../utils/font-utils";
   import {
+    evaluateVisibilityConditions,
     getErrorStateProps,
     getFocusStateProps,
   } from "../../utils/style-utils";
@@ -88,11 +90,12 @@
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
-  const { uiConfig, onInputChanged } = getPaywallContext();
+  const { uiConfig, onInputChanged, selectedPackageId } = getPaywallContext();
+  const packageInfo = getOptionalPackageInfoContext();
 
   const wrapperStyle = $derived(
     css({
-      display: props.visible === false ? "none" : "flex",
+      display: "flex",
       width: mapSize(size.width),
       height: mapSize(size.height),
       margin: mapSpacing(margin),
@@ -140,7 +143,7 @@
     });
   });
 
-  const variables = getVariablesContext();
+  const variables = getOptionalVariablesContext();
   const { getLocalizedString } = getLocalizationContext();
   const placeholder = $derived(
     replaceVariables(getLocalizedString(placeholder_lid), $variables),
@@ -161,21 +164,35 @@
         return "url";
     }
   });
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      props.overrides,
+      props.visible,
+    ),
+  );
 </script>
 
-<div class="rc-gradient-border" style={wrapperStyle}>
-  <input
-    {type}
-    {placeholder}
-    {required}
-    inputmode={keyboard_type}
-    autocapitalize={capitalize}
-    style={inputStyle}
-    {oninput}
-    onfocus={() => (focused = true)}
-    {onblur}
-  />
-</div>
+{#if isVisible}
+  <div class="rc-gradient-border" style={wrapperStyle}>
+    <input
+      {type}
+      {placeholder}
+      {required}
+      inputmode={keyboard_type}
+      autocapitalize={capitalize}
+      style={inputStyle}
+      {oninput}
+      onfocus={() => (focused = true)}
+      {onblur}
+    />
+  </div>
+{/if}
 
 <style>
   input {

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,52 @@
+<script lang="ts">
+  import { setPackageInfoContext } from "../../stores/packageInfo";
+  import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
+  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: () => {},
+    emitComponentInteraction: () => {},
+    onButtonAction: onButtonAction as never,
+    onInputChanged,
+    uiConfig: {} as never,
+    hideBackButtons: false,
+  });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
+</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={{