@revenuecat/purchases-ui-js 3.10.0 → 3.11.1

package/dist/components/footer/Footer.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import type { FooterProps } from "../../types/components/footer";
+  import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
 
   const { stack }: FooterProps = $props();
 </script>
 
-<div>
+<div style="z-index: {STICKY_OVERLAY_Z_INDEX};">
   <Stack {...stack} />
 </div>
 
@@ -14,7 +15,6 @@
     position: sticky;
     bottom: 0;
     width: 100%;
-    z-index: 1000;
 
     display: flex;
     flex-direction: row;

package/dist/components/header/Header.stories.svelte

@@ -0,0 +1,140 @@
+<script module lang="ts">
+  import Header from "./Header.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { viewportDecorator } from "../../stories/viewport-decorator";
+  import type { HeaderProps } from "../../types/components/header";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Header",
+    component: Header,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            "2wCGhwfDvx": "Welcome to the app!",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "header",
+      id: "header",
+      name: "Header",
+      stack: {
+        background: {
+          type: "color",
+          value: {
+            light: {
+              type: "hex",
+              value: "#BEEEEFFF",
+            },
+          },
+        },
+        background_color: null,
+        badge: null,
+        border: null,
+        components: [
+          {
+            background_color: null,
+            color: {
+              light: {
+                type: "hex",
+                value: "#000000",
+              },
+            },
+            font_name: null,
+            font_size: 14,
+            font_weight: "regular",
+            font_weight_int: 400,
+            horizontal_alignment: "leading",
+            id: "Fhqh8-bFi_",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            name: "",
+            padding: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            text_lid: "2wCGhwfDvx",
+            type: "text",
+          },
+        ],
+        dimension: {
+          alignment: "center",
+          distribution: "start",
+          type: "vertical",
+        },
+        id: "n_EBzFgjzA",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "Header",
+        padding: {
+          bottom: 20,
+          leading: 0,
+          top: 20,
+          trailing: 0,
+        },
+        shadow: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#00000033",
+            },
+          },
+          radius: 16,
+          x: 0,
+          y: 4,
+        },
+        shape: {
+          corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 0,
+            top_trailing: 0,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fit",
+            value: null,
+          },
+          width: {
+            type: "fill",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+    } satisfies HeaderProps,
+  });
+</script>
+
+<Story name="Header component" />

package/dist/components/header/Header.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Header from "./Header.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Header: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Header = InstanceType<typeof Header>;
+export default Header;

package/dist/components/header/Header.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Stack from "../stack/Stack.svelte";
+  import type { HeaderProps } from "../../types/components/header";
+
+  const { stack }: HeaderProps = $props();
+</script>
+
+<div>
+  <Stack {...stack} />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+</style>

package/dist/components/header/Header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HeaderProps } from "../../types/components/header";
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/paywall/Node.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     Footer,
+    Header,
     Image,
     Package,
     PurchaseButton,
@@ -38,6 +39,7 @@
     countdown: Countdown,
     express_purchase_button: ExpressPurchaseButton,
     footer: Footer,
+    header: Header,
     icon: Icon,
     image: Image,
     input_multiple_choice: InputMultipleChoice,
@@ -84,6 +86,10 @@
       ];
     }
 
+    if (nodeData.type === "fallback_header") {
+      return undefined;
+    }
+
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [

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

@@ -14,6 +14,8 @@
     pastaPaywallData,
     paywallData,
     paywallWithFooter,
+    paywallWithHeader,
+    paywallWithTransparentHeaderAndTopImage,
     posterMakerTemplate,
     timelineTemplate,
     uiConfigData,
@@ -323,6 +325,19 @@
   }}
 />
 
+<Story
+  name="Header"
+  args={{
+    paywallData: paywallWithHeader,
+  }}
+/>
+
+<Story
+  name="Header with transparent background and top image"
+  args={{
+    paywallData: paywallWithTransparentHeaderAndTopImage,
+  }}
+/>
 <Story
   name="Timeline"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Footer from "../footer/Footer.svelte";
+  import Header from "../header/Header.svelte";
   import { setColorModeContext } from "../../stores/color-mode";
   import {
     createInputValidationContext,
@@ -29,6 +30,7 @@
   } from "../../types/variables";
   import { mapBackground } from "../../utils/background-utils";
   import { css } from "../../utils/base-utils";
+  import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
   import { registerFonts } from "../../utils/font-utils";
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
@@ -244,16 +246,38 @@
 
   const paywallClass = $derived(sheet ? "paywall blur" : "paywall");
 
-  const { stack, sticky_footer } = base;
+  const { stack, sticky_footer, header } = base;
+
+  const firstComponent = stack.components[0];
+  const firstComponentIsFullWidthImage =
+    firstComponent?.type === "image" &&
+    firstComponent.size.width.type === "fill";
+  const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
+
+  let headerHeight = $state(0);
 </script>
 
 <svelte:boundary onerror={onError}>
   <div class={paywallClass} {style}>
+    {#if header}
+      <div
+        class="header-wrapper"
+        style="z-index: {STICKY_OVERLAY_Z_INDEX};"
+        bind:clientHeight={headerHeight}
+      >
+        <Header {...header} />
+      </div>
+    {/if}
     <div
       class="paywall-content"
-      style={maxContentWidth
-        ? `max-width: ${maxContentWidth}; margin-inline: auto;`
-        : ""}
+      style={[
+        maxContentWidth
+          ? `max-width: ${maxContentWidth}; margin-inline: auto;`
+          : "",
+        pullContentUnderHeader ? `margin-top: -${headerHeight}px;` : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
     >
       <Stack {...stack} class="paywall-content-scroll" />
       {#if sticky_footer}
@@ -286,6 +310,12 @@
     }
   }
 
+  .header-wrapper {
+    position: sticky;
+    top: 0;
+    width: 100%;
+  }
+
   .paywall-content {
     width: 100%;
     flex: 1;

package/dist/components/video/Video.stories.svelte

@@ -107,6 +107,16 @@
   }}
 />
 
+<Story
+  name="Autoplay Unmuted"
+  args={{
+    show_controls: false,
+    auto_play: true,
+    mute_audio: false,
+    loop: true,
+  }}
+/>
+
 <Story
   name="With Fallback Image"
   args={{

package/dist/components/video/Video.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { untrack } from "svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getSelectedStateContext } from "../../stores/selected";
   import type { VideoProps } from "../../types/components/video";
   import type { VideoFiles, ImageFiles } from "../../types/media";
   import {
     css,
+    mapBorderRadius,
     mapColor,
     mapColorMode,
     mapFitMode,
@@ -59,6 +61,7 @@
   });
   let videoElement = $state<HTMLVideoElement | null>(null);
   let hasVideoError = $state(false);
+  let showControlsFallback = $state(false);
 
   // Load video or fallback image metadata to get dimensions
   $effect(() => {
@@ -157,87 +160,162 @@
 
     const { x, y, radius, color } = shadow;
     const shadowColor = mapColor(colorMode, color);
-    return `filter: drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
+    return `filter:drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
   });
 
+  const wrapperStyle = $derived.by(() => {
+    return svgStyle ? `${style};${svgStyle}` : style;
+  });
+
+  const clipDivStyle = $derived(
+    css({
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      "border-radius": mapBorderRadius(mask_shape),
+      "clip-path":
+        mask_shape?.type === "concave" || mask_shape?.type === "convex"
+          ? `url(#${id}-path)`
+          : "none",
+    }),
+  );
+
   const overlay = $derived(
     color_overlay && mapColorMode(colorMode, color_overlay),
   );
 
   const shouldShowFallback = $derived(hasVideoError || !video);
-</script>
 
-<div {style} bind:clientWidth={wrapperWidth}>
-  <svg
-    bind:contentRect={svgRect}
-    width="100%"
-    height="100%"
-    {viewBox}
-    style={svgStyle}
-  >
-    <defs>
-      <clipPath id={`${id}-path`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </clipPath>
-
-      <g id={`${id}-border`}>
-        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
-      </g>
+  // Programmatic autoplay (single path; HTML autoplay omitted to avoid iOS quirks).
+  $effect(() => {
+    if (!auto_play) {
+      untrack(() => {
+        showControlsFallback = false;
+      });
+      return;
+    }
 
-      <Overlay id={`${id}-overlay`} {overlay} />
-    </defs>
+    if (shouldShowFallback || !video) {
+      untrack(() => {
+        showControlsFallback = false;
+      });
+      return;
+    }
 
-    {#if border && border.width > 0}
-      <use href={`#${id}-border`} fill="transparent" />
-    {/if}
+    const el = videoElement;
+    if (!el) {
+      return;
+    }
 
-    <g clip-path={`url(#${id}-path)`}>
-      <foreignObject x="0" y="0" width="100%" height="100%">
-        {#if shouldShowFallback && fallbackImage}
-          <img
-            src={fallbackImage.original}
-            style="object-fit:{mapFitMode(fit_mode)}"
-            alt=""
-          />
-        {:else if video}
-          <video
-            bind:this={videoElement}
-            src={video.url}
-            style="object-fit:{mapFitMode(fit_mode)}"
-            autoplay={auto_play}
-            {loop}
-            muted={mute_audio}
-            controls={show_controls}
-            playsinline
-          >
-            <track kind="captions" />
-          </video>
-        {/if}
-      </foreignObject>
-
-      {#if overlay}
-        <rect
-          x="0"
-          y="0"
-          height="100%"
-          width="100%"
-          fill={`url(#${id}-overlay)`}
+    void video.url;
+    void mute_audio;
+
+    untrack(() => {
+      showControlsFallback = false;
+    });
+
+    const playPromise = el.play();
+    if (playPromise !== undefined) {
+      playPromise.catch(() => {
+        untrack(() => {
+          showControlsFallback = true;
+        });
+      });
+    }
+  });
+</script>
+
+<div class="video-outer" style={wrapperStyle} bind:clientWidth={wrapperWidth}>
+  <div class="video-media">
+    <div class="video-clip" style={clipDivStyle}>
+      {#if shouldShowFallback && fallbackImage}
+        <img
+          src={fallbackImage.original}
+          style="object-fit:{mapFitMode(fit_mode)}"
+          alt=""
         />
+      {:else if video}
+        <video
+          bind:this={videoElement}
+          src={video.url}
+          style="object-fit:{mapFitMode(fit_mode)}"
+          {loop}
+          muted={mute_audio}
+          controls={show_controls || showControlsFallback}
+          playsinline
+        >
+          <track kind="captions" />
+        </video>
       {/if}
+    </div>
+
+    <svg
+      class="video-deco"
+      bind:contentRect={svgRect}
+      width="100%"
+      height="100%"
+      {viewBox}
+    >
+      <defs>
+        <clipPath id={`${id}-path`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </clipPath>
+
+        <g id={`${id}-border`}>
+          <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+        </g>
+
+        <Overlay id={`${id}-overlay`} {overlay} />
+      </defs>
 
       {#if border && border.width > 0}
-        <use
-          href={`#${id}-border`}
-          fill="none"
-          stroke={mapColor(colorMode, border.color)}
-          stroke-width={border.width}
-        />
+        <use href={`#${id}-border`} fill="transparent" />
       {/if}
-    </g>
-  </svg>
+
+      <g clip-path={`url(#${id}-path)`}>
+        {#if overlay}
+          <rect
+            x="0"
+            y="0"
+            height="100%"
+            width="100%"
+            fill={`url(#${id}-overlay)`}
+          />
+        {/if}
+
+        {#if border && border.width > 0}
+          <use
+            href={`#${id}-border`}
+            fill="none"
+            stroke={mapColor(colorMode, border.color)}
+            stroke-width={border.width}
+          />
+        {/if}
+      </g>
+    </svg>
+  </div>
 </div>
 
 <style>
+  .video-outer {
+    position: relative;
+  }
+
+  .video-media {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .video-deco {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
   video,
   img {
     width: 100%;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
 export { default as Countdown } from "./components/countdown/Countdown.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { default as Header } from "./components/header/Header.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";
 export { default as InputOption } from "./components/options/InputOption.svelte";

package/dist/index.js

@@ -2,6 +2,7 @@
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
 export { default as Countdown } from "./components/countdown/Countdown.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { default as Header } from "./components/header/Header.svelte";
 export { default as Image } from "./components/image/Image.svelte";
 export { default as InputMultipleChoice } from "./components/options/InputMultipleChoice.svelte";
 export { default as InputOption } from "./components/options/InputOption.svelte";

package/dist/stories/fixtures.d.ts

@@ -26,6 +26,8 @@ export declare const localizations: {
 };
 export declare const colorModeOverrideTemplate: PaywallData;
 export declare const paywallWithFooter: PaywallData;
+export declare const paywallWithHeader: PaywallData;
+export declare const paywallWithTransparentHeaderAndTopImage: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
 export declare const brandingAppearances: Record<string, BrandingAppearance | null>;