@revenuecat/purchases-ui-js 4.15.0 → 4.17.0

package/dist/components/package/Package.svelte

@@ -8,7 +8,7 @@
     setVariablesContext,
   } from "../../stores/variables";
   import type { PackageProps } from "../../types/components/package";
-  import { untrack } from "svelte";
+  import { onDestroy, untrack } from "svelte";
   import { writable } from "svelte/store";
   import {
     getPackageInfoContext,
@@ -20,9 +20,29 @@
     getSelectedPackageScopeContext,
   } from "../../stores/relativeDiscount";
   import { withScopedRelativeDiscount } from "../../utils/relative-discount";
+  import { useConditionContext } from "../../stores/condition-context.svelte";
+  import {
+    getOptionalRenderedPackagesContext,
+    getPackageSheetContext,
+  } from "../../stores/rendered-packages";
+  import { getDefaultSelectionContext } from "../../stores/default-selection";
+  import {
+    resolveOverrideProperties,
+    type ConditionContext,
+  } from "../../utils/style-utils";
+
+  const {
+    id,
+    visible,
+    overrides,
+    stack,
+    package_id,
+    is_selected_by_default,
+    name,
+  }: PackageProps = $props();
 
-  const { stack, package_id, is_selected_by_default, name }: PackageProps =
-    $props();
+  // Without state, as the SDKs evaluate a package's own rules.
+  const buildConditionContext = useConditionContext();
 
   // Expose the current package_id via a store so descendants stay in sync
   // when this component is reused across tab switches
@@ -41,16 +61,19 @@
     infoPerPackage,
   } = getPaywallContext();
 
-  // When a package with is_selected_by_default appears, select it.
-  // This handles tab switches where a new default package is shown.
-  // selectedPackageId is deliberately not tracked so that manually
-  // selecting another package does not re-trigger this effect and
-  // snap selection back to the default.
+  // When a package with is_selected_by_default appears with its paywall, tab
+  // or sheet, select it. This handles tab switches where a new default package
+  // is shown. selectedPackageId is deliberately not tracked so that manually
+  // selecting another package does not re-trigger this effect and snap
+  // selection back to the default.
+  const isDefaultSelectionOpen = getDefaultSelectionContext();
   $effect(() => {
     if (is_selected_by_default) {
       const newPackageId = package_id;
       untrack(() => {
-        $selectedPackageId = newPackageId;
+        if (isDefaultSelectionOpen()) {
+          $selectedPackageId = newPackageId;
+        }
       });
     }
   });
@@ -127,6 +150,55 @@
     packageInfoStore.set(computedPackageInfo);
   });
   setPackageInfoContext(packageInfoStore);
+
+  // buildConditionContext() reads the contexts above this package, so pass its
+  // own selected state, package info and variables.
+  const visibleWith = (
+    context: Partial<Pick<ConditionContext, "selected" | "selectedPackageId">>,
+  ) => {
+    const resolved = resolveOverrideProperties(
+      {
+        ...buildConditionContext(),
+        packageInfo: computedPackageInfo,
+        ...(computedVariables ? { variables: computedVariables } : {}),
+        ...context,
+      },
+      overrides,
+    );
+    return (resolved.visible ?? visible) !== false;
+  };
+  const isVisible = $derived(visibleWith({ selected: isSelected }));
+  // Only a package that shows both now, unselected, and once it's selected can
+  // take the selection; one hidden once selected would just hide again.
+  const isSelectable = $derived(
+    visibleWith({ selected: false }) &&
+      visibleWith({ selected: true, selectedPackageId: package_id }),
+  );
+
+  const renderedPackages = getOptionalRenderedPackagesContext();
+  const sheetId = getPackageSheetContext();
+  if (renderedPackages) {
+    const registration = Symbol("package");
+    $effect(() => {
+      // Getters, so the paywall reads the current visibility even before this
+      // effect re-runs.
+      renderedPackages.set(registration, {
+        componentId: id,
+        packageId: package_id,
+        isSelectedByDefault: is_selected_by_default,
+        sheetId,
+        get visible() {
+          return isVisible;
+        },
+        get selectable() {
+          return isSelectable;
+        },
+      });
+    });
+    onDestroy(() => renderedPackages.delete(registration));
+  }
 </script>
 
-<Stack {...stack} onclick={onPackageClick} />
+{#if isVisible}
+  <Stack {...stack} onclick={onPackageClick} />
+{/if}

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

@@ -23,13 +23,29 @@
     zStackTemplate,
   } from "../../stories/fixtures";
   import { waitForAnimations } from "storybook/internal/preview-api";
-  import { expect, userEvent, within } from "storybook/test";
+  import { expect, fn, userEvent, waitFor, within } from "storybook/test";
   import { viewportDecorator } from "../../stories/viewport-decorator";
   import { BACKGROUND_PAYWALL } from "./fixtures/background-paywall";
   import { FIXED_HEIGHT_STACK_PAYWALL } from "./fixtures/fixed-height-stack-paywall";
+  import {
+    ALIGNED_SCROLL_PAYWALL,
+    CENTERED_ROW_SCROLL_PAYWALL,
+    DECORATED_SCROLL_PAYWALL,
+    fitAroundFitScrollPaywall,
+    HORIZONTAL_SCROLL_PAYWALL,
+    ROOT_NO_SCROLL_PAYWALL,
+    SCROLLING_FILL_IN_FIT_SHEET_PAYWALL,
+    SCROLLING_FILL_SHEET_PAYWALL,
+    SCROLLING_FIT_SHEET_PAYWALL,
+    SIDE_BY_SIDE_SCROLL_PAYWALL,
+    STACKED_FIT_SCROLL_PAYWALL,
+    WINDOW_RULE_COLUMNS_PAYWALL,
+  } from "./fixtures/stack-scroll-paywall";
   import { FILL_HEIGHT_WEBVIEW_PAYWALL } from "./fixtures/fill-height-webview-paywall";
+  import { WINDOW_RULE_PACKAGES_PAYWALL } from "./fixtures/window-rule-packages-paywall";
   import { createHeroMediaPaywall } from "./fixtures/hero-media-paywall";
   import { OVERRIDE_PAYWALL } from "./fixtures/override-paywall";
+  import { WINDOW_SIZE_PAYWALL } from "./fixtures/window-size-paywall";
   import { SHEET_PAYWALL } from "./fixtures/sheet-paywall";
   import { SHEET_PAYWALL_VIDEO_STACKING } from "./fixtures/sheet-video-stacking-paywall";
   import { GRADIENT_SHEET_PAYWALL } from "./fixtures/gradient-sheet-paywall";
@@ -56,6 +72,30 @@
     paywallWithHeaderAndFooter,
   } from "./fixtures/transparent-footer-paywall";
 
+  // Boxes inside `root` that are scrolling containers with content to scroll.
+  const scrollers = (root: Element) =>
+    [...root.querySelectorAll<HTMLElement>("*")].filter((el) => {
+      const style = getComputedStyle(el);
+      const scrolls = (overflow: string) =>
+        ["auto", "scroll"].includes(overflow);
+      return (
+        (scrolls(style.overflowY) && el.scrollHeight > el.clientHeight + 1) ||
+        (scrolls(style.overflowX) && el.scrollWidth > el.clientWidth + 1)
+      );
+    });
+
+  // The fixed green box below a scrolling column is fully in view.
+  const expectOfferInView = (root: Element) => {
+    const offer = [...root.querySelectorAll(".stack")].find(
+      (el) => getComputedStyle(el).backgroundColor === "rgb(17, 212, 131)",
+    )!;
+    const paywall = root.querySelector(".paywall-content-scroll")!;
+    expect(offer.getBoundingClientRect().height).toBe(120);
+    expect(offer.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+      paywall.getBoundingClientRect().bottom,
+    );
+  };
+
   const { Story } = defineMeta({
     title: "Example/Paywall",
     component: Paywall,
@@ -105,6 +145,273 @@
   }}
 />
 
+<!--
+  Scroll stories render in a frame bounded to the viewport, so scrolling stacks
+  have a size to stop at. The shared frame grows with its content.
+-->
+{#snippet boundedFrame(props: ComponentProps<typeof Paywall>)}
+  <div class="paywall-story-frame bounded">
+    <Paywall {...props} />
+  </div>
+{/snippet}
+
+<Story
+  name="Scrolling Fit stack above a fixed box"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => {
+      expect(scrollers(canvasElement)).toHaveLength(1);
+      expectOfferInView(canvasElement);
+    });
+  }}
+  args={{ paywallData: STACKED_FIT_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling Fit stacks side by side"
+  decorators={[viewportDecorator(800, 600, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => expect(scrollers(canvasElement)).toHaveLength(2));
+  }}
+  args={{ paywallData: SIDE_BY_SIDE_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling Fit stacks in a centered row"
+  decorators={[viewportDecorator(800, 600, 0)]}
+  play={async ({ canvasElement }) => {
+    const box = (id: string) =>
+      [...canvasElement.querySelectorAll(".stack")].find(
+        (el) =>
+          getComputedStyle(el).backgroundColor === id &&
+          el.closest(".rc-stack-scroll"),
+      )!;
+    await waitFor(() => {
+      // Only the tall column scrolls.
+      expect(scrollers(canvasElement)).toHaveLength(1);
+      const paywall = canvasElement
+        .querySelector(".paywall-content-scroll")!
+        .getBoundingClientRect();
+      const short = box("rgb(17, 212, 131)")
+        .closest(".rc-stack-scroll")!
+        .parentElement!.getBoundingClientRect();
+      // The short column stays centered in the row.
+      const paywallMiddle = paywall.top + paywall.height / 2;
+      expect(
+        Math.abs(short.top + short.height / 2 - paywallMiddle),
+      ).toBeLessThan(1);
+    });
+  }}
+  args={{ paywallData: CENTERED_ROW_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Horizontal scrolling stack"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => {
+      const [row, ...others] = scrollers(canvasElement);
+      expect(others).toHaveLength(0);
+      expect(row?.classList.contains("rc-stack-scroll")).toBe(true);
+    });
+  }}
+  args={{ paywallData: HORIZONTAL_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Root scrolling off"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => expect(scrollers(canvasElement)).toHaveLength(0));
+  }}
+  args={{ paywallData: ROOT_NO_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Window size rule, narrow"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() =>
+      expect(
+        scrollers(canvasElement).map((el) =>
+          el.classList.contains("paywall-content-scroll"),
+        ),
+      ).toEqual([true]),
+    );
+  }}
+  args={{ paywallData: WINDOW_RULE_COLUMNS_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Window size rule, wide"
+  decorators={[viewportDecorator(800, 600, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => expect(scrollers(canvasElement)).toHaveLength(2));
+  }}
+  args={{ paywallData: WINDOW_RULE_COLUMNS_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling stacks aligned to the center and end"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => expect(scrollers(canvasElement)).toHaveLength(2));
+    for (const viewport of scrollers(canvasElement)) {
+      const rows = viewport.firstElementChild!;
+      viewport.scrollTop = 0;
+      expect(rows.firstElementChild!.getBoundingClientRect().top).toBe(
+        viewport.getBoundingClientRect().top,
+      );
+      viewport.scrollTop = viewport.scrollHeight;
+      expect(rows.lastElementChild!.getBoundingClientRect().bottom).toBe(
+        viewport.getBoundingClientRect().bottom,
+      );
+    }
+  }}
+  args={{ paywallData: ALIGNED_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling stacks keep their border, badge and video"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => expect(scrollers(canvasElement)).toHaveLength(2));
+    const [bordered, video] = scrollers(canvasElement);
+    const stack = bordered!.parentElement!;
+    expect(getComputedStyle(stack).borderTopWidth).toBe("10px");
+    expect(getComputedStyle(stack).overflowY).toBe("visible");
+    const badge = [...stack.children].find((el) => el !== bordered)!;
+    const badgeTop = badge.getBoundingClientRect().top;
+    bordered!.scrollTop = 150;
+    expect(badge.getBoundingClientRect().top).toBe(badgeTop);
+    video!.scrollTop = 150;
+    expect(video!.scrollTop).toBeGreaterThan(0);
+  }}
+  args={{ paywallData: DECORATED_SCROLL_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Fit stack around a scrolling Fit stack"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => {
+      expect(scrollers(canvasElement)).toHaveLength(1);
+      expectOfferInView(canvasElement);
+    });
+  }}
+  args={{ paywallData: fitAroundFitScrollPaywall(false) }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Fit stack around a scrolling package"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await waitFor(() => {
+      expect(scrollers(canvasElement)).toHaveLength(1);
+      expectOfferInView(canvasElement);
+    });
+  }}
+  args={{ paywallData: fitAroundFitScrollPaywall(true) }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Window size rule hides a package, narrow"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(/^Annual/);
+    await userEvent.click(canvas.getByText("Purchase"));
+    await waitFor(() =>
+      expect(args.onPurchaseClicked).toHaveBeenLastCalledWith("$rc_annual", ""),
+    );
+  }}
+  args={{ paywallData: WINDOW_RULE_PACKAGES_PAYWALL, onPurchaseClicked: fn() }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Window size rule hides a package, wide"
+  decorators={[viewportDecorator(800, 600, 0)]}
+  play={async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText(/^Monthly/);
+    expect(canvas.queryByText(/^Annual/)).toBeNull();
+    await userEvent.click(canvas.getByText("Purchase"));
+    await waitFor(() =>
+      expect(args.onPurchaseClicked).toHaveBeenLastCalledWith(
+        "$rc_monthly",
+        "",
+      ),
+    );
+  }}
+  args={{ paywallData: WINDOW_RULE_PACKAGES_PAYWALL, onPurchaseClicked: fn() }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling Fit sheet"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await userEvent.click(await within(canvasElement).findByText("Open sheet"));
+    await waitFor(() => {
+      const sheet = canvasElement.querySelector(".sheet")!;
+      const [contents, ...others] = scrollers(sheet.parentElement!);
+      expect(others).toHaveLength(0);
+      expect(contents).not.toBe(sheet);
+      expect(sheet.contains(contents!)).toBe(true);
+      expect(contents!.clientHeight).toBe(sheet.parentElement!.clientHeight);
+    });
+  }}
+  args={{ paywallData: SCROLLING_FIT_SHEET_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling Fill contents in a Fit sheet"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await userEvent.click(await within(canvasElement).findByText("Open sheet"));
+    await waitFor(() => {
+      const sheet = canvasElement.querySelector(".sheet")!;
+      // The sheet takes the screen's height and its contents scroll inside.
+      expect(sheet.clientHeight).toBe(sheet.parentElement!.clientHeight);
+      expect(scrollers(sheet)).toHaveLength(1);
+    });
+  }}
+  args={{ paywallData: SCROLLING_FILL_IN_FIT_SHEET_PAYWALL }}
+  template={boundedFrame}
+/>
+
+<Story
+  name="Scrolling Fill sheet with margins"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    await userEvent.click(await within(canvasElement).findByText("Open sheet"));
+    await waitFor(() => {
+      const sheet = canvasElement.querySelector(".sheet")!;
+      expect(scrollers(sheet)).toHaveLength(1);
+      // The contents stop 40px (their bottom margin) above the sheet's bottom.
+      const contents = sheet.querySelector(".stack")!;
+      expect(contents.getBoundingClientRect().bottom + 40).toBeLessThanOrEqual(
+        sheet.getBoundingClientRect().bottom + 0.5,
+      );
+    });
+  }}
+  args={{ paywallData: SCROLLING_FILL_SHEET_PAYWALL }}
+  template={boundedFrame}
+/>
+
 <!--
   Regression for FUN-2262: fill-height Stack + fill-height WebView must fill
   the space between the fixed header/footer bars. Collapse shows as the bars
@@ -125,6 +432,29 @@
   }}
 />
 
+<!-- Resize the canvas across 600px wide, or past square, to see the rules switch. -->
+<Story
+  name="Window size rules, narrow"
+  decorators={[viewportDecorator(375, 640, 0)]}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText("Width under 600px")).toBeVisible();
+    await expect(canvas.getByText("Portrait or square")).toBeVisible();
+  }}
+  args={{ paywallData: WINDOW_SIZE_PAYWALL }}
+/>
+
+<Story
+  name="Window size rules, wide"
+  decorators={[viewportDecorator(800, 600, 0)]}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText("Width 600px or more")).toBeVisible();
+    await expect(canvas.getByText("Landscape")).toBeVisible();
+  }}
+  args={{ paywallData: WINDOW_SIZE_PAYWALL }}
+/>
+
 <Story
   name="State-driven - tab state"
   decorators={[viewportDecorator(375, 640, 0)]}
@@ -817,6 +1147,10 @@
 />
 
 <style>
+  .paywall-story-frame.bounded {
+    min-height: 0;
+  }
+
   .paywall-story-frame {
     flex: 1 1 auto;
     display: flex;

package/dist/components/paywall/Paywall.svelte

@@ -50,10 +50,22 @@
   } from "../../stores/relativeDiscount";
   import {
     collectPackageIdsInDisplayOrder,
+    collectPackagePlacements,
     findSelectedPackageId,
   } from "../../utils/style-utils";
+  import { reconciledSelection } from "../../utils/package-selection";
   import { onMount } from "svelte";
-  import { derived, readable, writable } from "svelte/store";
+  import { SvelteMap } from "svelte/reactivity";
+  import { derived, readable, toStore, writable } from "svelte/store";
+  import { setWindowSizeContext } from "../../stores/window-size";
+  import {
+    setRenderedPackagesContext,
+    type RenderedPackages,
+  } from "../../stores/rendered-packages";
+  import {
+    openDefaultSelection,
+    setDefaultSelectionContext,
+  } from "../../stores/default-selection";
   import Stack from "../stack/Stack.svelte";
   import {
     firstContentIsHeroMedia,
@@ -469,6 +481,76 @@
 
   setPackageInfoContext(packageInfo);
 
+  let paywallWidth = $state<number>();
+  let paywallHeight = $state<number>();
+  // Window size rules evaluate against the paywall's own box, as the native
+  // SDKs measure the paywall's bounds rather than the screen.
+  setWindowSizeContext(
+    toStore(() =>
+      paywallWidth == null || paywallHeight == null
+        ? null
+        : { width: paywallWidth, height: paywallHeight },
+    ),
+  );
+
+  // Without ResizeObserver the size stays unknown, so window size rules don't
+  // match instead of the paywall failing to render.
+  function measurePaywall(node: HTMLElement) {
+    if (typeof ResizeObserver === "undefined") return;
+    // A hidden paywall measures 0 by 0, which says nothing about its size.
+    const isHidden = (width: number, height: number) =>
+      width === 0 && height === 0;
+    // Measure once before the first paint, so a wide paywall doesn't flash its
+    // narrow layout. The offset size is in whole px; ResizeObserver then
+    // reports the fractional box.
+    if (!isHidden(node.offsetWidth, node.offsetHeight)) {
+      paywallWidth = node.offsetWidth;
+      paywallHeight = node.offsetHeight;
+    }
+    let frame = 0;
+    const observer = new ResizeObserver(([entry]) => {
+      const box = entry?.borderBoxSize?.[0];
+      const width = box?.inlineSize ?? entry?.contentRect.width ?? 0;
+      const height = box?.blockSize ?? entry?.contentRect.height ?? 0;
+      if (isHidden(width, height)) return;
+      // Next frame, so a rule that resizes the paywall doesn't set off
+      // ResizeObserver's loop error.
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        paywallWidth = width;
+        paywallHeight = height;
+      });
+    });
+    observer.observe(node);
+    return {
+      destroy: () => {
+        observer.disconnect();
+        cancelAnimationFrame(frame);
+      },
+    };
+  }
+
+  setDefaultSelectionContext(openDefaultSelection());
+  const renderedPackages: RenderedPackages = new SvelteMap();
+  setRenderedPackagesContext(renderedPackages);
+  const packagePlacements = collectPackagePlacements(base);
+
+  // Moves the selection off a package a rule hides, so it can't stay selected
+  // and purchasable. Waits for the first measurement when there will be one,
+  // since window size rules can't be evaluated before it.
+  const willMeasure = typeof ResizeObserver !== "undefined";
+  $effect(() => {
+    if (willMeasure && (paywallWidth == null || paywallHeight == null)) return;
+    const replacement = reconciledSelection(
+      $selectedPackageId,
+      renderedPackages.values(),
+      packagePlacements,
+    );
+    if (replacement !== undefined) {
+      selectedPackageId.set(replacement);
+    }
+  });
+
   onMount(() => {
     registerFonts(uiConfig);
   });
@@ -496,7 +578,7 @@
 <svelte:boundary onerror={onError}>
   <!-- Outside the root: filter/transform on `.blur` would clip the fixed backdrop to the paywall box. -->
   <ViewportBackdrop model={viewportBackdropModel} blur={!!sheet} />
-  <div class={paywallClass} style={paywallStyle}>
+  <div class={paywallClass} style={paywallStyle} use:measurePaywall>
     {#if header}
       <div
         class="header-wrapper"
@@ -515,6 +597,7 @@
               bottom: (stack.padding?.bottom ?? 0) + footerHeight,
             }
           : stack.padding}
+        rootStack
         class="paywall-content-scroll"
         style={mapPaywallContentStackStyle(
           stack.size.height,
@@ -552,7 +635,10 @@
   </div>
 
   {#if sheet}
-    <Sheet {...sheet.props} />
+    <!-- Keyed, so opening another sheet from a sheet starts it fresh. -->
+    {#key sheet.props.id}
+      <Sheet {...sheet.props} />
+    {/key}
   {/if}
 </svelte:boundary>
 
@@ -605,10 +691,10 @@
     flex-direction: column;
     min-height: 0;
 
+    /* The root stack sets its own overflow: rootScrollStyle (stack-scroll.ts). */
     & > :global(.paywall-content-scroll) {
       flex: 1 1 auto;
       min-height: 0;
-      overflow-y: auto;
     }
   }
 

package/dist/components/paywall/Sheet.svelte

@@ -16,9 +16,19 @@
   import { resolveOverrideProperties } from "../../utils/style-utils";
   import { onMount } from "svelte";
   import Stack from "../stack/Stack.svelte";
+  import { sheetScrollBound } from "../stack/stack-scroll";
+  import { setPackageSheetContext } from "../../stores/rendered-packages";
+  import { setStackDimensionContext } from "../stack/stack-dimension-context";
+  import {
+    openDefaultSelection,
+    setDefaultSelectionContext,
+  } from "../../stores/default-selection";
 
   const props: SheetProps = $props();
-  const { stack } = props;
+  const { stack, id } = props;
+
+  setDefaultSelectionContext(openDefaultSelection());
+  setPackageSheetContext(id);
 
   const buildConditionContext = useConditionContext({ state: true });
   const { size, background, background_blur, position } = $derived.by(() => {
@@ -28,6 +38,20 @@
     };
   });
 
+  const scrollBound = $derived(
+    sheetScrollBound(
+      {
+        ...stack,
+        ...resolveOverrideProperties(buildConditionContext(), stack.overrides),
+      },
+      size.height.type,
+    ),
+  );
+  // While the sheet is a column, its stack sizes as a vertical stack's child.
+  setStackDimensionContext(() =>
+    scrollBound != null ? "vertical" : undefined,
+  );
+
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
@@ -54,6 +78,12 @@
         clipOverflow: true,
       }),
       ...mapBackground(colorMode, null, background),
+      // A column, so a scrolling stack shrinks to the sheet, margins included.
+      ...(scrollBound != null
+        ? { display: "flex", "flex-direction": "column" }
+        : {}),
+      ...(scrollBound === "screen" ? { "max-height": "100%" } : {}),
+      ...(scrollBound === "full-screen" ? { height: "100%" } : {}),
     }),
   );