@revenuecat/purchases-ui-js 4.8.8 → 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,14 +20,20 @@
     mapSpacing,
     px,
   } from "../../utils/base-utils";
-  import { getActiveStateProps } from "../../utils/style-utils";
+  import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
-  import { clamp, getTranslation, mapPageAlignment } from "./carousel-utils";
+  import {
+    clamp,
+    getSwipeTargetPage,
+    getTranslation,
+    mapPageAlignment,
+  } from "./carousel-utils";
   import CarouselPage from "./CarouselPage.svelte";
   import PageControl from "./PageControl.svelte";
 
   const props: CarouselProps = $props();
-  const selectedState = getSelectedStateContext();
+  const { emitComponentInteraction } = getPaywallContext();
+  const buildConditionContext = useConditionContext();
   const {
     pages,
     padding,
@@ -46,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(() => {
@@ -220,19 +225,35 @@
 
   let startTranslation = $state(0);
 
+  let lastClientX = 0;
+
   function onpointerdown(event: PointerEvent) {
     const target = event.currentTarget as HTMLElement;
     target.setPointerCapture(event.pointerId);
     startTranslation = getTranslation(slider);
     gestureStartPage = currentPage;
+    lastClientX = event.clientX;
   }
 
   function onpointerup(event: PointerEvent) {
     const target = event.currentTarget as HTMLElement;
-    target.releasePointerCapture(event.pointerId);
+    if (target.hasPointerCapture(event.pointerId)) {
+      target.releasePointerCapture(event.pointerId);
+    }
 
     const translation = getTranslation(slider);
-    const page = getPageFromTranslation(translation);
+
+    // Advance at most one page from where the gesture started, based on how
+    // far the finger travelled relative to a page's width (see
+    // getSwipeTargetPage).
+    const page = getSwipeTargetPage({
+      startPage: gestureStartPage ?? getPageFromTranslation(translation),
+      dragDistance: translation - startTranslation,
+      pageWidth,
+      pageCount: pages.length,
+      loop: carouselPagingLoop,
+    });
+
     const destinationPage = normalizePageIndex(page);
 
     if (gestureStartPage !== null && gestureStartPage !== destinationPage) {
@@ -249,6 +270,7 @@
     }
 
     gestureStartPage = null;
+    currentPage = destinationPage;
     startTransition(false, 500);
     moveTo(page);
   }
@@ -259,11 +281,17 @@
       return;
     }
 
+    // Track movement from clientX instead of event.movementX: movementX is 0
+    // for touch-derived pointer events in Safari and device-pixel scaled in
+    // some Chrome configurations.
+    const deltaX = event.clientX - lastClientX;
+    lastClientX = event.clientX;
+
     const [min, max] = carouselPagingLoop
       ? [startTranslation - carouselWidth, startTranslation + carouselWidth]
       : [-(pages.length - 1) * pageWidth, 0];
     const translation = getTranslation(slider);
-    const newTranslation = clamp(translation + event.movementX, min, max);
+    const newTranslation = clamp(translation + deltaX, min, max);
 
     const page = getPageFromTranslation(newTranslation);
     currentPage = (page + pages.length) % pages.length;

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

@@ -1,4 +1,35 @@
 import type { VerticalAlignment } from "../../types/alignment";
 export declare function mapPageAlignment(alignment: VerticalAlignment): string;
 export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Advance one page when the drag passed this fraction of a page's width,
+ * matching the iOS SDK carousel. A shorter drag snaps back to the page the
+ * gesture started on.
+ */
+export declare const PAGE_ADVANCE_THRESHOLD = 0.2;
+/**
+ * Decides which page a swipe settles on when the pointer is released.
+ *
+ * Distance-based (not velocity-based), mirroring the iOS SDK's `handleDragEnd`:
+ * a drag past `PAGE_ADVANCE_THRESHOLD` of a page's width advances exactly one
+ * page in the swipe direction regardless of speed; a shorter drag stays put.
+ * Non-loop carousels clamp at their first and last page; loop carousels may
+ * return an index just outside `[0, pageCount)` so the caller can animate into
+ * a clone before normalizing.
+ *
+ * @param startPage    Page the gesture started on.
+ * @param dragDistance Signed change in slider translation (negative = finger
+ *                     moved left / next page).
+ * @param pageWidth    Width of a single page in px.
+ * @param pageCount    Total number of real pages.
+ * @param loop         Whether the carousel loops.
+ */
+export declare function getSwipeTargetPage({ startPage, dragDistance, pageWidth, pageCount, loop, advanceThreshold, }: {
+    startPage: number;
+    dragDistance: number;
+    pageWidth: number;
+    pageCount: number;
+    loop: boolean;
+    advanceThreshold?: number;
+}): number;
 export declare function getTranslation(element: HTMLElement | null): number;

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

@@ -11,6 +11,42 @@ export function mapPageAlignment(alignment) {
 export function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
 }
+/**
+ * Advance one page when the drag passed this fraction of a page's width,
+ * matching the iOS SDK carousel. A shorter drag snaps back to the page the
+ * gesture started on.
+ */
+export const PAGE_ADVANCE_THRESHOLD = 0.2;
+/**
+ * Decides which page a swipe settles on when the pointer is released.
+ *
+ * Distance-based (not velocity-based), mirroring the iOS SDK's `handleDragEnd`:
+ * a drag past `PAGE_ADVANCE_THRESHOLD` of a page's width advances exactly one
+ * page in the swipe direction regardless of speed; a shorter drag stays put.
+ * Non-loop carousels clamp at their first and last page; loop carousels may
+ * return an index just outside `[0, pageCount)` so the caller can animate into
+ * a clone before normalizing.
+ *
+ * @param startPage    Page the gesture started on.
+ * @param dragDistance Signed change in slider translation (negative = finger
+ *                     moved left / next page).
+ * @param pageWidth    Width of a single page in px.
+ * @param pageCount    Total number of real pages.
+ * @param loop         Whether the carousel loops.
+ */
+export function getSwipeTargetPage({ startPage, dragDistance, pageWidth, pageCount, loop, advanceThreshold = PAGE_ADVANCE_THRESHOLD, }) {
+    const threshold = pageWidth * advanceThreshold;
+    let page = startPage;
+    if (dragDistance < -threshold) {
+        // Finger moved left, content shifts left: next page.
+        page += 1;
+    }
+    else if (dragDistance > threshold) {
+        // Finger moved right: previous page.
+        page -= 1;
+    }
+    return loop ? page : clamp(page, 0, pageCount - 1);
+}
 export function getTranslation(element) {
     if (element === null) {
         return 0;

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),
     };
   });