@revenuecat/purchases-ui-js 4.8.18 → 4.8.20

package/dist/components/image/Image.svelte

@@ -12,6 +12,7 @@
   } from "../../utils/base-utils";
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import ClipPath from "./ClipPath.svelte";
+  import { viewBoxSize } from "./view-box-size";
   import Overlay from "./Overlay.svelte";
 
   const props: ImageProps = $props();
@@ -87,13 +88,24 @@
       padding: mapSpacing(padding),
       "line-height": 0,
       "flex-shrink": size.width.type === "fixed" ? 0 : 1,
+      // min-height: 0 so a seeded viewBox cannot become a flex min-content
+      // square that eats the rest of a space-between stack (body copy).
+      ...(size.width.type === "fixed"
+        ? {}
+        : { "min-width": 0, "min-height": 0 }),
     }),
   );
 
   let svgRect = $state<DOMRect | null>(null);
 
   const [svgWidth, svgHeight] = $derived.by(() => {
-    return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+    // Hug-content on either axis: wait for contentRect. Seeding fill-width ×
+    // fit-height from wrapperWidth * aspect locks a column-width square.
+    if (size.width.type === "fit" || size.height.type === "fit") {
+      return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+    }
+
+    return viewBoxSize(svgRect, wrapperWidth, height);
   });
 
   const viewBox = $derived.by(() => {

package/dist/components/image/ImageTestWrapper.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { readable, writable } from "svelte/store";
+  import { setColorModeContext } from "../../stores/color-mode";
+  import { setPaywallContext } from "../../stores/paywall";
+  import Image from "./Image.svelte";
+  import type { ImageProps } from "../../types/components/image";
+
+  const props: ImageProps = $props();
+
+  setColorModeContext();
+  setPaywallContext({
+    selectedPackageId: writable(undefined),
+    variablesPerPackage: readable(undefined),
+    baseVariables: readable(undefined),
+    infoPerPackage: readable(undefined),
+    onPurchase: () => {},
+    emitComponentInteraction: () => {},
+    onButtonAction: () => {},
+    uiConfig: { app: { fonts: {} } } as never,
+    hideBackButtons: false,
+  });
+</script>
+
+<Image {...props} />

package/dist/components/image/ImageTestWrapper.svelte.d.ts

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

package/dist/components/image/view-box-size.d.ts

@@ -0,0 +1,14 @@
+/** First strictly positive dimension, else 0. Never invent a 1px axis — that becomes a 1:1 viewBox and blows up flex layout. */
+export declare function viewBoxDimension(...values: (number | undefined)[]): number;
+/**
+ * Prefer measured contentRect when both axes are known; otherwise seed width/height
+ * together from layout (wrapper size / computed height). Seed only when BOTH fallbacks
+ * are positive — a single `1` placeholder gives the SVG a real aspect ratio (SSR
+ * `height: NaNpx` + `viewBox="0 0 1 1"` → column-width square, body copy squeezed).
+ * Do not use natural media dimensions here — that breaks fit-content images whose
+ * box is still 0px wide.
+ */
+export declare function viewBoxSize(measured: {
+    width?: number;
+    height?: number;
+} | null | undefined, fallbackWidth: number | undefined, fallbackHeight: number | undefined): [number, number];

package/dist/components/image/view-box-size.js

@@ -0,0 +1,30 @@
+/** First strictly positive dimension, else 0. Never invent a 1px axis — that becomes a 1:1 viewBox and blows up flex layout. */
+export function viewBoxDimension(...values) {
+    for (const value of values) {
+        if (value != null && value > 0) {
+            return value;
+        }
+    }
+    return 0;
+}
+/**
+ * Prefer measured contentRect when both axes are known; otherwise seed width/height
+ * together from layout (wrapper size / computed height). Seed only when BOTH fallbacks
+ * are positive — a single `1` placeholder gives the SVG a real aspect ratio (SSR
+ * `height: NaNpx` + `viewBox="0 0 1 1"` → column-width square, body copy squeezed).
+ * Do not use natural media dimensions here — that breaks fit-content images whose
+ * box is still 0px wide.
+ */
+export function viewBoxSize(measured, fallbackWidth, fallbackHeight) {
+    const measuredWidth = measured?.width ?? 0;
+    const measuredHeight = measured?.height ?? 0;
+    if (measuredWidth > 0 && measuredHeight > 0) {
+        return [measuredWidth, measuredHeight];
+    }
+    const width = viewBoxDimension(fallbackWidth);
+    const height = viewBoxDimension(fallbackHeight);
+    if (width > 0 && height > 0) {
+        return [width, height];
+    }
+    return [0, 0];
+}

package/dist/components/options/InputMultipleChoice.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Node from "../paywall/Node.svelte";
+  import { asBridgeInputArray } from "../web-view/build-paywall-context";
   import {
     createInputChoiceContext,
     setInputChoiceContext,
@@ -8,6 +9,7 @@
     getInputValidationContext,
     getInitialInputSelectionsContext,
   } from "../../stores/inputValidation";
+  import { getPaywallContext } from "../../stores/paywall";
   import type { InputMultipleChoiceProps } from "../../types/components/options";
   import { onDestroy } from "svelte";
 
@@ -26,6 +28,18 @@
   );
   setInputChoiceContext(inputChoiceContext);
 
+  // Keep this field a string[] so handleInputChanged toggles option_id
+  // instead of replacing the whole selection (including on deselect).
+  // Optional: stories and isolated mounts have no paywall host.
+  try {
+    getPaywallContext().bridgeInputs?.update((current) => ({
+      ...current,
+      [field_id]: asBridgeInputArray(current[field_id] ?? initialSelectedIds),
+    }));
+  } catch {
+    // Paywall context not found
+  }
+
   const validationContext = getInputValidationContext();
   if (validationContext) {
     const unsubscribe = inputChoiceContext.isSatisfied.subscribe(

package/dist/components/paywall/Paywall.svelte

@@ -43,7 +43,10 @@
   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 {
+    collectPackageIdsInDisplayOrder,
+    findSelectedPackageId,
+  } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import { derived, readable, writable } from "svelte/store";
   import Stack from "../stack/Stack.svelte";
@@ -56,6 +59,17 @@
   } from "../../stores/packageInfo";
   import type { WalletButtonRender } from "../../types/wallet";
   import type { ReservedAttribute } from "../../types/components/input-text";
+  import type {
+    PaywallOffering,
+    PaywallPackage,
+    PaywallWorkflow,
+  } from "@revenuecat/workflow-web-components-sdk";
+  import {
+    applyBridgeInputChange,
+    buildBridgeInputs,
+    typedCustomVariables,
+    type BridgeInputs,
+  } from "../web-view/build-paywall-context";
 
   /**
    * Props are captured once at mount and are not reactive to subsequent changes.
@@ -130,6 +144,11 @@
      * Hosts (e.g. workflow runtimes) pass their workflow-level fallback here.
      */
     safeAreaFallbackColor?: ColorScheme | null;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    workflow?: PaywallWorkflow;
+    isPreview?: boolean;
+    inputs?: BridgeInputs;
   }
 
   const {
@@ -159,6 +178,11 @@
     initialInputSelections = {},
     customVariables = {},
     safeAreaFallbackColor,
+    offering = null,
+    packages = [],
+    workflow,
+    isPreview = false,
+    inputs = {},
   }: Props = $props();
 
   const getColorMode = setColorModeContext(() => preferredColorMode);
@@ -305,22 +329,59 @@
     }
   };
 
+  // Merge this component's own `customVariables` prop with the dashboard
+  // defaults. On the standalone path, this is the only source of custom
+  // variable values. On the workflow path, the host has already merged its
+  // `customVariables` into `globalVariables` — that merge must win here, or
+  // this component's defaults-only merge (since `customVariables` is never
+  // passed down by the workflow) silently overwrites the host's overrides
+  // for any variable that also has a declared dashboard default.
   const mergedCustomVars = mergeCustomVariables(customVariables, uiConfig);
+  const typedCustom = typedCustomVariables(customVariables, uiConfig);
+  const packageIdsInDisplayOrder = collectPackageIdsInDisplayOrder(base);
+  const bridgeInputs = writable(
+    buildBridgeInputs({
+      inputs,
+      initialInputSelections,
+      globalVariables,
+    }),
+  );
+
+  const handleInputChanged = (
+    fieldId: string,
+    value: string,
+    actionId?: string,
+  ) => {
+    // InputOption emits the clicked option_id, not the full field. Toggle
+    // when the field is already a string[] (multi-choice); replace otherwise.
+    bridgeInputs.update((current) =>
+      applyBridgeInputChange(current, fieldId, value),
+    );
+    onInputChanged?.(fieldId, value, actionId);
+  };
 
   setPaywallContext({
     defaultPackageId,
     selectedPackageId,
     variablesPerPackage: readable(variablesPerPackage),
     baseVariables: readable({
-      ...globalVariables,
       ...mergedCustomVars,
+      ...globalVariables,
     }),
     infoPerPackage: readable(infoPerPackage),
+    offering,
+    contextPackages: packages,
+    packageIdsInDisplayOrder,
+    workflow,
+    isPreview,
+    selectedLocale: selectedLocale ?? default_locale,
+    typedCustom,
+    bridgeInputs,
     onPurchase,
     emitComponentInteraction,
     onNavigateToUrl: onNavigateToUrlClicked,
     onButtonAction,
-    onInputChanged,
+    onInputChanged: handleInputChanged,
     onSensitiveInputChanged,
     onReservedAttributeChanged,
     walletButtonRender,
@@ -341,8 +402,8 @@
   const variables: VariablesStore = derived(selectedPackageId, (packageId) => {
     const packageVars = variablesPerPackage[packageId || ""];
     return {
-      ...globalVariables,
       ...mergedCustomVars,
+      ...globalVariables,
       ...packageVars,
     };
   });

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -8,6 +8,8 @@ import type { UIConfig } from "../../types/ui-config";
 import { type CustomVariables, type PackageInfo, type VariableDictionary } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { ReservedAttribute } from "../../types/components/input-text";
+import type { PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
+import { type BridgeInputs } from "../web-view/build-paywall-context";
 /**
  * Props are captured once at mount and are not reactive to subsequent changes.
  * The paywall should be remounted to reflect new prop values.
@@ -72,6 +74,11 @@ interface Props {
      * Hosts (e.g. workflow runtimes) pass their workflow-level fallback here.
      */
     safeAreaFallbackColor?: ColorScheme | null;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    workflow?: PaywallWorkflow;
+    isPreview?: boolean;
+    inputs?: BridgeInputs;
 }
 declare const Paywall: import("svelte").Component<Props, {}, "">;
 type Paywall = ReturnType<typeof Paywall>;

package/dist/components/video/Video.svelte

@@ -19,6 +19,7 @@
     subscribeDecorativeVideoAutoplayAttempts,
   } from "../../utils/video-inline-playback";
   import ClipPath from "../image/ClipPath.svelte";
+  import { viewBoxSize } from "../image/view-box-size";
   import Overlay from "../image/Overlay.svelte";
 
   const props: VideoProps = $props();
@@ -157,13 +158,20 @@
       padding: mapSpacing(padding),
       "line-height": 0,
       "flex-shrink": size.width.type === "fixed" ? 0 : 1,
+      ...(size.width.type === "fixed"
+        ? {}
+        : { "min-width": 0, "min-height": 0 }),
     }),
   );
 
   let svgRect = $state<DOMRect | null>(null);
 
   const [svgWidth, svgHeight] = $derived.by(() => {
-    return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+    if (size.width.type === "fit" || size.height.type === "fit") {
+      return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+    }
+
+    return viewBoxSize(svgRect, wrapperWidth, height);
   });
 
   const viewBox = $derived.by(() => {

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

@@ -11,6 +11,14 @@
     RESIZE_MESSAGE,
   } from "./web-view-sdk";
   import type { ResizePayload, WebViewHostBridge } from "./web-view-sdk";
+  import { getPaywallContext } from "../../stores/paywall";
+  import { getOptionalPackageIdContext } from "../../stores/packageId";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { fromStore } from "svelte/store";
+  import {
+    buildPaywallContext,
+    contextFingerprint,
+  } from "./build-paywall-context";
 
   // 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.
@@ -27,6 +35,32 @@
 
   const props: WebViewProps = $props();
   const getParentStackDimension = getStackDimensionContext();
+  const paywall = getPaywallContext();
+  const enclosingPackageIdStore = getOptionalPackageIdContext();
+  const getColorMode = getColorModeContext();
+  const selectedPackageId = fromStore(paywall.selectedPackageId);
+  const enclosingPackageId = enclosingPackageIdStore
+    ? fromStore(enclosingPackageIdStore)
+    : null;
+  const liveInputs = paywall.bridgeInputs
+    ? fromStore(paywall.bridgeInputs)
+    : null;
+  const darkMode = $derived(getColorMode() === "dark");
+
+  const paywallContextSnapshot = () =>
+    buildPaywallContext({
+      custom: paywall.typedCustom,
+      offering: paywall.offering,
+      packages: paywall.contextPackages,
+      packageIdsInDisplayOrder: paywall.packageIdsInDisplayOrder,
+      selectedPackageId: selectedPackageId.current,
+      enclosingPackageId: enclosingPackageId?.current,
+      inputs: liveInputs?.current,
+      workflow: paywall.workflow,
+      locale: paywall.selectedLocale,
+      darkMode,
+      isPreview: paywall.isPreview,
+    });
 
   // 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.
@@ -106,6 +140,8 @@
   // to the plain iframe.
   let iframeEl = $state<HTMLIFrameElement | undefined>(undefined);
   let previousSafeUrl: string | null | undefined;
+  let liveBridge = $state<WebViewHostBridge | undefined>(undefined);
+  let lastFingerprint = $state<string | undefined>(undefined);
 
   $effect(() => {
     const url = safeUrl;
@@ -119,7 +155,9 @@
     // 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.
+    // component id or `fit` axes change in place. Do not read package selection
+    // or other snapshot fields here — those update via `setContext` without
+    // tearing down the iframe.
     const componentId = props.id;
     const protocolVersion = props.protocol_version;
     const widthFit = props.size.width.type === "fit";
@@ -133,12 +171,16 @@
       .then((createHostBridge) => {
         if (disposed) return;
         try {
+          const seed = paywallContextSnapshot();
           bridge = createHostBridge({
             iframe,
             allowedOrigin: new URL(url).origin,
             componentId,
             protocolVersion,
+            context: seed,
           });
+          liveBridge = bridge;
+          lastFingerprint = contextFingerprint(seed);
           // 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) {
@@ -166,8 +208,23 @@
     return () => {
       disposed = true;
       bridge?.destroy();
+      if (liveBridge === bridge) {
+        liveBridge = undefined;
+      }
     };
   });
+
+  // Later snapshots replace the whole context. Compare without `updated_at` so
+  // the init seed is not also posted as a `context` message.
+  $effect(() => {
+    const next = paywallContextSnapshot();
+    const currentBridge = liveBridge;
+    if (!currentBridge?.setContext) return;
+    const fingerprint = contextFingerprint(next);
+    if (fingerprint === lastFingerprint) return;
+    lastFingerprint = fingerprint;
+    currentBridge.setContext(next);
+  });
 </script>
 
 {#if isVisible && safeUrl && canEmbed}

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

@@ -7,22 +7,36 @@
     type StackDimension,
   } from "../stack/stack-dimension-context";
   import type { WebViewProps } from "../../types/components/web-view";
-  import { readable, writable } from "svelte/store";
+  import type {
+    PaywallOffering,
+    PaywallPackage,
+  } from "@revenuecat/workflow-web-components-sdk";
+  import { readable, writable, type Writable } from "svelte/store";
   import WebView from "./WebView.svelte";
 
   const {
     parentStackDimension,
+    selectedPackageId = writable(undefined),
+    contextPackages,
+    offering,
     ...props
-  }: WebViewProps & { parentStackDimension?: StackDimension } = $props();
+  }: WebViewProps & {
+    parentStackDimension?: StackDimension;
+    selectedPackageId?: Writable<string | undefined>;
+    contextPackages?: PaywallPackage[];
+    offering?: PaywallOffering | null;
+  } = $props();
 
   setStackDimensionContext(() => parentStackDimension);
 
   setPaywallContext({
     defaultPackageId: undefined,
-    selectedPackageId: writable(undefined),
+    selectedPackageId,
     variablesPerPackage: readable(undefined),
     baseVariables: readable(undefined),
     infoPerPackage: readable(undefined),
+    offering,
+    contextPackages,
     onPurchase: () => {},
     emitComponentInteraction: () => {},
     onButtonAction: () => {},

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

@@ -1,7 +1,12 @@
 import { type StackDimension } from "../stack/stack-dimension-context";
 import type { WebViewProps } from "../../types/components/web-view";
+import type { PaywallOffering, PaywallPackage } from "@revenuecat/workflow-web-components-sdk";
+import { type Writable } from "svelte/store";
 type $$ComponentProps = WebViewProps & {
     parentStackDimension?: StackDimension;
+    selectedPackageId?: Writable<string | undefined>;
+    contextPackages?: PaywallPackage[];
+    offering?: PaywallOffering | null;
 };
 declare const WebViewTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
 type WebViewTestWrapper = ReturnType<typeof WebViewTestWrapper>;

package/dist/components/web-view/build-paywall-context.d.ts

@@ -0,0 +1,45 @@
+import type { InitialInputSelections } from "../../stores/inputValidation";
+import type { UIConfig } from "../../types/ui-config";
+import type { CustomVariables, VariableDictionary } from "../../types/variables";
+import type { PaywallContext as BridgePaywallContext, PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
+export type BridgeCustomValues = Record<string, string | number | boolean>;
+export type BridgeInputs = Record<string, string | string[] | null>;
+export interface BuildPaywallContextParams {
+    /** Pre-merged custom values. When set, `customVariables` / `uiConfig` are ignored. */
+    custom?: BridgeCustomValues;
+    customVariables?: CustomVariables;
+    uiConfig?: UIConfig;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    packageIdsInDisplayOrder?: string[];
+    selectedPackageId?: string;
+    enclosingPackageId?: string;
+    inputs?: BridgeInputs;
+    initialInputSelections?: InitialInputSelections;
+    globalVariables?: VariableDictionary;
+    workflow?: PaywallWorkflow;
+    locale?: string;
+    darkMode?: boolean;
+    isPreview?: boolean;
+    updatedAt?: number;
+}
+/** Merge dashboard custom-variable defaults with typed runtime overrides. */
+export declare function typedCustomVariables(customVariables: CustomVariables | undefined, uiConfig: UIConfig | undefined): BridgeCustomValues;
+/**
+ * Bare field ids. Host `inputs` win, then current-screen selections, then
+ * `input.*` keys from global variables (stringly, from earlier steps).
+ */
+export declare function buildBridgeInputs({ inputs, initialInputSelections, globalVariables, }: Pick<BuildPaywallContextParams, "inputs" | "initialInputSelections" | "globalVariables">): BridgeInputs;
+/** Normalize a stored input to a choice-field `string[]`. */
+export declare function asBridgeInputArray(value: string | string[] | null | undefined): string[];
+/**
+ * Apply an `onInputChanged` payload to `bridgeInputs`.
+ * Choice options emit a single `option_id`: toggle when the field is already
+ * a `string[]` (multi-choice), otherwise replace (text / single-choice).
+ */
+export declare function applyBridgeInputChange(current: BridgeInputs, fieldId: string, value: string): BridgeInputs;
+/** Paywall-tree order, dropping offering packages that never appear on the paywall. */
+export declare function orderPackagesForPaywall(packages: PaywallPackage[], packageIdsInDisplayOrder: string[]): PaywallPackage[];
+export declare function buildPaywallContext(params: BuildPaywallContextParams): BridgePaywallContext;
+/** Snapshot identity ignoring `updated_at`, so init is not also sent as `context`. */
+export declare function contextFingerprint(context: BridgePaywallContext): string;

package/dist/components/web-view/build-paywall-context.js

@@ -0,0 +1,104 @@
+/** Merge dashboard custom-variable defaults with typed runtime overrides. */
+export function typedCustomVariables(customVariables, uiConfig) {
+    const custom = {};
+    for (const [name, spec] of Object.entries(uiConfig?.custom_variables ?? {})) {
+        custom[name] = spec.default_value;
+    }
+    for (const [name, value] of Object.entries(customVariables ?? {})) {
+        custom[name] = value.value;
+    }
+    return custom;
+}
+/**
+ * Bare field ids. Host `inputs` win, then current-screen selections, then
+ * `input.*` keys from global variables (stringly, from earlier steps).
+ */
+export function buildBridgeInputs({ inputs, initialInputSelections, globalVariables, }) {
+    const result = {};
+    for (const [key, value] of Object.entries(globalVariables ?? {})) {
+        if (!key.startsWith("input.") || value === undefined)
+            continue;
+        result[key.slice("input.".length)] = value;
+    }
+    for (const [fieldId, selectedIds] of Object.entries(initialInputSelections ?? {})) {
+        // Length 0 is unanswered: omit so applyBridgeInputChange replaces
+        // (single-choice). Do not write [] here; multi-choice seeds [] on mount.
+        if (selectedIds.length === 0)
+            continue;
+        result[fieldId] =
+            selectedIds.length === 1 ? (selectedIds[0] ?? null) : selectedIds;
+    }
+    return { ...result, ...inputs };
+}
+/** Normalize a stored input to a choice-field `string[]`. */
+export function asBridgeInputArray(value) {
+    if (Array.isArray(value))
+        return [...value];
+    if (value == null || value === "")
+        return [];
+    return [value];
+}
+/**
+ * Apply an `onInputChanged` payload to `bridgeInputs`.
+ * Choice options emit a single `option_id`: toggle when the field is already
+ * a `string[]` (multi-choice), otherwise replace (text / single-choice).
+ */
+export function applyBridgeInputChange(current, fieldId, value) {
+    const existing = current[fieldId];
+    if (Array.isArray(existing)) {
+        const next = existing.includes(value)
+            ? existing.filter((id) => id !== value)
+            : [...existing, value];
+        return { ...current, [fieldId]: next };
+    }
+    return { ...current, [fieldId]: value };
+}
+/** Paywall-tree order, dropping offering packages that never appear on the paywall. */
+export function orderPackagesForPaywall(packages, packageIdsInDisplayOrder) {
+    if (packageIdsInDisplayOrder.length === 0) {
+        return packages;
+    }
+    const byId = new Map(packages.map((pkg) => [pkg.identifier, pkg]));
+    const ordered = [];
+    const seen = new Set();
+    for (const id of packageIdsInDisplayOrder) {
+        if (seen.has(id))
+            continue;
+        seen.add(id);
+        ordered.push(byId.get(id) ?? { identifier: id, display_name: id, products: [] });
+    }
+    return ordered;
+}
+export function buildPaywallContext(params) {
+    const packages = orderPackagesForPaywall(params.packages ?? [], params.packageIdsInDisplayOrder ?? []);
+    const selectedPackage = packages.find((pkg) => pkg.identifier === params.selectedPackageId) ?? null;
+    const placementId = params.enclosingPackageId ?? params.selectedPackageId;
+    const placementPackage = packages.find((pkg) => pkg.identifier === placementId) ?? null;
+    const context = {
+        custom: params.custom !== undefined
+            ? params.custom
+            : typedCustomVariables(params.customVariables, params.uiConfig),
+        offering: params.offering ?? null,
+        packages,
+        package: placementPackage,
+        selected_package: selectedPackage,
+        inputs: buildBridgeInputs(params),
+        device_meta: {
+            is_preview: params.isPreview ?? false,
+            locale: params.locale ?? "",
+            dark_mode: params.darkMode ?? false,
+            updated_at: params.updatedAt ?? Date.now(),
+        },
+    };
+    if (params.workflow !== undefined) {
+        context.workflow = params.workflow;
+    }
+    return context;
+}
+/** Snapshot identity ignoring `updated_at`, so init is not also sent as `context`. */
+export function contextFingerprint(context) {
+    return JSON.stringify({
+        ...context,
+        device_meta: { ...context.device_meta, updated_at: 0 },
+    });
+}

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

@@ -6,17 +6,18 @@
  * ESM sibling at `/v<major>/rc-host.js` remains for other consumers. Types and
  * message constants come from `@revenuecat/workflow-web-components-sdk`.
  */
-import type { Bridge, HostBridgeConfig } from "@revenuecat/workflow-web-components-sdk";
+import type { HostBridge, 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.
+ * The subset of the SDK host bridge purchases-ui-js uses: subscribe to a
+ * message, run a callback once the channel opens, fire-and-forget, push a
+ * later paywall-context snapshot, and tear down.
  */
-export type WebViewHostBridge = Pick<Bridge, "on" | "onReady" | "send" | "destroy">;
-export type CreateHostBridge = (config: HostBridgeConfig) => Bridge;
+export type WebViewHostBridge = Pick<HostBridge, "on" | "onReady" | "send" | "destroy" | "setContext">;
+export type CreateHostBridge = (config: HostBridgeConfig) => HostBridge;
 /** Test factories may return only the bridge surface this package uses. */
 export type CreateHostBridgeForTests = (config: HostBridgeConfig) => WebViewHostBridge;
 declare global {

package/dist/components/workflows/Screen.svelte

@@ -5,10 +5,20 @@
   import type { InitialInputSelections } from "../../stores/inputValidation";
   import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
   import type { WorkflowScreen } from "../../types/workflow";
-  import type { PackageInfo, VariableDictionary } from "../../types/variables";
+  import type {
+    PackageInfo,
+    VariableDictionary,
+    CustomVariables,
+  } from "../../types/variables";
   import type { WalletButtonRender } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
+  import type {
+    PaywallOffering,
+    PaywallPackage,
+    PaywallWorkflow,
+  } from "@revenuecat/workflow-web-components-sdk";
+  import type { BridgeInputs } from "../web-view/build-paywall-context";
   interface Props {
     paywallComponents: WorkflowScreen | null | undefined;
     selectedLocale?: string;
@@ -50,6 +60,12 @@
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    workflow?: PaywallWorkflow;
+    isPreview?: boolean;
+    inputs?: BridgeInputs;
+    customVariables?: CustomVariables;
   }
   const {
     paywallComponents,
@@ -76,6 +92,12 @@
     walletButtonRender,
     safeAreaFallbackColor,
     hideBackButtons,
+    offering,
+    packages,
+    workflow,
+    isPreview,
+    inputs,
+    customVariables,
   }: Props = $props();
 </script>
 
@@ -113,6 +135,12 @@
       {walletButtonRender}
       {safeAreaFallbackColor}
       {hideBackButtons}
+      {offering}
+      {packages}
+      {workflow}
+      {isPreview}
+      {inputs}
+      {customVariables}
       onError={(error) => {
         console.error("Paywall error:", error);
       }}

package/dist/components/workflows/Screen.svelte.d.ts

@@ -3,10 +3,12 @@ import type { ColorScheme } from "../../types/colors";
 import type { InitialInputSelections } from "../../stores/inputValidation";
 import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
 import type { WorkflowScreen } from "../../types/workflow";
-import type { PackageInfo, VariableDictionary } from "../../types/variables";
+import type { PackageInfo, VariableDictionary, CustomVariables } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
+import type { PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
+import type { BridgeInputs } from "../web-view/build-paywall-context";
 interface Props {
     paywallComponents: WorkflowScreen | null | undefined;
     selectedLocale?: string;
@@ -36,6 +38,12 @@ interface Props {
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    workflow?: PaywallWorkflow;
+    isPreview?: boolean;
+    inputs?: BridgeInputs;
+    customVariables?: CustomVariables;
 }
 declare const Screen: import("svelte").Component<Props, {}, "">;
 type Screen = ReturnType<typeof Screen>;

package/dist/components/workflows/Workflow.svelte

@@ -5,7 +5,11 @@
   import type { ColorScheme } from "../../types/colors";
   import type { InitialInputSelections } from "../../stores/inputValidation";
   import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
-  import type { PackageInfo, VariableDictionary } from "../../types/variables";
+  import type {
+    PackageInfo,
+    VariableDictionary,
+    CustomVariables,
+  } from "../../types/variables";
   import type { WalletButtonRender } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
@@ -18,6 +22,11 @@
     WorkflowStepTriggerAction,
     WorkflowStep,
   } from "../../types/workflow";
+  import type {
+    PaywallOffering,
+    PaywallPackage,
+  } from "@revenuecat/workflow-web-components-sdk";
+  import type { BridgeInputs } from "../web-view/build-paywall-context";
 
   type TriggerActionValue = WorkflowStep["trigger_actions"][string];
 
@@ -78,6 +87,11 @@
      * purchase, error). Used by the host to fire workflow lifecycle events.
      */
     onStepChanged?: (event: WorkflowStepChangeEvent) => void;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    isPreview?: boolean;
+    inputs?: BridgeInputs;
+    customVariables?: CustomVariables;
   }
 
   const {
@@ -106,6 +120,11 @@
     onClose,
     onExitBack,
     onStepChanged,
+    offering,
+    packages,
+    isPreview,
+    inputs,
+    customVariables,
   }: Props = $props();
 
   // ── State store ────────────────────────────────────────────────────────────
@@ -158,6 +177,13 @@
     },
   );
   const currentScreen = $derived(workflow.pages[current.pageId]);
+  const currentStep = $derived(workflow.steps[current.stepId]);
+  const bridgeWorkflow = $derived({
+    workflow_id: workflow.workflowId,
+    step_id: current.stepId,
+    step_type: currentStep?.type ?? "screen",
+    screen_type: currentStep?.screen_type ?? [],
+  });
 
   $effect.pre(() => {
     const navKey = `${workflow.workflowId}:${workflow.initial_page_id}`;
@@ -365,5 +391,11 @@
       });
       onClose?.();
     }}
+    {offering}
+    {packages}
+    workflow={bridgeWorkflow}
+    {isPreview}
+    {inputs}
+    {customVariables}
   />
 {/key}

package/dist/components/workflows/Workflow.svelte.d.ts

@@ -2,11 +2,13 @@ import type { CompleteWorkflowNavigateArgs } from "../../types/components/button
 import type { ColorScheme } from "../../types/colors";
 import type { InitialInputSelections } from "../../stores/inputValidation";
 import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
-import type { PackageInfo, VariableDictionary } from "../../types/variables";
+import type { PackageInfo, VariableDictionary, CustomVariables } from "../../types/variables";
 import type { WalletButtonRender } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
 import type { WorkflowNavData, WorkflowStepChangeEvent } from "../../types/workflow-nav";
+import type { PaywallOffering, PaywallPackage } from "@revenuecat/workflow-web-components-sdk";
+import type { BridgeInputs } from "../web-view/build-paywall-context";
 interface Props {
     workflow: WorkflowNavData;
     uiConfig: UIConfig;
@@ -43,6 +45,11 @@ interface Props {
      * purchase, error). Used by the host to fire workflow lifecycle events.
      */
     onStepChanged?: (event: WorkflowStepChangeEvent) => void;
+    offering?: PaywallOffering | null;
+    packages?: PaywallPackage[];
+    isPreview?: boolean;
+    inputs?: BridgeInputs;
+    customVariables?: CustomVariables;
 }
 declare const Workflow: import("svelte").Component<Props, {}, "">;
 type Workflow = ReturnType<typeof Workflow>;

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { type WorkflowNavData, type WorkflowStepChangeEvent, workflowDataToNavDa
 export { type WorkflowData, type WorkflowStep } from "./types/workflow";
 export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";
+export type { PaywallContext, PaywallOffering, PaywallPackage, PaywallWorkflow, } from "@revenuecat/workflow-web-components-sdk";
 export { type WalletButtonRender, type WalletButtonTheme, } from "./types/wallet";
 export { type CustomVariables, CustomVariableValue, mergeCustomVariables, type VariableDictionary, type PackageInfo, } from "./types/variables";
 export type { Action, CompleteWorkflowNavigateArgs, CompleteWorkflowUrlQueryParams, } from "./types/components/button";

package/dist/stores/paywall.d.ts

@@ -4,7 +4,9 @@ import type { ComponentInteractionData } from "../types/paywall-component-intera
 import type { UIConfig } from "../types/ui-config";
 import type { PackageInfo, VariableDictionary } from "../types/variables";
 import type { WalletButtonRender } from "../types/wallet";
+import type { PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
 import { type Readable, type Writable } from "svelte/store";
+import type { BridgeCustomValues, BridgeInputs } from "../components/web-view/build-paywall-context";
 type PaywallContext = Readonly<{
     defaultPackageId?: string;
     selectedPackageId: Writable<string | undefined>;
@@ -18,6 +20,17 @@ type PaywallContext = Readonly<{
      * */
     baseVariables: Readable<VariableDictionary | undefined>;
     infoPerPackage: Readable<Record<string, PackageInfo> | undefined>;
+    /** Host-supplied offering for the web_view bridge. */
+    offering?: PaywallOffering | null;
+    /** Host-mapped packages (SDK shape) for the web_view bridge. */
+    contextPackages?: PaywallPackage[];
+    /** Paywall-tree package ids in display order. */
+    packageIdsInDisplayOrder?: string[];
+    workflow?: PaywallWorkflow;
+    isPreview?: boolean;
+    selectedLocale?: string;
+    typedCustom?: BridgeCustomValues;
+    bridgeInputs?: Writable<BridgeInputs>;
     onPurchase: (actionId?: string) => void;
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;

package/dist/types/workflow.d.ts

@@ -42,6 +42,14 @@ export interface WorkflowStep {
     id: string;
     screen_id?: string;
     type: string;
+    /** Editor step name from the published SDK payload (khepri #24244). */
+    name?: string | null;
+    /**
+     * Editor screen-type classification from the published SDK payload
+     * (khepri #24244). Missing on unre-published funnels; treat as `[]`.
+     * Distinct from `metadata.screen_type` (native fallback-paywall contract).
+     */
+    screen_type?: string[];
     param_values: Record<string, unknown>;
     /**
      * Maps action IDs (from `triggers[].action_id`) to the next step to navigate

package/dist/utils/style-utils.d.ts

@@ -10,6 +10,11 @@ import type { PackageInfo, VariableDictionary } from "../types/variables.js";
  * @returns the id of the first package marked as `is_selected_by_default`, otherwise the first package id, or undefined
  */
 export declare function findSelectedPackageId({ stack, sticky_footer, }: RootPaywall): string | undefined;
+/**
+ * Package ids in paywall display order (root stack, then sticky footer).
+ * Duplicates keep the first occurrence. Unselected tabs still count.
+ */
+export declare function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }: RootPaywall): string[];
 export type ConditionContext = {
     selectedPackageId: string | undefined;
     packageInfo: PackageInfo | undefined;

package/dist/utils/style-utils.js

@@ -93,6 +93,28 @@ export function findSelectedPackageId({ stack, sticky_footer, }) {
     }
     return undefined;
 }
+/**
+ * Package ids in paywall display order (root stack, then sticky footer).
+ * Duplicates keep the first occurrence. Unselected tabs still count.
+ */
+export function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }) {
+    const ids = [];
+    const seen = new Set();
+    const walk = (node) => {
+        if (node.type === "package" && !seen.has(node.package_id)) {
+            seen.add(node.package_id);
+            ids.push(node.package_id);
+        }
+        for (const child of getPaywallComponentChildNodes(node)) {
+            walk(child);
+        }
+    };
+    walk(stack);
+    if (sticky_footer != null) {
+        walk(sticky_footer);
+    }
+    return ids;
+}
 /**
  * Merges the properties of every override whose conditions all match (AND),
  * applying them in override-array order (later overrides overwrite earlier ones).

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.18",
+  "version": "4.8.20",
   "author": {
     "name": "RevenueCat, Inc."
   },
@@ -35,7 +35,6 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky",
     "chromatic": "chromatic",
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
@@ -76,7 +75,7 @@
   },
   "packageManager": "npm@11.7.0+sha512.c22099a6fff8d5b2286c2a09df5352b4858a7c0c716320f58989d60ad8b29ecf2ce6fdfe97ccb41c23ffb1272e1fa079f868487dd6b81d02a2a9e199c095a117",
   "dependencies": {
-    "@revenuecat/workflow-web-components-sdk": "^0.1.4",
+    "@revenuecat/workflow-web-components-sdk": "^0.1.7",
     "qrcode": "^1.5.4"
   },
   "peerDependencies": {
@@ -105,10 +104,9 @@
     "eslint-plugin-storybook": "9.1.17",
     "eslint-plugin-svelte": "3.16.0",
     "globals": "16.4.0",
-    "husky": "9.1.7",
     "jsdom": "27.0.1",
     "knip": "5.82.1",
-    "lint-staged": "16.4.0",
+    "lefthook": "^2.1.10",
     "prettier": "3.8.1",
     "prettier-plugin-svelte": "3.5.1",
     "publint": "0.3.18",
@@ -122,10 +120,10 @@
     "vite-plugin-dts": "4.5.4",
     "vitest": "3.2.4"
   },
-  "lint-staged": {
-    "**/*": [
-      "prettier --write --ignore-unknown",
-      "eslint --fix"
-    ]
+  "allowScripts": {
+    "esbuild@0.25.12": true,
+    "fsevents@2.3.2": true,
+    "fsevents@2.3.3": true,
+    "lefthook@2.1.10": true
   }
 }