react-native-revnix 1.4.0

package/dist/device.d.ts

@@ -0,0 +1,29 @@
+import type { DeviceFacts } from "./types.js";
+/** The header the server reads. Keep in sync with
+ *  convex/lib/deviceAttributes.ts DEVICE_HEADER. */
+export declare const DEVICE_HEADER = "X-Revnix-Device";
+/** Storage key for the first-launch timestamp. */
+export declare const INSTALLED_AT_KEY = "revnix.installedAt";
+/** What goes on the wire: the app-supplied facts plus the three the SDK owns. */
+export interface DevicePayload extends DeviceFacts {
+    sdkVersion: string;
+    installedAt?: number;
+    firstOpen?: boolean;
+}
+/** The facts this runtime can report about itself without help. Browser
+ *  only in practice — under Node and React Native `navigator` is absent or
+ *  says nothing useful, and those callers pass `device` in configure(). */
+export declare function detectDeviceFacts(): DeviceFacts;
+/** Best-effort OS version from a browser UA string; undefined when the UA
+ *  gives nothing recognizable. Only the major desktop/mobile families —
+ *  this is a targeting hint, not a fingerprinting library. */
+export declare function osVersionFromUserAgent(ua: string): string | undefined;
+/** Drop undefined/empty fields so the encoded header carries only what is
+ *  known — the server would drop them anyway, but bytes on every resolve
+ *  are bytes on every resolve. */
+export declare function compactPayload(payload: DevicePayload): Record<string, unknown>;
+/** base64url of the UTF-8 JSON payload. Hand-rolled rather than
+ *  btoa/TextEncoder: neither is guaranteed on every React Native runtime
+ *  this SDK supports, and a missing global here would fail every paywall
+ *  resolve on that platform for the sake of one header. */
+export declare function encodeDeviceHeader(payload: Record<string, unknown>): string;

package/dist/device.js

@@ -0,0 +1,137 @@
+"use strict";
+// REV-268: the device attribute contract, SDK side. Every SDK sends the same
+// twelve facts about the device on each placement resolve, in the
+// X-Revnix-Device header, and the server stores them as reserved `device.*`
+// customer attributes — the facts a targeting rule ("US only", "app version
+// at least 3", "first open") evaluates against on the very request that
+// serves the paywall.
+//
+// This SDK runs in a browser, in React Native, and under Node, so it cannot
+// read most of the facts itself the way the native SDKs can: there is no
+// StoreKit storefront in a browser and no `navigator` in Node. The split is
+//   - what the runtime can tell us safely (detectDeviceFacts): platform,
+//     locale, and — in a browser — the OS version from the user agent;
+//   - what the app must tell us (RevnixConfig.device): app version, model,
+//     storefront, currency, sandbox — a React Native app has
+//     react-native-device-info in hand and this SDK should not depend on it;
+//   - what the SDK owns outright: sdkVersion, installedAt, firstOpen.
+// Anything unknown is simply omitted; the server treats every field as
+// optional and normalizes what it gets (lib/deviceAttributes.ts in
+// revnix-app), so nothing here needs to be exact — only honest.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSTALLED_AT_KEY = exports.DEVICE_HEADER = void 0;
+exports.detectDeviceFacts = detectDeviceFacts;
+exports.osVersionFromUserAgent = osVersionFromUserAgent;
+exports.compactPayload = compactPayload;
+exports.encodeDeviceHeader = encodeDeviceHeader;
+/** The header the server reads. Keep in sync with
+ *  convex/lib/deviceAttributes.ts DEVICE_HEADER. */
+exports.DEVICE_HEADER = "X-Revnix-Device";
+/** Storage key for the first-launch timestamp. */
+exports.INSTALLED_AT_KEY = "revnix.installedAt";
+/** The facts this runtime can report about itself without help. Browser
+ *  only in practice — under Node and React Native `navigator` is absent or
+ *  says nothing useful, and those callers pass `device` in configure(). */
+function detectDeviceFacts() {
+    const nav = globalThis.navigator;
+    const facts = {};
+    if (!nav)
+        return facts;
+    // A React Native runtime also exposes `navigator` (product: "ReactNative")
+    // but its language/userAgent are not the device's — leave those to the app.
+    if (nav.product === "ReactNative")
+        return facts;
+    if (typeof nav.userAgent === "string" && nav.userAgent.length > 0) {
+        facts.platform = "web";
+        const os = osVersionFromUserAgent(nav.userAgent);
+        if (os !== undefined)
+            facts.osVersion = os;
+    }
+    if (typeof nav.language === "string" && nav.language.length > 0) {
+        facts.locale = nav.language;
+    }
+    return facts;
+}
+/** Best-effort OS version from a browser UA string; undefined when the UA
+ *  gives nothing recognizable. Only the major desktop/mobile families —
+ *  this is a targeting hint, not a fingerprinting library. */
+function osVersionFromUserAgent(ua) {
+    const ios = /(?:iPhone|iPad|CPU) OS (\d+(?:_\d+)*)/.exec(ua)?.[1];
+    if (ios !== undefined)
+        return ios.replace(/_/g, ".");
+    const android = /Android (\d+(?:\.\d+)*)/.exec(ua)?.[1];
+    if (android !== undefined)
+        return android;
+    const mac = /Mac OS X (\d+(?:[._]\d+)*)/.exec(ua)?.[1];
+    if (mac !== undefined)
+        return mac.replace(/_/g, ".");
+    const windows = /Windows NT (\d+(?:\.\d+)*)/.exec(ua)?.[1];
+    if (windows !== undefined)
+        return windows;
+    return undefined;
+}
+/** Drop undefined/empty fields so the encoded header carries only what is
+ *  known — the server would drop them anyway, but bytes on every resolve
+ *  are bytes on every resolve. */
+function compactPayload(payload) {
+    const out = {};
+    for (const [key, value] of Object.entries(payload)) {
+        if (value === undefined || value === null || value === "")
+            continue;
+        out[key] = value;
+    }
+    return out;
+}
+/** base64url of the UTF-8 JSON payload. Hand-rolled rather than
+ *  btoa/TextEncoder: neither is guaranteed on every React Native runtime
+ *  this SDK supports, and a missing global here would fail every paywall
+ *  resolve on that platform for the sake of one header. */
+function encodeDeviceHeader(payload) {
+    return base64url(utf8Bytes(JSON.stringify(payload)));
+}
+function utf8Bytes(text) {
+    const bytes = [];
+    for (let i = 0; i < text.length; i++) {
+        let code = text.charCodeAt(i);
+        // Surrogate pair → one code point.
+        if (code >= 0xd800 && code <= 0xdbff && i + 1 < text.length) {
+            const low = text.charCodeAt(i + 1);
+            if (low >= 0xdc00 && low <= 0xdfff) {
+                code = 0x10000 + ((code - 0xd800) << 10) + (low - 0xdc00);
+                i++;
+            }
+        }
+        if (code < 0x80) {
+            bytes.push(code);
+        }
+        else if (code < 0x800) {
+            bytes.push(0xc0 | (code >> 6), 0x80 | (code & 0x3f));
+        }
+        else if (code < 0x10000) {
+            bytes.push(0xe0 | (code >> 12), 0x80 | ((code >> 6) & 0x3f), 0x80 | (code & 0x3f));
+        }
+        else {
+            bytes.push(0xf0 | (code >> 18), 0x80 | ((code >> 12) & 0x3f), 0x80 | ((code >> 6) & 0x3f), 0x80 | (code & 0x3f));
+        }
+    }
+    return bytes;
+}
+const B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function base64url(bytes) {
+    let out = "";
+    for (let i = 0; i < bytes.length; i += 3) {
+        const a = bytes[i] ?? 0;
+        const b = i + 1 < bytes.length ? bytes[i + 1] : undefined;
+        const c = i + 2 < bytes.length ? bytes[i + 2] : undefined;
+        out += B64[a >> 2];
+        out += B64[((a & 0x03) << 4) | ((b ?? 0) >> 4)];
+        if (b === undefined)
+            break;
+        out += B64[((b & 0x0f) << 2) | ((c ?? 0) >> 6)];
+        if (c === undefined)
+            break;
+        out += B64[c & 0x3f];
+    }
+    // No padding: base64url as the server decodes it (it re-pads itself).
+    return out;
+}

package/dist/errors.d.ts

@@ -0,0 +1,39 @@
+export declare class RevnixError extends Error {
+    readonly status: number;
+    constructor(status: number, message: string);
+    /** Transient failures worth retrying (network, timeout, rate limit, 5xx).
+     *  4xx other than 429 are the caller's fault and won't fix themselves. */
+    get isRetryable(): boolean;
+}
+/** POST /v1/purchases returned 409: the store token belongs to another
+ *  customer and the app's transfer behavior is "block". Surface this to the
+ *  user as "this subscription is linked to a different account". */
+export declare class PurchaseBlockedError extends RevnixError {
+    constructor(message: string);
+}
+/** C7: the request didn't complete within the configured timeout (default
+ *  10s). `fetch` has no default timeout on React Native / browsers, so without
+ *  this a slow or dead backend would hang the app until the OS TCP timeout. */
+export declare class RevnixTimeoutError extends RevnixError {
+    constructor(message?: string);
+}
+/** C7: the request never reached the server (offline, DNS/TLS failure, captive
+ *  portal). Distinct from an HTTP error so callers can show an offline state
+ *  instead of treating it as a bug. */
+export declare class RevnixNetworkError extends RevnixError {
+    constructor(message?: string);
+}
+/** L4: the API returned 401/403 — the key is missing, revoked, or the wrong
+ *  kind (e.g. a secret key where a public key is required) — or the SDK
+ *  refused locally before the network for the same reason (identify()/alias()
+ *  on a publishable key). Retrying is pointless; the fix is reconfiguration,
+ *  so surface this to the developer. */
+export declare class RevnixAuthError extends RevnixError {
+    constructor(status: number, message: string);
+}
+/** C7: the API returned 429 (rate limited). `retryAfterMs` mirrors the
+ *  server's Retry-After header when present — back off at least that long. */
+export declare class RevnixRateLimitError extends RevnixError {
+    readonly retryAfterMs?: number;
+    constructor(message: string, retryAfterMs?: number);
+}

package/dist/errors.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RevnixRateLimitError = exports.RevnixAuthError = exports.RevnixNetworkError = exports.RevnixTimeoutError = exports.PurchaseBlockedError = exports.RevnixError = void 0;
+class RevnixError extends Error {
+    constructor(status, message) {
+        super(message);
+        this.name = "RevnixError";
+        this.status = status;
+    }
+    /** Transient failures worth retrying (network, timeout, rate limit, 5xx).
+     *  4xx other than 429 are the caller's fault and won't fix themselves. */
+    get isRetryable() {
+        return this.status === 0 || this.status === 429 || this.status >= 500;
+    }
+}
+exports.RevnixError = RevnixError;
+/** POST /v1/purchases returned 409: the store token belongs to another
+ *  customer and the app's transfer behavior is "block". Surface this to the
+ *  user as "this subscription is linked to a different account". */
+class PurchaseBlockedError extends RevnixError {
+    constructor(message) {
+        super(409, message);
+        this.name = "PurchaseBlockedError";
+    }
+}
+exports.PurchaseBlockedError = PurchaseBlockedError;
+/** C7: the request didn't complete within the configured timeout (default
+ *  10s). `fetch` has no default timeout on React Native / browsers, so without
+ *  this a slow or dead backend would hang the app until the OS TCP timeout. */
+class RevnixTimeoutError extends RevnixError {
+    constructor(message = "Revnix request timed out") {
+        super(0, message);
+        this.name = "RevnixTimeoutError";
+    }
+}
+exports.RevnixTimeoutError = RevnixTimeoutError;
+/** C7: the request never reached the server (offline, DNS/TLS failure, captive
+ *  portal). Distinct from an HTTP error so callers can show an offline state
+ *  instead of treating it as a bug. */
+class RevnixNetworkError extends RevnixError {
+    constructor(message = "Revnix request failed to reach the server") {
+        super(0, message);
+        this.name = "RevnixNetworkError";
+    }
+}
+exports.RevnixNetworkError = RevnixNetworkError;
+/** L4: the API returned 401/403 — the key is missing, revoked, or the wrong
+ *  kind (e.g. a secret key where a public key is required) — or the SDK
+ *  refused locally before the network for the same reason (identify()/alias()
+ *  on a publishable key). Retrying is pointless; the fix is reconfiguration,
+ *  so surface this to the developer. */
+class RevnixAuthError extends RevnixError {
+    constructor(status, message) {
+        super(status, message);
+        this.name = "RevnixAuthError";
+    }
+}
+exports.RevnixAuthError = RevnixAuthError;
+/** C7: the API returned 429 (rate limited). `retryAfterMs` mirrors the
+ *  server's Retry-After header when present — back off at least that long. */
+class RevnixRateLimitError extends RevnixError {
+    constructor(message, retryAfterMs) {
+        super(429, message);
+        this.name = "RevnixRateLimitError";
+        this.retryAfterMs = retryAfterMs;
+    }
+}
+exports.RevnixRateLimitError = RevnixRateLimitError;

package/dist/esm/blocks/background.js

@@ -0,0 +1,160 @@
+// The paywall screen background — the SDK half of the dashboard's model.
+//
+// A background is either the original CSS string (color or gradient) or a
+// layered spec: ground color/gradient, then a photo (fit, focal point,
+// opacity, blur), then a scrim. `backgroundLayers()` resolves either form to
+// one paint list, mirroring the dashboard renderer exactly — the same
+// function name, the same defaults, the same clamping — so a background can
+// never look different on device than in the builder for reasons of
+// interpretation. (Type parity with revnix-app/src/lib/paywall-blocks/
+// background.ts; keep the two in step.)
+const DEFAULT_GROUND = "#000000";
+/**
+ * The flat color a ground stands in for — what `@bg` resolves to, and what
+ * paints under a gradient this build cannot draw.
+ *
+ * It reads the LAST comma-separated layer, because in CSS the first-listed
+ * layer paints on TOP: taking the first color would answer with the
+ * translucent accent glow the library's Spotlight and Corner halo presets
+ * stack over their base, not with the base itself. Fully transparent stops are
+ * skipped for the same reason — a scrim that fades to `…00` says nothing about
+ * the ground under it.
+ *
+ * Returning the raw gradient here instead is what put this SDK and the
+ * dashboard out of step with the other five renderers, which have always
+ * collapsed it: `@bg` is fed to `color-mix()` (and, inside a gradient, to
+ * another gradient's stop list), and neither can take a gradient — so the raw
+ * form resolved to something invalid and painted NOTHING. Of the 250 shipped
+ * gallery presets only 7 have a gradient ground and none of those use `@bg`,
+ * so no design that ships today changes; what changes is a background a
+ * customer edits to a gradient, which used to silently drop every `@bg` tint
+ * on the screen.
+ */
+export function backgroundBaseColor(bg) {
+    const ground = typeof bg === "string" ? bg : bg?.color;
+    if (ground === undefined)
+        return DEFAULT_GROUND;
+    const layers = splitLayers(ground);
+    const bottom = layers.length > 0 ? layers[layers.length - 1] : ground;
+    const colors = bottom.match(/#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)/gi);
+    if (!colors)
+        return ground;
+    return colors.find((color) => !isFullyTransparent(color)) ?? colors[0];
+}
+/** Whether a color literal is fully transparent. Kept here rather than routed
+ *  through `color.ts`, which imports THIS module — only the two forms the
+ *  dashboard emits are recognized, and anything else counts as opaque, which
+ *  is the safe answer for picking a ground. */
+function isFullyTransparent(color) {
+    const s = color.trim();
+    if (s.startsWith("#")) {
+        const hex = s.slice(1);
+        if (hex.length === 8)
+            return parseInt(hex.slice(6), 16) === 0;
+        if (hex.length === 4)
+            return parseInt(hex.slice(3).repeat(2), 16) === 0;
+        return false;
+    }
+    const open = s.indexOf("(");
+    const close = s.indexOf(")");
+    if (open < 0 || close < 0)
+        return false;
+    const parts = s
+        .slice(open + 1, close)
+        .split(/[,/\s]+/)
+        .filter(Boolean);
+    return parts.length >= 4 && parseFloat(parts[3]) === 0;
+}
+/** Splits on top-level commas only, so the commas inside `rgba(...)` and
+ *  inside a gradient's argument list do not tear a layer in half. */
+function splitLayers(input) {
+    const out = [];
+    let depth = 0;
+    let current = "";
+    for (const ch of input) {
+        if (ch === "(")
+            depth++;
+        else if (ch === ")" && depth > 0)
+            depth--;
+        if (ch === "," && depth === 0) {
+            out.push(current.trim());
+            current = "";
+            continue;
+        }
+        current += ch;
+    }
+    const tail = current.trim();
+    if (tail)
+        out.push(tail);
+    return out;
+}
+function pct(value, fallback) {
+    if (value === undefined || !Number.isFinite(value))
+        return fallback;
+    return Math.min(1, Math.max(0, value / 100));
+}
+function coord(value) {
+    if (value === undefined || !Number.isFinite(value))
+        return 50;
+    return Math.min(100, Math.max(0, value));
+}
+/** The paint list, bottom layer first. Layers that would draw nothing (no
+ *  url, zero opacity) are dropped, so a legacy string resolves to exactly
+ *  one ground layer. */
+export function backgroundLayers(bg, 
+/** Resolves palette tokens in the ground and overlay fills. */
+resolve = (v) => v) {
+    const spec = bg === undefined ? {} : typeof bg === "string" ? { color: bg } : bg;
+    const layers = {};
+    if (spec.color)
+        layers.ground = resolve(spec.color);
+    if (spec.image?.url) {
+        const opacity = pct(spec.image.opacity, 1);
+        if (opacity > 0) {
+            layers.image = {
+                url: spec.image.url,
+                fit: spec.image.fit === "contain" ? "contain" : "cover",
+                focalX: coord(spec.image.focalX),
+                focalY: coord(spec.image.focalY),
+                opacity,
+                ...(spec.image.blur ? { blur: spec.image.blur } : {}),
+            };
+        }
+    }
+    if (spec.overlay?.fill) {
+        const opacity = pct(spec.overlay.opacity, 1);
+        if (opacity > 0) {
+            layers.overlay = { fill: resolve(spec.overlay.fill), opacity };
+        }
+    }
+    return layers;
+}
+/**
+ * Cover-fit geometry with a focal point — the SDK's stand-in for CSS
+ * `object-position`, which React Native's <Image> lacks. Given the box and
+ * the source dimensions it returns the drawn size and the offset that puts
+ * the focal point as close to the box's matching anchor as the image edges
+ * allow (exactly CSS's `object-position: X% Y%` rule: the X% point of the
+ * image aligns to the X% point of the box, clamped so no edge shows).
+ */
+export function coverPlacement(box, source, focalX, focalY) {
+    if (box.width <= 0 || box.height <= 0 || source.width <= 0 || source.height <= 0) {
+        return { width: box.width, height: box.height, left: 0, top: 0 };
+    }
+    const scale = Math.max(box.width / source.width, box.height / source.height);
+    const width = source.width * scale;
+    const height = source.height * scale;
+    const place = (boxLen, drawnLen, pctPoint) => {
+        const offset = (boxLen - drawnLen) * (pctPoint / 100);
+        // Clamp: never pull an image edge inside the box. `|| 0` normalises the
+        // -0 that falls out of the arithmetic at the edges — harmless to RN, but
+        // it makes the returned geometry compare cleanly.
+        return Math.min(0, Math.max(boxLen - drawnLen, offset)) || 0;
+    };
+    return {
+        width,
+        height,
+        left: place(box.width, width, focalX),
+        top: place(box.height, height, focalY),
+    };
+}