react-native-revnix 1.4.0

package/dist/ui/index.d.ts

@@ -0,0 +1,7 @@
+export { RevnixPaywall, DEFAULT_PAYWALL_THEME, LIGHT_PAYWALL_THEME, type RevnixPaywallPackage, type RevnixPaywallProps, type RevnixPaywallTheme, } from "./RevnixPaywall.js";
+export { RevnixBlockPaywall, type RevnixBlockPaywallProps, type RevnixBlurComponent, type RevnixBlurProps, type RevnixGradientComponent, type RevnixGradientProps, } from "./RevnixBlockPaywall.js";
+export { DESIGN_CANVAS, type BlockStyle, type PaywallBlock, type PaywallBlockDoc, } from "../blocks/types.js";
+export { backgroundBaseColor, backgroundLayers, coverPlacement, type BackgroundFit, type BackgroundImage, type BackgroundLayers, type BackgroundOverlay, type PaywallBackground, type PaywallBackgroundSpec, } from "../blocks/background.js";
+export { detectLocale, linkLabels, localeChain, localizeBlockDoc, normalizeLocale, setLocale, } from "../blocks/locale.js";
+export { minorUnitsForCurrency, resolveTags } from "../blocks/tags.js";
+export type { FontFamilyMap, FontMapping } from "../blocks/style.js";

package/dist/ui/index.js

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

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "1.4.0";

package/dist/version.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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.4.0";

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "react-native-revnix",
+  "version": "1.4.0",
+  "description": "Revnix SDK for React, React Native & Next.js: purchase registration, entitlements, identity, and placements over the Revnix /v1 API.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Oth-tech/revnix-sdk.git"
+  },
+  "keywords": [
+    "revnix",
+    "react-native",
+    "react",
+    "nextjs",
+    "in-app-purchase",
+    "subscriptions",
+    "entitlements",
+    "storekit",
+    "play-billing"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./ui.d.ts",
+      "import": "./dist/esm/ui/index.js",
+      "require": "./ui.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "ui.js",
+    "ui.d.ts",
+    "!src/**/*.test.ts"
+  ],
+  "scripts": {
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc",
+    "build:esm": "tsc -p tsconfig.esm.json && node -e \"require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module' }))\"",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "prepack": "npm run clean && npm run build"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@types/react": "^19.1.0",
+    "jest": "^29.7.0",
+    "react": "^19.1.0",
+    "react-native": "^0.81.0",
+    "ts-jest": "^29.4.11",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "dependencies": {}
+}

package/src/blocks/background.ts

@@ -0,0 +1,232 @@
+// 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.)
+
+export type BackgroundFit = "cover" | "contain";
+
+export interface BackgroundImage {
+  /** An https URL the device can load — Convex storage or any CDN. */
+  url: string;
+  /** Default "cover". */
+  fit?: BackgroundFit;
+  /** Focal point in percent (0–100, 50/50 = centered): the part of the
+   *  photo that must survive a cover-crop. */
+  focalX?: number;
+  focalY?: number;
+  /** 0–100, default 100. */
+  opacity?: number;
+  /** Gaussian blur radius in px. */
+  blur?: number;
+}
+
+export interface BackgroundOverlay {
+  /** Any CSS color or gradient; palette tokens resolve as in block fills. */
+  fill: string;
+  /** 0–100, default 100. */
+  opacity?: number;
+}
+
+export interface PaywallBackgroundSpec {
+  /** Ground paint under the image — a solid color or a CSS gradient. */
+  color?: string;
+  image?: BackgroundImage;
+  overlay?: BackgroundOverlay;
+  /** Builder bookkeeping (library preset id); ignored on device. */
+  presetId?: string;
+  /** Builder bookkeeping ("reset to design default"); ignored on device. */
+  original?: PaywallBackground;
+}
+
+export type PaywallBackground = string | PaywallBackgroundSpec;
+
+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: PaywallBackground | undefined,
+): string {
+  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: string): boolean {
+  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: string): string[] {
+  const out: string[] = [];
+  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;
+}
+
+export interface ResolvedBackgroundImage {
+  url: string;
+  fit: BackgroundFit;
+  focalX: number;
+  focalY: number;
+  /** 0–1. */
+  opacity: number;
+  /** px; absent when no blur was asked for. */
+  blur?: number;
+}
+
+export interface ResolvedBackgroundOverlay {
+  fill: string;
+  /** 0–1. */
+  opacity: number;
+}
+
+export interface BackgroundLayers {
+  /** The ground fill (color or gradient string), or undefined for none. */
+  ground?: string;
+  image?: ResolvedBackgroundImage;
+  overlay?: ResolvedBackgroundOverlay;
+}
+
+function pct(value: number | undefined, fallback: number): number {
+  if (value === undefined || !Number.isFinite(value)) return fallback;
+  return Math.min(1, Math.max(0, value / 100));
+}
+
+function coord(value: number | undefined): number {
+  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: PaywallBackground | undefined,
+  /** Resolves palette tokens in the ground and overlay fills. */
+  resolve: (value: string) => string = (v) => v,
+): BackgroundLayers {
+  const spec: PaywallBackgroundSpec =
+    bg === undefined ? {} : typeof bg === "string" ? { color: bg } : bg;
+  const layers: BackgroundLayers = {};
+
+  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: { width: number; height: number },
+  source: { width: number; height: number },
+  focalX: number,
+  focalY: number,
+): { width: number; height: number; left: number; top: number } {
+  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: number, drawnLen: number, pctPoint: number) => {
+    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),
+  };
+}