@revenuecat/purchases-ui-js 4.8.21 → 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/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/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/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.js

@@ -206,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.21",
+  "version": "4.8.22",
   "author": {
     "name": "RevenueCat, Inc."
   },