react-native-revnix 1.4.0

package/dist/esm/ui/RevnixPaywall.js

@@ -0,0 +1,890 @@
+// RevnixPaywall — renders a published PaywallConfig exactly as the dashboard
+// paywall-builder previews it (PaywallPhonePreview.tsx in revnix-app is the
+// reference renderer; keep the two in lockstep). The config decides template,
+// copy, accent, badge, highlight, and hero image; the app supplies package
+// titles/prices (from StoreKit / Play Billing) and the purchase handlers, so
+// the display never disagrees with the charge.
+//
+// `template` is a LAYOUT id. "focus" | "feature-list" | "minimal" are the
+// original three and render byte-identically to earlier SDK versions; the
+// newer layouts (hero, timeline, plans, feature-grid, offer, reveal) are
+// distinct screen structures the dashboard's template gallery presets over.
+// An unrecognized template (config published by a newer dashboard) falls
+// back to the classic structure instead of rendering nothing.
+//
+// Import from "revnix-react/ui" — the core entrypoint stays free of
+// react / react-native so non-RN consumers are unaffected.
+import * as React from "react";
+import { ActivityIndicator, Alert, Image, Linking, Pressable, ScrollView, StyleSheet, Text, View, } from "react-native";
+import { PREVIEW_PLACEMENT_KEY } from "../implicit.js";
+import { withAlpha } from "../blocks/color.js";
+import { RevnixBlockPaywall, } from "./RevnixBlockPaywall.js";
+/** `config.blocks` is opaque on the core config (the non-UI entrypoint must
+ *  not carry renderer types), and it arrives straight off the wire — so it is
+ *  checked here rather than trusted. A malformed doc falls through to the
+ *  classic layouts instead of rendering a broken screen. */
+function asBlockDoc(value) {
+    if (typeof value !== "object" || value === null)
+        return null;
+    const doc = value;
+    return Array.isArray(doc.blocks) &&
+        // A background is the legacy CSS string OR the layered spec (ground /
+        // photo / scrim). Both are valid documents; only a missing or wrongly
+        // typed one falls through to the classic layouts.
+        (typeof doc.background === "string" ||
+            (typeof doc.background === "object" && doc.background !== null)) &&
+        typeof doc.textColor === "string" &&
+        typeof doc.accent === "string" &&
+        typeof doc.accentInk === "string"
+        ? doc
+        : null;
+}
+export const DEFAULT_PAYWALL_THEME = {
+    background: "#0f1116",
+    textPrimary: "#ffffff",
+    textSecondary: "#9aa0a8",
+    textFaint: "#6b7078",
+    border: "#2a2e36",
+    accentInk: "#0a0b0d",
+};
+/** Base theme when the dashboard config sets `mode: "light"`. Keep in
+ *  lockstep with the builder preview (PaywallPhonePreview SCREEN_PALETTES). */
+export const LIGHT_PAYWALL_THEME = {
+    background: "#ffffff",
+    textPrimary: "#16181d",
+    textSecondary: "#5b6068",
+    textFaint: "#9aa0a8",
+    border: "#e2e5ea",
+    accentInk: "#ffffff",
+};
+const DEFAULT_ACCENT = "#6478ff";
+// Currency symbols the anchor-price guard recognizes (majors; a symbol-less
+// anchor can't be judged and renders as entered).
+const CURRENCY_SYMBOL = /[$€£¥₹₩₽₺₫₪฿₴₦₱]/;
+// Soft card surface used by the feature-grid / reveal / review blocks. Not
+// part of the public theme — derived from the config's mode, in lockstep
+// with the dashboard preview's SCREEN_PALETTES.card.
+const CARD_BG = { dark: "#181b22", light: "#f4f5f7" };
+export function RevnixPaywall(props) {
+    // One view per mount: remounting (a re-shown paywall) is a genuine new
+    // display; re-renders are not.
+    const { client, placementKey, paywallId, disableViewTracking } = props;
+    // Held in a ref, not state: the close report reads it, and re-rendering the
+    // paywall the instant its view is recorded would be a pointless frame.
+    const viewIdRef = React.useRef(undefined);
+    React.useEffect(() => {
+        if (!client || disableViewTracking)
+            return;
+        const id = client.logPaywallShown({ placementKey, paywallId });
+        // Pre-REV-252 clients return void; the close then still fires the host
+        // callback, it just cannot be paired with this display.
+        if (typeof id === "string")
+            viewIdRef.current = id;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // ——— REV-263: the interaction vocabulary ———
+    //
+    // Everything below reports what this component genuinely OBSERVES and
+    // nothing it would have to guess. It sees the selection change, the CTA
+    // press, the restore press, and an offering that arrived with no packages
+    // to sell. It does NOT see the store sheet — the host owns that call — so
+    // the purchase outcome is only reported when the host hands it back from
+    // `onPurchase`.
+    //
+    // Every report is wrapped: a telemetry failure must never break the paywall
+    // the customer is standing on, the same rule REV-252 set for the close.
+    const report = React.useCallback((event, options) => {
+        const viewId = viewIdRef.current;
+        if (!client?.logPaywallEvent || !viewId || disableViewTracking)
+            return;
+        try {
+            client.logPaywallEvent(event, viewId, {
+                placementKey,
+                paywallId,
+                ...options,
+            });
+        }
+        catch {
+            // Best-effort, exactly like the close beacon.
+        }
+    }, [client, placementKey, paywallId, disableViewTracking]);
+    // packageId → productId, so a report names the plan the way the rest of the
+    // ledger does. A package whose product is unknown reports no productId
+    // rather than the package id, which would look like a product that does not
+    // exist.
+    const { packages } = props;
+    const productOf = React.useCallback((packageId) => packages.find((p) => p.packageId === packageId)?.productId, [packages]);
+    // An offering with nothing to sell is the one failure the component can see
+    // by itself, and the one most worth knowing about: the paywall painted, the
+    // customer could not buy. Reported once per display, after the view report
+    // so the two arrive in order.
+    const emptyOnMount = props.packages.length === 0;
+    React.useEffect(() => {
+        if (emptyOnMount) {
+            report("error", {
+                code: "no_products",
+                message: "paywall displayed with no packages",
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const { onSelectPackage } = props;
+    const handleSelect = React.useMemo(() => (packageId) => {
+        report("selected", {
+            productId: productOf(packageId),
+            // One `selected` per (display, package): a customer toggling
+            // monthly → yearly → monthly considered two plans, not three, and the
+            // server's default (key on viewId alone) would have recorded only the
+            // first. Analytics counts stages per display anyway, so this is about
+            // WHICH plans were weighed.
+            eventId: `${viewIdRef.current ?? ""}:sel:${packageId}`,
+        });
+        onSelectPackage?.(packageId);
+    }, [onSelectPackage, report, productOf]);
+    const { onPurchase } = props;
+    // Rises per attempt so a retry after a failure is its own occurrence rather
+    // than being absorbed as a duplicate of the first try.
+    const attemptRef = React.useRef(0);
+    const handlePurchase = React.useMemo(() => (packageId) => {
+        if (placementKey === PREVIEW_PLACEMENT_KEY) {
+            Alert.alert("Preview", "Purchases are disabled in preview.");
+            return;
+        }
+        const attempt = ++attemptRef.current;
+        const productId = productOf(packageId);
+        const occurrence = `${viewIdRef.current ?? ""}:buy:${attempt}`;
+        report("purchase_started", { productId, eventId: occurrence });
+        const settle = (outcome) => {
+            // `completed` lands as purchase.completed through registerPurchase —
+            // reporting it here too would double-count the sale.
+            if (!outcome || outcome.status === "completed")
+                return;
+            report(outcome.status === "cancelled"
+                ? "purchase_abandoned"
+                : "purchase_failed", {
+                productId,
+                code: outcome.code,
+                message: outcome.message,
+                eventId: occurrence,
+            });
+        };
+        let returned;
+        try {
+            returned = onPurchase(packageId);
+        }
+        catch (err) {
+            // A host that throws synchronously has failed the purchase as surely
+            // as one whose promise rejects.
+            settle({ status: "failed", message: messageOf(err) });
+            throw err;
+        }
+        if (returned && typeof returned.then === "function") {
+            void returned.then(settle, (err) => settle({ status: "failed", message: messageOf(err) }));
+            return;
+        }
+        settle(returned);
+    }, [onPurchase, report, productOf, placementKey]);
+    const { onRestore } = props;
+    const handleRestore = React.useMemo(() => onRestore
+        ? () => {
+            report("restore");
+            onRestore();
+        }
+        : undefined, [onRestore, report]);
+    // The host's dismissal runs whatever happens to the beacon — an analytics
+    // failure must never trap the customer on the screen (REV-252).
+    const { onClose } = props;
+    const handleClose = React.useMemo(() => onClose
+        ? () => {
+            const viewId = viewIdRef.current;
+            if (client?.logPaywallClosed && viewId && !disableViewTracking) {
+                try {
+                    client.logPaywallClosed(viewId, { placementKey, paywallId });
+                }
+                catch {
+                    // Reporting is best-effort; dismissal is not.
+                }
+            }
+            onClose();
+        }
+        : undefined, [onClose, client, placementKey, paywallId, disableViewTracking]);
+    // A designed paywall wins over the classic layouts — same precedence the
+    // dashboard preview applies, so what was approved is what ships. The view
+    // report above still runs, so analytics does not care which renderer won.
+    //
+    // Each renderer is its OWN component, so this switch mounts and unmounts
+    // rather than changing one component's hook count: a paywall whose config
+    // arrives after a placeholder (or is swapped by an A/B assignment) would
+    // otherwise crash on "rendered more hooks than during the previous render".
+    const { config } = props;
+    const blocks = asBlockDoc(config.blocks);
+    // Both sinks fire when both are wired; nil when neither is, which is what
+    // stops the renderer building a message nobody will read.
+    const renderDiagnostic = client?.reportRenderDiagnostic || props.onDiagnostic
+        ? (message) => {
+            client?.reportRenderDiagnostic?.(message);
+            props.onDiagnostic?.(message);
+        }
+        : undefined;
+    if (blocks) {
+        return (React.createElement(RevnixBlockPaywall, { doc: blocks, packages: props.packages, onPurchase: handlePurchase, selectedPackageId: props.selectedPackageId, onSelectPackage: handleSelect, highlightPackageId: config.highlightPackageId, heroImageUrl: config.heroImageUrl, onRestore: handleRestore, onTerms: props.onTerms, onPrivacy: props.onPrivacy, onClose: handleClose, footer: config.footer, gradient: props.gradient, blur: props.blur, fontFamilyMap: props.fontFamilyMap, locale: props.locale, onDiagnostic: renderDiagnostic, style: props.style, loading: props.loading }));
+    }
+    return (React.createElement(ClassicPaywall, { ...props, onPurchase: handlePurchase, onSelectPackage: handleSelect, onRestore: handleRestore, onClose: handleClose }));
+}
+/** REV-263: the text an interaction report carries for a thrown error. Kept
+ *  short — the server bounds `message` at 1024 chars and nothing groups by
+ *  it; the CODE is the field that gets aggregated. */
+function messageOf(err) {
+    if (err instanceof Error)
+        return err.message;
+    if (typeof err === "string")
+        return err;
+    return undefined;
+}
+/** The dismiss affordance the classic layouts get (REV-252).
+ *
+ *  The nine `template` layouts have the same problem the designed ones had —
+ *  nothing on the screen closes them — and `onClose` is a prop of the shared
+ *  RevnixPaywall, so a host that wires it must get a close on either path
+ *  rather than silently nothing. Classic layouts author no elements of their
+ *  own, so there is never a design chip to suppress: the rule reduces to
+ *  "draw it whenever the host wired a handler".
+ *
+ *  Tinted from the theme's own ink so it works in the light scheme too. */
+function ClassicClose({ theme, onPress, }) {
+    return (React.createElement(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 10, onPress: onPress, style: {
+            position: "absolute",
+            top: 14,
+            right: 14,
+            zIndex: 50,
+            width: 30,
+            height: 30,
+            borderRadius: 15,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: withAlpha(theme.textPrimary, 0.14),
+        } },
+        React.createElement(Text, { style: { color: theme.textPrimary, fontSize: 17, lineHeight: 20 } }, "\u00D7")));
+}
+/** The nine `template` layouts — every paywall published before the block
+ *  builder, and the fallback for any config that carries no block tree. */
+function ClassicPaywall(props) {
+    const { config, packages, loading } = props;
+    // Base scheme comes from the dashboard config (mode: dark|light, absent =
+    // dark for legacy configs); the host app's explicit theme prop wins on top.
+    const baseTheme = config.mode === "light" ? LIGHT_PAYWALL_THEME : DEFAULT_PAYWALL_THEME;
+    const theme = { ...baseTheme, ...props.theme };
+    const accent = config.accent ?? DEFAULT_ACCENT;
+    const cardBg = CARD_BG[config.mode === "light" ? "light" : "dark"];
+    const layout = config.template;
+    // Same template semantics as the dashboard preview: "minimal" shows only
+    // the highlighted package; feature bullets render on the feature layouts.
+    const shown = layout === "minimal" && config.highlightPackageId
+        ? packages.filter((p) => p.packageId === config.highlightPackageId)
+        : packages;
+    const [internalSelected, setInternalSelected] = React.useState(undefined);
+    const fallbackSelected = shown.find((p) => p.packageId === config.highlightPackageId)?.packageId ??
+        shown[0]?.packageId;
+    const selectedId = props.selectedPackageId ??
+        (internalSelected !== undefined &&
+            shown.some((p) => p.packageId === internalSelected)
+            ? internalSelected
+            : fallbackSelected);
+    const select = (packageId) => {
+        setInternalSelected(packageId);
+        props.onSelectPackage?.(packageId);
+    };
+    // Footer links are dashboard-configured (config.footer); a legacy config
+    // without the field keeps the original always-on footer. Explicit host
+    // handlers win over config URLs — the app knows best how to open its own
+    // legal pages (in-app browser etc.); the URL is the no-handler fallback.
+    const footer = config.footer;
+    const openUrl = (url) => url ? () => void Linking.openURL(url) : undefined;
+    const footerItems = [
+        {
+            show: footer?.showRestore ?? true,
+            label: "Restore",
+            onPress: props.onRestore,
+        },
+        {
+            show: footer?.showTerms ?? true,
+            label: "Terms",
+            onPress: props.onTerms ?? openUrl(footer?.termsUrl),
+        },
+        {
+            show: footer?.showPrivacy ?? true,
+            label: "Privacy",
+            onPress: props.onPrivacy ?? openUrl(footer?.privacyUrl),
+        },
+    ].filter((item) => item.show);
+    // ——— shared blocks (each layout composes a subset; keep every block in
+    // lockstep with the same-named block in PaywallPhonePreview.tsx) ———
+    // Classic header: hero image card (or accent icon tile) + centered
+    // headline/subheadline. Byte-identical to the pre-layout renderer.
+    const heroOrIcon = config.heroImageUrl ? (React.createElement(Image, { source: { uri: config.heroImageUrl }, style: styles.heroImage, resizeMode: "cover", accessibilityIgnoresInvertColors: true })) : (React.createElement(View, { style: [styles.iconTile, { backgroundColor: `${accent}26` }] },
+        React.createElement(Text, { style: [styles.iconGlyph, { color: accent }] }, "\u25C6")));
+    const headlineBlock = (React.createElement(React.Fragment, null,
+        React.createElement(Text, { style: [styles.headline, { color: theme.textPrimary }] }, config.headline),
+        config.subheadline ? (React.createElement(Text, { style: [styles.subheadline, { color: theme.textSecondary }] }, config.subheadline)) : null));
+    // Hero layout banner: full-width media with a content-safe scrim overlay
+    // carrying the headline/subheadline (always light-on-scrim). Falls back to
+    // an accent field with the brand glyph when no hero image is set.
+    const heroBanner = (React.createElement(View, { style: styles.heroBanner },
+        config.heroImageUrl ? (React.createElement(Image, { source: { uri: config.heroImageUrl }, style: StyleSheet.absoluteFill, resizeMode: "cover", accessibilityIgnoresInvertColors: true })) : (React.createElement(View, { style: [StyleSheet.absoluteFill, { backgroundColor: accent }] })),
+        !config.heroImageUrl ? (React.createElement(View, { style: styles.heroBannerGlyphWrap, pointerEvents: "none" },
+            React.createElement(Text, { style: styles.heroBannerGlyph }, "\u25C6"))) : null,
+        React.createElement(View, { style: styles.heroBannerScrim },
+            React.createElement(Text, { style: styles.heroBannerHeadline }, config.headline),
+            config.subheadline ? (React.createElement(Text, { style: styles.heroBannerSub }, config.subheadline)) : null)));
+    // Legacy feature bullets (feature-list layout).
+    const featureBullets = config.features.length > 0 ? (React.createElement(View, { style: styles.features }, config.features.map((f, i) => (React.createElement(View, { key: i, style: styles.featureRow },
+        React.createElement(Text, { style: [styles.featureIcon, { color: accent }] }, f.icon || "✓"),
+        React.createElement(View, { style: styles.featureBody },
+            React.createElement(Text, { style: [styles.featureTitle, { color: theme.textPrimary }] }, f.title),
+            f.description ? (React.createElement(Text, { style: [
+                    styles.featureDescription,
+                    { color: theme.textSecondary },
+                ] }, f.description)) : null)))))) : null;
+    // Compact single-line checks (hero banner body, plans checklist).
+    const featureChecks = config.features.length > 0 ? (React.createElement(View, { style: styles.checks }, config.features.map((f, i) => (React.createElement(View, { key: i, style: styles.checkRow },
+        React.createElement(Text, { style: [styles.checkIcon, { color: accent }] }, f.icon || "✓"),
+        React.createElement(Text, { style: [styles.checkTitle, { color: theme.textPrimary }] }, f.title)))))) : null;
+    // Trial timeline: icon dots joined by an accent rail; the first step is
+    // filled solid ("you are here"), later steps are tinted.
+    const timelineBlock = config.features.length > 0 ? (React.createElement(View, { style: styles.timeline }, config.features.map((f, i) => {
+        const last = i === config.features.length - 1;
+        return (React.createElement(View, { key: i, style: styles.timelineRow },
+            React.createElement(View, { style: styles.timelineRail },
+                React.createElement(View, { style: [
+                        styles.timelineDot,
+                        i === 0
+                            ? { backgroundColor: accent }
+                            : { backgroundColor: `${accent}26` },
+                    ] },
+                    React.createElement(Text, { style: [
+                            styles.timelineDotIcon,
+                            { color: i === 0 ? theme.accentInk : accent },
+                        ] }, f.icon || "✓")),
+                !last ? (React.createElement(View, { style: [
+                        styles.timelineLine,
+                        { backgroundColor: `${accent}40` },
+                    ] })) : null),
+            React.createElement(View, { style: [styles.timelineBody, !last && styles.timelineGap] },
+                React.createElement(Text, { style: [styles.featureTitle, { color: theme.textPrimary }] }, f.title),
+                f.description ? (React.createElement(Text, { style: [
+                        styles.featureDescription,
+                        { color: theme.textSecondary },
+                    ] }, f.description)) : null)));
+    }))) : null;
+    // Feature grid: two-column soft cards with an accent icon tile each.
+    const featureGrid = config.features.length > 0 ? (React.createElement(View, { style: styles.grid }, config.features.map((f, i) => (React.createElement(View, { key: i, style: [styles.gridCard, { backgroundColor: cardBg }] },
+        React.createElement(View, { style: [styles.gridIconTile, { backgroundColor: `${accent}26` }] },
+            React.createElement(Text, { style: [styles.gridIcon, { color: accent }] }, f.icon || "✓")),
+        React.createElement(Text, { style: [styles.gridTitle, { color: theme.textPrimary }] }, f.title),
+        f.description ? (React.createElement(Text, { style: [styles.gridDescription, { color: theme.textSecondary }] }, f.description)) : null))))) : null;
+    // Reveal: onboarding-style numbered benefit cards + progress dots.
+    const progressDots = (React.createElement(View, { style: styles.dots }, [0, 1, 2].map((i) => (React.createElement(View, { key: i, style: [
+            styles.dot,
+            { backgroundColor: i === 0 ? accent : `${accent}40` },
+        ] })))));
+    const revealCards = config.features.length > 0 ? (React.createElement(View, { style: styles.reveal }, config.features.map((f, i) => (React.createElement(View, { key: i, style: [styles.revealCard, { backgroundColor: cardBg }] },
+        React.createElement(View, { style: [styles.revealChip, { backgroundColor: `${accent}26` }] },
+            React.createElement(Text, { style: [styles.revealNumber, { color: accent }] }, i + 1)),
+        React.createElement(View, { style: styles.featureBody },
+            React.createElement(Text, { style: [styles.revealTitle, { color: theme.textPrimary }] }, f.title),
+            f.description ? (React.createElement(Text, { style: [
+                    styles.featureDescription,
+                    { color: theme.textSecondary },
+                ] }, f.description)) : null)))))) : null;
+    // Social proof card: star row (+ numeric rating), quote, attribution.
+    const review = config.review;
+    const hasReviewCard = review !== undefined &&
+        (review.rating !== undefined || Boolean(review.quote));
+    const reviewCard = hasReviewCard ? (React.createElement(View, { style: [styles.reviewCard, { backgroundColor: cardBg }] },
+        review?.rating !== undefined ? (React.createElement(View, { style: styles.starsRow },
+            [1, 2, 3, 4, 5].map((n) => (React.createElement(Text, { key: n, style: [
+                    styles.star,
+                    {
+                        color: n <= Math.round(review.rating ?? 0)
+                            ? accent
+                            : theme.border,
+                    },
+                ] }, "\u2605"))),
+            React.createElement(Text, { style: [styles.starRating, { color: theme.textPrimary }] }, String(review.rating)))) : null,
+        review?.quote ? (React.createElement(Text, { style: [styles.reviewQuote, { color: theme.textPrimary }] },
+            "\u201C",
+            review.quote,
+            "\u201D")) : null,
+        review?.author ? (React.createElement(Text, { style: [styles.reviewAuthor, { color: theme.textSecondary }] }, review.author)) : null)) : null;
+    const countLine = review?.count ? (React.createElement(Text, { style: [styles.countLine, { color: theme.textSecondary }] }, review.count)) : null;
+    // Offer bits: urgency line above the CTA; anchor price struck through on
+    // the highlighted package.
+    const urgencyLine = config.offer?.urgencyText ? (React.createElement(Text, { style: [styles.urgency, { color: accent }] }, config.offer.urgencyText)) : null;
+    // The anchor is dashboard free text while priceLabel is the store's
+    // localized price — never pair them when their currency symbols disagree,
+    // or a EUR customer would see a struck-through USD anchor next to the real
+    // charge (this file's "display never disagrees with the charge" rule;
+    // kept in lockstep with the preview's anchorPriceFor). Symbol-less
+    // anchors can't be judged and pass through.
+    const anchorPriceFor = (priceLabel) => {
+        const anchor = config.offer?.strikethroughPrice;
+        if (!anchor)
+            return undefined;
+        const symbol = anchor.match(CURRENCY_SYMBOL)?.[0];
+        return symbol === undefined || priceLabel.includes(symbol)
+            ? anchor
+            : undefined;
+    };
+    const priceLine = (pkg, highlighted) => {
+        const anchorPrice = highlighted
+            ? anchorPriceFor(pkg.priceLabel)
+            : undefined;
+        return anchorPrice ? (React.createElement(View, { style: styles.priceRow },
+            React.createElement(Text, { style: [styles.anchorPrice, { color: theme.textFaint }] }, anchorPrice),
+            React.createElement(Text, { style: [styles.packagePrice, { color: theme.textSecondary }] }, pkg.priceLabel))) : (React.createElement(Text, { style: [styles.packagePrice, { color: theme.textSecondary }] }, pkg.priceLabel));
+    };
+    // Standard package rows (all layouts except plans columns / offer
+    // spotlight). `withBadge=false` suppresses the row badge where the layout
+    // already presents the badge elsewhere (offer pill).
+    const packageRows = (list, withBadge = true) => (React.createElement(View, { style: styles.packages }, list.map((pkg) => {
+        const selected = pkg.packageId === selectedId;
+        const highlighted = pkg.packageId === config.highlightPackageId;
+        const badged = withBadge && highlighted && Boolean(config.badgeText);
+        return (React.createElement(Pressable, { key: pkg.packageId, onPress: () => select(pkg.packageId), accessibilityRole: "radio", accessibilityState: { selected }, style: [
+                styles.packageRow,
+                selected
+                    ? { borderColor: accent, borderWidth: 2 }
+                    : { borderColor: theme.border, borderWidth: 1 },
+            ] },
+            badged ? (React.createElement(View, { style: [styles.badge, { backgroundColor: accent }] },
+                React.createElement(Text, { numberOfLines: 1, style: [styles.badgeText, { color: theme.accentInk }] }, config.badgeText))) : null,
+            React.createElement(Text, { style: [styles.packageTitle, { color: theme.textPrimary }] }, pkg.title),
+            priceLine(pkg, highlighted)));
+    })));
+    // Plans layout: packages side by side as tier columns; the highlighted
+    // tier carries the badge pill inside the column. Columns stay readable up
+    // to 3 — beyond that the layout falls back to stacked rows (never drop a
+    // purchasable package), same rule as the dashboard preview.
+    const usePlanColumns = shown.length <= 3;
+    const planColumns = (React.createElement(View, { style: styles.planRow }, shown.map((pkg) => {
+        const selected = pkg.packageId === selectedId;
+        const highlighted = pkg.packageId === config.highlightPackageId;
+        const anchorPrice = highlighted
+            ? anchorPriceFor(pkg.priceLabel)
+            : undefined;
+        return (React.createElement(Pressable, { key: pkg.packageId, onPress: () => select(pkg.packageId), accessibilityRole: "radio", accessibilityState: { selected }, style: [
+                styles.planColumn,
+                selected
+                    ? { borderColor: accent, borderWidth: 2 }
+                    : { borderColor: theme.border, borderWidth: 1 },
+            ] },
+            highlighted && config.badgeText ? (React.createElement(View, { style: [styles.planBadge, { backgroundColor: accent }] },
+                React.createElement(Text, { numberOfLines: 1, style: [styles.badgeText, { color: theme.accentInk }] }, config.badgeText))) : null,
+            React.createElement(Text, { style: [styles.planTitle, { color: theme.textPrimary }] }, pkg.title),
+            anchorPrice ? (React.createElement(Text, { style: [styles.anchorPrice, { color: theme.textFaint }] }, anchorPrice)) : null,
+            React.createElement(Text, { style: [styles.planPrice, { color: theme.textPrimary }] }, pkg.priceLabel)));
+    })));
+    // Offer layout: the badge becomes a large centered pill; the highlighted
+    // (else first) package renders as a spotlight card with the anchor price.
+    const spotlightPkg = shown.find((p) => p.packageId === config.highlightPackageId) ?? shown[0];
+    const offerPill = config.badgeText ? (React.createElement(View, { style: [styles.offerPill, { backgroundColor: accent }] },
+        React.createElement(Text, { numberOfLines: 1, style: [styles.offerPillText, { color: theme.accentInk }] }, config.badgeText))) : null;
+    const spotlightAnchor = spotlightPkg
+        ? anchorPriceFor(spotlightPkg.priceLabel)
+        : undefined;
+    const offerSpotlight = spotlightPkg ? (React.createElement(React.Fragment, null,
+        React.createElement(Pressable, { onPress: () => select(spotlightPkg.packageId), accessibilityRole: "radio", accessibilityState: {
+                selected: spotlightPkg.packageId === selectedId,
+            }, style: [
+                styles.spotlight,
+                {
+                    borderColor: spotlightPkg.packageId === selectedId ? accent : theme.border,
+                },
+            ] },
+            React.createElement(Text, { style: [styles.spotlightTitle, { color: theme.textPrimary }] }, spotlightPkg.title),
+            React.createElement(View, { style: styles.priceRowCenter },
+                spotlightAnchor ? (React.createElement(Text, { style: [styles.spotlightAnchor, { color: theme.textFaint }] }, spotlightAnchor)) : null,
+                React.createElement(Text, { style: [styles.spotlightPrice, { color: theme.textPrimary }] }, spotlightPkg.priceLabel))),
+        shown.length > 1
+            ? packageRows(shown.filter((p) => p.packageId !== spotlightPkg.packageId), false)
+            : null)) : null;
+    const cta = (React.createElement(Pressable, { onPress: () => {
+            if (!loading && selectedId)
+                props.onPurchase(selectedId);
+        }, disabled: loading || !selectedId, accessibilityRole: "button", style: [styles.cta, { backgroundColor: accent }] }, loading ? (React.createElement(ActivityIndicator, { color: theme.accentInk })) : (React.createElement(Text, { style: [styles.ctaLabel, { color: theme.accentInk }] }, config.ctaLabel))));
+    const footerBlock = footerItems.length > 0 ? (React.createElement(View, { style: styles.footer }, footerItems.map((item, i) => (React.createElement(React.Fragment, { key: item.label },
+        i > 0 ? (React.createElement(Text, { style: [styles.footerDot, { color: theme.textFaint }] }, " · ")) : null,
+        React.createElement(Text, { onPress: item.onPress, style: [styles.footerLink, { color: theme.textFaint }] }, item.label)))))) : null;
+    // Tail shared by every layout: urgency → CTA → count → footer.
+    const tail = (React.createElement(React.Fragment, null,
+        urgencyLine,
+        cta,
+        countLine,
+        footerBlock));
+    let body;
+    switch (layout) {
+        case "hero":
+            body = (React.createElement(React.Fragment, null,
+                heroBanner,
+                featureChecks,
+                reviewCard,
+                packageRows(shown),
+                tail));
+            break;
+        case "timeline":
+            body = (React.createElement(React.Fragment, null,
+                heroOrIcon,
+                headlineBlock,
+                timelineBlock,
+                reviewCard,
+                packageRows(shown),
+                tail));
+            break;
+        case "plans":
+            body = (React.createElement(React.Fragment, null,
+                heroOrIcon,
+                headlineBlock,
+                usePlanColumns ? planColumns : packageRows(shown),
+                featureChecks,
+                reviewCard,
+                tail));
+            break;
+        case "feature-grid":
+            body = (React.createElement(React.Fragment, null,
+                heroOrIcon,
+                headlineBlock,
+                featureGrid,
+                reviewCard,
+                packageRows(shown),
+                tail));
+            break;
+        case "offer":
+            body = (React.createElement(React.Fragment, null,
+                heroOrIcon,
+                offerPill,
+                headlineBlock,
+                offerSpotlight,
+                reviewCard,
+                tail));
+            break;
+        case "reveal":
+            body = (React.createElement(React.Fragment, null,
+                progressDots,
+                heroOrIcon,
+                headlineBlock,
+                revealCards,
+                packageRows(shown),
+                tail));
+            break;
+        default:
+            // focus | feature-list | minimal — the original structure, unchanged
+            // for legacy configs (review/offer blocks only exist when configured).
+            body = (React.createElement(React.Fragment, null,
+                heroOrIcon,
+                headlineBlock,
+                layout === "feature-list" ? featureBullets : null,
+                reviewCard,
+                packageRows(shown),
+                tail));
+            break;
+    }
+    return (React.createElement(View, { style: [styles.root, { backgroundColor: theme.background }, props.style] },
+        React.createElement(ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, contentInsetAdjustmentBehavior: "automatic" },
+            React.createElement(View, { style: styles.content }, body)),
+        props.onClose ? (React.createElement(ClassicClose, { theme: theme, onPress: props.onClose })) : null));
+}
+// PROPORTIONS mirror PaywallPhonePreview.tsx (the dashboard's miniature phone
+// mock); SIZES are scaled up to native-device typography — the preview is a
+// scaled-down mock, so copying its pixel values verbatim rendered a paywall
+// that read ~30% too small on a real screen.
+//
+// Responsive rules:
+//  · scrollContent flexGrow+center — content sits vertically centered on tall
+//    screens (no dead bottom half) and scrolls normally when it overflows.
+//  · content maxWidth — on tablets/wide screens the column stays a readable
+//    width, horizontally centered, instead of stretching edge to edge.
+const styles = StyleSheet.create({
+    root: { flex: 1 },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: "center",
+        paddingHorizontal: 24,
+        paddingTop: 28,
+        paddingBottom: 32,
+    },
+    content: {
+        width: "100%",
+        maxWidth: 440,
+        alignSelf: "center",
+    },
+    heroImage: {
+        alignSelf: "stretch",
+        height: 180,
+        borderRadius: 16,
+        marginTop: 8,
+        marginBottom: 22,
+    },
+    iconTile: {
+        alignSelf: "center",
+        width: 64,
+        height: 64,
+        borderRadius: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        marginTop: 8,
+        marginBottom: 22,
+    },
+    iconGlyph: { fontSize: 27 },
+    headline: {
+        fontSize: 26,
+        fontWeight: "800",
+        textAlign: "center",
+        marginBottom: 10,
+    },
+    subheadline: {
+        fontSize: 15,
+        lineHeight: 21,
+        textAlign: "center",
+        marginBottom: 26,
+    },
+    // hero layout banner
+    heroBanner: {
+        alignSelf: "stretch",
+        minHeight: 260,
+        borderRadius: 20,
+        overflow: "hidden",
+        justifyContent: "flex-end",
+        marginTop: 8,
+        marginBottom: 22,
+    },
+    heroBannerGlyphWrap: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBottom: 72,
+    },
+    heroBannerGlyph: { fontSize: 64, color: "rgba(255,255,255,0.35)" },
+    heroBannerScrim: {
+        backgroundColor: "rgba(0,0,0,0.45)",
+        paddingHorizontal: 18,
+        paddingVertical: 16,
+    },
+    heroBannerHeadline: { fontSize: 24, fontWeight: "800", color: "#ffffff" },
+    heroBannerSub: {
+        fontSize: 13.5,
+        lineHeight: 19,
+        color: "rgba(255,255,255,0.85)",
+        marginTop: 4,
+    },
+    features: { marginBottom: 26, gap: 14 },
+    featureRow: { flexDirection: "row", alignItems: "flex-start", gap: 12 },
+    featureIcon: { width: 24, fontSize: 15, lineHeight: 21 },
+    featureBody: { flex: 1 },
+    featureTitle: { fontSize: 15.5, fontWeight: "600", lineHeight: 21 },
+    featureDescription: { fontSize: 13, lineHeight: 18, marginTop: 1 },
+    // compact single-line checks
+    checks: { marginBottom: 24, gap: 10 },
+    checkRow: { flexDirection: "row", alignItems: "center", gap: 10 },
+    checkIcon: { width: 20, fontSize: 14 },
+    checkTitle: { flex: 1, fontSize: 14.5, fontWeight: "500", lineHeight: 20 },
+    // trial timeline
+    timeline: { marginBottom: 26 },
+    timelineRow: { flexDirection: "row", gap: 12 },
+    timelineRail: { width: 34, alignItems: "center" },
+    timelineDot: {
+        width: 34,
+        height: 34,
+        borderRadius: 17,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    timelineDotIcon: { fontSize: 14 },
+    timelineLine: { flex: 1, width: 2, marginVertical: 4 },
+    timelineBody: { flex: 1, paddingTop: 6 },
+    timelineGap: { paddingBottom: 22 },
+    // feature grid
+    grid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 10,
+        marginBottom: 24,
+    },
+    gridCard: {
+        width: "47.5%",
+        flexGrow: 1,
+        borderRadius: 14,
+        padding: 13,
+    },
+    gridIconTile: {
+        width: 34,
+        height: 34,
+        borderRadius: 10,
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 9,
+    },
+    gridIcon: { fontSize: 15 },
+    gridTitle: { fontSize: 13.5, fontWeight: "600", lineHeight: 18 },
+    gridDescription: { fontSize: 12, lineHeight: 16, marginTop: 3 },
+    // reveal (onboarding-style)
+    dots: {
+        flexDirection: "row",
+        justifyContent: "center",
+        gap: 6,
+        marginBottom: 18,
+    },
+    dot: { width: 6, height: 6, borderRadius: 3 },
+    reveal: { gap: 10, marginBottom: 24 },
+    revealCard: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 12,
+        borderRadius: 14,
+        padding: 14,
+    },
+    revealChip: {
+        width: 26,
+        height: 26,
+        borderRadius: 13,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    revealNumber: { fontSize: 13, fontWeight: "700" },
+    revealTitle: { fontSize: 15, fontWeight: "600", lineHeight: 20 },
+    // social proof
+    reviewCard: {
+        borderRadius: 14,
+        padding: 14,
+        alignItems: "center",
+        marginBottom: 22,
+    },
+    starsRow: { flexDirection: "row", alignItems: "center" },
+    star: { fontSize: 15, marginHorizontal: 1 },
+    starRating: { fontSize: 13, fontWeight: "600", marginLeft: 6 },
+    reviewQuote: {
+        fontSize: 13.5,
+        lineHeight: 19,
+        fontStyle: "italic",
+        textAlign: "center",
+        marginTop: 8,
+    },
+    reviewAuthor: { fontSize: 12, marginTop: 6 },
+    countLine: { fontSize: 12.5, textAlign: "center", marginBottom: 14 },
+    // offer
+    urgency: {
+        fontSize: 13,
+        fontWeight: "600",
+        textAlign: "center",
+        marginBottom: 10,
+    },
+    offerPill: {
+        alignSelf: "center",
+        borderRadius: 20,
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        marginBottom: 14,
+        maxWidth: "80%",
+    },
+    offerPillText: { fontSize: 12, fontWeight: "700" },
+    spotlight: {
+        borderWidth: 2,
+        borderRadius: 16,
+        paddingHorizontal: 18,
+        paddingVertical: 18,
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    spotlightTitle: { fontSize: 16, fontWeight: "600" },
+    priceRowCenter: {
+        flexDirection: "row",
+        alignItems: "baseline",
+        justifyContent: "center",
+        gap: 8,
+        marginTop: 6,
+    },
+    spotlightAnchor: {
+        fontSize: 15,
+        textDecorationLine: "line-through",
+        fontVariant: ["tabular-nums"],
+    },
+    spotlightPrice: {
+        fontSize: 24,
+        fontWeight: "800",
+        fontVariant: ["tabular-nums"],
+    },
+    // plans columns
+    planRow: {
+        flexDirection: "row",
+        alignItems: "stretch",
+        gap: 8,
+        marginBottom: 22,
+    },
+    planColumn: {
+        flex: 1,
+        borderRadius: 14,
+        paddingHorizontal: 8,
+        paddingVertical: 14,
+        alignItems: "center",
+    },
+    planBadge: {
+        borderRadius: 20,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        marginBottom: 7,
+        maxWidth: "100%",
+    },
+    planTitle: {
+        fontSize: 14,
+        fontWeight: "600",
+        textAlign: "center",
+        lineHeight: 19,
+    },
+    planPrice: {
+        fontSize: 15,
+        fontWeight: "700",
+        fontVariant: ["tabular-nums"],
+        marginTop: 4,
+    },
+    packages: { gap: 12, marginBottom: 22 },
+    packageRow: {
+        borderRadius: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 15,
+    },
+    badge: {
+        position: "absolute",
+        top: -11,
+        right: 14,
+        borderRadius: 20,
+        paddingHorizontal: 10,
+        paddingVertical: 3,
+        // Absolute views take no width constraint from the card — a long badge
+        // string used to grow past the card edge (kept in lockstep with the
+        // dashboard preview, which truncates the same way).
+        maxWidth: "80%",
+    },
+    badgeText: { fontSize: 11, fontWeight: "700" },
+    packageTitle: { fontSize: 16, fontWeight: "600" },
+    packagePrice: { fontSize: 14, fontVariant: ["tabular-nums"], marginTop: 2 },
+    priceRow: {
+        flexDirection: "row",
+        alignItems: "baseline",
+        gap: 6,
+        marginTop: 2,
+    },
+    anchorPrice: {
+        fontSize: 13,
+        textDecorationLine: "line-through",
+        fontVariant: ["tabular-nums"],
+    },
+    cta: {
+        borderRadius: 12,
+        padding: 16,
+        alignItems: "center",
+        marginBottom: 14,
+    },
+    ctaLabel: { fontSize: 16.5, fontWeight: "700" },
+    footer: { flexDirection: "row", justifyContent: "center" },
+    footerLink: { fontSize: 13, padding: 4 },
+    footerDot: { fontSize: 13, paddingVertical: 4 },
+});