react-native-revnix 1.7.0 → 1.9.0

package/dist/esm/ui/RevnixBlockPaywall.js

@@ -24,7 +24,7 @@ import { backgroundLayers, coverPlacement, } from "../blocks/background.js";
 import { detectLocale, linkLabels, localizeBlockDoc } from "../blocks/locale.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";
+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,7 +255,7 @@ 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);
 }
@@ -294,27 +294,34 @@ function Carousel({ pages, autoAdvance, doc, }) {
                     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: {
+        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",
-                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));
+            },
+            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),
+        } })))));
 }
-/** 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 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) {
@@ -439,7 +446,7 @@ 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) }));
+            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": {
@@ -470,12 +477,10 @@ 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 = 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: [
+            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,
@@ -516,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,
@@ -678,6 +684,13 @@ export function RevnixBlockPaywall(props) {
     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);
@@ -713,6 +726,10 @@ 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,
@@ -721,14 +738,14 @@ export function RevnixBlockPaywall(props) {
         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") {
@@ -749,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
@@ -773,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.7.0";
+export const SDK_VERSION = "1.9.0";

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { RevnixClient } from "./client.js";
 import { setLocale } from "./blocks/locale.js";
 import type { RevnixConfig } from "./types.js";
 export { RevnixClient } from "./client.js";
-export { PurchaseBlockedError, RevnixAuthError, RevnixError, RevnixNetworkError, RevnixRateLimitError, RevnixTimeoutError, } from "./errors.js";
+export { PurchaseAlreadyOwnedError, PurchaseBlockedError, RevnixAuthError, RevnixError, RevnixNetworkError, RevnixRateLimitError, RevnixTimeoutError, } from "./errors.js";
 export { purchaseInputFromIap, type IapPurchase } from "./iap.js";
 export { setStoreAdapter, type StoreAdapter, type StoreTransaction, } from "./store.js";
 export { memoryStorage, generateAnonymousId } from "./storage.js";

package/dist/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Revnix = exports.PREVIEW_PLACEMENT_KEY = exports.IMPLICIT_PLACEMENTS = exports.HOST_CALL_PLACEMENT = exports.DEFAULT_SESSION_TIMEOUT_MS = exports.browserLifecycle = exports.encodeDeviceHeader = exports.DEVICE_HEADER = exports.SDK_VERSION = exports.generateAnonymousId = exports.memoryStorage = exports.setStoreAdapter = exports.purchaseInputFromIap = exports.RevnixTimeoutError = exports.RevnixRateLimitError = exports.RevnixNetworkError = exports.RevnixError = exports.RevnixAuthError = exports.PurchaseBlockedError = exports.RevnixClient = void 0;
+exports.Revnix = exports.PREVIEW_PLACEMENT_KEY = exports.IMPLICIT_PLACEMENTS = exports.HOST_CALL_PLACEMENT = exports.DEFAULT_SESSION_TIMEOUT_MS = exports.browserLifecycle = exports.encodeDeviceHeader = exports.DEVICE_HEADER = exports.SDK_VERSION = exports.generateAnonymousId = exports.memoryStorage = exports.setStoreAdapter = exports.purchaseInputFromIap = exports.RevnixTimeoutError = exports.RevnixRateLimitError = exports.RevnixNetworkError = exports.RevnixError = exports.RevnixAuthError = exports.PurchaseBlockedError = exports.PurchaseAlreadyOwnedError = exports.RevnixClient = void 0;
 const client_js_1 = require("./client.js");
 const locale_js_1 = require("./blocks/locale.js");
 var client_js_2 = require("./client.js");
 Object.defineProperty(exports, "RevnixClient", { enumerable: true, get: function () { return client_js_2.RevnixClient; } });
 var errors_js_1 = require("./errors.js");
+Object.defineProperty(exports, "PurchaseAlreadyOwnedError", { enumerable: true, get: function () { return errors_js_1.PurchaseAlreadyOwnedError; } });
 Object.defineProperty(exports, "PurchaseBlockedError", { enumerable: true, get: function () { return errors_js_1.PurchaseBlockedError; } });
 Object.defineProperty(exports, "RevnixAuthError", { enumerable: true, get: function () { return errors_js_1.RevnixAuthError; } });
 Object.defineProperty(exports, "RevnixError", { enumerable: true, get: function () { return errors_js_1.RevnixError; } });

package/dist/store/index.js

@@ -9,7 +9,7 @@ exports.RevnixStore = native
     ? {
         purchase: (productId, { customerId }) => native.purchase(productId, customerId),
         restore: () => native.restore(),
-        finish: (transactionId) => native.finish(transactionId),
+        finish: (transactionId, consume) => native.finish(transactionId, consume === true),
         observe(onTransaction) {
             const sub = new react_native_1.NativeEventEmitter(react_native_1.NativeModules.RevnixStore).addListener("revnixStoreTransaction", (tx) => onTransaction(tx));
             return () => sub.remove();

package/dist/store.d.ts

@@ -12,6 +12,11 @@ export interface StoreTransaction {
     expiresAt?: number;
     /** Apple only: the StoreKit 2 JWS. */
     signedTransactionInfo?: string;
+    /** Google only: already acknowledged in Play. */
+    acknowledged?: boolean;
+    /** Google only: purchase() answered with an earlier purchase Play reported
+     *  as already owned, not a new charge. */
+    alreadyOwned?: boolean;
 }
 export interface StoreAdapter {
     /** Resolves null when the customer cancelled or the purchase is pending. */
@@ -19,7 +24,8 @@ export interface StoreAdapter {
         customerId: string;
     }): Promise<StoreTransaction | null>;
     restore(): Promise<StoreTransaction[]>;
-    finish(transactionId: string): Promise<void>;
+    /** `consume`: Google only, consume instead of acknowledge. */
+    finish(transactionId: string, consume?: boolean): Promise<void>;
     /** Transactions arriving outside purchase(): renewals, other devices, Ask
      *  to Buy, refunds. Returns an unsubscribe. */
     observe(onTransaction: (tx: StoreTransaction) => void): () => void;

package/dist/types.d.ts

@@ -149,6 +149,9 @@ export interface RevnixConfig {
      *  read. A null answer deletes a previously stored `gps_adid`; a
      *  rejection changes nothing and reports `op: "advertisingId"`. */
     advertisingId?: () => Promise<string | null | undefined>;
+    /** Google Play product ids sold as consumables. A registered purchase of
+     *  one is consumed instead of acknowledged so it can be bought again. */
+    consumableProductIds?: string[];
 }
 /** Device integrity evidence for `POST /v1/installs` and `/v1/attribution`.
  *  iOS: an App Attest key id and its attestation (standard base64) over

package/dist/ui/RevnixBlockPaywall.js

@@ -276,7 +276,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
@@ -291,7 +291,7 @@ 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(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 8, onPress: onPress, style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body));
+        return (React.createElement(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: pressLabel, hitSlop: 8, onPress: onPress, style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body));
     }
     return React.createElement(react_native_1.View, { style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body);
 }
@@ -330,27 +330,34 @@ function Carousel({ pages, autoAdvance, doc, }) {
                     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: {
+        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(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));
+            },
+            style,
+        ] }, Array.from({ length: count }, (_, i) => (React.createElement(react_native_1.View, { key: i, style: {
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: i === active ? doc.accent : (0, color_js_1.withAlpha)(doc.textColor, 0.3),
+        } })))));
 }
-/** 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 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) {
@@ -475,7 +482,7 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
     const size = text.fontSize;
     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) }));
+            return (React.createElement(BlockText, { text: (0, tags_js_1.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": {
@@ -506,12 +513,10 @@ 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 = 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: [
+            const action = block.type === "image" ? block.action : undefined;
+            const imagePress = actionPress({ action }, ctx);
+            const ImageBox = imagePress ? react_native_1.Pressable : react_native_1.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,
@@ -552,12 +557,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(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: { disabled: busy, busy }, disabled: busy, onPress: close ?? ctx.onPurchase, style: ({ pressed }) => [
+            const busy = !close && !navigates && ctx.loading;
+            return (React.createElement(react_native_1.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,
@@ -714,6 +720,13 @@ function RevnixBlockPaywall(props) {
     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);
+    const [screenIndex, setScreenIndex] = React.useState(0);
+    const [screenDoc, setScreenDoc] = React.useState(props.doc);
+    if (screenDoc !== props.doc) {
+        setScreenDoc(props.doc);
+        setScreenIndex(0);
+    }
+    const screen = (0, types_js_1.onboardingScreen)(doc, screenIndex);
     // 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);
@@ -749,6 +762,10 @@ function RevnixBlockPaywall(props) {
         onTerms: props.onTerms,
         onPrivacy: props.onPrivacy,
         onClose: props.onClose,
+        navigate: (action) => {
+            const to = (0, types_js_1.stepScreen)(doc, screenIndex, action);
+            return to === undefined ? undefined : () => setScreenIndex(to);
+        },
         footer: props.footer,
         heroImageUrl: props.heroImageUrl,
         gradient: props.gradient,
@@ -757,14 +774,14 @@ function RevnixBlockPaywall(props) {
         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 ??
         (react_native_1.Platform.OS === "android" ? (react_native_1.StatusBar.currentHeight ?? 0) : 0);
-    const fallbackClose = props.onClose && !(0, types_js_1.hasCloseAction)(doc.blocks) ? (React.createElement(FallbackClose, { doc: doc, onPress: props.onClose, safeAreaTop: safeAreaTop })) : null;
+    const fallbackClose = props.onClose && !(0, types_js_1.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") {
@@ -785,7 +802,7 @@ function RevnixBlockPaywall(props) {
         const canvasHeight = metrics?.scaledHeight ?? types_js_1.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(react_native_1.ScrollView, { contentContainerStyle: { height: canvasHeight }, 
+            React.createElement(react_native_1.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
@@ -809,15 +826,18 @@ 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(react_native_1.ScrollView, { contentContainerStyle: {
+        React.createElement(react_native_1.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/ui/RevnixPaywall.js

@@ -76,7 +76,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;
 }
 exports.DEFAULT_PAYWALL_THEME = {
@@ -289,7 +298,7 @@ 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/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.7.0";
+export declare const SDK_VERSION = "1.9.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.7.0";
+exports.SDK_VERSION = "1.9.0";

package/ios/RevnixStore.m

@@ -12,6 +12,7 @@ RCT_EXTERN_METHOD(restore:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 
 RCT_EXTERN_METHOD(finish:(NSString *)transactionId
+                  consume:(BOOL)consume
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 

package/ios/RevnixStore.swift

@@ -20,7 +20,7 @@ class RevnixStore: RCTEventEmitter {
   override func startObserving() {
     updates?.cancel()
     updates = Task { [weak self] in
-      for await update in Transaction.updates where update.unsafePayloadValue.revocationDate == nil {
+      for await update in Transaction.updates {
         self?.sendEvent(withName: "revnixStoreTransaction", body: RevnixStore.payload(update))
       }
     }
@@ -72,9 +72,10 @@ class RevnixStore: RCTEventEmitter {
     }
   }
 
-  @objc(finish:resolver:rejecter:)
+  @objc(finish:consume:resolver:rejecter:)
   func finish(
     _ transactionId: String,
+    consume _: Bool,
     resolver resolve: @escaping RCTPromiseResolveBlock,
     rejecter reject: @escaping RCTPromiseRejectBlock
   ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-revnix",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Revnix SDK for React, React Native & Next.js: purchase registration, entitlements, identity, and placements over the Revnix /v1 API.",
   "license": "MIT",
   "repository": {

package/src/blocks/locale.ts

@@ -193,6 +193,13 @@ export function localizeBlockDoc(
     ...doc,
     defaultLocale: chain[0],
     blocks: doc.blocks.map((b) => localizeBlock(b, lookup)),
+    ...(doc.screens
+      ? {
+          screens: doc.screens.map((screen) =>
+            screen.map((b) => localizeBlock(b, lookup))
+          ),
+        }
+      : {}),
   };
 }