react-native-revnix 1.4.0

package/dist/blocks/background.d.ts

@@ -0,0 +1,101 @@
+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;
+/**
+ * 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 declare function backgroundBaseColor(bg: PaywallBackground | undefined): string;
+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;
+}
+/** 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 declare function backgroundLayers(bg: PaywallBackground | undefined, 
+/** Resolves palette tokens in the ground and overlay fills. */
+resolve?: (value: string) => string): BackgroundLayers;
+/**
+ * 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 declare function coverPlacement(box: {
+    width: number;
+    height: number;
+}, source: {
+    width: number;
+    height: number;
+}, focalX: number, focalY: number): {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};

package/dist/blocks/background.js

@@ -0,0 +1,165 @@
+"use strict";
+// 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.)
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backgroundBaseColor = backgroundBaseColor;
+exports.backgroundLayers = backgroundLayers;
+exports.coverPlacement = coverPlacement;
+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.
+ */
+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. */
+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).
+ */
+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),
+    };
+}

package/dist/blocks/color.d.ts

@@ -0,0 +1,88 @@
+import type { PaywallBlockDoc } from "./types.js";
+/** Expands palette tokens in a color string and applies any `/pct` alpha. */
+export declare function resolveColor(value: string | undefined, doc: PaywallBlockDoc): string | undefined;
+/** Multiplies a color's alpha. Understands #rgb/#rgba/#rrggbb/#rrggbbaa and
+ *  rgb()/rgba(); anything else (a named color, a gradient) is returned as-is
+ *  rather than guessed at. */
+export declare function withAlpha(color: string, alpha: number): string;
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export declare function toRgb(color: string): Rgb | null;
+/** One parsed background layer, in the order CSS paints them (first =
+ *  topmost). A background may end in a plain color — the design's ground —
+ *  which is a layer like any other and must not be dropped. */
+export interface GradientLayer {
+    kind: "linear" | "radial" | "solid";
+    /** Degrees, CSS convention (0 = to top, 180 = to bottom). Linear only. */
+    angle: number;
+    colors: string[];
+    /** 0–1 positions, one per color, when the source stated them. */
+    locations?: number[];
+    /** Radial only: the `at X% Y%` centre, 0–1. Kept because it decides which
+     *  way the linear stand-in fades — a glow anchored to the top of the screen
+     *  must not end up washing the bottom. */
+    center?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Whether a paint string's BOTTOM layer is a repeating pattern.
+ *
+ * A `repeating-*` gradient is a TEXTURE, and the colors inside it are stripe
+ * colors rather than the surface's. React Native cannot draw one, and painting
+ * a color lifted out of its arguments across the whole box is a WRONG answer
+ * rather than a degraded one — the library's hairline grid is one color every
+ * 26px, and as a solid fill it is a slab. Such a fill paints nothing instead.
+ *
+ * The bottom layer decides, so a pattern stacked over a real ground
+ * (`repeating-…(…), #FBF3E4`) still falls back to that ground.
+ */
+export declare function isRepeatingPattern(value: string | undefined): boolean;
+/** True when the string is a CSS gradient rather than a plain color. */
+export declare function isGradient(value: string): boolean;
+/** Splits a CSS background into its gradient layers. Layers CSS paints last
+ *  (the base) come last in the returned array, matching source order. */
+export declare function parseGradient(value: string): GradientLayer[];
+/**
+ * A field that can only ever be ONE color — a border, text, an icon, a shadow.
+ *
+ * A gradient there has no native form (nor a CSS one: `border-color` takes no
+ * gradient, so the dashboard drops the declaration outright). Collapsing it to
+ * the color it stands for keeps the stroke or the glyph visible, which is
+ * nearer the design's intent than losing it — and, on React Native, avoids
+ * handing the platform a color string it cannot parse.
+ */
+export declare function flatColor(value: string | undefined, doc: PaywallBlockDoc, onDiagnostic?: (message: string) => void): string | undefined;
+/** The solid to paint when no gradient component is available: the base
+ *  layer's first stop, which is the design's ground color.
+ *
+ *  A value with no paintable layer at all — a `repeating-linear-gradient`, or
+ *  any other form this build does not read — falls through to the same colour
+ *  extraction the six SDKs share, so a box the design coloured still gets a
+ *  colour from the design rather than nothing. */
+export declare function gradientFallbackColor(value: string): string | undefined;
+/**
+ * The solid a surface paints UNDER a fill — or nothing.
+ *
+ * The solid exists for one reason: an app that passes no gradient component
+ * still gets a colour instead of a hole. It was painted unconditionally, and
+ * for an opaque fill that never showed, because the real gradient covered it.
+ *
+ * A scrim showed it. A scrim is a gradient that is transparent at one end ON
+ * PURPOSE — that is how a photo stays visible above the copy. Its first stop
+ * is the dark end, so the "fallback" under it was a near-black sheet across
+ * the whole box, and the gradient's transparent half revealed that sheet
+ * instead of the photograph behind it. Every photo background looked like a
+ * black screen on React Native, while the dashboard's CSS painted it fine.
+ *
+ * So: when the gradient will actually be drawn, nothing goes under it. The
+ * solid is only for the degraded case — no gradient renderer, or a fill this
+ * build cannot read as a gradient at all.
+ */
+export declare function surfaceSolid(resolved: string | undefined, canPaintGradient: boolean): string | undefined;
+export {};

package/dist/blocks/color.js

@@ -0,0 +1,329 @@
+"use strict";
+// Color handling for block paywalls.
+//
+// Two jobs the web renderer gets from CSS for free and React Native does not:
+//
+//  1. Palette TOKENS. Converted designs write `@accent`, `@text`, `@bg`,
+//     `@accentInk` (optionally with an alpha percentage: `@text/12`) so the
+//     four screen colors stay a single source of truth. The web renderer
+//     expands the percentage form with `color-mix()`; here we compute the
+//     rgba ourselves.
+//
+//  2. GRADIENTS. `background` is a CSS background string and may carry
+//     several gradient layers. React Native has no gradient primitive, so we
+//     parse the layers out: a host that supplies a gradient component renders
+//     them properly, and without one we fall back to the base layer's first
+//     color — a solid that keeps the screen on-palette instead of blank.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColor = resolveColor;
+exports.withAlpha = withAlpha;
+exports.toRgb = toRgb;
+exports.isRepeatingPattern = isRepeatingPattern;
+exports.isGradient = isGradient;
+exports.parseGradient = parseGradient;
+exports.flatColor = flatColor;
+exports.gradientFallbackColor = gradientFallbackColor;
+exports.surfaceSolid = surfaceSolid;
+const background_js_1 = require("./background.js");
+const TOKEN = /@(accentInk|accent|bg|text)(?:\/(\d{1,3}))?/g;
+/** Expands palette tokens in a color string and applies any `/pct` alpha. */
+function resolveColor(value, doc) {
+    if (value === undefined)
+        return undefined;
+    if (!value.includes("@"))
+        return value;
+    return value.replace(TOKEN, (_match, name, pct) => {
+        const base = name === "accentInk"
+            ? doc.accentInk
+            : name === "accent"
+                ? doc.accent
+                : name === "bg"
+                    ? (0, background_js_1.backgroundBaseColor)(doc.background)
+                    : doc.textColor;
+        return pct === undefined ? base : withAlpha(base, Number(pct) / 100);
+    });
+}
+/** Multiplies a color's alpha. Understands #rgb/#rgba/#rrggbb/#rrggbbaa and
+ *  rgb()/rgba(); anything else (a named color, a gradient) is returned as-is
+ *  rather than guessed at. */
+function withAlpha(color, alpha) {
+    const rgb = toRgb(color);
+    if (!rgb)
+        return color;
+    const a = Math.max(0, Math.min(1, rgb.a * alpha));
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${round(a)})`;
+}
+function round(n) {
+    return Math.round(n * 1000) / 1000;
+}
+function toRgb(color) {
+    const value = color.trim();
+    if (value.startsWith("#")) {
+        const hex = value.slice(1);
+        const expand = (c) => parseInt(c + c, 16);
+        if (!/^[0-9a-fA-F]+$/.test(hex))
+            return null;
+        if (hex.length === 3 || hex.length === 4) {
+            return {
+                r: expand(hex[0]),
+                g: expand(hex[1]),
+                b: expand(hex[2]),
+                a: hex.length === 4 ? expand(hex[3]) / 255 : 1,
+            };
+        }
+        if (hex.length === 6 || hex.length === 8) {
+            const byte = (i) => parseInt(hex.slice(i, i + 2), 16);
+            return {
+                r: byte(0),
+                g: byte(2),
+                b: byte(4),
+                a: hex.length === 8 ? byte(6) / 255 : 1,
+            };
+        }
+        return null;
+    }
+    const fn = value.match(/^rgba?\(([^)]+)\)$/i);
+    if (fn) {
+        const parts = fn[1].split(/[,/\s]+/).filter(Boolean).map(Number);
+        if (parts.length < 3 || parts.slice(0, 3).some(Number.isNaN))
+            return null;
+        return {
+            r: parts[0],
+            g: parts[1],
+            b: parts[2],
+            a: parts.length > 3 && !Number.isNaN(parts[3]) ? parts[3] : 1,
+        };
+    }
+    return null;
+}
+/**
+ * Whether a paint string's BOTTOM layer is a repeating pattern.
+ *
+ * A `repeating-*` gradient is a TEXTURE, and the colors inside it are stripe
+ * colors rather than the surface's. React Native cannot draw one, and painting
+ * a color lifted out of its arguments across the whole box is a WRONG answer
+ * rather than a degraded one — the library's hairline grid is one color every
+ * 26px, and as a solid fill it is a slab. Such a fill paints nothing instead.
+ *
+ * The bottom layer decides, so a pattern stacked over a real ground
+ * (`repeating-…(…), #FBF3E4`) still falls back to that ground.
+ */
+function isRepeatingPattern(value) {
+    const s = value?.trim() ?? "";
+    if (!s)
+        return false;
+    const layers = splitLayers(s);
+    const bottom = layers.length > 0 ? layers[layers.length - 1] : s;
+    return /^repeating-/i.test(bottom);
+}
+/** True when the string is a CSS gradient rather than a plain color. */
+function isGradient(value) {
+    return /gradient\s*\(/i.test(value);
+}
+/** Splits a CSS background into its gradient layers. Layers CSS paints last
+ *  (the base) come last in the returned array, matching source order. */
+function parseGradient(value) {
+    const layers = [];
+    for (const raw of splitLayers(value)) {
+        const match = raw.match(/^(linear|radial)-gradient\s*\(([\s\S]*)\)$/i);
+        if (!match) {
+            // A plain color among the layers is the design's ground. Dropping it
+            // would leave the screen painted by a translucent glow instead.
+            //
+            // It has to LOOK like a color, though: any other layer — a
+            // `repeating-linear-gradient`, a `url()` — used to be accepted here and
+            // handed to the host's gradient component as a color string, which is not
+            // one. Dropping it instead is what lets the caller see there is nothing
+            // paintable and degrade to a flat color.
+            if (raw && hasColor(raw)) {
+                layers.push({ kind: "solid", angle: 180, colors: [raw] });
+            }
+            continue;
+        }
+        const kind = match[1].toLowerCase();
+        const args = splitTop(match[2]);
+        // A radial's center is dropped (RN has no radial gradient), so it is drawn
+        // as a top-down fade — 180deg, like every other default.
+        let angle = 180;
+        let start = 0;
+        let center;
+        const first = args[0]?.trim() ?? "";
+        if (kind === "linear" && /^-?[\d.]+deg$/i.test(first)) {
+            angle = parseFloat(first);
+            start = 1;
+        }
+        else if (kind === "linear" && /^to\s+/i.test(first)) {
+            angle = TO_ANGLE[first.trim().toLowerCase()] ?? 180;
+            start = 1;
+        }
+        else if (kind === "radial" && !hasColor(first)) {
+            // Radial shape/position prelude ("120% 90% at 85% 5%"). RN has no
+            // radial gradient, but the centre decides which way the stand-in fades,
+            // so it is kept rather than dropped with the rest.
+            center = readCenter(first);
+            start = 1;
+        }
+        const colors = [];
+        const locations = [];
+        let positioned = 0;
+        for (const arg of args.slice(start)) {
+            // CSS allows TWO positions on one stop — `@accent 0 22%` is the same
+            // color at both, the hard edge the library's progress bars and split
+            // panels are drawn with — and a unitless `0` is a valid position. Reading
+            // only the last one left those designs a smooth fade instead of an edge.
+            let body = arg.trim();
+            const positions = [];
+            while (positions.length < 2) {
+                const found = body.match(/\s(-?[\d.]+%|0)$/);
+                if (!found)
+                    break;
+                const text = found[1];
+                const value = parseFloat(text);
+                // The token comes off `body` either way. Leaving a position this build
+                // could not read attached to the color would make the color itself
+                // unparseable, dropping the whole stop — and a gradient left with one
+                // stop does not parse at all. A malformed position is worth losing; the
+                // stop is not, so it falls through to the interpolated position.
+                body = body.slice(0, body.length - found[0].length).trim();
+                if (Number.isNaN(value))
+                    break;
+                positions.unshift(Math.max(0, Math.min(1, text.endsWith("%") ? value / 100 : value)));
+            }
+            if (!body)
+                continue;
+            if (positions.length === 0) {
+                colors.push(body);
+                locations.push(colors.length === 1 ? 0 : 1);
+                continue;
+            }
+            for (const position of positions) {
+                colors.push(body);
+                locations.push(position);
+                positioned++;
+            }
+        }
+        if (colors.length === 0)
+            continue;
+        layers.push({
+            kind,
+            angle,
+            colors,
+            // Partial position data would place stops wrongly; only pass locations
+            // through when the source positioned every stop.
+            locations: positioned === colors.length ? locations : undefined,
+            center,
+        });
+    }
+    return layers;
+}
+const TO_ANGLE = {
+    "to top": 0,
+    "to right": 90,
+    "to bottom": 180,
+    "to left": 270,
+    "to top right": 45,
+    "to right top": 45,
+    "to bottom right": 135,
+    "to right bottom": 135,
+    "to bottom left": 225,
+    "to left bottom": 225,
+    "to top left": 315,
+    "to left top": 315,
+};
+/** The `at X% Y%` part of a radial's prelude, as 0–1. Defaults to the CSS
+ *  default centre when the prelude names none. */
+function readCenter(prelude) {
+    const at = prelude.split(/\bat\b/i)[1];
+    const pcts = at ? [...at.matchAll(/(-?[\d.]+)%/g)].map((m) => parseFloat(m[1])) : [];
+    return {
+        x: (pcts[0] ?? 50) / 100,
+        y: (pcts[1] ?? 50) / 100,
+    };
+}
+function hasColor(value) {
+    const s = value.trim();
+    return /^(#|rgb|hsl|@)/i.test(s) || s.toLowerCase() === "transparent";
+}
+/**
+ * A field that can only ever be ONE color — a border, text, an icon, a shadow.
+ *
+ * A gradient there has no native form (nor a CSS one: `border-color` takes no
+ * gradient, so the dashboard drops the declaration outright). Collapsing it to
+ * the color it stands for keeps the stroke or the glyph visible, which is
+ * nearer the design's intent than losing it — and, on React Native, avoids
+ * handing the platform a color string it cannot parse.
+ */
+function flatColor(value, doc, onDiagnostic) {
+    const resolved = resolveColor(value, doc);
+    if (resolved === undefined || !isGradient(resolved))
+        return resolved;
+    onDiagnostic?.(`gradient flattened in a colour-only field: ${resolved}`);
+    return gradientFallbackColor(resolved);
+}
+/** The solid to paint when no gradient component is available: the base
+ *  layer's first stop, which is the design's ground color.
+ *
+ *  A value with no paintable layer at all — a `repeating-linear-gradient`, or
+ *  any other form this build does not read — falls through to the same colour
+ *  extraction the six SDKs share, so a box the design coloured still gets a
+ *  colour from the design rather than nothing. */
+function gradientFallbackColor(value) {
+    // A pattern's colors are STRIPE colors; spreading one over the whole box is a
+    // wrong answer rather than a degraded one, so it paints nothing.
+    if (isRepeatingPattern(value))
+        return undefined;
+    const layers = parseGradient(value);
+    const base = layers[layers.length - 1];
+    return base?.colors[0] ?? (0, background_js_1.backgroundBaseColor)(value);
+}
+/**
+ * The solid a surface paints UNDER a fill — or nothing.
+ *
+ * The solid exists for one reason: an app that passes no gradient component
+ * still gets a colour instead of a hole. It was painted unconditionally, and
+ * for an opaque fill that never showed, because the real gradient covered it.
+ *
+ * A scrim showed it. A scrim is a gradient that is transparent at one end ON
+ * PURPOSE — that is how a photo stays visible above the copy. Its first stop
+ * is the dark end, so the "fallback" under it was a near-black sheet across
+ * the whole box, and the gradient's transparent half revealed that sheet
+ * instead of the photograph behind it. Every photo background looked like a
+ * black screen on React Native, while the dashboard's CSS painted it fine.
+ *
+ * So: when the gradient will actually be drawn, nothing goes under it. The
+ * solid is only for the degraded case — no gradient renderer, or a fill this
+ * build cannot read as a gradient at all.
+ */
+function surfaceSolid(resolved, canPaintGradient) {
+    if (!resolved)
+        return undefined;
+    if (!isGradient(resolved))
+        return resolved;
+    if (canPaintGradient && parseGradient(resolved).length > 0)
+        return undefined;
+    return gradientFallbackColor(resolved);
+}
+/** Splits comma-separated background layers, ignoring commas inside parens. */
+function splitLayers(value) {
+    return splitTop(value).map((s) => s.trim());
+}
+function splitTop(value) {
+    const out = [];
+    let depth = 0;
+    let current = "";
+    for (const ch of value) {
+        if (ch === "(")
+            depth++;
+        else if (ch === ")")
+            depth--;
+        if (ch === "," && depth === 0) {
+            out.push(current);
+            current = "";
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim())
+        out.push(current);
+    return out;
+}