react-native-revnix 1.4.0

package/dist/esm/blocks/style.js

@@ -0,0 +1,356 @@
+// BlockStyle → React Native styles.
+//
+// The dashboard renderer maps a BlockStyle onto CSS; this maps the same style
+// onto RN's subset. Where RN has no equivalent the property is DROPPED rather
+// than approximated badly, and the omissions are documented on BlockStyle so
+// a designer can see what will not survive the trip:
+//
+//   backdrop blur   RN has no backdrop-filter. The translucent `fill` a glass
+//                   card already carries reads as frosted on its own.
+//   filter          no equivalent; ignored.
+//   textWrap        no equivalent (RN breaks lines its own way); ignored.
+//   fillSize        RN paints `fill` as a flat colour, so a tiled wash has
+//                   no size to honour; ignored.
+//   clipPath        no equivalent; the shape renders as its uncut box.
+//   % translate     RN transforms are points, not percentages. A percentage
+//                   translate is ignored (a px one is applied), so a badge
+//                   centred by `left:50%` + `translate:"-50% 0"` sits a half
+//                   width to the right of where the web shows it.
+//
+// Two CSS units need converting rather than copying: `letterSpacing` is em in
+// the document and points in RN, and `lineHeight` is a unitless multiplier in
+// the document and points in RN. Both are resolved against the block's own
+// font size, falling back to the inherited size the caller passes in.
+import { flatColor, gradientFallbackColor, isGradient, parseGradient, resolveColor, withAlpha, } from "./color.js";
+const JUSTIFY = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between",
+};
+const ITEMS = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    baseline: "baseline",
+    stretch: "stretch",
+};
+/** The browser's default, which is what the dashboard preview inherits — a
+ *  block that sets no size of its own must come out the same size in both. */
+export const DEFAULT_FONT_SIZE = 16;
+/** The inheritable half of a block's style, layered over what it inherited. */
+export function inherit(base, s, ctx) {
+    if (!s)
+        return base;
+    const next = { ...base };
+    const color = resolveColor(s.textColor, ctx.doc);
+    if (color !== undefined)
+        next.color = color;
+    if (s.fontSize !== undefined)
+        next.fontSize = s.fontSize;
+    if (s.fontFamily !== undefined)
+        next.fontFamilyName = s.fontFamily;
+    if (s.fontWeight !== undefined) {
+        next.fontWeight = String(s.fontWeight);
+    }
+    if (s.fontStyle !== undefined)
+        next.fontStyle = s.fontStyle;
+    if (s.align !== undefined)
+        next.textAlign = s.align;
+    if (s.textTransform !== undefined)
+        next.textTransform = s.textTransform;
+    if (s.letterSpacing !== undefined)
+        next.letterSpacing = s.letterSpacing;
+    if (s.lineHeight !== undefined)
+        next.lineHeight = s.lineHeight;
+    return next;
+}
+/** Inherited typography as an RN style, with the em/multiplier units resolved
+ *  against the size that actually applies here, and the family resolved
+ *  against the weight in force. */
+export function inheritedTextStyle(t, ctx) {
+    const out = { color: t.color, fontSize: t.fontSize };
+    const family = resolveFontFamily(t.fontFamilyName, ctx, t.fontWeight);
+    if (family !== undefined)
+        out.fontFamily = family;
+    if (t.fontWeight !== undefined)
+        out.fontWeight = t.fontWeight;
+    if (t.fontStyle !== undefined)
+        out.fontStyle = t.fontStyle;
+    if (t.textAlign !== undefined)
+        out.textAlign = t.textAlign;
+    if (t.textTransform !== undefined)
+        out.textTransform = t.textTransform;
+    if (t.letterSpacing !== undefined) {
+        out.letterSpacing = t.letterSpacing * t.fontSize;
+    }
+    if (t.lineHeight !== undefined)
+        out.lineHeight = t.lineHeight * t.fontSize;
+    return out;
+}
+/** Border shorthand ("1.5px solid @text/12") → width + color. */
+function parseBorder(value, doc, onDiagnostic) {
+    const width = value.match(/(-?[\d.]+)px/);
+    // The color is whatever remains once the width and the style keyword go.
+    const color = value
+        .replace(/(-?[\d.]+)px/, "")
+        .replace(/\b(solid|dashed|dotted|none|hidden)\b/i, "")
+        .trim();
+    return {
+        width: width ? parseFloat(width[1]) : 1,
+        color: color ? flatColor(color, doc, onDiagnostic) : undefined,
+    };
+}
+function parseAspectRatio(value) {
+    if (typeof value === "number")
+        return value;
+    const ratio = value.match(/^\s*([\d.]+)\s*\/\s*([\d.]+)\s*$/);
+    if (ratio) {
+        const h = parseFloat(ratio[2]);
+        return h ? parseFloat(ratio[1]) / h : undefined;
+    }
+    const n = parseFloat(value);
+    return Number.isNaN(n) ? undefined : n;
+}
+/** A rough RN shadow for a CSS box-shadow. Only the presence and color of a
+ *  shadow survive — RN cannot express layered glows, so one soft shadow is
+ *  drawn rather than none (a card designed to lift should still lift). */
+function parseShadow(value, doc, onDiagnostic) {
+    const lengths = [...value.matchAll(/(-?[\d.]+)px/g)].map((m) => parseFloat(m[1]));
+    const [offsetX = 0, offsetY = 0, blur = 0] = lengths;
+    const colorMatch = value.match(/(rgba?\([^)]*\)|#[0-9a-fA-F]{3,8}|@[\w/]+)/);
+    const color = colorMatch ? flatColor(colorMatch[1], doc, onDiagnostic) : undefined;
+    return {
+        shadowColor: color ?? "#000000",
+        shadowOffset: { width: offsetX, height: offsetY },
+        shadowOpacity: color ? 1 : 0.25,
+        shadowRadius: blur / 2,
+        // Android has no per-shadow control; elevation is the only lever.
+        elevation: Math.round(Math.max(0, blur) / 4),
+    };
+}
+/** The layout/paint half of a BlockStyle — everything a <View> understands. */
+export function toViewStyle(s, ctx) {
+    if (!s)
+        return {};
+    const { doc } = ctx;
+    const out = {};
+    if (s.fill !== undefined) {
+        // A gradient fill reaches RN as an unparseable string and paints nothing,
+        // so it degrades to its ground color here — UNLESS the renderer is about to
+        // paint the real layers over this box, in which case the ground color would
+        // sit under them as an opaque backing and flatten every translucent stop.
+        const fill = resolveColor(s.fill, doc);
+        if (fill && isGradient(fill)) {
+            out.backgroundColor =
+                ctx.paintsGradients && parseGradient(fill).length > 0
+                    ? "transparent"
+                    : gradientFallbackColor(fill);
+        }
+        else {
+            out.backgroundColor = fill;
+        }
+    }
+    if (s.opacity !== undefined)
+        out.opacity = s.opacity / 100;
+    if (s.borderColor !== undefined || s.borderWidth !== undefined) {
+        out.borderWidth = s.borderWidth ?? 1;
+        // A gradient here reached RN as a color string it cannot parse; it is
+        // collapsed to the color it stands for so the stroke still draws.
+        out.borderColor = flatColor(s.borderColor, doc, ctx.onDiagnostic) ?? doc.textColor;
+    }
+    for (const [prop, side] of [
+        ["borderTop", "Top"],
+        ["borderRight", "Right"],
+        ["borderBottom", "Bottom"],
+        ["borderLeft", "Left"],
+    ]) {
+        const raw = s[prop];
+        if (raw === undefined)
+            continue;
+        const { width, color } = parseBorder(raw, doc, ctx.onDiagnostic);
+        out[`border${side}Width`] = width;
+        if (color)
+            out[`border${side}Color`] = color;
+    }
+    if (s.radius !== undefined)
+        out.borderRadius = s.radius;
+    if (s.padding !== undefined)
+        out.padding = s.padding;
+    if (s.paddingX !== undefined)
+        out.paddingHorizontal = s.paddingX;
+    if (s.paddingY !== undefined)
+        out.paddingVertical = s.paddingY;
+    if (s.paddingTop !== undefined)
+        out.paddingTop = s.paddingTop;
+    if (s.paddingRight !== undefined)
+        out.paddingRight = s.paddingRight;
+    if (s.paddingBottom !== undefined)
+        out.paddingBottom = s.paddingBottom;
+    if (s.paddingLeft !== undefined)
+        out.paddingLeft = s.paddingLeft;
+    if (s.margin !== undefined)
+        out.margin = s.margin;
+    if (s.marginTop !== undefined)
+        out.marginTop = s.marginTop;
+    if (s.marginRight !== undefined)
+        out.marginRight = s.marginRight;
+    if (s.marginBottom !== undefined)
+        out.marginBottom = s.marginBottom;
+    if (s.marginLeft !== undefined)
+        out.marginLeft = s.marginLeft;
+    if (s.gap !== undefined)
+        out.gap = s.gap;
+    if (s.height !== undefined)
+        out.height = s.height;
+    if (s.minHeight !== undefined)
+        out.minHeight = s.minHeight;
+    if (s.width !== undefined)
+        out.width = s.width;
+    if (s.maxWidth !== undefined)
+        out.maxWidth = s.maxWidth;
+    if (s.aspectRatio !== undefined) {
+        const ratio = parseAspectRatio(s.aspectRatio);
+        if (ratio !== undefined)
+            out.aspectRatio = ratio;
+    }
+    if (s.flex !== undefined)
+        out.flexGrow = s.flex;
+    if (s.shrink !== undefined)
+        out.flexShrink = s.shrink;
+    if (s.basis !== undefined)
+        out.flexBasis = s.basis;
+    if (s.wrap)
+        out.flexWrap = "wrap";
+    if (s.justify !== undefined)
+        out.justifyContent = JUSTIFY[s.justify];
+    if (s.items !== undefined)
+        out.alignItems = ITEMS[s.items];
+    if (s.selfAlign !== undefined)
+        out.alignSelf = ITEMS[s.selfAlign];
+    if (s.shadow !== undefined)
+        Object.assign(out, parseShadow(s.shadow, doc, ctx.onDiagnostic));
+    const transform = [];
+    if (s.rotate !== undefined)
+        transform.push({ rotate: `${s.rotate}deg` });
+    if (s.translate !== undefined) {
+        // Percentages have no RN equivalent and are dropped rather than guessed
+        // at; a px pair translates directly.
+        const [x, y] = s.translate.trim().split(/\s+/);
+        const px = (v) => {
+            if (!v)
+                return 0;
+            const n = Number(v.endsWith("px") ? v.slice(0, -2) : v);
+            return Number.isFinite(n) ? n : 0;
+        };
+        // A zero component is a no-op; leaving it out keeps the list to the
+        // moves the design actually makes.
+        if (x !== undefined && !x.endsWith("%") && px(x) !== 0) {
+            transform.push({ translateX: px(x) });
+        }
+        if (y !== undefined && !y.endsWith("%") && px(y) !== 0) {
+            transform.push({ translateY: px(y) });
+        }
+    }
+    if (transform.length)
+        out.transform = transform;
+    if (s.zIndex !== undefined)
+        out.zIndex = s.zIndex;
+    if (s.overflow !== undefined)
+        out.overflow = s.overflow;
+    // Stack placement: `inset` fills the parent, individual offsets pin edges.
+    // Both imply absolute positioning, which is inert outside a stack parent.
+    if (s.inset) {
+        out.position = "absolute";
+        out.top = 0;
+        out.right = 0;
+        out.bottom = 0;
+        out.left = 0;
+    }
+    else if (s.top !== undefined ||
+        s.right !== undefined ||
+        s.bottom !== undefined ||
+        s.left !== undefined) {
+        out.position = "absolute";
+        if (s.top !== undefined)
+            out.top = s.top;
+        if (s.right !== undefined)
+            out.right = s.right;
+        if (s.bottom !== undefined)
+            out.bottom = s.bottom;
+        if (s.left !== undefined)
+            out.left = s.left;
+    }
+    return out;
+}
+/** The typography half — everything a <Text> understands. */
+export function toTextStyle(s, ctx) {
+    if (!s)
+        return {};
+    const { doc } = ctx;
+    const out = {};
+    const fontSize = s.fontSize ?? ctx.fontSize;
+    if (s.textColor !== undefined)
+        out.color = flatColor(s.textColor, doc, ctx.onDiagnostic);
+    if (s.fontSize !== undefined)
+        out.fontSize = s.fontSize;
+    if (s.fontWeight !== undefined)
+        out.fontWeight = String(s.fontWeight);
+    if (s.fontFamily !== undefined) {
+        const family = resolveFontFamily(s.fontFamily, ctx);
+        if (family)
+            out.fontFamily = family;
+    }
+    if (s.fontStyle !== undefined)
+        out.fontStyle = s.fontStyle;
+    if (s.align !== undefined)
+        out.textAlign = s.align;
+    // em → points, against this block's own size.
+    if (s.letterSpacing !== undefined)
+        out.letterSpacing = s.letterSpacing * fontSize;
+    // Unitless multiplier → points.
+    if (s.lineHeight !== undefined)
+        out.lineHeight = s.lineHeight * fontSize;
+    if (s.textTransform !== undefined)
+        out.textTransform = s.textTransform;
+    if (s.decoration !== undefined && s.decoration !== "none")
+        out.textDecorationLine = s.decoration;
+    return out;
+}
+/**
+ * A design font renders only when the host app has registered it — RN cannot
+ * load a family by name at runtime. `fontFamilyMap` lets the app point a
+ * design's family at whatever it bundled (and drop the ones it did not), so an
+ * unregistered face falls back to the system font instead of, on Android,
+ * failing to render.
+ *
+ * The weight matters because RN picks a face by family NAME, not by
+ * `fontWeight`: asking for weight 800 of a family registered only at 400 gets
+ * a synthesised bold at best. Given a weight table, the nearest registered
+ * weight wins.
+ */
+export function resolveFontFamily(family, ctx, weight) {
+    if (!family)
+        return undefined;
+    const mapping = ctx.fontFamilyMap?.[family];
+    if (mapping === undefined)
+        return undefined;
+    if (typeof mapping === "string")
+        return mapping;
+    const want = Number(weight ?? 400);
+    const weights = Object.keys(mapping)
+        .map(Number)
+        .filter((w) => Number.isFinite(w))
+        .sort((a, b) => a - b);
+    if (weights.length === 0)
+        return undefined;
+    const target = Number.isFinite(want) ? want : 400;
+    const nearest = weights.reduce((best, w) => Math.abs(w - target) < Math.abs(best - target) ? w : best);
+    return mapping[nearest];
+}
+/** A `line` block is drawn from the current color at low alpha — the web
+ *  renderer uses `currentColor` with opacity, which RN has no notion of, so
+ *  the caller passes the color that is in force at that point in the tree. */
+export function hairlineColor(currentColor) {
+    return withAlpha(currentColor, 0.16);
+}

package/dist/esm/blocks/tags.js

@@ -0,0 +1,117 @@
+// Tag variables — the vocabulary a designed paywall's copy uses to talk about
+// the packages attached to it.
+//
+// A designed paywall must never hardcode a price: the merchant's price differs
+// from the design's sample, and the store charges a different amount (and
+// currency) in every territory. So any text or button in a block tree can
+// write `{price}` and have the live package fill it in.
+//
+// Mirrors revnix-app's src/lib/paywall-blocks/tags.ts. Tags that cannot be
+// answered from real package data are left in place, visible, rather than
+// approximated — a wrong price must never reach a customer silently.
+/** Renewal cycles, in months. Lifetime and one-time products have no cycle. */
+const MONTHS = {
+    weekly: 1 / 4.345,
+    monthly: 1,
+    two_months: 2,
+    three_months: 3,
+    six_months: 6,
+    annual: 12,
+    lifetime: undefined,
+    non_subscription: undefined,
+    consumable: undefined,
+};
+const PERIOD_WORD = {
+    weekly: "week",
+    monthly: "month",
+    two_months: "2 months",
+    three_months: "3 months",
+    six_months: "6 months",
+    annual: "year",
+    lifetime: "lifetime",
+};
+const PERIOD_SHORT = {
+    weekly: "wk",
+    monthly: "mo",
+    two_months: "2mo",
+    three_months: "3mo",
+    six_months: "6mo",
+    annual: "yr",
+    lifetime: "once",
+};
+/** Minor units per major unit. Not every currency is a hundredth: JPY and KRW
+ *  have no minor unit at all, so dividing by 100 would understate a price by
+ *  100×. Intl knows each currency's exponent — ask it rather than assume.
+ *
+ *  Exported because a host app usually holds the store's price in MAJOR units
+ *  and has to convert before filling in `RevnixPaywallPackage.amountMinor`;
+ *  hardcoding 100 there would reintroduce the same bug one layer up. */
+export function minorUnitsForCurrency(currency) {
+    try {
+        const digits = new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+        }).resolvedOptions().maximumFractionDigits;
+        return 10 ** (digits ?? 2);
+    }
+    catch {
+        return 100;
+    }
+}
+function money(amountMinor, currency) {
+    const per = minorUnitsForCurrency(currency);
+    const major = amountMinor / per;
+    try {
+        return new Intl.NumberFormat(undefined, {
+            style: "currency",
+            currency,
+            // A whole amount reads better without ".00"; a fractional one must keep
+            // its digits.
+            maximumFractionDigits: amountMinor % per === 0 ? 0 : undefined,
+        }).format(major);
+    }
+    catch {
+        // Hermes without full ICU, or an unknown currency code.
+        return `${major.toFixed(per === 1 ? 0 : 2)} ${currency}`;
+    }
+}
+function perMonthMinor(pkg) {
+    const months = pkg.period ? MONTHS[pkg.period] : undefined;
+    if (!months || pkg.amountMinor === undefined)
+        return undefined;
+    return pkg.amountMinor / months;
+}
+/** Fills a copy template from one package. `all` is the rest of the offering,
+ *  which {save_percent} needs to have something to compare against. */
+export function resolveTags(text, pkg, all = []) {
+    if (!pkg || !text.includes("{"))
+        return text;
+    return text.replace(/\{(\w+)\}/g, (raw, name) => {
+        switch (name) {
+            case "title":
+                return pkg.title;
+            case "price":
+                return pkg.priceLabel;
+            case "period":
+                return pkg.period ? (PERIOD_WORD[pkg.period] ?? raw) : raw;
+            case "period_short":
+                return pkg.period ? (PERIOD_SHORT[pkg.period] ?? raw) : raw;
+            case "price_per_month": {
+                const per = perMonthMinor(pkg);
+                return per !== undefined && pkg.currency
+                    ? money(Math.round(per), pkg.currency)
+                    : raw;
+            }
+            case "save_percent": {
+                const mine = perMonthMinor(pkg);
+                const dearest = Math.max(...all.map((p) => perMonthMinor(p) ?? 0), 0);
+                if (!mine || !dearest || dearest <= mine)
+                    return raw;
+                return `${Math.round((1 - mine / dearest) * 100)}%`;
+            }
+            default:
+                // Unknown tag: leave it visible rather than guess.
+                return raw;
+        }
+    });
+}

package/dist/esm/blocks/types.js

@@ -0,0 +1,40 @@
+// The paywall block model — a portable description of a designed paywall.
+//
+// A block paywall is a TREE of styled elements: the screen owns a background
+// and a list of blocks; every block carries its own style. The dashboard's
+// builder authors this tree and publishes it on the paywall config as
+// `blocks`, where it takes precedence over the classic `template` layouts.
+//
+// This file mirrors revnix-app's src/lib/paywall-blocks/types.ts one-for-one.
+// The two must stay in lockstep: the dashboard preview and this SDK renderer
+// are two interpreters of the SAME document, and a field only one side knows
+// is a design that ships looking different from the design that was approved.
+/** The device screen `canvas` designs are authored against. */
+export const DESIGN_CANVAS = { width: 393, height: 852 };
+/** Does this tree author a dismiss affordance that is CERTAIN to render?
+ *
+ *  The renderer draws its own close button only when this is false, so a
+ *  design written before close existed becomes dismissible without being
+ *  edited, and a design that DOES author a close chip never shows two. The
+ *  same predicate is implemented in every Revnix SDK — keep them identical.
+ *
+ *  Conditional containers are deliberately not searched: a `repeat` card
+ *  renders once per package (none, when the offering is empty) and a
+ *  `packageIndex` card is hidden when the offering does not reach that index,
+ *  so a close authored inside one MIGHT not appear. Counting it would
+ *  suppress the fallback and leave the customer with no way out — the exact
+ *  bug this feature exists to fix. Two close buttons is merely ugly, so the
+ *  tie breaks toward always having one. */
+export function hasCloseAction(blocks) {
+    return blocks.some((b) => 
+    // A close the design only draws in one selection state (`visibility`)
+    // must not suppress the fallback chip — the other state would have none.
+    b.visibility !== undefined
+        ? false
+        : b.type === "card"
+            ? b.repeat === undefined &&
+                b.packageIndex === undefined &&
+                hasCloseAction(b.children)
+            : (b.type === "text" || b.type === "image" || b.type === "button") &&
+                b.action === "close");
+}