react-native-revnix 1.6.0 → 1.8.0

package/dist/esm/blocks/types.js

@@ -34,7 +34,26 @@ export function hasCloseAction(blocks) {
         : b.type === "card"
             ? b.repeat === undefined &&
                 b.packageIndex === undefined &&
+                b.layout !== "carousel" &&
                 hasCloseAction(b.children)
             : (b.type === "text" || b.type === "image" || b.type === "button") &&
                 b.action === "close");
 }
+export function onboardingScreen(doc, index) {
+    const intro = doc.screens?.[index];
+    if (intro === undefined)
+        return { blocks: doc.blocks };
+    return {
+        blocks: intro,
+        dots: { count: doc.screens.length + 1, active: index },
+    };
+}
+export function stepScreen(doc, index, action) {
+    if (index >= (doc.screens?.length ?? 0))
+        return undefined;
+    if (action === "next")
+        return index + 1;
+    if (action === "back" && index > 0)
+        return index - 1;
+    return undefined;
+}

package/dist/esm/client.js

@@ -15,9 +15,11 @@ const PENDING_PURCHASES_KEY = "revnix.pendingPurchases";
 const PLACEMENTS_CACHE_KEY = "revnix.placements";
 const LAST_ATTRIBUTION_KEY = "revnix.lastAttribution";
 const LAST_PUSH_TOKEN_KEY = "revnix.lastPushToken";
+const LAST_AD_ID_KEY = "revnix.lastAdId";
 const EVENT_QUEUE_KEY = "revnix.eventQueue";
 const PLACEMENTS_INVALIDATED_AT_KEY = "revnix.placementsInvalidatedAt";
 const DEFAULT_TIMEOUT_MS = 10000;
+const INTEGRITY_TIMEOUT_MS = 10000;
 const EVENT_QUEUE_CAP = 1000;
 const EVENT_BATCH_SIZE = 100;
 const EVENT_FLUSH_THRESHOLD = 20;
@@ -98,6 +100,19 @@ const jittered = (ms) => ms * (0.8 + Math.random() * 0.4);
 // from memory. Short enough that a webhook-driven change is picked up within
 // half a minute; long enough that gating five screens costs one request.
 const DEFAULT_ENTITLEMENTS_TTL_MS = 30000;
+const fitsWithin = (value, max) => typeof value === "string" && value.length > 0 && value.length <= max;
+function wellFormedIntegrity(evidence) {
+    if (typeof evidence !== "object" || evidence === null)
+        return undefined;
+    const { platform, keyId, attestation, token } = evidence;
+    if (platform === "ios" && fitsWithin(keyId, 128) && fitsWithin(attestation, 16384)) {
+        return { platform, keyId, attestation };
+    }
+    if (platform === "android" && fitsWithin(token, 16384)) {
+        return { platform, token };
+    }
+    return undefined;
+}
 export class RevnixClient {
     constructor(config) {
         /** True while the current id is a generated anon id living on
@@ -110,6 +125,7 @@ export class RevnixClient {
         // client (dev fast-refresh re-running configure()) does not keep retrying
         // and prefetching alongside its successor.
         this.disposed = false;
+        this.integrityRequest = null;
         this.deferredDeepLinkClaimed = false;
         this.landingUrl = null;
         this.lastDeepLinkWrite = Promise.resolve();
@@ -186,12 +202,15 @@ export class RevnixClient {
         this.onDiagnostic = config.onDiagnostic;
         this.onDeferredDeepLink = config.onDeferredDeepLink;
         this.onAttribution = config.onAttribution;
+        this.deviceIntegrity = config.deviceIntegrity;
         this.readYourWritesDelaysMs =
             config.readYourWritesDelaysMs ?? [250, 500, 1000, 2000];
         this.customerIdPromise = this.loadCustomerId(config.customerId);
         // C7: retry any purchases that failed to register on a previous launch, so
         // a paying user never stays locked out because a POST didn't land.
         void this.retryPendingPurchases().catch((err) => this.diag("retryPendingPurchases", err));
+        if (config.advertisingId)
+            this.reportAdvertisingId(config.advertisingId);
         const store = getStoreAdapter();
         if (store) {
             this.stopStoreObserver = store.observe((tx) => void this.registerStoreTransaction(store, tx).catch((err) => this.diag("storeObserver", err)));
@@ -967,6 +986,7 @@ export class RevnixClient {
                 ...(attribution.campaign ? { campaign: attribution.campaign } : {}),
                 ...(attribution.adGroup ? { adGroup: attribution.adGroup } : {}),
                 ...(attribution.creative ? { creative: attribution.creative } : {}),
+                ...(await this.integrityFor(customerId)),
             });
             await this.storage.setItem(LAST_ATTRIBUTION_KEY, payload);
         })
@@ -1000,6 +1020,21 @@ export class RevnixClient {
         })
             .catch((err) => this.diag("setPushToken", err));
     }
+    reportAdvertisingId(source) {
+        void Promise.resolve()
+            .then(source)
+            .then(async (value) => {
+            const id = value || null;
+            const customerId = await this.customerIdPromise;
+            const payload = JSON.stringify({ customerId, id });
+            const last = await this.storage.getItem(LAST_AD_ID_KEY);
+            if (last === payload || (id === null && last === null))
+                return;
+            await this.setAttributes({ gps_adid: id });
+            await this.storage.setItem(LAST_AD_ID_KEY, payload);
+        })
+            .catch((err) => this.diag("advertisingId", err));
+    }
     /** REV-272: the two moments that happen ON a paywall, with the loop guard
      *  applied. `fromPaywallId` travels so the server can refuse to hand back
      *  the very paywall being dismissed — the backstop for a host that reports
@@ -1222,12 +1257,13 @@ export class RevnixClient {
         if (this.ephemeralAnonId)
             return;
         void this.customerIdPromise
-            .then((customerId) => this.request("POST", "/v1/installs", {
+            .then(async (customerId) => this.request("POST", "/v1/installs", {
             customerId,
             occurredAt: Date.now(),
             sdkVersion: SDK_VERSION,
             installReferrer: referrer.slice(0, 1024),
             ...this.installMetadata,
+            ...(await this.integrityFor(customerId)),
         }))
             .then((body) => {
             this.refreshAttribution();
@@ -1262,12 +1298,13 @@ export class RevnixClient {
         if (this.ephemeralAnonId)
             return Promise.resolve(undefined);
         return this.customerIdPromise
-            .then((customerId) => this.request("POST", "/v1/installs", {
+            .then(async (customerId) => this.request("POST", "/v1/installs", {
             customerId,
             occurredAt: Date.now(),
             sdkVersion: SDK_VERSION,
             attributionToken: token.slice(0, 2048),
             ...this.installMetadata,
+            ...(await this.integrityFor(customerId)),
         }))
             .then((body) => {
             this.refreshAttribution();
@@ -1600,12 +1637,15 @@ export class RevnixClient {
     /** Fire-and-forget install report (REV-093). Never blocks startup and
      *  never throws — the backend absorbs retries idempotently per id. */
     reportInstall(customerId) {
-        void this.request("POST", "/v1/installs", {
+        const occurredAt = Date.now();
+        void this.integrityFor(customerId)
+            .then((integrity) => this.request("POST", "/v1/installs", {
             customerId,
-            occurredAt: Date.now(),
+            occurredAt,
             sdkVersion: SDK_VERSION,
             ...this.installMetadata,
-        })
+            ...integrity,
+        }))
             .then((body) => {
             if (!this.ephemeralAnonId)
                 this.refreshAttribution();
@@ -1613,6 +1653,34 @@ export class RevnixClient {
         })
             .catch((err) => this.diag("reportInstall", err));
     }
+    integrityFor(customerId) {
+        const source = this.deviceIntegrity;
+        if (!source)
+            return Promise.resolve({});
+        if (this.integrityRequest?.customerId !== customerId) {
+            let timer;
+            const timeout = new Promise((_, reject) => {
+                timer = setTimeout(() => reject(new Error("device integrity timed out")), INTEGRITY_TIMEOUT_MS);
+            });
+            const body = Promise.race([
+                Promise.resolve().then(() => source(customerId)),
+                timeout,
+            ])
+                .then((evidence) => {
+                const integrity = wellFormedIntegrity(evidence);
+                if (!integrity)
+                    throw new Error("device integrity unavailable");
+                return { integrity };
+            })
+                .catch((err) => {
+                this.diag("deviceIntegrity", err);
+                return {};
+            })
+                .finally(() => clearTimeout(timer));
+            this.integrityRequest = { customerId, body };
+        }
+        return this.integrityRequest.body;
+    }
     /** REV-268: assemble and encode the device facts once. Runtime-detected
      *  facts first, the app's `device` over them, then the three the SDK owns.
      *  `installedAt` is the first launch this storage ever saw — written on

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,14 +17,14 @@
 // 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 { DESIGN_CANVAS, hasCloseAction, } from "../blocks/types.js";
+import { resolveTags, timerText } from "../blocks/tags.js";
+import { canvasMetrics, effectiveStyle, isVisible, packageContext, selectedPackageId, toggleSelection, } from "../blocks/selection.js";
+import { DESIGN_CANVAS, hasCloseAction, onboardingScreen, stepScreen, } from "../blocks/types.js";
 /** CSS angle (0 = up, 90 = right) → RN gradient start/end points. */
 function angleToPoints(angle) {
     const rad = (angle * Math.PI) / 180;
@@ -240,7 +240,7 @@ function FallbackClose({ doc, onPress, safeAreaTop, }) {
 /** Text blocks always render inside a View: a style may carry both typography
  *  and box properties (a round chip is a 34pt circle with a centered glyph),
  *  and RN cannot centre a glyph inside <Text> the way flexbox does. */
-function BlockText({ text, style, ctx, inherited, onPress, }) {
+function BlockText({ text, style, ctx, inherited, onPress, pressLabel, }) {
     const styleCtx = { ...ctx.style, fontSize: inherited.fontSize };
     // The block's own typography is folded into the inherited set first, so
     // em letter-spacing and unitless line-height resolve against whichever font
@@ -255,16 +255,73 @@ function BlockText({ text, style, ctx, inherited, onPress, }) {
     // wrapping a styled View would leave a pinned chip resolving its offsets
     // against a zero-sized parent.
     if (onPress) {
-        return (React.createElement(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 8, onPress: onPress, style: toViewStyle(style, styleCtx) }, body));
+        return (React.createElement(Pressable, { accessibilityRole: "button", accessibilityLabel: pressLabel, hitSlop: 8, onPress: onPress, style: toViewStyle(style, styleCtx) }, body));
     }
     return React.createElement(View, { style: toViewStyle(style, styleCtx) }, body);
 }
-/** 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. */
-function closePress(block, ctx) {
-    return block.action === "close" && ctx.onClose ? ctx.onClose : undefined;
+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(Dots, { count: pages.length, active: page, doc: doc, style: { bottom: 8 } })) : null));
 }
+function Dots({ count, active, doc, style, }) {
+    return (React.createElement(View, { pointerEvents: "none", style: [
+            {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                flexDirection: "row",
+                justifyContent: "center",
+                gap: 6,
+            },
+            style,
+        ] }, Array.from({ length: count }, (_, i) => (React.createElement(View, { key: i, style: {
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: i === active ? doc.accent : withAlpha(doc.textColor, 0.3),
+        } })))));
+}
+function actionPress(block, ctx) {
+    return block.action === "close" ? ctx.onClose : ctx.navigate(block.action);
+}
+const ACTION_LABEL = {
+    close: "Close",
+    next: "Next",
+    back: "Back",
+};
 /** Typography that is NOT inherited (decoration) — everything else already
  *  arrives through the inherited set. */
 function textOnly(s, ctx) {
@@ -363,6 +420,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.)
@@ -384,10 +446,28 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
     const size = text.fontSize;
     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";
+            return (React.createElement(BlockText, { text: resolveTags(block.text, pkg, ctx.packages), style: style, ctx: ctx, inherited: inherited, onPress: actionPress(block, ctx), pressLabel: block.action === "close" ? "Close" : undefined }));
+        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.
@@ -397,22 +477,20 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                     s.aspectRatio !== undefined ||
                     (s.top !== undefined && s.bottom !== undefined) ||
                     s.flex !== undefined);
-            // 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 ImageBox = closeImage ? Pressable : View;
-            return (React.createElement(ImageBox, { accessibilityRole: closeImage ? "button" : undefined, accessibilityLabel: closeImage ? "Close" : undefined, hitSlop: closeImage ? 8 : undefined, onPress: closeImage, style: [
+            const action = block.type === "image" ? block.action : undefined;
+            const imagePress = actionPress({ action }, ctx);
+            const ImageBox = imagePress ? Pressable : View;
+            return (React.createElement(ImageBox, { accessibilityRole: imagePress ? "button" : undefined, accessibilityLabel: imagePress && action ? ACTION_LABEL[action] : undefined, hitSlop: imagePress ? 8 : undefined, onPress: imagePress, style: [
                     sized ? null : { height: 160 },
                     { borderRadius: round ? 9999 : sized ? 0 : 16, overflow: "hidden", flexShrink: 0 },
                     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] },
@@ -443,12 +521,13 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // A button the design marks as the close dismisses instead of buying,
             // and takes no accent fill: the CTA must stay the one accented thing on
             // the screen, or a "Not now" competes with "Subscribe" for the eye.
-            const close = closePress(block, ctx);
+            const close = block.action === "close" ? ctx.onClose : undefined;
+            const navigates = block.action === "next" || block.action === "back";
             // A purchase in flight: the button keeps its box and fill, loses its
             // label to a spinner in the ink colour, and ignores taps. A close
             // button is never blocked — the user can always leave.
-            const busy = !close && ctx.loading;
-            return (React.createElement(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: busy, busy }, disabled: busy, onPress: close ?? ctx.onPurchase, style: ({ pressed }) => [
+            const busy = !close && !navigates && ctx.loading;
+            return (React.createElement(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: busy, busy }, disabled: busy, onPress: navigates ? actionPress(block, ctx) : (close ?? ctx.onPurchase), style: ({ pressed }) => [
                     {
                         backgroundColor: close ? "transparent" : doc.accent,
                         borderRadius: 12,
@@ -521,20 +600,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 +660,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 +671,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 +683,14 @@ 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);
+    const [screenIndex, setScreenIndex] = React.useState(0);
+    const [screenDoc, setScreenDoc] = React.useState(props.doc);
+    if (screenDoc !== props.doc) {
+        setScreenDoc(props.doc);
+        setScreenIndex(0);
+    }
+    const screen = onboardingScreen(doc, screenIndex);
     // 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);
@@ -633,21 +726,26 @@ export function RevnixBlockPaywall(props) {
         onTerms: props.onTerms,
         onPrivacy: props.onPrivacy,
         onClose: props.onClose,
+        navigate: (action) => {
+            const to = stepScreen(doc, screenIndex, action);
+            return to === undefined ? undefined : () => setScreenIndex(to);
+        },
         footer: props.footer,
         heroImageUrl: props.heroImageUrl,
         gradient: props.gradient,
         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 })));
+    const children = screen.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
     // none. Rendered as a sibling of the tree — outside the canvas scale — so
     // it keeps its tap size and its distance from the screen edge whatever the
     // device width does to the design.
     const safeAreaTop = props.safeAreaTop ??
         (Platform.OS === "android" ? (StatusBar.currentHeight ?? 0) : 0);
-    const fallbackClose = props.onClose && !hasCloseAction(doc.blocks) ? (React.createElement(FallbackClose, { doc: doc, onPress: props.onClose, safeAreaTop: safeAreaTop })) : null;
+    const fallbackClose = props.onClose && !hasCloseAction(screen.blocks) ? (React.createElement(FallbackClose, { doc: doc, onPress: props.onClose, safeAreaTop: safeAreaTop })) : null;
     const [width, setWidth] = React.useState(null);
     const [viewportHeight, setViewportHeight] = React.useState(null);
     if (doc.layout === "canvas") {
@@ -668,7 +766,7 @@ export function RevnixBlockPaywall(props) {
         const canvasHeight = metrics?.scaledHeight ?? DESIGN_CANVAS.height;
         const left = metrics?.left ?? 0;
         return (React.createElement(ScreenBackground, { doc: doc, gradient: props.gradient, blur: props.blur, onDiagnostic: props.onDiagnostic, style: [{ flex: 1 }, props.style] },
-            React.createElement(ScrollView, { contentContainerStyle: { height: canvasHeight }, 
+            React.createElement(ScrollView, { key: screenIndex, contentContainerStyle: { height: canvasHeight }, 
                 // A designed screen never shows a scrollbar — the web preview has
                 // none, and in an RTL app the indicator lands on the left edge of
                 // the artwork. When nothing overflows, scrolling is off entirely so
@@ -692,15 +790,18 @@ export function RevnixBlockPaywall(props) {
                                 { translateY: -((canvasHeight / scale) * (1 - scale)) / 2 },
                                 { scale },
                             ],
-                        } }, children))),
+                        } },
+                        children,
+                        screen.dots ? (React.createElement(Dots, { count: screen.dots.count, active: screen.dots.active, doc: doc, style: { top: 20, zIndex: 50 } })) : null))),
             fallbackClose));
     }
     return (React.createElement(ScreenBackground, { doc: doc, gradient: props.gradient, blur: props.blur, onDiagnostic: props.onDiagnostic, style: [{ flex: 1 }, props.style] },
-        React.createElement(ScrollView, { contentContainerStyle: {
+        React.createElement(ScrollView, { key: screenIndex, contentContainerStyle: {
                 gap: 12,
                 paddingHorizontal: 20,
                 paddingTop: 18,
                 paddingBottom: 30,
             }, showsVerticalScrollIndicator: false, alwaysBounceVertical: false, overScrollMode: "never" }, children),
+        screen.dots ? (React.createElement(Dots, { count: screen.dots.count, active: screen.dots.active, doc: doc, style: { top: 20 + safeAreaTop, zIndex: 50 } })) : null,
         fallbackClose));
 }

package/dist/esm/ui/RevnixPaywall.js

@@ -38,7 +38,16 @@ function asBlockDoc(value) {
         typeof doc.textColor === "string" &&
         typeof doc.accent === "string" &&
         typeof doc.accentInk === "string"
-        ? doc
+        ? {
+            ...doc,
+            ...(doc.screens !== undefined
+                ? {
+                    screens: Array.isArray(doc.screens)
+                        ? doc.screens.filter((s) => Array.isArray(s) && s.length > 0)
+                        : [],
+                }
+                : {}),
+        }
         : null;
 }
 export const DEFAULT_PAYWALL_THEME = {
@@ -251,7 +260,7 @@ export function RevnixPaywall(props) {
     // 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);
+    const blocks = React.useMemo(() => asBlockDoc(config.blocks), [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

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.6.0";
+export const SDK_VERSION = "1.8.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);