@revenuecat/purchases-ui-js 4.8.5 → 4.8.7

package/dist/components/footer/Footer.svelte

@@ -1,19 +1,16 @@
 <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 style="z-index: {STICKY_OVERLAY_Z_INDEX};">
+<div>
   <Stack {...stack} />
 </div>
 
 <style>
   div {
-    position: sticky;
-    bottom: 0;
     width: 100%;
 
     display: flex;

package/dist/components/paywall/Node.svelte

@@ -8,6 +8,7 @@
     Stack,
     Timeline,
     Video,
+    WebView,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
   import Countdown from "../countdown/Countdown.svelte";
@@ -64,6 +65,7 @@
     timeline: Timeline,
     video: Video,
     wallet_button: WalletButton,
+    web_view: WebView,
   } satisfies {
     [key in RenderableComponent["type"]]: SvelteComponent<
       Extract<RenderableComponent, { type: key }>

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

@@ -39,6 +39,11 @@
     DUELINGUE_PAYWALL,
   } from "./fixtures/express-purchase-button-paywall";
   import { CustomVariableValue } from "../../types/variables";
+  import {
+    paywallWithTransparentFooter,
+    paywallWithCenteredBodyAndFooter,
+    paywallWithHeaderAndFooter,
+  } from "./fixtures/transparent-footer-paywall";
 
   const { Story } = defineMeta({
     title: "Example/Paywall",
@@ -480,6 +485,28 @@
   }}
 />
 
+<Story
+  name="Sticky Footer - transparent (overlaps content)"
+  args={{
+    paywallData: paywallWithTransparentFooter,
+  }}
+/>
+
+<Story
+  name="Sticky Footer - centered body above footer"
+  decorators={[viewportDecorator(500, 500, 0)]}
+  args={{
+    paywallData: paywallWithCenteredBodyAndFooter,
+  }}
+/>
+
+<Story
+  name="Sticky Footer - with header"
+  args={{
+    paywallData: paywallWithHeaderAndFooter,
+  }}
+/>
+
 <Story
   name="Header"
   args={{

package/dist/components/paywall/Paywall.svelte

@@ -352,6 +352,13 @@
   const pullContentUnderHeader = !!header && firstComponentIsFullWidthImage;
 
   let headerHeight = $state(0);
+  let footerHeight = $state(0);
+
+  const contentColumnStyle = $derived(
+    maxContentWidth
+      ? `max-width: ${maxContentWidth}; margin-inline: auto;`
+      : "",
+  );
 </script>
 
 <svelte:boundary onerror={onError}>
@@ -366,19 +373,16 @@
         <Header {...header} />
       </div>
     {/if}
-    <div
-      class="paywall-content"
-      style={[
-        maxContentWidth
-          ? `max-width: ${maxContentWidth}; margin-inline: auto;`
-          : "",
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
+    <div class="paywall-content" style={contentColumnStyle}>
       <Stack
         {...stack}
         class="paywall-content-scroll"
+        padding={sticky_footer
+          ? {
+              ...stack.padding,
+              bottom: (stack.padding?.bottom ?? 0) + footerHeight,
+            }
+          : stack.padding}
         style={{
           height: "auto",
           ...(pullContentUnderHeader
@@ -386,10 +390,19 @@
             : {}),
         }}
       />
-      {#if sticky_footer}
-        <Footer {...sticky_footer} />
-      {/if}
     </div>
+    {#if sticky_footer}
+      <!-- Overlaps the content so translucent footers show it; sticky rather than
+        absolute so it stays visible when an ancestor scrollport is shorter than
+        the paywall. -->
+      <div
+        class="footer-wrapper"
+        style="z-index: {STICKY_OVERLAY_Z_INDEX}; margin-top: -{footerHeight}px; {contentColumnStyle}"
+        bind:clientHeight={footerHeight}
+      >
+        <Footer {...sticky_footer} />
+      </div>
+    {/if}
   </div>
 
   {#if sheet}
@@ -422,6 +435,13 @@
     width: 100%;
   }
 
+  .footer-wrapper {
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    flex-shrink: 0;
+  }
+
   .paywall-content {
     z-index: 2;
     width: 100%;

package/dist/components/paywall/fixtures/transparent-footer-paywall.d.ts

@@ -0,0 +1,7 @@
+import type { PaywallData } from "../../../types/paywall";
+/** Translucent sticky footer over long scrollable content. */
+export declare const paywallWithTransparentFooter: PaywallData;
+/** Small body that must center in the space above the footer, not the whole screen. */
+export declare const paywallWithCenteredBodyAndFooter: PaywallData;
+/** Header and sticky footer together: the footer overlay must not affect the header. */
+export declare const paywallWithHeaderAndFooter: PaywallData;

package/dist/components/paywall/fixtures/transparent-footer-paywall.js

@@ -0,0 +1,59 @@
+import { paywallWithFooter, paywallWithHeader } from "../../../stories/fixtures";
+function footerStack(paywall) {
+    const footer = paywall.components_config.base.sticky_footer;
+    if (!footer) {
+        throw new Error("Fixture has no sticky footer");
+    }
+    return footer.stack;
+}
+function lastTextComponent(components) {
+    return components.findLast((component) => component.type === "text");
+}
+/** Duplicates the last text component so the content is tall enough to scroll. */
+function appendScrollableContent(paywall, count) {
+    const components = paywall.components_config.base.stack.components;
+    const lastText = lastTextComponent(components);
+    if (!lastText) {
+        return;
+    }
+    for (let index = 0; index < count; index++) {
+        const copy = structuredClone(lastText);
+        copy.id = `scroll-filler-${index}`;
+        components.push(copy);
+    }
+}
+function setFooterBackground(paywall, hex) {
+    footerStack(paywall).background_color = {
+        light: { type: "hex", value: hex },
+    };
+}
+/** Translucent sticky footer over long scrollable content. */
+export const paywallWithTransparentFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    appendScrollableContent(paywall, 25);
+    setFooterBackground(paywall, "#057C5BAA");
+    return paywall;
+})();
+/** Small body that must center in the space above the footer, not the whole screen. */
+export const paywallWithCenteredBodyAndFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    const stack = paywall.components_config.base.stack;
+    const lastText = lastTextComponent(stack.components);
+    stack.components = lastText ? [lastText] : [];
+    stack.dimension.distribution = "center";
+    setFooterBackground(paywall, "#057C5BAA");
+    return paywall;
+})();
+/** Header and sticky footer together: the footer overlay must not affect the header. */
+export const paywallWithHeaderAndFooter = (() => {
+    const paywall = structuredClone(paywallWithFooter);
+    appendScrollableContent(paywall, 15);
+    const headerDonor = structuredClone(paywallWithHeader);
+    paywall.components_config.base.header =
+        headerDonor.components_config.base.header;
+    paywall.components_localizations.en_US = {
+        ...paywall.components_localizations.en_US,
+        ...headerDonor.components_localizations.en_US,
+    };
+    return paywall;
+})();

package/dist/components/web-view/WebView.stories.svelte

@@ -0,0 +1,105 @@
+<script module lang="ts">
+  import WebView from "./WebView.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: "Components/WebView",
+    component: WebView,
+    decorators: [componentDecorator()],
+    parameters: {
+      // The iframe loads a real external URL, so screenshots are not stable.
+      chromatic: { disableSnapshot: true },
+    },
+    args: {
+      type: "web_view",
+      id: "web-view",
+      name: "Web View",
+      protocol_version: 1,
+      // Live RC bundle on a content-hash subdomain (Paywalls team). If this 404s,
+      // re-point at a current upload or replace with a committed static fixture.
+      url: "https://zoro7mkmsiy3biuznkoabsdaabga3v6kmn3753jlt5dgszc55woa.components.revenuecat-static.com/index.html",
+      size: {
+        width: { type: "fill" },
+        height: { type: "fixed", value: 400 },
+      },
+    },
+  });
+</script>
+
+<Story name="Default" />
+
+<Story
+  name="Fill (full bleed)"
+  args={{
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+  }}
+/>
+
+<Story
+  name="Fixed Size"
+  args={{
+    size: {
+      width: { type: "fixed", value: 320 },
+      height: { type: "fixed", value: 480 },
+    },
+  }}
+/>
+
+<Story
+  name="Relative Size (50% width)"
+  args={{
+    size: {
+      width: { type: "relative", value: 0.5 },
+      height: { type: "fixed", value: 400 },
+    },
+  }}
+/>
+
+<Story
+  name="Fit Height (placeholder min-height)"
+  args={{
+    size: {
+      width: { type: "fill" },
+      height: { type: "fit" },
+    },
+  }}
+/>
+
+<Story
+  name="Fit Width (placeholder min-width)"
+  args={{
+    size: {
+      width: { type: "fit" },
+      height: { type: "fixed", value: 400 },
+    },
+  }}
+/>
+
+<!--
+  An https URL pointing at a site that disallows framing (X-Frame-Options /
+  CSP frame-ancestors) renders a blank frame: the browser refuses to display it
+  and, being cross-origin, the failure does not fire `onerror`. This illustrates
+  the render-only limitation - reliable load-failure detection needs the
+  protocol_version postMessage handshake.
+-->
+<Story
+  name="Framing blocked (X-Frame-Options)"
+  args={{
+    url: "https://www.google.com",
+  }}
+/>
+
+<!--
+  A rejected URL renders nothing (the empty canvas is expected). Any non-https
+  scheme is rejected by the https-only guard, not just http.
+-->
+<Story
+  name="Blocked URL (renders nothing)"
+  args={{
+    url: "http://insecure.example.com",
+  }}
+/>

package/dist/components/web-view/WebView.stories.svelte.d.ts

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

package/dist/components/web-view/WebView.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
+  import { getPaywallContext } from "../../stores/paywall";
+  import { getOptionalVariablesContext } from "../../stores/variables";
+  import type { WebViewProps } from "../../types/components/web-view";
+  import { css, mapSize, px } from "../../utils/base-utils";
+  import { evaluateVisibilityConditions } from "../../utils/style-utils";
+  import { isSameOriginAsHost, sanitizeWebViewUrl } from "./web-view-utils";
+  import {
+    FIT_MESSAGE,
+    loadCreateHostBridge,
+    RESIZE_MESSAGE,
+  } from "./web-view-sdk";
+  import type { ResizePayload, WebViewHostBridge } from "./web-view-sdk";
+
+  // Placeholder for a `fit` axis until the content reports its size — a cross-origin
+  // iframe exposes no intrinsic size, so `fit` would otherwise collapse to nothing.
+  const FIT_FALLBACK_SIZE_PX = 300;
+
+  // Cap a content-reported dimension so a buggy/hostile bundle can't blow up layout.
+  const MAX_FIT_SIZE_PX = 10_000;
+
+  const clampFitSize = (value: number): number =>
+    Math.max(1, Math.min(MAX_FIT_SIZE_PX, Math.round(value)));
+
+  const isPositiveFinite = (value: unknown): value is number =>
+    typeof value === "number" && Number.isFinite(value) && value > 0;
+
+  const props: WebViewProps = $props();
+
+  const { selectedPackageId } = getPaywallContext();
+  const packageInfo = getOptionalPackageInfoContext();
+  const variables = getOptionalVariablesContext();
+
+  // Gate the origin guard on a post-mount flag (not `typeof window`) so SSR and the
+  // first client render match; otherwise a cross-origin URL mismatches on hydration.
+  let mounted = $state(false);
+  onMount(() => {
+    mounted = true;
+  });
+
+  const safeUrl = $derived(sanitizeWebViewUrl(props.url));
+
+  // Only grant `allow-same-origin` once we confirm the bundle is cross-origin: on a
+  // same-origin frame that combo could script the host. Best-effort on the initial
+  // URL only (post-redirect origins aren't observable); bundle URLs are restricted
+  // to the RC asset origin by the backend (khepri #21861).
+  const canEmbed = $derived(
+    mounted &&
+      safeUrl !== null &&
+      !isSameOriginAsHost(safeUrl, window.location.origin),
+  );
+
+  // Content-reported sizes for `fit` axes (set by the resize handler below).
+  let fitWidth = $state<number | undefined>(undefined);
+  let fitHeight = $state<number | undefined>(undefined);
+
+  const fitAxisFallback = (axis: typeof props.size.width): number =>
+    axis.type === "fit" && typeof axis.default === "number"
+      ? axis.default
+      : FIT_FALLBACK_SIZE_PX;
+
+  const style = $derived.by(() => {
+    const { width, height } = props.size;
+    const widthFit = width.type === "fit";
+    const heightFit = height.type === "fit";
+    // Pin a `fit` axis with an explicit size. `flex-shrink: 0` keeps flex parents
+    // from collapsing the box; avoid mirroring the size in `min-*` or it beats `max-*`.
+    // Prefer author-declared `default` when present; else the hard 300px fallback.
+    const fitWidthPx = widthFit
+      ? clampFitSize(fitWidth ?? fitAxisFallback(width))
+      : null;
+    const fitHeightPx = heightFit
+      ? clampFitSize(fitHeight ?? fitAxisFallback(height))
+      : null;
+    return css({
+      width: fitWidthPx != null ? px(fitWidthPx) : mapSize(width),
+      height: fitHeightPx != null ? px(fitHeightPx) : mapSize(height),
+      // Cap a fit axis to the parent. Do not mirror the reported size in `min-*`:
+      // that defeats `max-*` and clips content when the report exceeds the viewport.
+      ...(fitWidthPx != null ? { "max-width": "100%" } : {}),
+      ...(fitHeightPx != null ? { "max-height": "100%" } : {}),
+      "flex-shrink": width.type === "fixed" || widthFit || heightFit ? 0 : 1,
+      "line-height": 0,
+      // No transition: the iframe is height:100% of this box, so animating the
+      // resize would flash the iframe's own scrollbar mid-change.
+    });
+  });
+
+  const isVisible = $derived(
+    evaluateVisibilityConditions(
+      {
+        selectedPackageId: $selectedPackageId,
+        packageInfo: $packageInfo,
+        variables: $variables ?? {},
+      },
+      undefined,
+      props.visible,
+    ),
+  );
+
+  // Host<->content bridge (client-only): the host build is loaded from the CDN by
+  // protocol version and attached to the live iframe. The content reports its size
+  // (`resize`), driving `fit` axes; a CDN import failure degrades to the plain iframe.
+  let iframeEl = $state<HTMLIFrameElement | undefined>(undefined);
+  let previousSafeUrl: string | null | undefined;
+
+  $effect(() => {
+    const url = safeUrl;
+    if (url !== previousSafeUrl) {
+      fitWidth = undefined;
+      fitHeight = undefined;
+      previousSafeUrl = url;
+    }
+
+    const iframe = iframeEl;
+    // Read every prop the bridge is configured with synchronously: Svelte only
+    // tracks reads in the effect body, not inside the async `.then` below, so
+    // capturing them here re-runs the effect (rebuilding the bridge) when the
+    // component id or `fit` axes change in place.
+    const componentId = props.id;
+    const protocolVersion = props.protocol_version;
+    const widthFit = props.size.width.type === "fit";
+    const heightFit = props.size.height.type === "fit";
+    if (!iframe || !url) return;
+
+    let disposed = false;
+    let bridge: WebViewHostBridge | undefined;
+
+    loadCreateHostBridge(protocolVersion)
+      .then((createHostBridge) => {
+        if (disposed) return;
+        try {
+          bridge = createHostBridge({
+            iframe,
+            allowedOrigin: new URL(url).origin,
+            componentId,
+            protocolVersion,
+          });
+          // Tell the content which axes are `fit` so it hides its own scrollbar there
+          // (it would otherwise flash one while we catch up to a new size).
+          if (widthFit || heightFit) {
+            bridge.onReady(() =>
+              bridge?.send(FIT_MESSAGE, { width: widthFit, height: heightFit }),
+            );
+          }
+          bridge.on(RESIZE_MESSAGE, (payload: unknown) => {
+            const { width, height } = (payload ?? {}) as ResizePayload;
+            if (widthFit && isPositiveFinite(width)) {
+              fitWidth = width;
+            }
+            if (heightFit && isPositiveFinite(height)) {
+              fitHeight = height;
+            }
+          });
+        } catch (error) {
+          console.warn("web_view: failed to wire host bridge", error);
+        }
+      })
+      .catch(() => {
+        // Degrade to the plain iframe if the CDN import fails (e.g. CSP).
+      });
+
+    return () => {
+      disposed = true;
+      bridge?.destroy();
+    };
+  });
+</script>
+
+{#if isVisible && safeUrl && canEmbed}
+  <div class="web-view" {style}>
+    <!--
+      `allow-scripts allow-same-origin` runs the bundle under its own origin (for
+      same-origin fetch/XHR); restricting it to that origin relies on the bundle's
+      CSP. `referrerpolicy`/`allow` and the omitted sandbox flags limit leakage and
+      block top navigation.
+    -->
+    <iframe
+      bind:this={iframeEl}
+      title={props.name ?? "Web view"}
+      src={safeUrl}
+      sandbox="allow-scripts allow-same-origin"
+      referrerpolicy="no-referrer"
+      allow=""
+    ></iframe>
+  </div>
+{/if}
+
+<style>
+  .web-view {
+    position: relative;
+    overflow: hidden;
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+</style>

package/dist/components/web-view/WebView.svelte.d.ts

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

package/dist/components/web-view/WebViewTestWrapper.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { setPackageInfoContext } from "../../stores/packageInfo";
+  import { setPaywallContext } from "../../stores/paywall";
+  import { setVariablesContext } from "../../stores/variables";
+  import type { WebViewProps } from "../../types/components/web-view";
+  import { readable, writable } from "svelte/store";
+  import WebView from "./WebView.svelte";
+
+  const props: WebViewProps = $props();
+
+  setPaywallContext({
+    defaultPackageId: undefined,
+    selectedPackageId: writable(undefined),
+    variablesPerPackage: readable(undefined),
+    baseVariables: readable(undefined),
+    infoPerPackage: readable(undefined),
+    onPurchase: () => {},
+    emitComponentInteraction: () => {},
+    onButtonAction: () => {},
+    uiConfig: {} as never,
+    hideBackButtons: false,
+  });
+  setPackageInfoContext(readable(undefined));
+  setVariablesContext(readable({}));
+</script>
+
+<WebView {...props} />

package/dist/components/web-view/WebViewTestWrapper.svelte.d.ts

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

package/dist/components/web-view/web-view-sdk.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Runtime loader for the RevenueCat web-components HOST bridge.
+ *
+ * The host bridge is deliberately NOT bundled into purchases-ui-js. It is
+ * dynamic-imported from the CDN by protocol major, so a `web_view` with
+ * `protocol_version: N` always gets the host build that matches the content build
+ * injected into its iframe. Both are served from a stable, rolling per-major path:
+ *
+ *   https://sdk.revenuecat-static.com/v<major>/rc-host.js   (ESM, exports createHostBridge)
+ *
+ * Shipping a new SDK patch just republishes that path, so neither this code nor any
+ * stored bundle HTML needs to change. Embedding apps must allow the SDK origin in
+ * their CSP `script-src` for the module import to succeed; if it fails, the caller
+ * keeps the plain (render-only) iframe.
+ *
+ * Message names, payload types, and the bridge/config shapes come from
+ * `@revenuecat/workflow-web-components-sdk` (the source of truth) rather than being
+ * mirrored here; only the CDN loader is local.
+ *
+ * Operational note: compile-time types come from the pinned npm package, while the
+ * runtime host build is loaded from the rolling per-major CDN path (`/v<major>/rc-host.js`).
+ * Dynamic `import()` cannot use SRI; a failed import is handled by the caller.
+ */
+import type { Bridge, HostBridgeConfig } from "@revenuecat/workflow-web-components-sdk";
+export { FIT_MESSAGE, RESIZE_MESSAGE, } from "@revenuecat/workflow-web-components-sdk";
+export type { ResizePayload } from "@revenuecat/workflow-web-components-sdk";
+/** Base origin the versioned SDK builds are served from. */
+export declare const SDK_BASE_URL = "https://sdk.revenuecat-static.com";
+/**
+ * The subset of the SDK bridge purchases-ui-js uses: subscribe to a message, run
+ * a callback once the channel opens, fire-and-forget, and tear down.
+ */
+export type WebViewHostBridge = Pick<Bridge, "on" | "onReady" | "send" | "destroy">;
+export type CreateHostBridge = (config: HostBridgeConfig) => Bridge;
+/** Stable, rolling per-major URL of the host bridge ESM build. */
+export declare function hostSdkUrl(protocolVersion: number): string;
+type ModuleImporter = (url: string) => Promise<unknown>;
+/**
+ * Resolve `createHostBridge` for a protocol major from the CDN. Rejects if the
+ * module can't be loaded or doesn't export the factory, so callers can degrade to
+ * a render-only iframe.
+ */
+export declare function loadCreateHostBridge(protocolVersion: number): Promise<CreateHostBridge>;
+/**
+ * Override the module importer (and clear the cache). Intended for tests, which
+ * inject a fake so no real network/module resolution happens. Pass `null` to
+ * restore the default dynamic import.
+ */
+export declare function __setHostModuleImporterForTests(fn: ModuleImporter | null): void;

package/dist/components/web-view/web-view-sdk.js

@@ -0,0 +1,61 @@
+export { FIT_MESSAGE, RESIZE_MESSAGE, } from "@revenuecat/workflow-web-components-sdk";
+/** Base origin the versioned SDK builds are served from. */
+export const SDK_BASE_URL = "https://sdk.revenuecat-static.com";
+/** Stable, rolling per-major URL of the host bridge ESM build. */
+export function hostSdkUrl(protocolVersion) {
+    return `${SDK_BASE_URL}/v${protocolVersion}/rc-host.js`;
+}
+// The bare dynamic import. `@vite-ignore` / `webpackIgnore` keep bundlers from
+// resolving the absolute CDN URL at build time; the browser fetches it at runtime.
+const defaultImporter = (url) => import(/* @vite-ignore */ /* webpackIgnore: true */ url);
+let importer = defaultImporter;
+// Memoize per protocol major: the module is stable for the page's lifetime and
+// multiple web views sharing a `protocol_version` should import it once.
+const moduleCache = new Map();
+function assertValidProtocolVersion(protocolVersion) {
+    if (!Number.isInteger(protocolVersion) || protocolVersion < 1) {
+        throw new Error(`invalid web_view protocol_version: ${protocolVersion}`);
+    }
+}
+function importHostModule(protocolVersion) {
+    const cached = moduleCache.get(protocolVersion);
+    if (cached)
+        return cached;
+    const url = hostSdkUrl(protocolVersion);
+    const promise = importer(url).then((module) => {
+        const createHostBridge = module
+            .createHostBridge;
+        if (typeof createHostBridge !== "function") {
+            throw new Error(`rc-host.js at ${url} does not export createHostBridge`);
+        }
+        return { createHostBridge };
+    });
+    // Don't cache a rejected import so a later mount can retry (e.g. after a
+    // transient network failure).
+    promise.catch(() => {
+        if (moduleCache.get(protocolVersion) === promise) {
+            moduleCache.delete(protocolVersion);
+        }
+    });
+    moduleCache.set(protocolVersion, promise);
+    return promise;
+}
+/**
+ * Resolve `createHostBridge` for a protocol major from the CDN. Rejects if the
+ * module can't be loaded or doesn't export the factory, so callers can degrade to
+ * a render-only iframe.
+ */
+export async function loadCreateHostBridge(protocolVersion) {
+    assertValidProtocolVersion(protocolVersion);
+    const { createHostBridge } = await importHostModule(protocolVersion);
+    return createHostBridge;
+}
+/**
+ * Override the module importer (and clear the cache). Intended for tests, which
+ * inject a fake so no real network/module resolution happens. Pass `null` to
+ * restore the default dynamic import.
+ */
+export function __setHostModuleImporterForTests(fn) {
+    importer = fn ?? defaultImporter;
+    moduleCache.clear();
+}

package/dist/components/web-view/web-view-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns a sanitized URL if it is a well-formed absolute `https:` URL,
+ * otherwise `null`.
+ *
+ * The web view embeds remote, third-party bundles, so only `https` is allowed:
+ * `http`, `data:`, `blob:`, `javascript:`, protocol-relative (`//host`) and
+ * relative URLs are all rejected, as are URLs carrying embedded credentials
+ * (`https://user:pass@host`). Whitespace and control characters (code points
+ * <= 0x20) are stripped before validation so obfuscated payloads such as
+ * "https\t://" or "jAvAsCrIpT:" cannot slip through. The normalized, parsed
+ * `href` is returned (not the raw input) so no control characters reach the
+ * iframe `src`.
+ */
+export declare function sanitizeWebViewUrl(url: string): string | null;
+/**
+ * Returns whether `url` resolves to the same origin as `hostOrigin` (typically
+ * `window.location.origin`). Used as a guard before applying the
+ * `allow-scripts allow-same-origin` sandbox: that combination is only safe when
+ * the framed bundle is on a different origin than the host page, otherwise it
+ * could script and un-sandbox the host. Callers should pass an already
+ * sanitized URL; an unparseable URL conservatively reports `true` (treat as
+ * same-origin -> block).
+ */
+export declare function isSameOriginAsHost(url: string, hostOrigin: string): boolean;

package/dist/components/web-view/web-view-utils.js

@@ -0,0 +1,52 @@
+const SAFE_WEB_VIEW_PROTOCOL = "https:";
+/**
+ * Returns a sanitized URL if it is a well-formed absolute `https:` URL,
+ * otherwise `null`.
+ *
+ * The web view embeds remote, third-party bundles, so only `https` is allowed:
+ * `http`, `data:`, `blob:`, `javascript:`, protocol-relative (`//host`) and
+ * relative URLs are all rejected, as are URLs carrying embedded credentials
+ * (`https://user:pass@host`). Whitespace and control characters (code points
+ * <= 0x20) are stripped before validation so obfuscated payloads such as
+ * "https\t://" or "jAvAsCrIpT:" cannot slip through. The normalized, parsed
+ * `href` is returned (not the raw input) so no control characters reach the
+ * iframe `src`.
+ */
+export function sanitizeWebViewUrl(url) {
+    const normalized = Array.from(url)
+        .filter((character) => character.charCodeAt(0) > 0x20)
+        .join("");
+    let parsed;
+    try {
+        parsed = new URL(normalized);
+    }
+    catch {
+        return null;
+    }
+    if (parsed.protocol.toLowerCase() !== SAFE_WEB_VIEW_PROTOCOL) {
+        return null;
+    }
+    // Reject embedded credentials: they have no place in an asset URL and can be
+    // used to obscure the real host (e.g. `https://trusted.com@evil.com`).
+    if (parsed.username !== "" || parsed.password !== "") {
+        return null;
+    }
+    return parsed.href;
+}
+/**
+ * Returns whether `url` resolves to the same origin as `hostOrigin` (typically
+ * `window.location.origin`). Used as a guard before applying the
+ * `allow-scripts allow-same-origin` sandbox: that combination is only safe when
+ * the framed bundle is on a different origin than the host page, otherwise it
+ * could script and un-sandbox the host. Callers should pass an already
+ * sanitized URL; an unparseable URL conservatively reports `true` (treat as
+ * same-origin -> block).
+ */
+export function isSameOriginAsHost(url, hostOrigin) {
+    try {
+        return new URL(url).origin === hostOrigin;
+    }
+    catch {
+        return true;
+    }
+}

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as Timeline } from "./components/timeline/Timeline.svelte";
 export { default as Screen } from "./components/workflows/Screen.svelte";
 export { default as Workflow } from "./components/workflows/Workflow.svelte";
 export { default as Video } from "./components/video/Video.svelte";
+export { default as WebView } from "./components/web-view/WebView.svelte";
 export * from "./types";
 export { type PaywallData } from "./types/paywall";
 export { type WorkflowNavData, type WorkflowStepChangeEvent, workflowDataToNavData, } from "./types/workflow-nav";

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as Timeline } from "./components/timeline/Timeline.svelte";
 export { default as Screen } from "./components/workflows/Screen.svelte";
 export { default as Workflow } from "./components/workflows/Workflow.svelte";
 export { default as Video } from "./components/video/Video.svelte";
+export { default as WebView } from "./components/web-view/WebView.svelte";
 export * from "./types";
 export {} from "./types/paywall";
 export { workflowDataToNavData, } from "./types/workflow-nav";

package/dist/types/component.d.ts

@@ -16,7 +16,8 @@ import type { TextNodeProps } from "./components/text";
 import type { TimelineProps } from "./components/timeline";
 import type { VideoProps } from "./components/video";
 import type { WalletButtonProps } from "./components/wallet-button";
+import type { WebViewProps } from "./components/web-view";
 import type { SkeletonLoaderProps } from "./components/skeleton-loader-props";
 import type { ExpressPurchaseButtonProps } from "./components/express-purchase-button-props";
 import type { HeaderProps } from "./components/header";
-export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FallbackHeaderProps | FooterProps | HeaderProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | InputTextProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps;
+export type Component = ButtonProps | CarouselProps | CountdownProps | ExpressPurchaseButtonProps | FallbackHeaderProps | FooterProps | HeaderProps | IconProps | ImageProps | InputMultipleChoiceProps | InputOptionProps | InputSingleChoiceProps | InputTextProps | PackageProps | PurchaseButtonProps | RedemptionButtonProps | SkeletonLoaderProps | StackProps | TabControlButtonProps | TabControlToggleProps | TabControlProps | TabProps | TabsProps | TextNodeProps | TimelineProps | WalletButtonProps | VideoProps | WebViewProps;

package/dist/types/components/web-view.d.ts

@@ -0,0 +1,15 @@
+import type { SizeType } from "..";
+import type { BaseComponent } from "../base";
+export interface WebViewProps extends BaseComponent {
+    type: "web_view";
+    visible?: boolean | null;
+    /**
+     * Version of the host <-> web-component postMessage bridge protocol. Only `1`
+     * exists today. Selects the CDN host-bridge build loaded at runtime (see
+     * `web-view-sdk.ts`).
+     */
+    protocol_version: 1;
+    /** External, `https`-only asset URL the iframe is pointed at. */
+    url: string;
+    size: SizeType;
+}

package/dist/types/components/web-view.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -48,11 +48,17 @@ type RelativeSize = {
     type: "relative";
     value: number;
 };
-type FitFillSize = {
-    type: "fit" | "fill";
+type FitSize = {
+    type: "fit";
     value?: null;
+    /** Placeholder px until the content reports its measured size. */
+    default?: number;
 };
-export type Size = FixedSize | RelativeSize | FitFillSize;
+type FillSize = {
+    type: "fill";
+    value?: null;
+};
+export type Size = FixedSize | RelativeSize | FitSize | FillSize;
 export type SizeType = {
     width: Size;
     height: Size;

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.5",
+  "version": "4.8.7",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -76,6 +76,7 @@
   },
   "packageManager": "npm@11.7.0+sha512.c22099a6fff8d5b2286c2a09df5352b4858a7c0c716320f58989d60ad8b29ecf2ce6fdfe97ccb41c23ffb1272e1fa079f868487dd6b81d02a2a9e199c095a117",
   "dependencies": {
+    "@revenuecat/workflow-web-components-sdk": "^0.1.4",
     "qrcode": "^1.5.4"
   },
   "peerDependencies": {