@revenuecat/purchases-ui-js 4.14.2 → 4.16.0

package/dist/components/stack/Stack.svelte.d.ts

@@ -7,6 +7,8 @@ interface MiscProps {
     style?: CSS;
     class?: string;
     testId?: string;
+    /** The paywall's root stack, which the paywall scrolls vertically. */
+    rootStack?: boolean;
 }
 type $$ComponentProps = StackProps & MiscProps;
 declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/stack/stack-scroll.d.ts

@@ -0,0 +1,59 @@
+import type { SizeType } from "../../types";
+import type { Dimension } from "../../types/alignment";
+import type { Component } from "../../types/component";
+import type { StackProps } from "../../types/components/stack";
+import type { CSS } from "../../utils/base-utils";
+import { type ConditionContext } from "../../utils/style-utils";
+export type ScrollAxis = "x" | "y";
+/**
+ * The axis a stack scrolls along, like the native SDKs: horizontal stacks
+ * scroll sideways, vertical ones down. The root is already the paywall's
+ * vertical scroller, and z-layers never scroll.
+ */
+export declare function stackScrollAxis(dimension: Dimension["type"], rootStack: boolean): ScrollAxis | null;
+/**
+ * How the paywall's root stack scrolls, the one place that decides it. Like
+ * the SDKs it scrolls down unless its overflow is "default", and a horizontal
+ * root set to scroll also scrolls sideways.
+ */
+export declare function rootScrollStyle(overflow: StackProps["overflow"], axis: ScrollAxis | null): CSS;
+/**
+ * Like the SDKs, a Fit stack that scrolls takes the space its parent leaves
+ * it, up to its content, then scrolls. Along the parent's axis it shrinks
+ * first, so a parent that grows with its content never caps it. Across a row
+ * with a set height it stops at the row's height and keeps the row's
+ * alignment. A Fit row's height comes from its other children, where a
+ * percentage max-height doesn't resolve, so it stretches to the row instead.
+ * With no parent stack (a Fit root) it stops at its container. Inside a parent
+ * that scrolls the same way it keeps its full size.
+ */
+export declare function fitScrollSizing(axis: ScrollAxis | null, size: SizeType, parentDimension: Dimension["type"] | undefined, parentScrollAxis: ScrollAxis | null | undefined, parentHasSetHeight?: boolean): CSS;
+/**
+ * The axis a Fit stack gives way along because a Fit stack inside it scrolls
+ * there. In the SDKs the scroll view makes its Fit parents take the space
+ * they're offered, so they size like a scroller, without scrolling.
+ */
+export declare function fitScrollerParentAxis(size: SizeType, components: Component[], context: ConditionContext): ScrollAxis | null;
+/**
+ * What stops a sheet's contents stack that scrolls: a Fit stack stops at the
+ * screen's height, as the paywall's root does, and a stack with a set or Fill
+ * height at that height. A Fit sheet gives Fill contents no height to fill, so
+ * the sheet takes the screen's height for them. Either way the stack scrolls
+ * itself.
+ */
+export declare function sheetScrollBound(contents: Pick<StackProps, "overflow" | "dimension" | "size">, sheetHeight: SizeType["height"]["type"]): "screen" | "full-screen" | "stack" | null;
+/**
+ * Whether a stack's height is set (Fill, Fixed or the paywall's root) rather
+ * than coming from its children, so a child's percentage height resolves.
+ */
+export declare function stackHasSetHeight(size: SizeType, rootStack: boolean): boolean;
+type GetHasSetHeight = () => boolean;
+/** Publishes whether this stack's height is set and returns the parent's. */
+export declare function setStackSetHeightContext(context: GetHasSetHeight): GetHasSetHeight | undefined;
+type GetScrollAxis = () => ScrollAxis | null;
+/**
+ * Publishes the axis this stack scrolls along and returns the parent's, so a
+ * child knows when it sits inside a scroller.
+ */
+export declare function setStackScrollContext(context: GetScrollAxis): GetScrollAxis | undefined;
+export {};

package/dist/components/stack/stack-scroll.js

@@ -0,0 +1,162 @@
+import { resolveOverrideProperties, } from "../../utils/style-utils";
+import { getContext, setContext } from "svelte";
+/**
+ * The axis a stack scrolls along, like the native SDKs: horizontal stacks
+ * scroll sideways, vertical ones down. The root is already the paywall's
+ * vertical scroller, and z-layers never scroll.
+ */
+export function stackScrollAxis(dimension, rootStack) {
+    if (dimension === "horizontal")
+        return "x";
+    if (dimension === "vertical" && !rootStack)
+        return "y";
+    return null;
+}
+/**
+ * How the paywall's root stack scrolls, the one place that decides it. Like
+ * the SDKs it scrolls down unless its overflow is "default", and a horizontal
+ * root set to scroll also scrolls sideways.
+ */
+export function rootScrollStyle(overflow, axis) {
+    if (overflow === "default")
+        return { overflow: "clip" };
+    return axis === "x"
+        ? { "overflow-x": "auto", "overflow-y": "auto" }
+        : { "overflow-y": "auto" };
+}
+// Far above its siblings' 1, so a scrolling stack gives up space before they
+// do, like a SwiftUI ScrollView next to fixed content.
+const SCROLLER_FLEX_SHRINK = 1_000_000;
+/**
+ * Like the SDKs, a Fit stack that scrolls takes the space its parent leaves
+ * it, up to its content, then scrolls. Along the parent's axis it shrinks
+ * first, so a parent that grows with its content never caps it. Across a row
+ * with a set height it stops at the row's height and keeps the row's
+ * alignment. A Fit row's height comes from its other children, where a
+ * percentage max-height doesn't resolve, so it stretches to the row instead.
+ * With no parent stack (a Fit root) it stops at its container. Inside a parent
+ * that scrolls the same way it keeps its full size.
+ */
+export function fitScrollSizing(axis, size, parentDimension, parentScrollAxis, parentHasSetHeight = false) {
+    if (axis == null)
+        return {};
+    if (axis === parentScrollAxis)
+        return { "flex-shrink": 0 };
+    if (axis === "y" && size.height.type === "fit") {
+        if (parentDimension === "vertical") {
+            return { "flex-shrink": SCROLLER_FLEX_SHRINK, "min-height": 0 };
+        }
+        if (parentDimension == null || parentHasSetHeight) {
+            return { "min-height": 0, "max-height": "100%" };
+        }
+        return {
+            height: "auto",
+            "align-self": "stretch",
+            "min-height": 0,
+            "max-height": "max-content",
+        };
+    }
+    if (axis === "x" && size.width.type === "fit") {
+        return parentDimension === "horizontal"
+            ? { "flex-shrink": SCROLLER_FLEX_SHRINK, "min-width": 0 }
+            : { "min-width": 0, "max-width": "100%" };
+    }
+    return {};
+}
+// The stack a component lays out as: its own, or the one a package or button
+// wraps and takes its size from.
+function layoutStack(component) {
+    switch (component.type) {
+        case "stack":
+            return component;
+        case "package":
+        case "button":
+        case "purchase_button":
+            return component.stack;
+        default:
+            return undefined;
+    }
+}
+// Whether a Fit stack scrolls along this direction somewhere below, reached
+// only through Fit stacks: a stack with a set size bounds what's inside it.
+// A hidden stack doesn't render, so neither it nor its contents count.
+function containsFitScroller(components, direction, context) {
+    return components.some((child) => {
+        const stack = layoutStack(child);
+        if (!stack)
+            return false;
+        const resolved = {
+            ...stack,
+            ...resolveOverrideProperties(context, stack.overrides),
+        };
+        if (resolved.visible === false)
+            return false;
+        const size = direction === "vertical" ? resolved.size.height : resolved.size.width;
+        if (size.type !== "fit")
+            return false;
+        if (resolved.overflow === "scroll" &&
+            resolved.dimension.type === direction) {
+            return true;
+        }
+        return containsFitScroller(resolved.components, direction, context);
+    });
+}
+/**
+ * The axis a Fit stack gives way along because a Fit stack inside it scrolls
+ * there. In the SDKs the scroll view makes its Fit parents take the space
+ * they're offered, so they size like a scroller, without scrolling.
+ */
+export function fitScrollerParentAxis(size, components, context) {
+    if (size.height.type === "fit" &&
+        containsFitScroller(components, "vertical", context)) {
+        return "y";
+    }
+    if (size.width.type === "fit" &&
+        containsFitScroller(components, "horizontal", context)) {
+        return "x";
+    }
+    return null;
+}
+/**
+ * What stops a sheet's contents stack that scrolls: a Fit stack stops at the
+ * screen's height, as the paywall's root does, and a stack with a set or Fill
+ * height at that height. A Fit sheet gives Fill contents no height to fill, so
+ * the sheet takes the screen's height for them. Either way the stack scrolls
+ * itself.
+ */
+export function sheetScrollBound(contents, sheetHeight) {
+    if (contents.overflow !== "scroll" ||
+        contents.dimension.type !== "vertical") {
+        return null;
+    }
+    if (contents.size.height.type === "fit")
+        return "screen";
+    if (contents.size.height.type === "fill" && sheetHeight === "fit") {
+        return "full-screen";
+    }
+    return "stack";
+}
+/**
+ * Whether a stack's height is set (Fill, Fixed or the paywall's root) rather
+ * than coming from its children, so a child's percentage height resolves.
+ */
+export function stackHasSetHeight(size, rootStack) {
+    return rootStack || size.height.type !== "fit";
+}
+const heightKey = Symbol("stack-set-height");
+/** Publishes whether this stack's height is set and returns the parent's. */
+export function setStackSetHeightContext(context) {
+    const parentContext = getContext(heightKey);
+    setContext(heightKey, context);
+    return parentContext;
+}
+const key = Symbol("stack-scroll");
+/**
+ * Publishes the axis this stack scrolls along and returns the parent's, so a
+ * child knows when it sits inside a scroller.
+ */
+export function setStackScrollContext(context) {
+    const parentContext = getContext(key);
+    setContext(key, context);
+    return parentContext;
+}

package/dist/components/tabs/Tabs.svelte

@@ -31,6 +31,11 @@
     setRelativeDiscountScopeContext,
   } from "../../stores/relativeDiscount";
   import { mostExpensivePricePerMonth } from "../../utils/relative-discount";
+  import {
+    getDefaultSelectionContext,
+    openDefaultSelection,
+    setDefaultSelectionContext,
+  } from "../../stores/default-selection";
 
   const props: TabsProps = $props();
   const { name, control, tabs, default_tab_id, state_updates } = props;
@@ -90,6 +95,11 @@
 
   const getTabName = (index: number) => tabs[index]?.name;
 
+  // The first tab renders with its paywall or sheet; each newly chosen tab
+  // lets its default package select itself.
+  let isDefaultSelectionOpen = getDefaultSelectionContext();
+  setDefaultSelectionContext(() => isDefaultSelectionOpen());
+
   const selectTab: SelectTab = (tabId, tabIndex, interactionType) => {
     const foundIndex = tabs.findIndex((tab) => tab.id === tabId);
     const nextIndex = foundIndex !== -1 ? foundIndex : tabIndex;
@@ -118,6 +128,7 @@
         });
       }
 
+      isDefaultSelectionOpen = openDefaultSelection();
       selectedTabIndex.set(nextIndex);
     }
   };

package/dist/components/workflows/Screen.svelte

@@ -61,6 +61,7 @@
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
@@ -99,6 +100,7 @@
     onNavigateToUrlClicked,
     onRestorePurchasesClicked,
     onVisitCustomerCenterClicked,
+    onCookieSettingsClicked,
     walletButtonRender,
     prepareWalletPurchase,
     onWalletPurchaseClicked,
@@ -141,6 +143,7 @@
       }}
       {onCompleteWorkflowNavigate}
       onVisitCustomerCenterClicked={() => onVisitCustomerCenterClicked?.()}
+      onCookieSettingsClicked={() => onCookieSettingsClicked?.()}
       {onBackClicked}
       {onClose}
       onRestorePurchasesClicked={() => onRestorePurchasesClicked?.()}

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

@@ -35,6 +35,7 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;

package/dist/components/workflows/Workflow.svelte

@@ -88,6 +88,7 @@
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;
@@ -132,6 +133,7 @@
     onNavigateToUrlClicked,
     onRestorePurchasesClicked,
     onVisitCustomerCenterClicked,
+    onCookieSettingsClicked,
     onComponentInteraction,
     onClose,
     onExitBack,
@@ -401,6 +403,7 @@
     {onNavigateToUrlClicked}
     {onRestorePurchasesClicked}
     {onVisitCustomerCenterClicked}
+    {onCookieSettingsClicked}
     {onComponentInteraction}
     onBackClicked={handleBackClicked}
     onClose={() => {

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

@@ -42,6 +42,7 @@ interface Props {
     onNavigateToUrlClicked?: (url: string) => void;
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
+    onCookieSettingsClicked?: () => void;
     onComponentInteraction?: OnComponentInteraction;
     onClose?: () => void;
     onExitBack?: () => void;

package/dist/stores/condition-context.svelte.js

@@ -5,6 +5,7 @@ import { getPaywallContext } from "./paywall";
 import { getSelectedStateContext } from "./selected";
 import { getPaywallStateContext, getStateSignal } from "./state";
 import { getOptionalVariablesContext } from "./variables";
+import { getWindowSizeContext } from "./window-size";
 /**
  * Builds ConditionContext snapshots for resolveOverrideProperties from the
  * ambient Svelte contexts. Call at component init; invoke the returned builder
@@ -16,6 +17,7 @@ export function useConditionContext(options = {}) {
     const packageInfo = fromStore(getOptionalPackageInfoContext());
     const selectedPackageId = fromStore(getPaywallContext().selectedPackageId);
     const variables = fromStore(getOptionalVariablesContext());
+    const windowSize = fromStore(getWindowSizeContext());
     const stateStore = options.state ? getPaywallStateContext() : undefined;
     const stateSignal = options.state ? fromStore(getStateSignal()) : null;
     return (extra) => {
@@ -27,6 +29,7 @@ export function useConditionContext(options = {}) {
             packageInfo: packageInfo.current,
             variables: variables.current ?? {},
             selected: selected.current,
+            windowSize: windowSize.current,
             ...extra,
         };
         if (hover) {

package/dist/stores/default-selection.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether a default package rendering now should select itself. It should
+ * while the paywall, a newly chosen tab or a sheet first renders, but not when
+ * a rule shows its stack again later and the user has picked something else.
+ */
+export type DefaultSelectionOpen = () => boolean;
+/**
+ * Open until Svelte has applied the update in progress, which mounts the
+ * paywall's, sheet's or new tab's packages and runs their effects. A tab
+ * switch reuses the package components, so the window can't close on a mount.
+ * Packages that render in a later update, such as a stack a rule shows again,
+ * find it closed. Covered by the "package selection" tests in
+ * window-size-rules.test.ts and by package-default-selection-tabs.test.ts.
+ */
+export declare function openDefaultSelection(): DefaultSelectionOpen;
+export declare function setDefaultSelectionContext(isOpen: DefaultSelectionOpen): void;
+export declare function getDefaultSelectionContext(): DefaultSelectionOpen;

package/dist/stores/default-selection.js

@@ -0,0 +1,21 @@
+import { getContext, setContext, tick } from "svelte";
+const key = Symbol("default-selection");
+/**
+ * Open until Svelte has applied the update in progress, which mounts the
+ * paywall's, sheet's or new tab's packages and runs their effects. A tab
+ * switch reuses the package components, so the window can't close on a mount.
+ * Packages that render in a later update, such as a stack a rule shows again,
+ * find it closed. Covered by the "package selection" tests in
+ * window-size-rules.test.ts and by package-default-selection-tabs.test.ts.
+ */
+export function openDefaultSelection() {
+    let open = true;
+    tick().then(() => (open = false));
+    return () => open;
+}
+export function setDefaultSelectionContext(isOpen) {
+    setContext(key, isOpen);
+}
+export function getDefaultSelectionContext() {
+    return getContext(key) ?? (() => true);
+}

package/dist/stores/rendered-packages.d.ts

@@ -0,0 +1,10 @@
+import type { SvelteMap } from "svelte/reactivity";
+import type { RenderedPackage } from "../utils/package-selection";
+/** The packages on screen, each registered by the Package component rendering it. */
+export type RenderedPackages = SvelteMap<symbol, RenderedPackage>;
+export declare function setRenderedPackagesContext(packages: RenderedPackages): void;
+export declare function getOptionalRenderedPackagesContext(): RenderedPackages | undefined;
+/** Marks the packages rendering inside a sheet with the sheet's id. */
+export declare function setPackageSheetContext(sheetId: string): void;
+/** The id of the sheet a package renders in, or null outside sheets. */
+export declare function getPackageSheetContext(): string | null;

package/dist/stores/rendered-packages.js

@@ -0,0 +1,17 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("rendered-packages");
+export function setRenderedPackagesContext(packages) {
+    setContext(key, packages);
+}
+export function getOptionalRenderedPackagesContext() {
+    return getContext(key);
+}
+const sheetKey = Symbol("package-sheet");
+/** Marks the packages rendering inside a sheet with the sheet's id. */
+export function setPackageSheetContext(sheetId) {
+    setContext(sheetKey, sheetId);
+}
+/** The id of the sheet a package renders in, or null outside sheets. */
+export function getPackageSheetContext() {
+    return getContext(sheetKey) ?? null;
+}

package/dist/stores/window-size.d.ts

@@ -0,0 +1,10 @@
+import { type Readable } from "svelte/store";
+/** The paywall's own box in CSS px, which window size rules evaluate against. */
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+/** Null until the paywall has been measured. */
+export type WindowSizeStore = Readable<WindowSize | null>;
+export declare function setWindowSizeContext(store: WindowSizeStore): void;
+export declare function getWindowSizeContext(): WindowSizeStore;

package/dist/stores/window-size.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from "svelte";
+import { readable } from "svelte/store";
+const key = Symbol("windowSize");
+export function setWindowSizeContext(store) {
+    setContext(key, store);
+}
+const unknownWindowSize = readable(null);
+export function getWindowSizeContext() {
+    return getContext(key) ?? unknownWindowSize;
+}

package/dist/types/components/button.d.ts

@@ -17,7 +17,7 @@ interface CloseAction {
 }
 interface NavigateToAction {
     type: "navigate_to";
-    destination: "customer_center" | "offer_code" | "screen_redirect";
+    destination: "customer_center" | "offer_code" | "screen_redirect" | "cookie_settings";
 }
 interface NavigateToSheetAction {
     type: "navigate_to";

package/dist/types/components/package.d.ts

@@ -14,6 +14,7 @@ export interface PaddleDiscountConfig {
 }
 export interface PackageProps extends BaseComponent {
     type: "package";
+    visible?: boolean | null;
     package_id: string;
     is_selected_by_default: boolean;
     apple_promo_offer_product_code?: string | null;

package/dist/types/components/stack.d.ts

@@ -27,6 +27,12 @@ export interface StackProps extends BaseComponent {
     shape: ShapeType | null;
     shadow: ShadowType | null;
     badge?: Badge | null;
+    /**
+     * "scroll" scrolls the stack's content along its axis; "default" turns
+     * scrolling off. Unset is the platform default: the root scrolls, other
+     * stacks don't.
+     */
+    overflow?: "scroll" | "default" | null;
     overrides?: Overrides<StackProps>;
 }
 export {};

package/dist/types/overrides.d.ts

@@ -2,12 +2,16 @@ import type { CustomVariableValue } from "./variables.js";
 import type { StateValue } from "./state.js";
 type EqualityOperator = "=" | "!=";
 type ArrayOperator = "in" | "not in";
+export type ComparisonOperator = ">=" | ">" | "<=" | "<" | "=";
 export declare const RuleKey: {
     readonly SelectedPackageCondition: "selected_package_condition";
     readonly IntroOfferCondition: "intro_offer_condition";
     readonly PromoOfferCondition: "promo_offer_condition";
     readonly VariableCondition: "variable_condition";
     readonly StateCondition: "state_condition";
+    readonly WindowWidthCondition: "window_width_condition";
+    readonly WindowHeightCondition: "window_height_condition";
+    readonly WindowAspectRatioCondition: "window_aspect_ratio_condition";
 };
 type IntroOfferCondition = {
     type: "intro_offer";
@@ -57,7 +61,17 @@ type StateCondition = {
     name: string;
     value: StateValue;
 };
-export type OverrideCondition = IntroOfferCondition | MultipleIntroOffersCondition | SelectedCondition | HoverCondition | FocusCondition | ErrorCondition | PromoOfferCondition | IntroductoryOfferCondition | PromotionalOfferCondition | SelectedPackageCondition | VariableCondition | StateCondition;
+/**
+ * Compares the paywall's own box (CSS px, matching iOS points and Android dp)
+ * or its aspect ratio (width ÷ height). Never matches before the paywall is
+ * measured.
+ */
+export type WindowSizeCondition = {
+    type: typeof RuleKey.WindowWidthCondition | typeof RuleKey.WindowHeightCondition | typeof RuleKey.WindowAspectRatioCondition;
+    operator: ComparisonOperator;
+    value: number;
+};
+export type OverrideCondition = IntroOfferCondition | MultipleIntroOffersCondition | SelectedCondition | HoverCondition | FocusCondition | ErrorCondition | PromoOfferCondition | IntroductoryOfferCondition | PromotionalOfferCondition | SelectedPackageCondition | VariableCondition | StateCondition | WindowSizeCondition;
 /**
  * The reserved properties of an override that should not be included in the override properties
  */

package/dist/types/overrides.js

@@ -4,4 +4,7 @@ export const RuleKey = {
     PromoOfferCondition: "promo_offer_condition",
     VariableCondition: "variable_condition",
     StateCondition: "state_condition",
+    WindowWidthCondition: "window_width_condition",
+    WindowHeightCondition: "window_height_condition",
+    WindowAspectRatioCondition: "window_aspect_ratio_condition",
 };

package/dist/types/paywall-component-interaction.d.ts

@@ -16,7 +16,7 @@ interface PackageTransition {
     destinationPackageId: string;
     defaultPackageId?: string;
 }
-type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
+type ButtonInteractionValue = "workflow" | "navigate_to_url" | "navigate_back" | "close_workflow" | "restore_purchases" | "navigate_to_customer_center" | "navigate_to_cookie_settings" | "screen_redirect" | "navigate_to_privacy_policy" | "navigate_to_terms" | "navigate_to_sheet" | "navigate_to_offer_code" | "navigate_to_web_paywall_link";
 export type TabInteractionData = ComponentInteractionBase<"tab"> & IndexedTransition;
 export type SwitchInteractionData = ComponentInteractionBase<"switch", "on" | "off">;
 export type CarouselInteractionData = ComponentInteractionBase<"carousel"> & IndexedTransition;

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

@@ -0,0 +1,26 @@
+import type { PackagePlacement } from "./style-utils";
+export type RenderedPackage = {
+    componentId: string;
+    packageId: string;
+    isSelectedByDefault: boolean;
+    /** The sheet it renders in, or null outside sheets. */
+    sheetId: string | null;
+    visible: boolean;
+    /** Whether it shows both before and once it's selected, so it can take over the selection. */
+    selectable: boolean;
+};
+/**
+ * The package to select instead of `current` when a rule hides every copy of
+ * it on screen, or `undefined` to keep it. The replacement is a tab's authored
+ * default, then one outside the tabs, then the first selectable package in a
+ * tab, then outside. The selection stays when no copy is on screen or nothing
+ * else can take it.
+ *
+ * This follows the order in purchases-android "Reconcile package selection
+ * when a window size rule hides the selected package" (#4198, not merged yet),
+ * without its per-tab remembered pick, which web doesn't have. iOS differs: it
+ * only picks within the hidden package's own tab, or among the packages
+ * outside tabs (PackageValidator.swift). Either way, a package hidden in an
+ * open sheet is replaced from that sheet first, when one there can take it.
+ */
+export declare function reconciledSelection(current: string | undefined, rendered: Iterable<RenderedPackage>, placements: Map<string, PackagePlacement>): string | undefined;

package/dist/utils/package-selection.js

@@ -0,0 +1,47 @@
+/**
+ * The package to select instead of `current` when a rule hides every copy of
+ * it on screen, or `undefined` to keep it. The replacement is a tab's authored
+ * default, then one outside the tabs, then the first selectable package in a
+ * tab, then outside. The selection stays when no copy is on screen or nothing
+ * else can take it.
+ *
+ * This follows the order in purchases-android "Reconcile package selection
+ * when a window size rule hides the selected package" (#4198, not merged yet),
+ * without its per-tab remembered pick, which web doesn't have. iOS differs: it
+ * only picks within the hidden package's own tab, or among the packages
+ * outside tabs (PackageValidator.swift). Either way, a package hidden in an
+ * open sheet is replaced from that sheet first, when one there can take it.
+ */
+export function reconciledSelection(current, rendered, placements) {
+    if (current === undefined)
+        return undefined;
+    const packages = [...rendered];
+    const copies = packages.filter((pkg) => pkg.packageId === current);
+    if (copies.length === 0 || copies.some((pkg) => pkg.visible)) {
+        return undefined;
+    }
+    // A sheet's packages aren't in the base tree, so they sort last.
+    const placement = (pkg) => placements.get(pkg.componentId) ?? {
+        index: Number.POSITIVE_INFINITY,
+        inTabs: false,
+    };
+    const candidates = packages
+        .filter((pkg) => pkg.selectable)
+        .sort((a, b) => placement(a).index - placement(b).index);
+    // A sheet's purchase button buys the selection, so when the hidden package
+    // is in an open sheet, a package still showing in that sheet comes first.
+    const sheetId = copies[0].sheetId;
+    if (sheetId !== null && copies.every((pkg) => pkg.sheetId === sheetId)) {
+        const inSheet = candidates.filter((pkg) => pkg.sheetId === sheetId);
+        const replacement = inSheet.find((pkg) => pkg.isSelectedByDefault) ?? inSheet[0];
+        if (replacement)
+            return replacement.packageId;
+    }
+    const inTabs = candidates.filter((pkg) => placement(pkg).inTabs);
+    const outsideTabs = candidates.filter((pkg) => !placement(pkg).inTabs);
+    const replacement = inTabs.find((pkg) => pkg.isSelectedByDefault) ??
+        outsideTabs.find((pkg) => pkg.isSelectedByDefault) ??
+        inTabs[0] ??
+        outsideTabs[0];
+    return replacement?.packageId;
+}

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

@@ -3,6 +3,7 @@ import type { Overrides } from "../types/overrides.js";
 import type { RootPaywall } from "../types/paywall.js";
 import type { StateValue } from "../types/state.js";
 import type { PackageInfo, VariableDictionary } from "../types/variables.js";
+import type { WindowSize } from "../stores/window-size.js";
 /**
  * Given an instance of PaywallData, returns the id of the first package marked as `is_selected_by_default` if any.
  * If none are marked, returns the first package encountered in traversal order (root stack, then sticky footer).
@@ -17,6 +18,15 @@ export declare function collectPackageIds(root: Component): string[];
  * Duplicates keep the first occurrence. Unselected tabs still count.
  */
 export declare function collectPackageIdsInDisplayOrder({ stack, sticky_footer, }: RootPaywall): string[];
+export type PackagePlacement = {
+    index: number;
+    inTabs: boolean;
+};
+/**
+ * Each package component's place in display order (root stack, then sticky
+ * footer) and whether it sits inside tabs, by component id.
+ */
+export declare function collectPackagePlacements({ stack, sticky_footer, }: RootPaywall): Map<string, PackagePlacement>;
 export type ConditionContext = {
     selectedPackageId: string | undefined;
     packageInfo: PackageInfo | undefined;
@@ -25,6 +35,8 @@ export type ConditionContext = {
     stateValues?: Record<string, StateValue>;
     /** Declared state defaults; optional so existing call sites compile unchanged. */
     stateDefaults?: Record<string, StateValue>;
+    /** The paywall's measured box; absent until measured, so window rules don't match. */
+    windowSize?: WindowSize | null;
     /** Interaction pseudo-state flags; absent means "not in that state". */
     selected?: boolean;
     hover?: boolean;