@revenuecat/purchases-ui-js 4.0.0 → 4.1.0

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

@@ -3,7 +3,6 @@
   import type { ComponentProps } from "svelte";
 
   import Paywall from "./Paywall.svelte";
-  import Main from "../layout/Main/Main.svelte";
   import {
     alignmentPaywallData,
     calmPaywallData,
@@ -63,9 +62,7 @@
 
 {#snippet template(props: ComponentProps<typeof Paywall>)}
   <div class="paywall-story-frame">
-    <Main paywallData={props.paywallData}>
-      <Paywall {...props} />
-    </Main>
+    <Paywall {...props} />
   </div>
 {/snippet}
 
@@ -510,10 +507,4 @@
     background-color: var(--rc-purchases-ui-bg-color, Canvas);
     color-scheme: light dark;
   }
-
-  /* Allow chromatic to capture the full content snapshot */
-  .paywall-story-frame :global(.paywall-content-scroll) {
-    flex: 1 1 auto;
-    overflow-y: visible;
-  }
 </style>

package/dist/components/paywall/Paywall.svelte

@@ -32,13 +32,17 @@
     type PackageInfo,
     type VariableDictionary,
   } from "../../types/variables";
+  import { paywallRootBackgroundModel } from "../../utils/background-utils";
+  import { css } from "../../utils/base-utils";
   import { STICKY_OVERLAY_Z_INDEX } from "../../utils/constants";
+  import { applyDocumentBackground } from "../../utils/document-background";
   import { registerFonts } from "../../utils/font-utils";
   import { findSelectedPackageId } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
   import Sheet from "./Sheet.svelte";
+  import ViewportBackdrop from "./ViewportBackdrop.svelte";
   import {
     type PackageInfoStore,
     setPackageInfoContext,
@@ -128,13 +132,39 @@
     customVariables = {},
   }: Props = $props();
 
-  setColorModeContext(() => preferredColorMode);
+  const getColorMode = setColorModeContext(() => preferredColorMode);
+
+  const viewportBackdropModel = $derived(
+    paywallRootBackgroundModel(paywallData, getColorMode()),
+  );
+
+  const instanceId: symbol = Symbol();
+  $effect(() =>
+    applyDocumentBackground(instanceId, viewportBackdropModel, paywallData),
+  );
 
   const { default_locale, components_config, components_localizations } =
     paywallData;
   const { base } = components_config;
   const defaultPackageId = findSelectedPackageId(base);
 
+  // Solid colours paint here so the paywall has its own bg without requiring
+  // consumer CSS. Gradients and images are deliberately skipped — ViewportBackdrop
+  // paints those at viewport scale, and rendering them on both surfaces would
+  // anchor the gradient stops to two different boxes and produce a visible seam
+  // at the paywall edge.
+  const paywallStyle = $derived.by((): string => {
+    const m = viewportBackdropModel;
+    if (
+      m.kind === "style" &&
+      m.style.background &&
+      !m.style.background.includes("gradient")
+    ) {
+      return css(m.style);
+    }
+    return "";
+  });
+
   const { getLocalizedString } = setLocalizationContext(() => ({
     defaultLocale: default_locale,
     selectedLocale,
@@ -300,7 +330,8 @@
 </script>
 
 <svelte:boundary onerror={onError}>
-  <div class={paywallClass}>
+  <div class={paywallClass} style={paywallStyle}>
+    <ViewportBackdrop model={viewportBackdropModel} />
     {#if header}
       <div
         class="header-wrapper"
@@ -345,10 +376,9 @@
   .paywall {
     position: relative;
     display: flex;
-    flex: 1 1 auto;
     flex-direction: column;
     align-items: stretch;
-    min-height: 0;
+    height: 100%;
 
     transition-property: filter, transform;
     transition-duration: 0.1s;
@@ -370,13 +400,13 @@
   .paywall-content {
     z-index: 2;
     width: 100%;
-    flex: 1;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     min-height: 0;
 
     & > :global(.paywall-content-scroll) {
-      flex: 1 1 0;
+      flex: 1 1 auto;
       min-height: 0;
       overflow-y: auto;
     }

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

@@ -1,14 +1,10 @@
 <script lang="ts">
-  import type { PaywallRootBackgroundModel } from "../../../utils/background-utils";
+  import type { PaywallRootBackgroundModel } from "../../utils/background-utils";
 
-  // This component exists because iOS WebKit does not reliably extend body's
-  // background-image (gradients, bitmaps) into safe-area strips — only background-color
-  // propagates reliably via the viewport canvas. A dedicated position:fixed element that
-  // explicitly fills the full viewport (including safe areas) is the consistent paint
+  // 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.
-  //
-  // Solid colours are NOT handled here — they use background-color on body instead,
-  // which avoids compositor surface churn on navigation.
   const { model }: { model: PaywallRootBackgroundModel } = $props();
 
   const backdropStyle = $derived.by((): string => {

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/video/Video.svelte

@@ -70,7 +70,13 @@
   });
   let videoElement = $state<HTMLVideoElement | null>(null);
   let hasVideoError = $state(false);
-  let showControlsFallback = $state(false);
+  /**
+   * When `mute_audio` is false, unmuted `play()` often fails after a full reload (autoplay policy).
+   * Retrying with muted playback requires keeping the `<video muted>` binding in sync with the element.
+   */
+  let playbackMutedOverride = $state(false);
+  /** Prevents repeated `load()` / `play()` nudge when the autoplay $effect re-runs (was resetting iOS to readyState 0). */
+  let lastAutoplayBootstrapUrl = $state<string | null>(null);
 
   // Load video or fallback image metadata to get dimensions
   $effect(() => {
@@ -138,7 +144,13 @@
     if (size.height.type === "fixed") {
       return size.height.value;
     }
-    return Math.round(wrapperWidth * (videoSize.height / videoSize.width));
+    const w = videoSize.width;
+    const h = videoSize.height;
+    if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+      // Avoid 0-height box and NaN before metadata (`NaN <= 0` is false); 16:9 placeholder until dimensions resolve.
+      return wrapperWidth > 0 ? Math.round(wrapperWidth * (9 / 16)) : 200;
+    }
+    return Math.round(wrapperWidth * (h / w));
   });
 
   const style = $derived(
@@ -195,42 +207,211 @@
 
   const shouldShowFallback = $derived(hasVideoError || !video);
 
-  // Programmatic autoplay (single path; HTML autoplay omitted to avoid iOS quirks).
+  // Autoplay: native `autoplay` + programmatic `play()`. Unmuted autoplay is often blocked; we retry
+  // once with muted playback (`playbackMutedOverride`) then try to restore sound. Controls follow
+  // `show_controls` only. Bootstrap once per URL; `play()` when `readyState >= HAVE_CURRENT_DATA`.
+  // Microtask + rAF retries cover decode/policy ordering; refresh leaves `document` already
+  // `complete` (`load` won't fire)—extra microtask retries `tryPlay` for muted→unmuted paths.
+  // Pair with `translateZ(0)` + rc-workflows `screen-slide-fade`.
   $effect(() => {
     if (!auto_play) {
       untrack(() => {
-        showControlsFallback = false;
+        playbackMutedOverride = false;
       });
       return;
     }
 
     if (shouldShowFallback || !video) {
       untrack(() => {
-        showControlsFallback = false;
+        playbackMutedOverride = false;
       });
       return;
     }
 
     const el = videoElement;
-    if (!el) {
-      return;
+    if (!el) return;
+
+    const vurl = video.url;
+
+    const needsBootstrap = lastAutoplayBootstrapUrl !== vurl;
+    if (needsBootstrap) {
+      lastAutoplayBootstrapUrl = vurl;
+      untrack(() => {
+        playbackMutedOverride = false;
+      });
     }
 
-    void video.url;
-    void mute_audio;
+    let cancelled = false;
+
+    /** Keep `muted` / `playsInline` aligned with `mute_audio`, `playbackMutedOverride`, and the template. */
+    const applyVideoPlaybackFlags = () => {
+      el.muted = mute_audio || playbackMutedOverride;
+      el.playsInline = true;
+    };
+
+    let playingUnmuteListener: (() => void) | null = null;
+
+    const clearPlayingUnmuteListener = () => {
+      if (playingUnmuteListener !== null) {
+        el.removeEventListener("playing", playingUnmuteListener);
+        playingUnmuteListener = null;
+      }
+    };
+
+    const tryPlay = () => {
+      if (cancelled) return;
+      if (!el.paused) return;
 
-    untrack(() => {
-      showControlsFallback = false;
-    });
+      applyVideoPlaybackFlags();
+
+      if (el.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+        return;
+      }
 
-    const playPromise = el.play();
-    if (playPromise !== undefined) {
-      playPromise.catch(() => {
-        untrack(() => {
-          showControlsFallback = true;
+      const playPromise = el.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(() => {
+          if (!mute_audio && !playbackMutedOverride) {
+            untrack(() => {
+              playbackMutedOverride = true;
+            });
+            applyVideoPlaybackFlags();
+
+            /** Unmuted `play()` after a forced-muted start sometimes only works tied to playback (WebKit). */
+            let unmuteAfterMutedStartHandled = false;
+            const tryRestoreAudioAfterMutedAutoplay = () => {
+              if (unmuteAfterMutedStartHandled || mute_audio || cancelled)
+                return;
+              unmuteAfterMutedStartHandled = true;
+              queueMicrotask(() => {
+                if (cancelled) return;
+                untrack(() => {
+                  playbackMutedOverride = false;
+                });
+                applyVideoPlaybackFlags();
+                el.volume = 1;
+                const p3 = el.play();
+                if (p3 === undefined) return;
+                p3.catch(() => {
+                  untrack(() => {
+                    playbackMutedOverride = true;
+                  });
+                  applyVideoPlaybackFlags();
+                  void el.play().catch(() => {});
+                });
+              });
+            };
+
+            const onPlayingAfterMutedBootstrap = () => {
+              playingUnmuteListener = null;
+              tryRestoreAudioAfterMutedAutoplay();
+            };
+            playingUnmuteListener = onPlayingAfterMutedBootstrap;
+            el.addEventListener("playing", onPlayingAfterMutedBootstrap, {
+              once: true,
+            });
+
+            const p2 = el.play();
+            if (p2 !== undefined) {
+              p2.then(() => {
+                // `playing` may have fired before our listener ran; retry unmute once playback exists.
+                queueMicrotask(() => {
+                  if (
+                    cancelled ||
+                    mute_audio ||
+                    unmuteAfterMutedStartHandled ||
+                    el.paused
+                  ) {
+                    return;
+                  }
+                  if (!el.muted) {
+                    clearPlayingUnmuteListener();
+                    return;
+                  }
+                  tryRestoreAudioAfterMutedAutoplay();
+                });
+              }).catch(() => {
+                clearPlayingUnmuteListener();
+              });
+            }
+          }
         });
+      }
+    };
+
+    const onMediaReady = () => {
+      tryPlay();
+    };
+
+    if (el.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+      el.addEventListener("loadeddata", onMediaReady);
+      el.addEventListener("canplay", onMediaReady);
+    } else {
+      tryPlay();
+    }
+
+    /**
+     * Once per `video.url`: muted `play()` nudge helps iOS decode before `HAVE_CURRENT_DATA`.
+     * When `mute_audio` is false, `load()` reloads the media so poster/metadata can attach; unmuted
+     * autoplay may still require a user gesture (handled in `tryPlay`).
+     */
+    const nudgePlayback = () => {
+      applyVideoPlaybackFlags();
+
+      if (mute_audio) {
+        void el.play().catch(() => {});
+      } else {
+        try {
+          el.load();
+        } catch {
+          /* ignore */
+        }
+      }
+    };
+    if (needsBootstrap && el.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+      nudgePlayback();
+    }
+
+    /** Extra `tryPlay` ticks: next microtask vs next frame vs cold `load`; WebKit reordering varies. */
+    const deferTryPlayWithReadyGate = () => {
+      queueMicrotask(() => {
+        if (cancelled) return;
+        if (el.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          tryPlay();
+        }
+      });
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        if (el.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+          tryPlay();
+        }
       });
+    };
+
+    deferTryPlayWithReadyGate();
+
+    const onWindowLoad = () => {
+      tryPlay();
+    };
+    if (typeof document !== "undefined" && typeof window !== "undefined") {
+      if (document.readyState === "complete") {
+        queueMicrotask(() => {
+          if (!cancelled) tryPlay();
+        });
+      } else {
+        window.addEventListener("load", onWindowLoad);
+      }
     }
+
+    return () => {
+      cancelled = true;
+      clearPlayingUnmuteListener();
+      el.removeEventListener("loadeddata", onMediaReady);
+      el.removeEventListener("canplay", onMediaReady);
+      if (typeof window !== "undefined") {
+        window.removeEventListener("load", onWindowLoad);
+      }
+    };
   });
 
   const isVisible = $derived(
@@ -262,9 +443,11 @@
             src={video.url}
             style="object-fit:{mapFitMode(fit_mode)}"
             {loop}
-            muted={mute_audio}
-            controls={show_controls || showControlsFallback}
+            muted={mute_audio || playbackMutedOverride}
+            controls={show_controls}
             playsinline
+            autoplay={auto_play}
+            preload={auto_play ? "auto" : "metadata"}
           >
             <track kind="captions" />
           </video>
@@ -352,4 +535,10 @@
     object-fit: contain;
     object-position: center;
   }
+
+  /* Own compositing layer — mitigates WebKit freezing video frames under animated/transform ancestors */
+  video {
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+  }
 </style>

package/dist/components/workflows/Screen.stories.svelte

@@ -3,7 +3,6 @@
   import type { ComponentProps } from "svelte";
 
   import Screen from "./Screen.svelte";
-  import Main from "../layout/Main/Main.svelte";
   import { paywallData, uiConfigData } from "../../stories/fixtures";
   import type { WorkflowScreen } from "../../types/workflow";
 
@@ -33,11 +32,9 @@
 
 {#snippet template(props: ComponentProps<typeof Screen>)}
   <div class="viewport-frame">
-    <Main paywallData={props.paywallComponents}>
-      <div class="content-wrapper">
-        <Screen {...props} />
-      </div>
-    </Main>
+    <div class="content-wrapper">
+      <Screen {...props} />
+    </div>
   </div>
 {/snippet}
 

package/dist/index.d.ts

@@ -13,7 +13,6 @@ export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
 export { default as Screen } from "./components/workflows/Screen.svelte";
-export { default as Main } from "./components/layout/Main/Main.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";

package/dist/index.js

@@ -14,7 +14,6 @@ export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
 export { default as Screen } from "./components/workflows/Screen.svelte";
-export { default as Main } from "./components/layout/Main/Main.svelte";
 export { default as Video } from "./components/video/Video.svelte";
 export * from "./types";
 export {} from "./types/paywall";

package/dist/utils/document-background.d.ts

@@ -0,0 +1,3 @@
+import type { PaywallData } from "../types/paywall";
+import type { PaywallRootBackgroundModel } from "./background-utils";
+export declare function applyDocumentBackground(instanceId: symbol, model: PaywallRootBackgroundModel, paywallData: PaywallData | null | undefined): () => void;

package/dist/utils/document-background.js

@@ -0,0 +1,59 @@
+// Last writer wins, but cleanup only fires for the last writer — otherwise an
+// unmounting paywall would clear a variable set by another paywall that overlapped
+// it during a transition.
+let lastBgWriter = null;
+// iOS promotes sticky header/footer to its own compositor layer, which breaks
+// safe-area painting for the opposite strip. A vertical gradient's edge stop
+// can stand in as a solid fallback for that strip; any other angle would smear
+// a horizontal colour range across the strip that no single colour represents.
+function gradientSafeAreaFallbackColour(gradient, hasHeader, hasFooter) {
+    if (!hasHeader && !hasFooter)
+        return null;
+    if (hasHeader && hasFooter)
+        return null;
+    const angleMatch = gradient.match(/linear-gradient\((\d+)deg/);
+    if (!angleMatch)
+        return null;
+    if (parseInt(angleMatch[1], 10) % 180 !== 0)
+        return null;
+    const stops = gradient.match(/#[0-9a-fA-F]{6,8}/g);
+    if (!stops || stops.length < 2)
+        return null;
+    const candidate = hasHeader ? stops[stops.length - 1] : stops[0];
+    if (candidate.length === 9 && candidate.slice(-2).toLowerCase() !== "ff") {
+        return null;
+    }
+    return candidate;
+}
+// Published as a CSS variable so consumer surfaces can opt in to safe-area
+// painting (`background: var(--rc-purchases-ui-bg-color, Canvas)` on any
+// element that extends into the safe-area canvas — typically html, body, or
+// a position:fixed root). Writing to documentElement.backgroundColor directly
+// would bleed the paywall colour onto host page chrome that shouldn't take
+// it on, so we expose the value rather than apply it.
+export function applyDocumentBackground(instanceId, model, paywallData) {
+    if (typeof document === "undefined")
+        return () => { };
+    const root = document.documentElement;
+    let value = null;
+    if (model.kind === "style" && model.style.background) {
+        const bg = model.style.background;
+        if (!bg.includes("gradient")) {
+            value = bg;
+        }
+        else {
+            const base = paywallData?.components_config?.base;
+            value = gradientSafeAreaFallbackColour(bg, !!base?.header, !!base?.sticky_footer);
+        }
+    }
+    if (value !== null) {
+        lastBgWriter = instanceId;
+        root.style.setProperty("--rc-purchases-ui-bg-color", value);
+    }
+    return () => {
+        if (lastBgWriter === instanceId) {
+            lastBgWriter = null;
+            root.style.removeProperty("--rc-purchases-ui-bg-color");
+        }
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.0.0",
+  "version": "4.1.0",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -123,4 +123,4 @@
       "eslint --fix"
     ]
   }
-}
+}

package/dist/components/layout/Main/Main.stories.svelte

@@ -1,263 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import type { ComponentProps } from "svelte";
-  import Main from "./Main.svelte";
-  import Screen from "../../workflows/Screen.svelte";
-  import type { Background } from "../../../types/background";
-  import type { Component } from "../../../types/component";
-  import type { HeaderProps } from "../../../types/components/header";
-  import type { FooterProps } from "../../../types/components/footer";
-  import type { TextNodeProps } from "../../../types/components/text";
-  import type { WorkflowScreen } from "../../../types/workflow";
-  import { uiConfigData } from "../../../stories/fixtures";
-
-  function textComponent(id: string, textLid: string): TextNodeProps {
-    return {
-      type: "text",
-      id,
-      name: "",
-      text_lid: textLid,
-      font_name: null,
-      font_size: "body_m",
-      font_weight: "bold",
-      horizontal_alignment: "center",
-      color: { light: { type: "hex", value: "#ffffffff" } },
-      background_color: null,
-      padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
-      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
-      size: { width: { type: "fit" }, height: { type: "fit" } },
-    };
-  }
-
-  function visibleStack(components: Component[] = []) {
-    return {
-      type: "stack" as const,
-      id: "s",
-      name: "",
-      components,
-      size: {
-        width: { type: "fill" as const },
-        height: { type: "fit" as const },
-      },
-      dimension: {
-        type: "vertical" as const,
-        alignment: "center" as const,
-        distribution: "center" as const,
-      },
-      spacing: 0,
-      margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
-      padding: { top: 16, bottom: 16, leading: 0, trailing: 0 },
-      background_color: { light: { type: "hex" as const, value: "#00000033" } },
-      background: null,
-      border: null,
-      shape: null,
-      shadow: null,
-      badge: null,
-    };
-  }
-
-  const minimalHeader: HeaderProps = {
-    id: "header",
-    name: "Header",
-    type: "header",
-    stack: visibleStack([textComponent("header-label", "header_label")]),
-  };
-
-  const minimalFooter: FooterProps = {
-    id: "footer",
-    name: "Footer",
-    type: "footer",
-    stack: visibleStack([textComponent("footer-label", "footer_label")]),
-  };
-
-  function shellData(
-    background: Background,
-    hasHeader: boolean,
-    hasFooter: boolean,
-  ): WorkflowScreen {
-    return {
-      id: "main-story",
-      default_locale: "en_US",
-      components_localizations: {
-        en_US: { header_label: "Header", footer_label: "Footer" },
-      },
-      asset_base_url: "https://assets.pawwalls.com",
-      config: {},
-      localized_strings: {},
-      localized_strings_by_tier: {},
-      name: "Main story",
-      offering_id: null,
-      revision: 1,
-      template_name: "stack",
-      components_config: {
-        base: {
-          background,
-          header: hasHeader ? minimalHeader : null,
-          sticky_footer: hasFooter ? minimalFooter : null,
-          stack: {
-            type: "stack" as const,
-            id: "content",
-            name: "",
-            components: [],
-            size: {
-              width: { type: "fill" as const },
-              height: { type: "fill" as const },
-            },
-            dimension: {
-              type: "vertical" as const,
-              alignment: "center" as const,
-              distribution: "start" as const,
-            },
-            spacing: 0,
-            margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
-            padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
-            background_color: null,
-            background: null,
-            border: null,
-            shape: null,
-            shadow: null,
-            badge: null,
-          },
-        },
-      },
-    };
-  }
-
-  const solidColour: Background = {
-    type: "color",
-    value: { light: { type: "hex", value: "#6B4FBBFF" } },
-  };
-
-  const gradient: Background = {
-    type: "color",
-    value: {
-      light: {
-        type: "linear",
-        degrees: 180,
-        points: [
-          { percent: 0, color: "#3B82F6FF" },
-          { percent: 100, color: "#9333EAFF" },
-        ],
-      },
-    },
-  };
-
-  const image: Background = {
-    type: "image",
-    fit_mode: "fill",
-    color_overlay: null,
-    value: {
-      light: {
-        width: 1170,
-        height: 2532,
-        original: "https://placehold.co/1170x2532",
-        heic: "https://placehold.co/1170x2532",
-        heic_low_res: "https://placehold.co/1170x2532",
-        webp: "https://placehold.co/1170x2532",
-        webp_low_res: "https://placehold.co/1170x2532",
-      },
-    },
-  };
-
-  const { Story } = defineMeta({
-    title: "Components/Layout/Main",
-    component: Main,
-    render: template,
-    args: { paywallData: shellData(solidColour, false, false) },
-  });
-</script>
-
-{#snippet template({
-  paywallData,
-  preferredColorMode,
-}: ComponentProps<typeof Main>)}
-  <div class="viewport-frame">
-    <Main {paywallData} {preferredColorMode}>
-      <div class="content-wrapper">
-        <Screen paywallComponents={paywallData} uiConfig={uiConfigData} />
-      </div>
-    </Main>
-  </div>
-{/snippet}
-
-<Story
-  name="Solid colour"
-  args={{ paywallData: shellData(solidColour, false, false) }}
-/>
-<Story
-  name="Solid colour — header"
-  args={{ paywallData: shellData(solidColour, true, false) }}
-/>
-<Story
-  name="Solid colour — footer"
-  args={{ paywallData: shellData(solidColour, false, true) }}
-/>
-<Story
-  name="Solid colour — header and footer"
-  args={{ paywallData: shellData(solidColour, true, true) }}
-/>
-
-<Story
-  name="Gradient"
-  args={{ paywallData: shellData(gradient, false, false) }}
-/>
-<Story
-  name="Gradient — header"
-  args={{ paywallData: shellData(gradient, true, false) }}
-/>
-<Story
-  name="Gradient — footer"
-  args={{ paywallData: shellData(gradient, false, true) }}
-/>
-<Story
-  name="Gradient — header and footer"
-  args={{ paywallData: shellData(gradient, true, true) }}
-/>
-
-<Story name="Image" args={{ paywallData: shellData(image, false, false) }} />
-<Story
-  name="Image — header"
-  args={{ paywallData: shellData(image, true, false) }}
-/>
-<Story
-  name="Image — footer"
-  args={{ paywallData: shellData(image, false, true) }}
-/>
-<Story
-  name="Image — header and footer"
-  args={{ paywallData: shellData(image, true, true) }}
-/>
-
-<style>
-  /* A fixed-position frame that emulates rc-workflows' <body> (see app.css).
-     Using position:fixed escapes Storybook's DOM chain (.sb-show-main, #storybook-root, PaywallWrapper) */
-  .viewport-frame {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    padding: env(safe-area-inset-top) env(safe-area-inset-right)
-      env(safe-area-inset-bottom) env(safe-area-inset-left);
-    background-color: var(--rc-purchases-ui-bg-color, Canvas);
-    color-scheme: light dark;
-    overflow: hidden;
-  }
-
-  .content-wrapper {
-    width: 100%;
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-height: 0;
-    overflow: hidden;
-  }
-
-  /* Screen's containerId is "screen-container" by default */
-  :global(#screen-container) {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-  }
-</style>

package/dist/components/layout/Main/Main.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Main from "./Main.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 Main: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Main = InstanceType<typeof Main>;
-export default Main;

package/dist/components/layout/Main/Main.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { ColorMode } from "../../../types";
-  import type { PaywallData } from "../../../types/paywall";
-  import { paywallRootBackgroundModel } from "../../../utils/background-utils";
-  import { MediaQuery } from "svelte/reactivity";
-  import ViewportBackdrop from "./ViewportBackdrop.svelte";
-
-  // Tracks the last Main instance that wrote --rc-purchases-ui-bg-color.
-  // Cleanup only removes the variable if this instance is still the last writer,
-  // so an unmounting shell won't clear a value set by a shell that overlapped it
-  // during a page transition.
-  let lastBgWriter: symbol | null = null;
-
-  interface Props {
-    paywallData: PaywallData | null | undefined;
-    preferredColorMode?: ColorMode;
-    children: Snippet;
-  }
-
-  const { paywallData, preferredColorMode, children }: Props = $props();
-
-  const instanceId: symbol = Symbol();
-
-  const prefersDark = new MediaQuery("prefers-color-scheme: dark", false);
-  const colorMode: ColorMode = $derived(
-    preferredColorMode ?? (prefersDark.current ? "dark" : "light"),
-  );
-
-  const viewportBackdropModel = $derived(
-    paywallRootBackgroundModel(paywallData, colorMode),
-  );
-
-  // When a sticky header or footer is present, iOS promotes it to its own compositor
-  // layer which breaks the fixed backdrop's safe-area painting for the opposite strip.
-  // Returns the edge stop colour to paint on body to patch the uncovered strip, or null.
-  // Only works for exactly vertical gradients (0°/180°) — any other angle produces a
-  // horizontal colour range across the strip that no single solid colour can represent.
-  function gradientSafeAreaFallbackColour(
-    gradient: string,
-    hasHeader: boolean,
-    hasFooter: boolean,
-  ): string | null {
-    if (!hasHeader && !hasFooter) return null;
-    if (hasHeader && hasFooter) return null;
-    const angleMatch = gradient.match(/linear-gradient\((\d+)deg/);
-    if (!angleMatch) return null;
-    if (parseInt(angleMatch[1], 10) % 180 !== 0) return null;
-    const stops = gradient.match(/#[0-9a-fA-F]{6,8}/g);
-    if (!stops || stops.length < 2) return null;
-    const candidate = hasHeader ? stops[stops.length - 1] : stops[0];
-    if (candidate.length === 9 && candidate.slice(-2).toLowerCase() !== "ff") {
-      return null;
-    }
-    return candidate;
-  }
-
-  // Solid colours use --rc-purchases-ui-bg-color on body — iOS reliably propagates
-  // background-color to the viewport canvas (safe-area strips). Gradients and images
-  // are handled by ViewportBackdrop (position:fixed) instead.
-  $effect(() => {
-    if (typeof document === "undefined") return;
-    const model = viewportBackdropModel;
-    const root = document.documentElement;
-
-    let value: string | null = null;
-    if (model.kind === "style" && model.style.background) {
-      const bg = model.style.background;
-      if (!bg.includes("gradient")) {
-        value = bg;
-      } else {
-        const base = paywallData?.components_config?.base;
-        value = gradientSafeAreaFallbackColour(
-          bg,
-          !!base?.header,
-          !!base?.sticky_footer,
-        );
-      }
-    }
-
-    if (value !== null) {
-      lastBgWriter = instanceId;
-      root.style.setProperty("--rc-purchases-ui-bg-color", value);
-    }
-
-    return () => {
-      if (lastBgWriter === instanceId) {
-        lastBgWriter = null;
-        root.style.removeProperty("--rc-purchases-ui-bg-color");
-      }
-    };
-  });
-</script>
-
-<div class="main">
-  <ViewportBackdrop model={viewportBackdropModel} />
-  <main class="main-content">
-    {@render children()}
-  </main>
-</div>
-
-<style>
-  .main {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .main-content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex: 1 1 auto;
-    min-height: 0;
-  }
-</style>

package/dist/components/layout/Main/Main.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from "svelte";
-import type { ColorMode } from "../../../types";
-import type { PaywallData } from "../../../types/paywall";
-interface Props {
-    paywallData: PaywallData | null | undefined;
-    preferredColorMode?: ColorMode;
-    children: Snippet;
-}
-declare const Main: import("svelte").Component<Props, {}, "">;
-type Main = ReturnType<typeof Main>;
-export default Main;