@revenuecat/purchases-ui-js 4.0.0 → 4.2.0

package/dist/components/paywall/Sheet.svelte

@@ -2,8 +2,16 @@
   import { getColorModeContext } from "../../stores/color-mode";
   import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
+  import BackgroundVideoSurface from "./BackgroundVideoSurface.svelte";
   import type { SheetProps } from "../../types/components/sheet";
-  import { mapBackground } from "../../utils/background-utils";
+  import {
+    mapBackground,
+    resolveBackgroundVideoForSurface,
+  } from "../../utils/background-utils";
+  import {
+    rcVideoBackgroundHostClass,
+    videoBackgroundHostStyles,
+  } from "../../utils/video-background-host";
   import { css, mapSize } from "../../utils/base-utils";
   import { getActiveStateProps } from "../../utils/style-utils";
   import { onMount } from "svelte";
@@ -23,6 +31,14 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
+  const hasVideoBg = $derived(background?.type === "video");
+  const videoSurface = $derived.by(() => {
+    if (!hasVideoBg) return null;
+    const bg = background;
+    if (!bg || bg.type !== "video") return null;
+    return resolveBackgroundVideoForSurface(colorMode, bg);
+  });
+
   const backdropStyle = $derived(
     css({
       background: background_blur ? "#0000003f" : "",
@@ -32,6 +48,10 @@
   const sheetStyle = $derived(
     css({
       height: mapSize(size.height),
+      ...videoBackgroundHostStyles({
+        hasVideoBg,
+        clipOverflow: true,
+      }),
       ...mapBackground(colorMode, null, background),
     }),
   );
@@ -75,7 +95,14 @@
     }
   };
 
-  let sheetClass = $derived(`sheet ${visible ? "visible" : ""}`);
+  let sheetClass = $derived(
+    [
+      `sheet ${visible ? "visible" : ""}`,
+      hasVideoBg ? rcVideoBackgroundHostClass("sheet") : "",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  );
 </script>
 
 <div
@@ -95,7 +122,21 @@
     aria-modal="true"
     {ontransitionend}
   >
-    <Stack {...stack} />
+    {#if videoSurface}
+      <BackgroundVideoSurface
+        url={videoSurface.url}
+        urlLowRes={videoSurface.url_low_res}
+        objectFit={videoSurface.fit}
+        objectPosition={videoSurface.position}
+        poster={videoSurface.posterWebp}
+        mute={videoSurface.mute}
+        loop={videoSurface.loop}
+      />
+    {/if}
+    <Stack
+      {...stack}
+      class={hasVideoBg ? "rc-sheet-stack-above-video" : undefined}
+    />
   </div>
 </div>
 
@@ -119,8 +160,30 @@
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transform: translateY(100%);
 
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: var(--overlay);
+      pointer-events: none;
+    }
+
     &.visible {
       transform: translateY(0);
     }
   }
+
+  .sheet.rc-sheet-video-bg::before {
+    z-index: 2;
+  }
+
+  /* Match stack video stacking: tint above video (::before z-index). */
+  .sheet.rc-sheet-video-bg > :global(.rc-bg-video) {
+    z-index: 1;
+  }
+
+  .sheet.rc-sheet-video-bg > :global(.rc-sheet-stack-above-video) {
+    position: relative;
+    z-index: 3;
+  }
 </style>

package/dist/components/paywall/ViewportBackdrop.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
+  import BackgroundVideoSurface from "./BackgroundVideoSurface.svelte";
+
+  // iOS WebKit only reliably propagates background-color (not background-image)
+  // 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 backdropStyle = $derived.by((): string => {
+    if (
+      model.kind === "style" &&
+      model.style.background?.includes("gradient")
+    ) {
+      return Object.entries(model.style)
+        .map(([k, v]) => `${k}:${v}`)
+        .join(";");
+    }
+    if (model.kind === "image") {
+      return [
+        `background-image:url("${model.src}")`,
+        `background-size:${model.fit}`,
+        `background-position:${model.position}`,
+        `background-repeat:no-repeat`,
+      ].join(";");
+    }
+    return "";
+  });
+
+  const overlayStyle = $derived.by((): string | null => {
+    if (model.kind !== "image" && model.kind !== "video") {
+      return null;
+    }
+    if (!model.overlay || model.overlay === "none") {
+      return null;
+    }
+    return `background:${model.overlay}`;
+  });
+
+  const shouldRenderBackdrop = $derived(
+    backdropStyle !== "" || model.kind === "video",
+  );
+</script>
+
+{#if shouldRenderBackdrop}
+  <div
+    class="viewport-backdrop"
+    style={backdropStyle !== "" ? backdropStyle : undefined}
+  >
+    {#if model.kind === "video"}
+      <BackgroundVideoSurface
+        url={model.url}
+        urlLowRes={model.url_low_res}
+        objectFit={model.fit}
+        objectPosition={model.position}
+        poster={model.posterWebp}
+        mute={model.mute}
+        loop={model.loop}
+      />
+    {/if}
+    {#if overlayStyle}
+      <div
+        class="viewport-backdrop-overlay"
+        class:z-over-video-bg={model.kind === "video"}
+        style={overlayStyle}
+      ></div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .viewport-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .viewport-backdrop-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .viewport-backdrop-overlay.z-over-video-bg {
+    z-index: 2;
+  }
+</style>

package/dist/components/{layout/Main → paywall}/ViewportBackdrop.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PaywallRootBackgroundModel } from "../../../utils/background-utils";
+import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
 type $$ComponentProps = {
     model: PaywallRootBackgroundModel;
 };

package/dist/components/paywall/fixtures/sheet-video-stacking-paywall.d.ts

@@ -0,0 +1,6 @@
+import type { PaywallData } from "../../../types/paywall";
+/**
+ * Minimal variant of {@link SHEET_PAYWALL} with a sheet-level video background for
+ * Storybook z-order regression checks (`rc-sheet-video-bg`).
+ */
+export declare const SHEET_PAYWALL_VIDEO_STACKING: PaywallData;

package/dist/components/paywall/fixtures/sheet-video-stacking-paywall.js

@@ -0,0 +1,42 @@
+import { STORY_BACKGROUND_VIDEO_FILL } from "../../../stories/video-background-story-fixture";
+import { SHEET_PAYWALL } from "./sheet-paywall";
+/**
+ * Minimal variant of {@link SHEET_PAYWALL} with a sheet-level video background for
+ * Storybook z-order regression checks (`rc-sheet-video-bg`).
+ */
+export const SHEET_PAYWALL_VIDEO_STACKING = (() => {
+    const data = structuredClone(SHEET_PAYWALL);
+    data.id = "sheet_paywall_video_stacking";
+    data.components_localizations ??= {};
+    data.components_localizations.en_US ??= {};
+    Object.assign(data.components_localizations.en_US, {
+        "5GWqi3MXpt": "Content above tinted video",
+        E6CK5Xd1cE: "Open sheet · video backdrop",
+    });
+    const first = data.components_config.base.stack.components[0];
+    if (!first || first.type !== "button") {
+        return data;
+    }
+    const { action } = first;
+    if (!action ||
+        action.type !== "navigate_to" ||
+        action.destination !== "sheet") {
+        return data;
+    }
+    const { sheet } = action;
+    if (!sheet) {
+        return data;
+    }
+    sheet.background = STORY_BACKGROUND_VIDEO_FILL;
+    sheet.stack.background = null;
+    const headline = sheet.stack.components[0];
+    if (headline?.type === "text") {
+        headline.horizontal_alignment = "center";
+        headline.color = {
+            light: { type: "hex", value: "#ffffff" },
+        };
+        headline.font_size = "heading_m";
+        headline.font_weight = "semibold";
+    }
+    return data;
+})();

package/dist/components/stack/Stack.stories.svelte

@@ -6,6 +6,7 @@
   import { localizationDecorator } from "../../stories/localization-decorator";
   import type { StackProps } from "../../types/components/stack";
   import type { Component } from "../../types/component";
+  import { STORY_BACKGROUND_VIDEO_FILL } from "../../stories/video-background-story-fixture";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
@@ -153,6 +154,79 @@
   }}
 />
 
+<Story
+  name="Surface — video background"
+  parameters={{
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        story:
+          "**Z-order:** `BackgroundVideoSurface` (`z-index: 1`), `::before` tint (`z-index: 2`), siblings (`z-index: 3`). Content and controls should remain sharp above the tint; motion is disabled in Chromatic.",
+      },
+    },
+  }}
+  args={{
+    size: {
+      width: { type: "fixed", value: 380 },
+      height: { type: "fixed", value: 260 },
+    },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 20,
+        top_trailing: 20,
+        bottom_leading: 20,
+        bottom_trailing: 20,
+      },
+    },
+    background: STORY_BACKGROUND_VIDEO_FILL,
+    components: [
+      {
+        type: "text",
+        size: {
+          width: { type: "fit" },
+          height: { type: "fit" },
+        },
+        horizontal_alignment: "center",
+        name: "Item 1",
+        id: "vbg-1",
+        text_lid: "id1",
+        color: {
+          light: { type: "hex", value: "#ffffff" },
+        },
+        font_name: null,
+        font_size: "heading_s",
+        font_weight: "bold",
+        background_color: {
+          dark: { type: "alias", value: "transparent" },
+          light: { type: "alias", value: "transparent" },
+        },
+      },
+      {
+        type: "text",
+        size: {
+          width: { type: "fill" },
+          height: { type: "fit" },
+        },
+        horizontal_alignment: "center",
+        name: "Item 2",
+        id: "vbg-2",
+        text_lid: "id2",
+        color: {
+          light: { type: "hex", value: "#e2e8f0" },
+        },
+        font_name: null,
+        font_size: "body_m",
+        font_weight: "regular",
+        background_color: {
+          dark: { type: "alias", value: "transparent" },
+          light: { type: "alias", value: "transparent" },
+        },
+      },
+    ] as unknown as TextNodeProps[],
+  }}
+/>
+
 <Story
   name="Z Layer"
   args={{

package/dist/components/stack/Stack.svelte

@@ -6,8 +6,16 @@
   import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
   import { getOptionalVariablesContext } from "../../stores/variables";
+  import BackgroundVideoSurface from "../paywall/BackgroundVideoSurface.svelte";
   import type { StackProps } from "../../types/components/stack";
-  import { mapBackground } from "../../utils/background-utils";
+  import {
+    mapBackground,
+    resolveBackgroundVideoForSurface,
+  } from "../../utils/background-utils";
+  import {
+    rcVideoBackgroundHostClass,
+    videoBackgroundHostStyles,
+  } from "../../utils/video-background-host";
   import {
     css,
     mapBorder,
@@ -66,6 +74,15 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
+  const hasVideoBg = $derived(background?.type === "video");
+  const videoSurface = $derived.by(() => {
+    if (!hasVideoBg) return null;
+    const bg = background;
+    if (!bg || bg.type !== "video") return null;
+    return resolveBackgroundVideoForSurface(colorMode, bg);
+  });
+  const borderRadiusCss = $derived(mapBorderRadius(shape));
+
   const stackStyle = $derived(
     css({
       display: "flex",
@@ -78,8 +95,12 @@
       padding: mapSpacing(padding),
       ...mapBackground(colorMode, background_color, background),
       ...mapBorder(colorMode, border),
-      "border-radius": mapBorderRadius(shape),
+      "border-radius": borderRadiusCss,
       "box-shadow": mapShadow(colorMode, shadow),
+      ...videoBackgroundHostStyles({
+        hasVideoBg,
+        clipOverflow: borderRadiusCss !== "0",
+      }),
       // Read from props proxy so $derived re-evaluates when parent updates style
       ...props.style,
     }),
@@ -124,9 +145,28 @@
     role={onclick !== undefined ? "button" : undefined}
     {onclick}
     style={stackStyle}
-    class={["stack", "rc-gradient-border", classProp].filter(Boolean).join(" ")}
+    class={[
+      "stack",
+      "rc-gradient-border",
+      classProp,
+      hasVideoBg ? rcVideoBackgroundHostClass("stack") : "",
+    ]
+      .filter(Boolean)
+      .join(" ")}
     data-testid={testId}
   >
+    {#if videoSurface}
+      <BackgroundVideoSurface
+        url={videoSurface.url}
+        urlLowRes={videoSurface.url_low_res}
+        objectFit={videoSurface.fit}
+        objectPosition={videoSurface.position}
+        poster={videoSurface.posterWebp}
+        mute={videoSurface.mute}
+        loop={videoSurface.loop}
+      />
+    {/if}
+
     {#if badge}
       <div style={badgeStyle}>
         <Node nodeData={badge.stack} />
@@ -173,4 +213,19 @@
       background: var(--overlay);
     }
   }
+
+  .stack.rc-stack-video-bg::before {
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .stack.rc-stack-video-bg > :global(.rc-bg-video) {
+    z-index: 1;
+  }
+
+  /* Keep flex children interactive and above tinted overlay (::before z-index). */
+  .stack.rc-stack-video-bg > :global(:not(.rc-bg-video)) {
+    position: relative;
+    z-index: 3;
+  }
 </style>

package/dist/components/tabs/Tabs.stories.svelte

@@ -5,6 +5,7 @@
   import { variablesDecorator } from "../../stories/variables-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { VARIABLES } from "../paywall/fixtures/variables";
+  import { TABS_VIDEO_STACKING_STORY_ARGS } from "./tabs-video-stacking-story-args";
 
   const defaultLocale = "en_US";
 
@@ -1428,3 +1429,29 @@
     type: "tabs",
   }}
 />
+
+<Story
+  name="Surface — video background (stacking / z-order)"
+  parameters={{
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        story:
+          "**Z-order:** video layer → tinted `::before` → tab content clip. Rounded corners should clip the backdrop; Chromatic skips motion snapshots.",
+      },
+    },
+  }}
+  decorators={[
+    componentDecorator(),
+    localizationDecorator({
+      defaultLocale,
+      localizations: {
+        [defaultLocale]: {
+          "t-a-body": "Tab A · content above video",
+          "t-b-body": "Tab B · content above video",
+        },
+      },
+    }),
+  ]}
+  args={TABS_VIDEO_STACKING_STORY_ARGS}
+/>

package/dist/components/tabs/Tabs.svelte

@@ -4,8 +4,16 @@
   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 { mapBackground } from "../../utils/background-utils";
+  import {
+    mapBackground,
+    resolveBackgroundVideoForSurface,
+  } from "../../utils/background-utils";
+  import {
+    rcVideoBackgroundHostClass,
+    videoBackgroundHostStyles,
+  } from "../../utils/video-background-host";
   import {
     css,
     mapBorder,
@@ -40,15 +48,30 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
+  const hasVideoBg = $derived(background?.type === "video");
+  const videoSurface = $derived.by(() => {
+    if (!hasVideoBg) return null;
+    const bg = background;
+    if (!bg || bg.type !== "video") return null;
+    return resolveBackgroundVideoForSurface(colorMode, bg);
+  });
+
+  const tabsBorderRadiusCss = $derived(mapBorderRadius(shape));
+
   const styles = $derived(
     css({
+      position: "relative",
       width: mapSize(size.width),
       height: mapSize(size.height),
       margin: mapSpacing(margin),
       padding: mapSpacing(padding),
+      ...videoBackgroundHostStyles({
+        hasVideoBg,
+        clipOverflow: tabsBorderRadiusCss !== "0",
+      }),
       ...mapBackground(colorMode, null, background),
       ...mapBorder(colorMode, border),
-      "border-radius": mapBorderRadius(shape),
+      "border-radius": tabsBorderRadiusCss,
       "box-shadow": mapShadow(colorMode, shadow),
     }),
   );
@@ -117,9 +140,51 @@
 </script>
 
 {#if isVisible}
-  <div class="rc-gradient-border" style={styles}>
+  <div
+    class={[
+      "rc-gradient-border",
+      hasVideoBg ? rcVideoBackgroundHostClass("tabs") : "",
+    ]
+      .filter(Boolean)
+      .join(" ")}
+    style={styles}
+  >
+    {#if videoSurface}
+      <BackgroundVideoSurface
+        url={videoSurface.url}
+        urlLowRes={videoSurface.url_low_res}
+        objectFit={videoSurface.fit}
+        objectPosition={videoSurface.position}
+        poster={videoSurface.posterWebp}
+        mute={videoSurface.mute}
+        loop={videoSurface.loop}
+      />
+    {/if}
     {#if $tab !== undefined}
-      <Stack {...$tab.stack} />
+      <Stack
+        {...$tab.stack}
+        class={hasVideoBg ? "rc-tabs-stack-front" : undefined}
+      />
     {/if}
   </div>
 {/if}
+
+<style>
+  .rc-tabs-video-bg::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--overlay);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .rc-tabs-video-bg > :global(.rc-bg-video) {
+    z-index: 1;
+  }
+
+  .rc-tabs-video-bg > :global(.rc-tabs-stack-front) {
+    position: relative;
+    z-index: 3;
+  }
+</style>

package/dist/components/tabs/tabs-video-stacking-story-args.d.ts

@@ -0,0 +1,3 @@
+import type { TabsProps } from "../../types/components/tabs";
+/** Minimal Tabs tree for Storybook layering checks (`rc-tabs-video-bg`). */
+export declare const TABS_VIDEO_STACKING_STORY_ARGS: TabsProps;