react-native-revnix 1.5.0 → 1.7.0

package/dist/esm/store/index.js

@@ -18,5 +18,12 @@ export const RevnixStore = native
         finish: missing,
         observe: () => () => { },
     };
+/** Pass as `deviceIntegrity` in the Revnix config: App Attest on iOS, Play
+ *  Integrity on Android, via the RevnixStore native module. Resolves null
+ *  where the device or build cannot produce evidence. */
+export const nativeDeviceIntegrity = (customerId) => native?.deviceIntegrity?.(customerId) ?? Promise.resolve(null);
+/** Pass as `advertisingId` in the Revnix config: the Google Advertising ID
+ *  on Android, via the RevnixStore native module. Resolves null on iOS. */
+export const nativeAdvertisingId = () => native?.advertisingId?.() ?? Promise.resolve(null);
 if (native)
     setStoreAdapter(RevnixStore);

package/dist/esm/ui/RevnixBlockPaywall.js

@@ -17,13 +17,13 @@
 // RevnixPaywall delegates here whenever a config carries `blocks`, so apps
 // get designed paywalls without changing a line of their integration.
 import * as React from "react";
-import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, StatusBar, Text, View, } from "react-native";
+import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, StatusBar, Switch, Text, View, } from "react-native";
 import { gradientFallbackColor, isGradient, parseGradient, resolveColor, surfaceSolid, withAlpha, } from "../blocks/color.js";
 import { DEFAULT_FONT_SIZE, hairlineColor, inherit, inheritedTextStyle, toTextStyle, toViewStyle, } from "../blocks/style.js";
 import { backgroundLayers, coverPlacement, } from "../blocks/background.js";
 import { detectLocale, linkLabels, localizeBlockDoc } from "../blocks/locale.js";
-import { resolveTags } from "../blocks/tags.js";
-import { canvasMetrics, effectiveStyle, isVisible, packageContext, selectedPackageId, } from "../blocks/selection.js";
+import { resolveTags, timerText } from "../blocks/tags.js";
+import { canvasMetrics, effectiveStyle, isVisible, packageContext, selectedPackageId, toggleSelection, } from "../blocks/selection.js";
 import { DESIGN_CANVAS, hasCloseAction, } from "../blocks/types.js";
 /** CSS angle (0 = up, 90 = right) → RN gradient start/end points. */
 function angleToPoints(angle) {
@@ -259,6 +259,56 @@ function BlockText({ text, style, ctx, inherited, onPress, }) {
     }
     return React.createElement(View, { style: toViewStyle(style, styleCtx) }, body);
 }
+function Timer({ block, style, ctx, inherited, }) {
+    const [now, setNow] = React.useState(Date.now);
+    React.useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(id);
+    }, []);
+    const text = timerText(block, ctx.shownAt, now);
+    if (text === null)
+        return null;
+    return React.createElement(BlockText, { text: text, style: style, ctx: ctx, inherited: inherited });
+}
+function Carousel({ pages, autoAdvance, doc, }) {
+    const scroller = React.useRef(null);
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const [page, setPage] = React.useState(0);
+    React.useEffect(() => {
+        if (!autoAdvance || size.width === 0 || pages.length < 2)
+            return;
+        const id = setInterval(() => {
+            scroller.current?.scrollTo({
+                x: ((page + 1) % pages.length) * size.width,
+                animated: true,
+            });
+        }, autoAdvance * 1000);
+        return () => clearInterval(id);
+    }, [autoAdvance, size.width, page, pages.length]);
+    return (React.createElement(View, { style: { flex: 1 }, onLayout: (e) => setSize({
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+        }) },
+        React.createElement(ScrollView, { ref: scroller, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, scrollEventThrottle: 16, onScroll: (e) => {
+                if (size.width > 0) {
+                    setPage(Math.round(e.nativeEvent.contentOffset.x / size.width));
+                }
+            } }, pages.map((node, i) => (React.createElement(View, { key: i, style: size }, node)))),
+        pages.length > 1 ? (React.createElement(View, { pointerEvents: "none", style: {
+                position: "absolute",
+                bottom: 8,
+                left: 0,
+                right: 0,
+                flexDirection: "row",
+                justifyContent: "center",
+                gap: 6,
+            } }, pages.map((_, i) => (React.createElement(View, { key: i, style: {
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: i === page ? doc.accent : withAlpha(doc.textColor, 0.3),
+            } }))))) : null));
+}
 /** The press handler for a block the design marks as the close, or undefined
  *  when it is not one (or the host wired no dismissal). One helper so text,
  *  image and button blocks cannot drift on what "action: close" means. */
@@ -363,6 +413,11 @@ function gridTracks(block) {
 }
 function Block({ block, ctx, pkg, inherited, selection, }) {
     const { doc } = ctx;
+    React.useEffect(() => {
+        if (block.type === "video") {
+            ctx.onDiagnostic?.("video drawn as its poster: no built-in player");
+        }
+    }, [block.type]);
     const styleCtx = { ...ctx.style, fontSize: inherited.fontSize };
     // A pinned card judges its own context; every other block inherits the
     // nearest plan card's. (A repeat card is judged per instance below.)
@@ -385,9 +440,27 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
     switch (block.type) {
         case "text":
             return (React.createElement(BlockText, { text: resolveTags(block.text, pkg, ctx.packages), style: style, ctx: ctx, inherited: inherited, onPress: closePress(block, ctx) }));
-        case "image": {
-            const url = block.url || ctx.heroImageUrl;
-            const round = block.shape === "circle";
+        case "timer":
+            return React.createElement(Timer, { block: block, style: style, ctx: ctx, inherited: inherited });
+        case "toggle": {
+            const toggle = toggleSelection(block, ctx.packages, ctx.selectedId);
+            if (!toggle)
+                return null;
+            const flip = () => ctx.onSelect(toggle.target);
+            return (React.createElement(Pressable, { accessibilityRole: "switch", accessibilityState: { checked: toggle.on }, onPress: flip, style: [{ flexDirection: "row", alignItems: "center", gap: 12 }, view] },
+                React.createElement(BlockFill, { block: block, ctx: ctx }),
+                React.createElement(Text, { style: [
+                        { flex: 1 },
+                        inheritedTextStyle(text, ctx.style),
+                        textOnly(style, styleCtx),
+                    ] }, resolveTags(block.label, ctx.packages.find((p) => p.packageId === ctx.selectedId), ctx.packages)),
+                React.createElement(Switch, { value: toggle.on, onValueChange: flip, trackColor: { true: doc.accent } })));
+        }
+        case "image":
+        case "video": {
+            const image = block.type === "image";
+            const url = image ? block.url || ctx.heroImageUrl : block.poster;
+            const round = image && block.shape === "circle";
             const s = style;
             // A converted design sizes its own slot; the 160pt default is only for
             // a slot dropped into a flow column, and must not fight it.
@@ -400,7 +473,7 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // An icon the design marks as the close (REV-252). Same rule as text:
             // the whole box is the target, and the style lands on the Pressable so
             // a pinned icon keeps its offsets.
-            const closeImage = closePress(block, ctx);
+            const closeImage = image ? closePress(block, ctx) : undefined;
             const ImageBox = closeImage ? Pressable : View;
             return (React.createElement(ImageBox, { accessibilityRole: closeImage ? "button" : undefined, accessibilityLabel: closeImage ? "Close" : undefined, hitSlop: closeImage ? 8 : undefined, onPress: closeImage, style: [
                     sized ? null : { height: 160 },
@@ -408,11 +481,11 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                     view,
                 ] },
                 React.createElement(BlockFill, { block: block, ctx: ctx }),
-                url ? (React.createElement(Image, { source: { uri: url }, resizeMode: block.fit ?? "cover", style: { width: "100%", height: "100%" } })) : (React.createElement(View, { style: {
+                url ? (React.createElement(Image, { source: { uri: url }, resizeMode: block.fit ?? "cover", style: { width: "100%", height: "100%" } })) : image ? (React.createElement(View, { style: {
                         width: "100%",
                         height: "100%",
                         backgroundColor: withAlpha("#7d879b", 0.2),
-                    } }))));
+                    } })) : null));
         }
         case "list":
             return (React.createElement(View, { style: [{ flexDirection: "column", gap: style?.gap ?? 8 }, view] },
@@ -521,20 +594,23 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             return (React.createElement(View, { style: [block.flex ? { flexGrow: 1 } : { height: 16 }, view] }));
         case "card": {
             const layout = block.layout ?? "column";
+            const carousel = layout === "carousel";
             const base = layout === "stack"
                 ? { position: "relative" }
-                : layout === "grid"
-                    ? {
-                        position: "relative",
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        gap: style?.gap ?? 10,
-                    }
-                    : {
-                        position: "relative",
-                        flexDirection: layout === "row" ? "row" : "column",
-                        gap: style?.gap ?? 10,
-                    };
+                : carousel
+                    ? { position: "relative", overflow: "hidden" }
+                    : layout === "grid"
+                        ? {
+                            position: "relative",
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: style?.gap ?? 10,
+                        }
+                        : {
+                            position: "relative",
+                            flexDirection: layout === "row" ? "row" : "column",
+                            gap: style?.gap ?? 10,
+                        };
             const tracks = layout === "grid" ? gridTracks(block) : null;
             const renderChildren = (context, childSelection, childText = text) => block.children.map((child, i) => {
                 const node = (React.createElement(Block, { key: child.id, block: child, ctx: ctx, pkg: context, inherited: childText, selection: childSelection }));
@@ -578,6 +654,9 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                 base,
                 layout === "stack" ? null : { borderRadius: 16 },
                 view,
+                carousel
+                    ? { height: typeof style?.height === "number" ? style.height : 220 }
+                    : null,
             ];
             const cardPackage = block.packageIndex !== undefined
                 ? (ctx.packages[block.packageIndex] ?? pkg)
@@ -586,7 +665,7 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // how hand-styled plan rows (a highlighted annual beside a plain
             // monthly) become tappable without a products block.
             const pinned = block.packageIndex !== undefined && cardPackage !== undefined;
-            return (React.createElement(CardBox, { style: boxStyle, fill: style?.fill, doc: doc, gradient: ctx.gradient, radius: style?.radius ?? (layout === "stack" ? undefined : 16), onPress: pinned ? () => ctx.onSelect(cardPackage.packageId) : undefined }, renderChildren(cardPackage, context)));
+            return (React.createElement(CardBox, { style: boxStyle, fill: style?.fill, doc: doc, gradient: ctx.gradient, radius: style?.radius ?? (layout === "stack" ? undefined : 16), onPress: pinned ? () => ctx.onSelect(cardPackage.packageId) : undefined }, carousel ? (React.createElement(Carousel, { pages: renderChildren(cardPackage, context), autoAdvance: block.autoAdvance, doc: doc })) : (renderChildren(cardPackage, context))));
         }
     }
 }
@@ -598,6 +677,7 @@ export function RevnixBlockPaywall(props) {
     // re-runs on every selection tap.
     const doc = React.useMemo(() => localizeBlockDoc(props.doc, props.locale ?? detectLocale()), [props.doc, props.locale]);
     const [internalSelected, setInternalSelected] = React.useState(undefined);
+    const [shownAt] = React.useState(Date.now);
     // Contract §1: host → own tap → design highlight → first package, each
     // only when the offering carries it.
     const selectedId = selectedPackageId(packages, props.selectedPackageId, internalSelected, props.highlightPackageId);
@@ -639,6 +719,7 @@ export function RevnixBlockPaywall(props) {
         onDiagnostic: props.onDiagnostic,
         style: styleCtx,
         loading: props.loading === true,
+        shownAt,
     };
     const children = doc.blocks.map((block) => (React.createElement(Block, { key: block.id, block: block, ctx: ctx, pkg: packages.find((p) => p.packageId === selectedId) ?? packages[0], inherited: rootText })));
     // REV-252: the renderer's own close, drawn only for a design that authors

package/dist/esm/ui/RevnixPaywall.js

@@ -18,6 +18,7 @@ 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 { getStoreAdapter } from "../store.js";
+import { paywallImageUrls } from "../client.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
@@ -66,6 +67,12 @@ const CURRENCY_SYMBOL = /[$€£¥₹₩₽₺₫₪฿₴₦₱]/;
 // 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" };
+/** Warms React Native's image cache with every image `resolution`'s paywall
+ *  loads, so it paints without waiting on the network. Pair it with
+ *  `client.preload` / `resolvePlacement`. Never throws. */
+export async function prefetchPaywallImages(resolution) {
+    await Promise.all(paywallImageUrls(resolution?.paywall).map((url) => Image.prefetch(url).catch(() => false)));
+}
 export function RevnixPaywall(props) {
     // One view per mount: remounting (a re-shown paywall) is a genuine new
     // display; re-renders are not.

package/dist/esm/ui/index.js

@@ -1,4 +1,4 @@
-export { RevnixPaywall, DEFAULT_PAYWALL_THEME, LIGHT_PAYWALL_THEME, } from "./RevnixPaywall.js";
+export { RevnixPaywall, DEFAULT_PAYWALL_THEME, LIGHT_PAYWALL_THEME, prefetchPaywallImages, } from "./RevnixPaywall.js";
 export { RevnixBlockPaywall, } from "./RevnixBlockPaywall.js";
 export { DESIGN_CANVAS, } from "../blocks/types.js";
 export { backgroundBaseColor, backgroundLayers, coverPlacement, } from "../blocks/background.js";

package/dist/esm/version.js

@@ -1,4 +1,4 @@
 // L3: the single source of the SDK version inside src/. Must match
 // package.json "version" — version.test.ts fails the build when they drift
 // (they had: client.ts said 0.7.0 while the package shipped 0.9.0).
-export const SDK_VERSION = "1.5.0";
+export const SDK_VERSION = "1.7.0";

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { memoryStorage, generateAnonymousId } from "./storage.js";
 export { SDK_VERSION } from "./version.js";
 export { DEVICE_HEADER, encodeDeviceHeader } from "./device.js";
 export { browserLifecycle, DEFAULT_SESSION_TIMEOUT_MS, HOST_CALL_PLACEMENT, IMPLICIT_PLACEMENTS, PREVIEW_PLACEMENT_KEY, type ImplicitPlacement, type ImplicitSkipReason, type ImplicitTrigger, type ImplicitTriggerResponse, type RevnixLifecycle, } from "./implicit.js";
-export type { AdRevenue, AliasResult, CustomerEntitlements, DeviceFacts, Entitlement, EntitlementSource, Environment, IdentifyResult, IdentifyStrategy, IdentityInfo, ImplicitResolution, LastDeepLink, MmpAttribution, MmpProvider, PaywallConfig, PaywallInteraction, PaywallPurchaseOutcome, PlacementOffering, PlacementPackage, PlacementPaywall, PlacementProduct, PlacementResolution, RegisterPurchaseInput, RegisterPurchaseResult, RevnixAttribution, RevnixConfig, RevnixDiagnostic, RevnixStorage, Store, } from "./types.js";
+export type { AdRevenue, AliasResult, CustomerEntitlements, DeviceFacts, Entitlement, EntitlementSource, Environment, IdentifyResult, IdentifyStrategy, IdentityInfo, ImplicitResolution, IntegrityEvidence, LastDeepLink, MmpAttribution, MmpProvider, PaywallConfig, PaywallInteraction, PaywallPurchaseOutcome, PlacementOffering, PlacementPackage, PlacementPaywall, PlacementProduct, PlacementResolution, RegisterPurchaseInput, RegisterPurchaseResult, RevnixAttribution, RevnixConfig, RevnixDiagnostic, RevnixStorage, Store, } from "./types.js";
 /** Singleton facade — configure once at app start, then import `Revnix`
  *  anywhere. Prefer constructing RevnixClient directly in tests. */
 export declare const Revnix: {

package/dist/store/index.d.ts

@@ -1,2 +1,10 @@
 import { type StoreAdapter } from "../store.js";
+import type { RevnixConfig } from "../types.js";
 export declare const RevnixStore: StoreAdapter;
+/** Pass as `deviceIntegrity` in the Revnix config: App Attest on iOS, Play
+ *  Integrity on Android, via the RevnixStore native module. Resolves null
+ *  where the device or build cannot produce evidence. */
+export declare const nativeDeviceIntegrity: NonNullable<RevnixConfig["deviceIntegrity"]>;
+/** Pass as `advertisingId` in the Revnix config: the Google Advertising ID
+ *  on Android, via the RevnixStore native module. Resolves null on iOS. */
+export declare const nativeAdvertisingId: NonNullable<RevnixConfig["advertisingId"]>;

package/dist/store/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RevnixStore = void 0;
+exports.nativeAdvertisingId = exports.nativeDeviceIntegrity = exports.RevnixStore = void 0;
 const react_native_1 = require("react-native");
 const store_js_1 = require("../store.js");
 const native = react_native_1.NativeModules.RevnixStore;
@@ -21,5 +21,14 @@ exports.RevnixStore = native
         finish: missing,
         observe: () => () => { },
     };
+/** Pass as `deviceIntegrity` in the Revnix config: App Attest on iOS, Play
+ *  Integrity on Android, via the RevnixStore native module. Resolves null
+ *  where the device or build cannot produce evidence. */
+const nativeDeviceIntegrity = (customerId) => native?.deviceIntegrity?.(customerId) ?? Promise.resolve(null);
+exports.nativeDeviceIntegrity = nativeDeviceIntegrity;
+/** Pass as `advertisingId` in the Revnix config: the Google Advertising ID
+ *  on Android, via the RevnixStore native module. Resolves null on iOS. */
+const nativeAdvertisingId = () => native?.advertisingId?.() ?? Promise.resolve(null);
+exports.nativeAdvertisingId = nativeAdvertisingId;
 if (native)
     (0, store_js_1.setStoreAdapter)(exports.RevnixStore);

package/dist/types.d.ts

@@ -129,7 +129,39 @@ export interface RevnixConfig {
      *  Never throws into your app: an exception from this handler is reported
      *  through `onDiagnostic` and swallowed. */
     onAttribution?: (attribution: RevnixAttribution) => void;
+    /** Opt-in device integrity evidence (Apple App Attest / Google Play
+     *  Integrity) attached to every install report and `setAttribution` call.
+     *  Pair it with the dashboard's "Require device integrity" setting, which
+     *  strips attribution from installs that arrive without evidence. In React
+     *  Native pass `nativeDeviceIntegrity` from "react-native-revnix/store";
+     *  it needs iOS 14+ with App Attest, or Google Play services on Android.
+     *  Simulators and emulators return nothing.
+     *
+     *  Called at most once per customer id and bounded to 10s. A rejection,
+     *  timeout, or missing/malformed result sends the request without
+     *  evidence and reports `op: "deviceIntegrity"` through `onDiagnostic`. */
+    deviceIntegrity?: (customerId: string) => Promise<IntegrityEvidence | null | undefined>;
+    /** Google Advertising ID source, stored on the customer as `gps_adid` at
+     *  launch and resent only when it changes. In React Native pass
+     *  `nativeAdvertisingId` from "react-native-revnix/store"; it needs
+     *  `play-services-ads-identifier` and the `AD_ID` permission in the app and
+     *  answers null on iOS and on opt-out, and rejects when the id cannot be
+     *  read. A null answer deletes a previously stored `gps_adid`; a
+     *  rejection changes nothing and reports `op: "advertisingId"`. */
+    advertisingId?: () => Promise<string | null | undefined>;
 }
+/** Device integrity evidence for `POST /v1/installs` and `/v1/attribution`.
+ *  iOS: an App Attest key id and its attestation (standard base64) over
+ *  SHA-256 of the customer id. Android: a classic Play Integrity token whose
+ *  nonce is base64url (no padding) of SHA-256 of the customer id. */
+export type IntegrityEvidence = {
+    platform: "ios";
+    keyId: string;
+    attestation: string;
+} | {
+    platform: "android";
+    token: string;
+};
 /** AT11: the install-attribution verdict — GET
  *  /v1/customers/{id}/attribution. `installMatch: "unknown"` (no install
  *  recorded yet, a normal cold-start race) is never sent to hosts as such;

package/dist/ui/RevnixBlockPaywall.js

@@ -295,6 +295,56 @@ function BlockText({ text, style, ctx, inherited, onPress, }) {
     }
     return React.createElement(react_native_1.View, { style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body);
 }
+function Timer({ block, style, ctx, inherited, }) {
+    const [now, setNow] = React.useState(Date.now);
+    React.useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(id);
+    }, []);
+    const text = (0, tags_js_1.timerText)(block, ctx.shownAt, now);
+    if (text === null)
+        return null;
+    return React.createElement(BlockText, { text: text, style: style, ctx: ctx, inherited: inherited });
+}
+function Carousel({ pages, autoAdvance, doc, }) {
+    const scroller = React.useRef(null);
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const [page, setPage] = React.useState(0);
+    React.useEffect(() => {
+        if (!autoAdvance || size.width === 0 || pages.length < 2)
+            return;
+        const id = setInterval(() => {
+            scroller.current?.scrollTo({
+                x: ((page + 1) % pages.length) * size.width,
+                animated: true,
+            });
+        }, autoAdvance * 1000);
+        return () => clearInterval(id);
+    }, [autoAdvance, size.width, page, pages.length]);
+    return (React.createElement(react_native_1.View, { style: { flex: 1 }, onLayout: (e) => setSize({
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+        }) },
+        React.createElement(react_native_1.ScrollView, { ref: scroller, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, scrollEventThrottle: 16, onScroll: (e) => {
+                if (size.width > 0) {
+                    setPage(Math.round(e.nativeEvent.contentOffset.x / size.width));
+                }
+            } }, pages.map((node, i) => (React.createElement(react_native_1.View, { key: i, style: size }, node)))),
+        pages.length > 1 ? (React.createElement(react_native_1.View, { pointerEvents: "none", style: {
+                position: "absolute",
+                bottom: 8,
+                left: 0,
+                right: 0,
+                flexDirection: "row",
+                justifyContent: "center",
+                gap: 6,
+            } }, pages.map((_, i) => (React.createElement(react_native_1.View, { key: i, style: {
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: i === page ? doc.accent : (0, color_js_1.withAlpha)(doc.textColor, 0.3),
+            } }))))) : null));
+}
 /** The press handler for a block the design marks as the close, or undefined
  *  when it is not one (or the host wired no dismissal). One helper so text,
  *  image and button blocks cannot drift on what "action: close" means. */
@@ -399,6 +449,11 @@ function gridTracks(block) {
 }
 function Block({ block, ctx, pkg, inherited, selection, }) {
     const { doc } = ctx;
+    React.useEffect(() => {
+        if (block.type === "video") {
+            ctx.onDiagnostic?.("video drawn as its poster: no built-in player");
+        }
+    }, [block.type]);
     const styleCtx = { ...ctx.style, fontSize: inherited.fontSize };
     // A pinned card judges its own context; every other block inherits the
     // nearest plan card's. (A repeat card is judged per instance below.)
@@ -421,9 +476,27 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
     switch (block.type) {
         case "text":
             return (React.createElement(BlockText, { text: (0, tags_js_1.resolveTags)(block.text, pkg, ctx.packages), style: style, ctx: ctx, inherited: inherited, onPress: closePress(block, ctx) }));
-        case "image": {
-            const url = block.url || ctx.heroImageUrl;
-            const round = block.shape === "circle";
+        case "timer":
+            return React.createElement(Timer, { block: block, style: style, ctx: ctx, inherited: inherited });
+        case "toggle": {
+            const toggle = (0, selection_js_1.toggleSelection)(block, ctx.packages, ctx.selectedId);
+            if (!toggle)
+                return null;
+            const flip = () => ctx.onSelect(toggle.target);
+            return (React.createElement(react_native_1.Pressable, { accessibilityRole: "switch", accessibilityState: { checked: toggle.on }, onPress: flip, style: [{ flexDirection: "row", alignItems: "center", gap: 12 }, view] },
+                React.createElement(BlockFill, { block: block, ctx: ctx }),
+                React.createElement(react_native_1.Text, { style: [
+                        { flex: 1 },
+                        (0, style_js_1.inheritedTextStyle)(text, ctx.style),
+                        textOnly(style, styleCtx),
+                    ] }, (0, tags_js_1.resolveTags)(block.label, ctx.packages.find((p) => p.packageId === ctx.selectedId), ctx.packages)),
+                React.createElement(react_native_1.Switch, { value: toggle.on, onValueChange: flip, trackColor: { true: doc.accent } })));
+        }
+        case "image":
+        case "video": {
+            const image = block.type === "image";
+            const url = image ? block.url || ctx.heroImageUrl : block.poster;
+            const round = image && block.shape === "circle";
             const s = style;
             // A converted design sizes its own slot; the 160pt default is only for
             // a slot dropped into a flow column, and must not fight it.
@@ -436,7 +509,7 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // An icon the design marks as the close (REV-252). Same rule as text:
             // the whole box is the target, and the style lands on the Pressable so
             // a pinned icon keeps its offsets.
-            const closeImage = closePress(block, ctx);
+            const closeImage = image ? closePress(block, ctx) : undefined;
             const ImageBox = closeImage ? react_native_1.Pressable : react_native_1.View;
             return (React.createElement(ImageBox, { accessibilityRole: closeImage ? "button" : undefined, accessibilityLabel: closeImage ? "Close" : undefined, hitSlop: closeImage ? 8 : undefined, onPress: closeImage, style: [
                     sized ? null : { height: 160 },
@@ -444,11 +517,11 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                     view,
                 ] },
                 React.createElement(BlockFill, { block: block, ctx: ctx }),
-                url ? (React.createElement(react_native_1.Image, { source: { uri: url }, resizeMode: block.fit ?? "cover", style: { width: "100%", height: "100%" } })) : (React.createElement(react_native_1.View, { style: {
+                url ? (React.createElement(react_native_1.Image, { source: { uri: url }, resizeMode: block.fit ?? "cover", style: { width: "100%", height: "100%" } })) : image ? (React.createElement(react_native_1.View, { style: {
                         width: "100%",
                         height: "100%",
                         backgroundColor: (0, color_js_1.withAlpha)("#7d879b", 0.2),
-                    } }))));
+                    } })) : null));
         }
         case "list":
             return (React.createElement(react_native_1.View, { style: [{ flexDirection: "column", gap: style?.gap ?? 8 }, view] },
@@ -557,20 +630,23 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             return (React.createElement(react_native_1.View, { style: [block.flex ? { flexGrow: 1 } : { height: 16 }, view] }));
         case "card": {
             const layout = block.layout ?? "column";
+            const carousel = layout === "carousel";
             const base = layout === "stack"
                 ? { position: "relative" }
-                : layout === "grid"
-                    ? {
-                        position: "relative",
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        gap: style?.gap ?? 10,
-                    }
-                    : {
-                        position: "relative",
-                        flexDirection: layout === "row" ? "row" : "column",
-                        gap: style?.gap ?? 10,
-                    };
+                : carousel
+                    ? { position: "relative", overflow: "hidden" }
+                    : layout === "grid"
+                        ? {
+                            position: "relative",
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: style?.gap ?? 10,
+                        }
+                        : {
+                            position: "relative",
+                            flexDirection: layout === "row" ? "row" : "column",
+                            gap: style?.gap ?? 10,
+                        };
             const tracks = layout === "grid" ? gridTracks(block) : null;
             const renderChildren = (context, childSelection, childText = text) => block.children.map((child, i) => {
                 const node = (React.createElement(Block, { key: child.id, block: child, ctx: ctx, pkg: context, inherited: childText, selection: childSelection }));
@@ -614,6 +690,9 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                 base,
                 layout === "stack" ? null : { borderRadius: 16 },
                 view,
+                carousel
+                    ? { height: typeof style?.height === "number" ? style.height : 220 }
+                    : null,
             ];
             const cardPackage = block.packageIndex !== undefined
                 ? (ctx.packages[block.packageIndex] ?? pkg)
@@ -622,7 +701,7 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // how hand-styled plan rows (a highlighted annual beside a plain
             // monthly) become tappable without a products block.
             const pinned = block.packageIndex !== undefined && cardPackage !== undefined;
-            return (React.createElement(CardBox, { style: boxStyle, fill: style?.fill, doc: doc, gradient: ctx.gradient, radius: style?.radius ?? (layout === "stack" ? undefined : 16), onPress: pinned ? () => ctx.onSelect(cardPackage.packageId) : undefined }, renderChildren(cardPackage, context)));
+            return (React.createElement(CardBox, { style: boxStyle, fill: style?.fill, doc: doc, gradient: ctx.gradient, radius: style?.radius ?? (layout === "stack" ? undefined : 16), onPress: pinned ? () => ctx.onSelect(cardPackage.packageId) : undefined }, carousel ? (React.createElement(Carousel, { pages: renderChildren(cardPackage, context), autoAdvance: block.autoAdvance, doc: doc })) : (renderChildren(cardPackage, context))));
         }
     }
 }
@@ -634,6 +713,7 @@ function RevnixBlockPaywall(props) {
     // re-runs on every selection tap.
     const doc = React.useMemo(() => (0, locale_js_1.localizeBlockDoc)(props.doc, props.locale ?? (0, locale_js_1.detectLocale)()), [props.doc, props.locale]);
     const [internalSelected, setInternalSelected] = React.useState(undefined);
+    const [shownAt] = React.useState(Date.now);
     // Contract §1: host → own tap → design highlight → first package, each
     // only when the offering carries it.
     const selectedId = (0, selection_js_1.selectedPackageId)(packages, props.selectedPackageId, internalSelected, props.highlightPackageId);
@@ -675,6 +755,7 @@ function RevnixBlockPaywall(props) {
         onDiagnostic: props.onDiagnostic,
         style: styleCtx,
         loading: props.loading === true,
+        shownAt,
     };
     const children = doc.blocks.map((block) => (React.createElement(Block, { key: block.id, block: block, ctx: ctx, pkg: packages.find((p) => p.packageId === selectedId) ?? packages[0], inherited: rootText })));
     // REV-252: the renderer's own close, drawn only for a design that authors

package/dist/ui/RevnixPaywall.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-import type { PaywallConfig, PaywallInteraction, PaywallPurchaseOutcome, RegisterPurchaseResult } from "../types.js";
-import type { RevnixClient } from "../client.js";
+import type { PaywallConfig, PaywallInteraction, PaywallPurchaseOutcome, PlacementResolution, RegisterPurchaseResult } from "../types.js";
+import { type RevnixClient } from "../client.js";
 import type { FontFamilyMap } from "../blocks/style.js";
 import { type RevnixBlurComponent, type RevnixGradientComponent } from "./RevnixBlockPaywall.js";
 /** One purchasable row. `priceLabel` must come from the store (localized). */
@@ -155,4 +155,8 @@ export interface RevnixPaywallProps {
      *  layouts below render `config`'s own copy whatever this says. */
     locale?: string;
 }
+/** Warms React Native's image cache with every image `resolution`'s paywall
+ *  loads, so it paints without waiting on the network. Pair it with
+ *  `client.preload` / `resolvePlacement`. Never throws. */
+export declare function prefetchPaywallImages(resolution: PlacementResolution | null): Promise<void>;
 export declare function RevnixPaywall(props: RevnixPaywallProps): React.JSX.Element;

package/dist/ui/RevnixPaywall.js

@@ -50,11 +50,13 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIGHT_PAYWALL_THEME = exports.DEFAULT_PAYWALL_THEME = void 0;
+exports.prefetchPaywallImages = prefetchPaywallImages;
 exports.RevnixPaywall = RevnixPaywall;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const implicit_js_1 = require("../implicit.js");
 const store_js_1 = require("../store.js");
+const client_js_1 = require("../client.js");
 const color_js_1 = require("../blocks/color.js");
 const RevnixBlockPaywall_js_1 = require("./RevnixBlockPaywall.js");
 /** `config.blocks` is opaque on the core config (the non-UI entrypoint must
@@ -103,6 +105,12 @@ const CURRENCY_SYMBOL = /[$€£¥₹₩₽₺₫₪฿₴₦₱]/;
 // 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" };
+/** Warms React Native's image cache with every image `resolution`'s paywall
+ *  loads, so it paints without waiting on the network. Pair it with
+ *  `client.preload` / `resolvePlacement`. Never throws. */
+async function prefetchPaywallImages(resolution) {
+    await Promise.all((0, client_js_1.paywallImageUrls)(resolution?.paywall).map((url) => react_native_1.Image.prefetch(url).catch(() => false)));
+}
 function RevnixPaywall(props) {
     // One view per mount: remounting (a re-shown paywall) is a genuine new
     // display; re-renders are not.

package/dist/ui/index.d.ts

@@ -1,4 +1,4 @@
-export { RevnixPaywall, DEFAULT_PAYWALL_THEME, LIGHT_PAYWALL_THEME, type RevnixPaywallPackage, type RevnixPaywallProps, type RevnixPaywallTheme, } from "./RevnixPaywall.js";
+export { RevnixPaywall, DEFAULT_PAYWALL_THEME, LIGHT_PAYWALL_THEME, prefetchPaywallImages, type RevnixPaywallPackage, type RevnixPaywallProps, type RevnixPaywallTheme, } from "./RevnixPaywall.js";
 export { RevnixBlockPaywall, type RevnixBlockPaywallProps, type RevnixBlurComponent, type RevnixBlurProps, type RevnixGradientComponent, type RevnixGradientProps, } from "./RevnixBlockPaywall.js";
 export { DESIGN_CANVAS, type BlockStyle, type PaywallBlock, type PaywallBlockDoc, } from "../blocks/types.js";
 export { backgroundBaseColor, backgroundLayers, coverPlacement, type BackgroundFit, type BackgroundImage, type BackgroundLayers, type BackgroundOverlay, type PaywallBackground, type PaywallBackgroundSpec, } from "../blocks/background.js";

package/dist/ui/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveTags = exports.minorUnitsForCurrency = exports.setLocale = exports.normalizeLocale = exports.localizeBlockDoc = exports.localeChain = exports.linkLabels = exports.detectLocale = exports.coverPlacement = exports.backgroundLayers = exports.backgroundBaseColor = exports.DESIGN_CANVAS = exports.RevnixBlockPaywall = exports.LIGHT_PAYWALL_THEME = exports.DEFAULT_PAYWALL_THEME = exports.RevnixPaywall = void 0;
+exports.resolveTags = exports.minorUnitsForCurrency = exports.setLocale = exports.normalizeLocale = exports.localizeBlockDoc = exports.localeChain = exports.linkLabels = exports.detectLocale = exports.coverPlacement = exports.backgroundLayers = exports.backgroundBaseColor = exports.DESIGN_CANVAS = exports.RevnixBlockPaywall = exports.prefetchPaywallImages = exports.LIGHT_PAYWALL_THEME = exports.DEFAULT_PAYWALL_THEME = exports.RevnixPaywall = void 0;
 var RevnixPaywall_js_1 = require("./RevnixPaywall.js");
 Object.defineProperty(exports, "RevnixPaywall", { enumerable: true, get: function () { return RevnixPaywall_js_1.RevnixPaywall; } });
 Object.defineProperty(exports, "DEFAULT_PAYWALL_THEME", { enumerable: true, get: function () { return RevnixPaywall_js_1.DEFAULT_PAYWALL_THEME; } });
 Object.defineProperty(exports, "LIGHT_PAYWALL_THEME", { enumerable: true, get: function () { return RevnixPaywall_js_1.LIGHT_PAYWALL_THEME; } });
+Object.defineProperty(exports, "prefetchPaywallImages", { enumerable: true, get: function () { return RevnixPaywall_js_1.prefetchPaywallImages; } });
 var RevnixBlockPaywall_js_1 = require("./RevnixBlockPaywall.js");
 Object.defineProperty(exports, "RevnixBlockPaywall", { enumerable: true, get: function () { return RevnixBlockPaywall_js_1.RevnixBlockPaywall; } });
 var types_js_1 = require("../blocks/types.js");

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.5.0";
+export declare const SDK_VERSION = "1.7.0";

package/dist/version.js

@@ -4,4 +4,4 @@ exports.SDK_VERSION = void 0;
 // L3: the single source of the SDK version inside src/. Must match
 // package.json "version" — version.test.ts fails the build when they drift
 // (they had: client.ts said 0.7.0 while the package shipped 0.9.0).
-exports.SDK_VERSION = "1.5.0";
+exports.SDK_VERSION = "1.7.0";

package/ios/RevnixStore.m

@@ -15,4 +15,8 @@ RCT_EXTERN_METHOD(finish:(NSString *)transactionId
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(deviceIntegrity:(NSString *)customerId
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
 @end