@revenuecat/purchases-ui-js 4.8.20 → 4.8.22

package/dist/components/carousel/Carousel.svelte

@@ -24,6 +24,7 @@
   import { onMount } from "svelte";
   import {
     clamp,
+    getDefaultPageIndex,
     getSwipeTargetPage,
     getTranslation,
     mapPageAlignment,
@@ -132,10 +133,6 @@
   let pageWidth = $derived(carouselWidth - pageOffset);
   let gestureStartPage = $state<number | null>(null);
 
-  function getDefaultPageIndex() {
-    return pages.at(initial_page_index) !== undefined ? initial_page_index : 0;
-  }
-
   function normalizePageIndex(index: number) {
     if (pages.length === 0) {
       return 0;
@@ -199,7 +196,7 @@
   }
 
   onMount(() => {
-    const initialPage = getDefaultPageIndex();
+    const initialPage = getDefaultPageIndex(pages, initial_page_index);
     currentPage = initialPage;
 
     stopTransition();
@@ -265,7 +262,7 @@
         destinationIndex: destinationPage,
         originContextName: getPageContextName(gestureStartPage),
         destinationContextName: getPageContextName(destinationPage),
-        defaultIndex: getDefaultPageIndex(),
+        defaultIndex: getDefaultPageIndex(pages, initial_page_index),
       });
     }
 

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

@@ -1,6 +1,12 @@
 import type { VerticalAlignment } from "../../types/alignment";
 export declare function mapPageAlignment(alignment: VerticalAlignment): string;
 export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Resolves the carousel's starting page. Out-of-range indexes (including a
+ * missing `pages[i]` hole) fall back to 0. Uses index access rather than
+ * `Array.prototype.at` so Chrome < 92 does not throw while mounting.
+ */
+export declare function getDefaultPageIndex<T>(pages: readonly T[], initialPageIndex: 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

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

@@ -11,6 +11,14 @@ export function mapPageAlignment(alignment) {
 export function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
 }
+/**
+ * Resolves the carousel's starting page. Out-of-range indexes (including a
+ * missing `pages[i]` hole) fall back to 0. Uses index access rather than
+ * `Array.prototype.at` so Chrome < 92 does not throw while mounting.
+ */
+export function getDefaultPageIndex(pages, initialPageIndex) {
+    return pages[initialPageIndex] !== undefined ? initialPageIndex : 0;
+}
 /**
  * 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

package/dist/components/image/Image.stories.svelte

@@ -1,12 +1,16 @@
 <script module lang="ts">
   import Image from "./Image.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const { Story } = defineMeta({
     title: "Components/Image",
     component: Image,
-    decorators: [componentDecorator()],
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({ defaultLocale: "en_US", localizations: {} }),
+    ],
     args: {
       type: "image",
       id: "image",

package/dist/components/image/Image.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getColorModeContext } from "../../stores/color-mode";
   import { useConditionContext } from "../../stores/condition-context.svelte";
+  import { getLocalizationContext } from "../../stores/localization";
   import type { ImageProps } from "../../types/components/image";
   import {
     css,
@@ -12,15 +13,19 @@
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import ClipPath from "./ClipPath.svelte";
+  import { resolveImageSource } from "./image-utils";
   import { viewBoxSize } from "./view-box-size";
   import Overlay from "./Overlay.svelte";
 
   const props: ImageProps = $props();
 
   const buildConditionContext = useConditionContext({ state: true });
+  const { getLocalizedImage } = getLocalizationContext();
+
+  const conditionContext = $derived(buildConditionContext());
+
   const {
     id,
-    source,
     size,
     mask_shape,
     fit_mode,
@@ -33,10 +38,14 @@
   } = $derived.by(() => {
     return {
       ...props,
-      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
+      ...resolveOverrideProperties(conditionContext, props.overrides),
     };
   });
 
+  const source = $derived(
+    resolveImageSource(props, conditionContext, getLocalizedImage),
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
   const image = $derived(mapColorMode(colorMode, source));

package/dist/components/image/ImageTestWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { readable, writable } from "svelte/store";
   import { setColorModeContext } from "../../stores/color-mode";
+  import { setLocalizationContext } from "../../stores/localization";
   import { setPaywallContext } from "../../stores/paywall";
   import Image from "./Image.svelte";
   import type { ImageProps } from "../../types/components/image";
@@ -8,6 +9,10 @@
   const props: ImageProps = $props();
 
   setColorModeContext();
+  setLocalizationContext(() => ({
+    defaultLocale: "en_US",
+    localizations: {},
+  }));
   setPaywallContext({
     selectedPackageId: writable(undefined),
     variablesPerPackage: readable(undefined),

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

@@ -0,0 +1,9 @@
+import type { ImageProps } from "../../types/components/image";
+import type { ImageInfo } from "../../types/media";
+import { type ConditionContext } from "../../utils/style-utils";
+import type { GetLocalizedImage } from "../../stores/localization";
+/**
+ * Resolves the ImageInfo to render for an image component, preferring
+ * a matching override but defaulting to the image source.
+ */
+export declare function resolveImageSource(props: ImageProps, context: ConditionContext, getLocalizedImage: GetLocalizedImage): ImageInfo;

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

@@ -0,0 +1,20 @@
+import { filterMatchingOverrides, } from "../../utils/style-utils";
+/**
+ * Resolves the ImageInfo to render for an image component, preferring
+ * a matching override but defaulting to the image source.
+ */
+export function resolveImageSource(props, context, getLocalizedImage) {
+    const resolveLocalizedSource = (source, overrideSourceLid) => overrideSourceLid
+        ? (getLocalizedImage(overrideSourceLid) ?? source)
+        : source;
+    let resolvedOverrideImage;
+    for (const override of filterMatchingOverrides(context, props.overrides)) {
+        const image = resolveLocalizedSource(override.properties.source, override.properties.override_source_lid);
+        if (image) {
+            resolvedOverrideImage = image;
+        }
+    }
+    return (resolvedOverrideImage ??
+        resolveLocalizedSource(props.source, props.override_source_lid) ??
+        props.source);
+}

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

@@ -30,6 +30,7 @@
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
+  import { GRADIENT_SHEET_PAYWALL } from "./fixtures/gradient-sheet-paywall";
   import { STACK_PAYWALL } from "./fixtures/stack-paywall";
   import { VARIABLES } from "./fixtures/variables";
   import { CUSTOM_VARIABLES_PAYWALL } from "./fixtures/custom-variables-paywall";
@@ -167,6 +168,19 @@
   }}
 />
 
+<Story
+  name="Sheet — gradient background"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  play={async ({ canvasElement }) => {
+    const button = canvasElement.querySelector("button");
+    button?.click();
+    await waitForAnimations();
+  }}
+  args={{
+    paywallData: GRADIENT_SHEET_PAYWALL,
+  }}
+/>
+
 <Story
   name="Background - Color"
   decorators={[viewportDecorator(500, 500, 0)]}

package/dist/components/paywall/Paywall.svelte

@@ -442,8 +442,9 @@
 </script>
 
 <svelte:boundary onerror={onError}>
+  <!-- Outside the root: filter/transform on `.blur` would clip the fixed backdrop to the paywall box. -->
+  <ViewportBackdrop model={viewportBackdropModel} blur={!!sheet} />
   <div class={paywallClass} style={paywallStyle}>
-    <ViewportBackdrop model={viewportBackdropModel} />
     {#if header}
       <div
         class="header-wrapper"

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 { getPaywallContext, setPaywallContext } from "../../stores/paywall";
   import BackgroundVideoSurface from "./BackgroundVideoSurface.svelte";
   import type { SheetProps } from "../../types/components/sheet";
   import {
@@ -56,21 +56,34 @@
     }),
   );
 
-  const { onButtonAction } = getPaywallContext();
+  const paywallContext = getPaywallContext();
+  const { onButtonAction } = paywallContext;
 
   let sheet: HTMLDivElement | undefined;
   let visible = $state(false);
 
+  const hideSheet = () => {
+    visible = false;
+  };
+
+  // navigate_back inside the sheet closes the sheet, not the paywall.
+  setPaywallContext({
+    ...paywallContext,
+    onButtonAction: (action, actionId) => {
+      if (action.type === "navigate_back") {
+        hideSheet();
+        return;
+      }
+      onButtonAction(action, actionId);
+    },
+  });
+
   onMount(() => {
     requestAnimationFrame(() => {
       visible = true;
     });
   });
 
-  const hideSheet = () => {
-    visible = false;
-  };
-
   const ontransitionend = () => {
     if (visible) {
       return;

package/dist/components/paywall/ViewportBackdrop.svelte

@@ -6,7 +6,10 @@
   // through to the safe-area canvas. A position:fixed element that explicitly
   // fills the viewport — including safe areas — is the only consistent paint
   // surface for gradients and images on iOS Safari.
-  const { model }: { model: PaywallRootBackgroundModel } = $props();
+  const {
+    model,
+    blur = false,
+  }: { model: PaywallRootBackgroundModel; blur?: boolean } = $props();
 
   const backdropStyle = $derived.by((): string => {
     if (
@@ -46,6 +49,7 @@
 {#if shouldRenderBackdrop}
   <div
     class="viewport-backdrop"
+    class:blurred={blur}
     style={backdropStyle !== "" ? backdropStyle : undefined}
   >
     {#if model.kind === "video"}
@@ -77,6 +81,14 @@
     pointer-events: none;
     overflow: hidden;
     isolation: isolate;
+    transition:
+      filter 0.1s ease-in-out,
+      transform 0.1s ease-in-out;
+  }
+
+  .viewport-backdrop.blurred {
+    filter: blur(10px) brightness(0.8);
+    transform: scale(1.045);
   }
 
   .viewport-backdrop-overlay {

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

@@ -1,6 +1,7 @@
 import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
 type $$ComponentProps = {
     model: PaywallRootBackgroundModel;
+    blur?: boolean;
 };
 declare const ViewportBackdrop: import("svelte").Component<$$ComponentProps, {}, "">;
 type ViewportBackdrop = ReturnType<typeof ViewportBackdrop>;

package/dist/components/paywall/fixtures/gradient-sheet-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const GRADIENT_SHEET_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/gradient-sheet-paywall.js

@@ -0,0 +1,68 @@
+import { createStack, createTextComponent } from "./helpers";
+// Gradient background (painted by ViewportBackdrop) plus a button that opens a sheet.
+export const GRADIENT_SHEET_PAYWALL = {
+    id: "gradient-sheet-paywall",
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: { open_sheet: "Open sheet", sheet_title: "Sheet" },
+    },
+    components_config: {
+        base: {
+            background: {
+                type: "color",
+                value: {
+                    light: {
+                        type: "linear",
+                        degrees: 45,
+                        points: [
+                            { percent: 0, color: "#010101ff" },
+                            { percent: 100, color: "#f79e00ff" },
+                        ],
+                    },
+                },
+            },
+            stack: createStack({
+                id: "root",
+                name: "Root",
+                components: [
+                    {
+                        type: "button",
+                        id: "open-sheet",
+                        name: "open-sheet",
+                        action: {
+                            type: "navigate_to",
+                            destination: "sheet",
+                            sheet: {
+                                type: "sheet",
+                                id: "sheet",
+                                name: "sheet",
+                                size: { width: { type: "fill" }, height: { type: "fit" } },
+                                background_blur: true,
+                                stack: createStack({
+                                    id: "sheet-stack",
+                                    name: "Sheet",
+                                    components: [
+                                        createTextComponent({
+                                            id: "sheet-title",
+                                            textLid: "sheet_title",
+                                        }),
+                                    ],
+                                }),
+                            },
+                        },
+                        stack: createStack({
+                            id: "open-sheet-stack",
+                            name: "open-sheet",
+                            components: [
+                                createTextComponent({
+                                    id: "open-sheet-text",
+                                    textLid: "open_sheet",
+                                }),
+                            ],
+                        }),
+                    },
+                ],
+            }),
+        },
+    },
+};

package/dist/components/paywall/fixtures/sheet-close-button-paywall.d.ts

@@ -0,0 +1,2 @@
+import type { PaywallData } from "../../../types/paywall";
+export declare const SHEET_CLOSE_BUTTON_PAYWALL: PaywallData;

package/dist/components/paywall/fixtures/sheet-close-button-paywall.js

@@ -0,0 +1,62 @@
+import { createStack, createTextComponent } from "./helpers";
+function button(id, textLid, action) {
+    return {
+        type: "button",
+        id,
+        name: id,
+        action,
+        stack: createStack({
+            id: `${id}-stack`,
+            name: id,
+            components: [createTextComponent({ id: `${id}-text`, textLid })],
+        }),
+    };
+}
+// Sheet whose close button uses navigate_back, as the builder configures it.
+export const SHEET_CLOSE_BUTTON_PAYWALL = {
+    id: "sheet-close-button-paywall",
+    default_locale: "en_US",
+    components_localizations: {
+        en_US: {
+            open_sheet: "Included devices",
+            sheet_title: "Devices",
+            close_sheet: "Close",
+            close_paywall: "Dismiss paywall",
+        },
+    },
+    components_config: {
+        base: {
+            stack: createStack({
+                id: "root",
+                name: "Root",
+                components: [
+                    button("close-paywall", "close_paywall", { type: "navigate_back" }),
+                    button("open-sheet", "open_sheet", {
+                        type: "navigate_to",
+                        destination: "sheet",
+                        sheet: {
+                            type: "sheet",
+                            id: "devices-sheet",
+                            name: "devices_sheet",
+                            size: { width: { type: "fill" }, height: { type: "fit" } },
+                            background_blur: true,
+                            stack: createStack({
+                                id: "sheet-stack",
+                                name: "Sheet",
+                                components: [
+                                    createTextComponent({
+                                        id: "sheet-title",
+                                        textLid: "sheet_title",
+                                    }),
+                                    button("close-sheet", "close_sheet", {
+                                        type: "navigate_back",
+                                    }),
+                                ],
+                            }),
+                        },
+                    }),
+                ],
+            }),
+        },
+    },
+};

package/dist/components/workflows/Workflow.svelte

@@ -142,7 +142,8 @@
       for (const [key, declaration] of Object.entries(
         screen.state_declarations ?? {},
       )) {
-        if (!Object.hasOwn(merged, key)) merged[key] = declaration;
+        if (!Object.prototype.hasOwnProperty.call(merged, key))
+          merged[key] = declaration;
       }
     }
     return merged;

package/dist/stores/localization.d.ts

@@ -1,7 +1,10 @@
 import type { Localizations } from "../types/localization";
+import type { ImageInfo } from "../types/media";
 type GetLocalizedString = (id?: string) => string | undefined;
+export type GetLocalizedImage = (id?: string) => ImageInfo | undefined;
 interface LocalizationContext {
     getLocalizedString: GetLocalizedString;
+    getLocalizedImage: GetLocalizedImage;
 }
 export interface LocalizationContextProps {
     defaultLocale: string;

package/dist/stores/localization.js

@@ -1,9 +1,9 @@
 import { getContext, setContext } from "svelte";
 const key = Symbol("localization");
 export function setLocalizationContext(props) {
-    const getLocalizedString = (id) => {
+    const getLocalizedValue = (id) => {
         if (!id) {
-            return "";
+            return undefined;
         }
         const { selectedLocale, defaultLocale, localizations } = props();
         const locale = selectedLocale ?? defaultLocale;
@@ -11,8 +11,20 @@ export function setLocalizationContext(props) {
         const fallback = localizations[defaultLocale]?.[id];
         return selected ?? fallback;
     };
+    const getLocalizedString = (id) => {
+        if (!id) {
+            return "";
+        }
+        const value = getLocalizedValue(id);
+        return typeof value === "string" ? value : undefined;
+    };
+    const getLocalizedImage = (id) => {
+        const value = getLocalizedValue(id);
+        return typeof value === "object" ? value : undefined;
+    };
     const context = {
         getLocalizedString,
+        getLocalizedImage,
     };
     setContext(key, context);
     return context;

package/dist/stores/state.js

@@ -34,14 +34,14 @@ export class PaywallStateStore {
     registerDeclarations(declarations) {
         let changed = false;
         for (const [key, declaration] of Object.entries(declarations)) {
-            if (Object.hasOwn(this.#declaredDefaults, key))
+            if (Object.prototype.hasOwnProperty.call(this.#declaredDefaults, key))
                 continue;
             const normalized = this.#normalizeForType(declaration.default, declaration.type);
             if (normalized === undefined)
                 continue;
             this.#declaredDefaults[key] = normalized;
             this.#declaredTypes[key] = declaration.type;
-            if (!Object.hasOwn(this.#currentValues, key)) {
+            if (!Object.prototype.hasOwnProperty.call(this.#currentValues, key)) {
                 this.#currentValues[key] = normalized;
                 changed = true;
             }

package/dist/types/localization.d.ts

@@ -1,5 +1,5 @@
 import type { ImageInfo } from "./media";
 export type LocalizationValue = string | ImageInfo;
-type Localization = Partial<Record<string, string>>;
+type Localization = Partial<Record<string, LocalizationValue>>;
 export type Localizations = Partial<Record<string, Localization>>;
 export {};

package/dist/utils/safe-area-background.js

@@ -80,7 +80,7 @@ export function getSafeAreaFallbackColorHeadStyles(paywallData, hostFallbackColo
 }
 function colorAtPercent(sortedPoints, percent) {
     const firstPoint = sortedPoints[0];
-    const lastPoint = sortedPoints.at(-1);
+    const lastPoint = sortedPoints[sortedPoints.length - 1];
     if (firstPoint == null || lastPoint == null) {
         return null;
     }

package/dist/utils/style-utils.d.ts

@@ -29,6 +29,11 @@ export type ConditionContext = {
     focus?: boolean;
     error?: boolean;
 };
+/**
+ * Returns the overrides (in array order) whose conditions all match (AND) the
+ * given context, without merging their properties.
+ */
+export declare const filterMatchingOverrides: <T extends Component>(context: ConditionContext, overrides?: Overrides<T>) => Overrides<T>;
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).

package/dist/utils/style-utils.js

@@ -115,6 +115,15 @@ export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
     }
     return ids;
 }
+/**
+ * Returns the overrides (in array order) whose conditions all match (AND) the
+ * given context, without merging their properties.
+ */
+export const filterMatchingOverrides = (context, overrides) => {
+    if (!overrides)
+        return [];
+    return overrides.filter((override) => override.conditions.every((c) => conditionMatches(c, context)));
+};
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).
@@ -128,20 +137,16 @@ export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
  * (`actualProps.visible !== false`).
  */
 export const resolveOverrideProperties = (context, overrides) => {
-    if (!overrides)
-        return {};
     let merged = {};
-    for (const override of overrides) {
-        if (override.conditions.every((c) => conditionMatches(c, context))) {
-            const properties = { ...override.properties };
-            const canReveal = override.conditions.some((c) => c.type === RuleKey.StateCondition);
-            // visible: null carries no intent and must not clobber an earlier false.
-            if (properties.visible === null ||
-                (properties.visible === true && !canReveal)) {
-                delete properties.visible;
-            }
-            merged = { ...merged, ...properties };
+    for (const override of filterMatchingOverrides(context, overrides)) {
+        const properties = { ...override.properties };
+        const canReveal = override.conditions.some((c) => c.type === RuleKey.StateCondition);
+        // visible: null carries no intent and must not clobber an earlier false.
+        if (properties.visible === null ||
+            (properties.visible === true && !canReveal)) {
+            delete properties.visible;
         }
+        merged = { ...merged, ...properties };
     }
     return merged;
 };
@@ -201,8 +206,8 @@ const conditionMatches = (condition, context) => {
     if (condition.type === RuleKey.StateCondition) {
         const stateValues = context.stateValues ?? {};
         const stateDefaults = context.stateDefaults ?? {};
-        const hasCurrentValue = Object.hasOwn(stateValues, condition.name);
-        const hasDeclaredDefault = Object.hasOwn(stateDefaults, condition.name);
+        const hasCurrentValue = Object.prototype.hasOwnProperty.call(stateValues, condition.name);
+        const hasDeclaredDefault = Object.prototype.hasOwnProperty.call(stateDefaults, condition.name);
         // Undeclared key (not in store, not declared): false for BOTH operators.
         // This diverges from variable_condition (where != matches a missing variable):
         // state keys are editor-managed, so an undeclared reference is always a bug,

package/package.json

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