@revenuecat/purchases-ui-js 4.8.9 → 4.8.10

package/dist/components/button/ButtonNode.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
   import { getInputValidationContext } from "../../stores/inputValidation";
   import { getLocalizationContext } from "../../stores/localization";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getSelectedStateContext } from "../../stores/selected";
   import type { ButtonProps } from "../../types/components/button";
   import type {
     ButtonInteractionData,
     PackageSelectionSheetInteractionData,
   } from "../../types/paywall-component-interaction";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import { fromStore, readable } from "svelte/store";
   import { isWorkflowButtonInputGated } from "./button-input-gating";
 
@@ -19,20 +19,19 @@
     { type: "navigate_to"; destination: "sheet" }
   >;
 
-  const selectedState = getSelectedStateContext();
-  const { action } = $derived.by(() => {
-    return {
-      ...props,
-      ...getActiveStateProps($selectedState, props.overrides),
-    };
-  });
-
   const {
     emitComponentInteraction,
     onButtonAction,
     hideBackButtons,
     selectedPackageId,
   } = getPaywallContext();
+  const buildConditionContext = useConditionContext();
+  const { action, stack } = $derived.by(() => {
+    return {
+      ...props,
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
+    };
+  });
   const validationContext = getInputValidationContext();
   const { getLocalizedString } = getLocalizationContext();
 
@@ -190,7 +189,7 @@
     inputSatisfied.current,
   )}
   <Stack
-    {...props.stack}
+    {...stack}
     {onclick}
     style={isDisabled
       ? { opacity: "0.4", "pointer-events": "none", cursor: "not-allowed" }

package/dist/components/carousel/Carousel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getSelectedStateContext } from "../../stores/selected";
   import BackgroundVideoSurface from "../paywall/BackgroundVideoSurface.svelte";
   import type { CarouselProps } from "../../types/components/carousel";
   import {
@@ -20,7 +20,7 @@
     mapSpacing,
     px,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import {
     clamp,
@@ -32,7 +32,8 @@
   import PageControl from "./PageControl.svelte";
 
   const props: CarouselProps = $props();
-  const selectedState = getSelectedStateContext();
+  const { emitComponentInteraction } = getPaywallContext();
+  const buildConditionContext = useConditionContext();
   const {
     pages,
     padding,
@@ -51,13 +52,12 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
-  const { emitComponentInteraction } = getPaywallContext();
 
   const hasVideoBg = $derived(background?.type === "video");
   const videoSurface = $derived.by(() => {

package/dist/components/icon/Icon.svelte

@@ -1,9 +1,6 @@
 <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 { useConditionContext } from "../../stores/condition-context.svelte";
   import type { IconProps } from "../../types/components/icon";
   import {
     css,
@@ -14,16 +11,10 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import {
-    evaluateVisibilityConditions,
-    getActiveStateProps,
-  } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
 
   const props: IconProps = $props();
-  const selectedState = getSelectedStateContext();
-  const packageInfo = getOptionalPackageInfoContext();
-  const { selectedPackageId } = getPaywallContext();
-  const variables = getOptionalVariablesContext();
+  const buildConditionContext = useConditionContext({ state: true });
   const {
     base_url,
     formats,
@@ -32,10 +23,11 @@
     padding,
     color,
     icon_background: background,
+    visible,
   } = $derived.by(() => {
     return {
       ...props,
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
 
@@ -56,17 +48,7 @@
     }),
   );
 
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
+  const isVisible = $derived(visible !== false);
 
   const webpUrl = $derived(`${base_url}/${formats.webp}`);
   const icon = $derived(

package/dist/components/image/Image.svelte

@@ -1,9 +1,6 @@
 <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 { useConditionContext } from "../../stores/condition-context.svelte";
   import type { ImageProps } from "../../types/components/image";
   import {
     css,
@@ -13,19 +10,13 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import {
-    evaluateVisibilityConditions,
-    getActiveStateProps,
-  } from "../../utils/style-utils";
+  import { resolveOverrideProperties } 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 buildConditionContext = useConditionContext({ state: true });
   const {
     id,
     source,
@@ -37,10 +28,11 @@
     color_overlay,
     border,
     shadow,
+    visible,
   } = $derived.by(() => {
     return {
       ...props,
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
 
@@ -122,17 +114,7 @@
     color_overlay && mapColorMode(colorMode, color_overlay),
   );
 
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
+  const isVisible = $derived(visible !== false);
 </script>
 
 {#if isVisible}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
   import { getInputValidationContext } from "../../stores/inputValidation";
   import { getLocalizationContext } from "../../stores/localization";
-  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
   import { getPaywallContext } from "../../stores/paywall";
   import { getOptionalVariablesContext } from "../../stores/variables";
   import { FontWeights, TextAlignments } from "../../types";
@@ -23,11 +23,7 @@
     getScopedFontFamily,
     isFontRCFMManaged,
   } from "../../utils/font-utils";
-  import {
-    evaluateVisibilityConditions,
-    getErrorStateProps,
-    getFocusStateProps,
-  } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
   import type { FormEventHandler, HTMLInputAttributes } from "svelte/elements";
   import { mapTextColor } from "../text/text-utils";
@@ -38,6 +34,8 @@
   let error = $state(false);
   let valid = $state(!props.required);
 
+  const buildConditionContext = useConditionContext({ state: true });
+
   const {
     placeholder_lid,
     keyboard_type,
@@ -63,11 +61,14 @@
     placeholder_horizontal_alignment,
     placeholder_color,
     background_color,
+    visible,
   } = $derived.by(() => {
     return {
       ...props,
-      ...getFocusStateProps(focused, props.overrides),
-      ...getErrorStateProps(error, props.overrides),
+      ...resolveOverrideProperties(
+        buildConditionContext({ focus: focused, error }),
+        props.overrides,
+      ),
     };
   });
 
@@ -126,9 +127,7 @@
     onInputChanged,
     onSensitiveInputChanged,
     onReservedAttributeChanged,
-    selectedPackageId,
   } = getPaywallContext();
-  const packageInfo = getOptionalPackageInfoContext();
 
   const verticalAlignItems = $derived(
     vertical_alignment === "top"
@@ -220,17 +219,7 @@
     keyboard_type === "password" ? "text" : keyboard_type,
   );
 
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
+  const isVisible = $derived(visible !== false);
 
   if (validationContext) {
     $effect(() => {

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

@@ -32,6 +32,7 @@
   import { STACK_PAYWALL } from "./fixtures/stack-paywall";
   import { VARIABLES } from "./fixtures/variables";
   import { CUSTOM_VARIABLES_PAYWALL } from "./fixtures/custom-variables-paywall";
+  import { TAB_STATE_PAYWALL } from "../tabs/fixtures/tab-state-paywall";
   import { COUNTDOWN_PAYWALL } from "../countdown/fixtures/countdown-paywall";
   import { mockDateDecorator } from "storybook-mock-date-decorator";
   import {
@@ -101,6 +102,22 @@
   }}
 />
 
+<Story
+  name="State-driven - tab state"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    const annualTab = Array.from(canvasElement.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Annual"),
+    );
+    annualTab?.click();
+    await waitForAnimations();
+  }}
+  args={{
+    paywallData: TAB_STATE_PAYWALL,
+    preferredColorMode: "light",
+  }}
+/>
+
 <Story
   name="Sheet"
   decorators={[viewportDecorator(500, 500, 0)]}

package/dist/components/paywall/Paywall.svelte

@@ -10,6 +10,11 @@
   } from "../../stores/inputValidation";
   import { setLocalizationContext } from "../../stores/localization";
   import { setPaywallContext } from "../../stores/paywall";
+  import {
+    PaywallStateStore,
+    getPaywallStateContext,
+    setPaywallStateContext,
+  } from "../../stores/state";
   import {
     setVariablesContext,
     type VariablesStore,
@@ -322,6 +327,12 @@
     hideBackButtons,
   });
 
+  // State store: reuse an ancestor store (when nested in a workflow) or create a standalone one.
+  const ancestorStateStore = getPaywallStateContext();
+  const stateStore = ancestorStateStore ?? new PaywallStateStore();
+  stateStore.registerDeclarations(paywallData.state_declarations ?? {});
+  if (!ancestorStateStore) setPaywallStateContext(stateStore);
+
   const inputValidationContext = createInputValidationContext();
   setInputValidationContext(inputValidationContext);
   setInitialInputSelectionsContext(initialInputSelections);

package/dist/components/paywall/Sheet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
   import { getPaywallContext } from "../../stores/paywall";
-  import { getSelectedStateContext } from "../../stores/selected";
   import BackgroundVideoSurface from "./BackgroundVideoSurface.svelte";
   import type { SheetProps } from "../../types/components/sheet";
   import {
@@ -13,18 +13,18 @@
     videoBackgroundHostStyles,
   } from "../../utils/video-background-host";
   import { css, mapSize } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import Stack from "../stack/Stack.svelte";
 
   const props: SheetProps = $props();
   const { stack } = props;
 
-  const selectedState = getSelectedStateContext();
+  const buildConditionContext = useConditionContext({ state: true });
   const { size, background, background_blur, position } = $derived.by(() => {
     return {
       ...props,
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
 

package/dist/components/stack/Stack.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
   import Node from "../paywall/Node.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
-  import { getHoverStateContext } from "../../stores/hover";
-  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
-  import { getPaywallContext } from "../../stores/paywall";
-  import { getSelectedStateContext } from "../../stores/selected";
-  import { getOptionalVariablesContext } from "../../stores/variables";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
   import BackgroundVideoSurface from "../paywall/BackgroundVideoSurface.svelte";
   import type { StackProps } from "../../types/components/stack";
   import {
@@ -26,11 +22,7 @@
     px,
     type CSS,
   } from "../../utils/base-utils";
-  import {
-    evaluateVisibilityConditions,
-    getActiveStateProps,
-    getHoverStateProps,
-  } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import type { Snippet } from "svelte";
   import {
     mapBadge,
@@ -51,11 +43,10 @@
   const props: StackProps & MiscProps = $props();
   const { onclick, children, class: classProp, testId } = props;
 
-  const selectedState = getSelectedStateContext();
-  const hoverState = getHoverStateContext();
-  const packageInfo = getOptionalPackageInfoContext();
-  const { selectedPackageId } = getPaywallContext();
-  const variables = getOptionalVariablesContext();
+  const buildConditionContext = useConditionContext({
+    state: true,
+    hover: true,
+  });
   const {
     components,
     size,
@@ -69,11 +60,11 @@
     shape,
     shadow,
     badge,
+    visible,
   } = $derived.by(() => {
     return {
       ...props,
-      ...getHoverStateProps($hoverState, props.overrides),
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
 
@@ -134,17 +125,7 @@
 
   const badgeStyle = $derived(css(mapBadge(badge, border?.width)));
 
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
+  const isVisible = $derived(visible !== false);
 </script>
 
 {#if isVisible}

package/dist/components/tabs/TabControlToggle.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
-  import {
-    getSelectedStateContext,
-    setSelectedStateContext,
-  } from "../../stores/selected";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { setSelectedStateContext } from "../../stores/selected";
   import type { TabControlToggleProps } from "../../types/components/tabs";
   import { css, mapColor } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import { getTabsContext } from "./tabs-context";
 
   const props: TabControlToggleProps = $props();
 
-  const selectedState = getSelectedStateContext();
+  const buildConditionContext = useConditionContext({ state: true });
   const {
     default_value,
     thumb_color_on,
@@ -21,7 +19,7 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...getActiveStateProps($selectedState, props.overrides),
+      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
     };
   });
 

package/dist/components/tabs/Tabs.svelte

@@ -1,9 +1,6 @@
 <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 BackgroundVideoSurface from "../paywall/BackgroundVideoSurface.svelte";
   import type { TabsProps } from "../../types/components/tabs";
   import {
@@ -22,29 +19,28 @@
     mapSize,
     mapSpacing,
   } from "../../utils/base-utils";
-  import {
-    evaluateVisibilityConditions,
-    getActiveStateProps,
-  } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { getPaywallStateContext } from "../../stores/state";
   import { derived, get, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import { setTabsContext, type SelectTab } from "./tabs-context";
 
   const props: TabsProps = $props();
-  const { name, control, tabs, default_tab_id } = props;
+  const { name, control, tabs, default_tab_id, state_updates } = props;
 
-  const selectedState = getSelectedStateContext();
-  const packageInfo = getOptionalPackageInfoContext();
-  const { selectedPackageId } = getPaywallContext();
-  const variables = getOptionalVariablesContext();
-  const { size, padding, margin, background, shape, border, shadow } =
+  const buildConditionContext = useConditionContext();
+  const stateStore = getPaywallStateContext();
+  const { size, padding, margin, background, shape, border, shadow, visible } =
     $derived.by(() => {
       return {
         ...props,
-        ...getActiveStateProps($selectedState, props.overrides),
+        ...resolveOverrideProperties(buildConditionContext(), props.overrides),
       };
     });
 
+  const isVisible = $derived(visible !== false);
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
@@ -119,24 +115,28 @@
     }
   };
 
+  // Publish the selected tab id into the state store: once on initial setup, then
+  // only when the selection actually changes (parity with iOS TabsComponentView's
+  // didSeedInitialState + onChangeOf(selectedTabId)). Tracking the last published
+  // id keeps a hidden -> visible transition from republishing and clobbering a
+  // value another component has already set. Gated behind visibility so a hidden
+  // Tabs never publishes. state_declarations.default (which seeds the store) is
+  // expected to match default_tab_id (published here); iOS relies on the same.
+  let lastPublishedTabId: string | undefined;
+  $effect(() => {
+    if (!isVisible || !state_updates?.length) return;
+    const tabId = tabs[$selectedTabIndex]?.id;
+    if (tabId == null || tabId === lastPublishedTabId) return;
+    lastPublishedTabId = tabId;
+    stateStore?.applyUpdates(state_updates, tabId);
+  });
+
   setTabsContext({
     control: readable(control),
     selectedTabId: derived(tab, (tab) => tab?.id ?? ""),
     selectTab,
     isActive: derived(selectedTabIndex, (value) => value === 1),
   });
-
-  const isVisible = $derived(
-    evaluateVisibilityConditions(
-      {
-        selectedPackageId: $selectedPackageId,
-        packageInfo: $packageInfo,
-        variables: $variables ?? {},
-      },
-      props.overrides,
-      props.visible,
-    ),
-  );
 </script>
 
 {#if isVisible}

package/dist/components/tabs/fixtures/tab-state-paywall.d.ts

@@ -0,0 +1,25 @@
+import type { TextNodeProps } from "../../../types/components/text";
+import type { PaywallData } from "../../../types/paywall";
+import type { StateDeclaration, StateUpdate } from "../../../types/state";
+import type { UIConfig } from "../../../types/ui-config";
+export declare function createStateConditionText({ id, textLid, stateKey, stateValue, conditionOperator, hiddenWhenMatches, }: {
+    id: string;
+    textLid: string;
+    stateKey: string;
+    stateValue: string;
+    conditionOperator: "=" | "!=";
+    hiddenWhenMatches: boolean;
+}): TextNodeProps;
+export declare function buildTabStatePaywall({ defaultTabId, stateDeclarations, tabsStateUpdates, siblingComponents, tabsVisible, localizations, paywallId, }: {
+    defaultTabId: string;
+    stateDeclarations?: Record<string, StateDeclaration>;
+    tabsStateUpdates?: StateUpdate[];
+    siblingComponents?: TextNodeProps[];
+    tabsVisible?: boolean;
+    localizations?: Record<string, string>;
+    paywallId?: string;
+}): {
+    paywallData: PaywallData;
+    uiConfig: UIConfig;
+};
+export declare const TAB_STATE_PAYWALL: PaywallData;