@octane-xplat/nativescript-mason-core 0.0.1 → 1.0.0-beta.1

package/css-transform.js

@@ -0,0 +1,100 @@
+const IDENTITY = [1, 0, 0, 1, 0, 0];
+function multiply(m, n) {
+    return [m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1], m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3], m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5]];
+}
+export function parseAngle(token) {
+    const t = token.trim().toLowerCase();
+    const n = parseFloat(t);
+    if (!Number.isFinite(n))
+        return 0;
+    if (t.endsWith('grad'))
+        return (n * Math.PI) / 200;
+    if (t.endsWith('rad'))
+        return n;
+    if (t.endsWith('turn'))
+        return n * 2 * Math.PI;
+    return (n * Math.PI) / 180;
+}
+export function parseCssTransform(value, toDip, size) {
+    const s = (value ?? '').trim();
+    if (!s || s === 'none')
+        return null;
+    const length = (token, axis) => {
+        if (token == null)
+            return 0;
+        const t = token.trim();
+        if (t.endsWith('%'))
+            return (parseFloat(t) / 100) * axis;
+        return toDip(t) ?? parseFloat(t) ?? 0;
+    };
+    const num = (token, fallback) => {
+        if (token == null || token.trim() === '')
+            return fallback;
+        const t = token.trim();
+        const n = t.endsWith('%') ? parseFloat(t) / 100 : parseFloat(t);
+        return Number.isFinite(n) ? n : fallback;
+    };
+    let m = IDENTITY;
+    let found = false;
+    const re = /([a-zA-Z0-9]+)\(([^)]*)\)/g;
+    let match;
+    while ((match = re.exec(s))) {
+        const name = match[1].toLowerCase();
+        const args = match[2].split(/\s*,\s*|\s+/).filter((a) => a !== '');
+        let f = null;
+        switch (name) {
+            case 'translate':
+            case 'translate3d':
+                f = [1, 0, 0, 1, length(args[0], size.width), length(args[1], size.height)];
+                break;
+            case 'translatex':
+                f = [1, 0, 0, 1, length(args[0], size.width), 0];
+                break;
+            case 'translatey':
+                f = [1, 0, 0, 1, 0, length(args[0], size.height)];
+                break;
+            case 'scale':
+            case 'scale3d': {
+                const sx = num(args[0], 1);
+                f = [sx, 0, 0, num(args[1], sx), 0, 0];
+                break;
+            }
+            case 'scalex':
+                f = [num(args[0], 1), 0, 0, 1, 0, 0];
+                break;
+            case 'scaley':
+                f = [1, 0, 0, num(args[0], 1), 0, 0];
+                break;
+            case 'rotate':
+            case 'rotatez': {
+                const a = parseAngle(args[0] ?? '0');
+                f = [Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0];
+                break;
+            }
+            case 'skew':
+                f = [1, Math.tan(parseAngle(args[1] ?? '0')), Math.tan(parseAngle(args[0] ?? '0')), 1, 0, 0];
+                break;
+            case 'skewx':
+                f = [1, 0, Math.tan(parseAngle(args[0] ?? '0')), 1, 0, 0];
+                break;
+            case 'skewy':
+                f = [1, Math.tan(parseAngle(args[0] ?? '0')), 0, 1, 0, 0];
+                break;
+            case 'matrix':
+                if (args.length >= 6)
+                    f = args.slice(0, 6).map((a) => parseFloat(a) || 0);
+                break;
+            case 'matrix3d':
+                if (args.length >= 16) {
+                    const v = args.map((a) => parseFloat(a) || 0);
+                    f = [v[0], v[1], v[4], v[5], v[12], v[13]];
+                }
+                break;
+        }
+        if (!f)
+            continue;
+        found = true;
+        m = multiply(m, f);
+    }
+    return found ? m : null;
+}

package/diagnostics.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Reporting for CSS mason could not use.
+ *
+ * Every parser in the stack drops what it doesn't understand in silence — there
+ * was not one `console.warn` in style.ts or a single log line in the native HTML
+ * parser. Pasting a real stylesheet therefore produced a layout that was wrong
+ * in ways nothing would tell you about.
+ *
+ * Off by default. Beyond the obvious developer use, this is a test oracle: a
+ * Node test can feed a real-world stylesheet through and assert the drop list
+ * matches a snapshot, which covers "what would silently break" without needing
+ * a fixture per property or a device.
+ */
+export type CssDiagnosticKind = 
+/** A property mason has no support for at all. */
+'unknown-property'
+/** A known property whose value could not be parsed. */
+ | 'unparsable-value'
+/** A unit mason cannot resolve (an unknown one, or `vw` before the viewport is known). */
+ | 'unsupported-unit'
+/** A tag with no mason element behind it. */
+ | 'unknown-tag'
+/** Understood, but deliberately not implemented yet. */
+ | 'not-implemented';
+export interface CssDiagnostic {
+    kind: CssDiagnosticKind;
+    /** Property or tag name, as written. */
+    name: string;
+    /** The value as written, when there was one. */
+    value?: string;
+    /** Why it was dropped, and what to do instead where there is an answer. */
+    detail?: string;
+}
+export interface CssDiagnosticsOptions {
+    /** Also write each diagnostic to the console. Default true when enabled. */
+    log?: boolean;
+    /** Cap on retained diagnostics; oldest are dropped past it. Default 500. */
+    limit?: number;
+}
+/**
+ * Turn diagnostics on or off. Call with `true` during development to find out
+ * what a pasted stylesheet lost.
+ */
+export declare function setCssDiagnostics(value: boolean, options?: CssDiagnosticsOptions): void;
+export declare function cssDiagnosticsEnabled(): boolean;
+/** Everything reported since diagnostics were enabled (or last cleared). */
+export declare function getCssDiagnostics(): readonly CssDiagnostic[];
+export declare function clearCssDiagnostics(): void;
+export declare function reportCssDiagnostic(diagnostic: CssDiagnostic): void;
+/** Format the diagnostics as lines, for a snapshot or a bug report. */
+export declare function formatCssDiagnostics(): string;

package/diagnostics.js

@@ -0,0 +1,52 @@
+let enabled = false;
+let log = true;
+let limit = 500;
+const collected = [];
+const seen = new Set();
+/**
+ * Turn diagnostics on or off. Call with `true` during development to find out
+ * what a pasted stylesheet lost.
+ */
+export function setCssDiagnostics(value, options = {}) {
+    enabled = value;
+    log = options.log ?? true;
+    limit = options.limit ?? 500;
+    if (!value) {
+        clearCssDiagnostics();
+    }
+}
+export function cssDiagnosticsEnabled() {
+    return enabled;
+}
+/** Everything reported since diagnostics were enabled (or last cleared). */
+export function getCssDiagnostics() {
+    return collected;
+}
+export function clearCssDiagnostics() {
+    collected.length = 0;
+    seen.clear();
+}
+export function reportCssDiagnostic(diagnostic) {
+    if (!enabled) {
+        return;
+    }
+    // Deduplicate: a repeated declaration in a long stylesheet would otherwise
+    // bury the distinct problems.
+    const key = `${diagnostic.kind}|${diagnostic.name}|${diagnostic.value ?? ''}`;
+    if (seen.has(key)) {
+        return;
+    }
+    seen.add(key);
+    collected.push(diagnostic);
+    if (collected.length > limit) {
+        collected.shift();
+    }
+    if (log) {
+        const where = diagnostic.value === undefined ? diagnostic.name : `${diagnostic.name}: ${diagnostic.value}`;
+        console.warn(`[mason css] ${diagnostic.kind} — ${where}${diagnostic.detail ? ` (${diagnostic.detail})` : ''}`);
+    }
+}
+/** Format the diagnostics as lines, for a snapshot or a bug report. */
+export function formatCssDiagnostics() {
+    return collected.map((d) => `${d.kind} ${d.name}${d.value === undefined ? '' : `: ${d.value}`}${d.detail ? ` — ${d.detail}` : ''}`).join('\n');
+}

package/display-density.d.ts

@@ -0,0 +1,9 @@
+export declare function displayDensity(): number;
+/** Records the density after a configuration change; core's own value is used until then. */
+export declare function setDisplayDensity(value: number): void;
+/** core's `layout` conversions, against the current density. */
+export declare const masonLayout: {
+    getDisplayDensity: typeof displayDensity;
+    toDevicePixels: (value: number) => number;
+    toDeviceIndependentPixels: (value: number) => number;
+};

package/display-density.js

@@ -0,0 +1,20 @@
+import { layout as coreLayout } from '@nativescript/core/utils';
+// Core reads the display density once per process. A density change (Settings > Display size)
+// relaunches the Activity and restyles Mason's views, so Mason converts with the new value.
+let changed = 0;
+export function displayDensity() {
+    return changed || coreLayout.getDisplayDensity();
+}
+/** Records the density after a configuration change; core's own value is used until then. */
+export function setDisplayDensity(value) {
+    if (value > 0 && value !== coreLayout.getDisplayDensity())
+        changed = value;
+    else
+        changed = 0;
+}
+/** core's `layout` conversions, against the current density. */
+export const masonLayout = {
+    getDisplayDensity: displayDensity,
+    toDevicePixels: (value) => value * displayDensity(),
+    toDeviceIndependentPixels: (value) => value / displayDensity(),
+};

package/fonts.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Point the native font resolver at the app's `fonts` folder.
+ *
+ * iOS needs nothing here: the runtime registers every file in `app/fonts` with
+ * CoreText at startup, so a custom `@font-face` family resolves by name.
+ * Android has no system-wide registration, so the native side has to be told
+ * where the bundled font files live before it can honour a custom family.
+ */
+export declare function registerAppFontsDirectory(): void;
+/** Splits a CSS `font-family` list into family names, without their quotes. */
+export declare function parseFontFamilyList(value: string): string[];
+/** Whether a named family can be drawn here: installed, registered from the app's fonts folder, or bundled. */
+export declare function isFontFamilyAvailable(family: string): boolean;
+/**
+ * The single family the natives should use for a CSS `font-family` value: the first
+ * family in the list that is generic or available, as CSS font matching picks it.
+ * Quotes are removed, so `'Mukta Mahee'` and `Mukta Mahee` name the same family.
+ * Falls back to the first family named when none is available.
+ */
+export declare function pickFontFamily(value: string, isAvailable?: (family: string) => boolean): string;

package/fonts.js

@@ -0,0 +1,88 @@
+import { knownFolders, path } from '@nativescript/core';
+let registered = false;
+/**
+ * Point the native font resolver at the app's `fonts` folder.
+ *
+ * iOS needs nothing here: the runtime registers every file in `app/fonts` with
+ * CoreText at startup, so a custom `@font-face` family resolves by name.
+ * Android has no system-wide registration, so the native side has to be told
+ * where the bundled font files live before it can honour a custom family.
+ */
+export function registerAppFontsDirectory() {
+    if (!__ANDROID__ || registered) {
+        return;
+    }
+    registered = true;
+    try {
+        const dir = path.join(knownFolders.currentApp().path, 'fonts');
+        org.nativescript.mason.masonkit.AppFonts.setFontsDirectory(dir);
+    }
+    catch (e) {
+        registered = false;
+    }
+}
+const GENERIC_FAMILIES = new Set(['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded', 'emoji', 'math']);
+/** Splits a CSS `font-family` list into family names, without their quotes. */
+export function parseFontFamilyList(value) {
+    const families = [];
+    let current = '';
+    let quote = null;
+    for (const ch of value) {
+        if (quote) {
+            if (ch === quote)
+                quote = null;
+            else
+                current += ch;
+        }
+        else if (ch === '"' || ch === "'") {
+            quote = ch;
+        }
+        else if (ch === ',') {
+            families.push(current);
+            current = '';
+        }
+        else {
+            current += ch;
+        }
+    }
+    families.push(current);
+    return families.map((family) => family.trim().replace(/\s+/g, ' ')).filter(Boolean);
+}
+const availableFamilies = new Set();
+/** Whether a named family can be drawn here: installed, registered from the app's fonts folder, or bundled. */
+export function isFontFamilyAvailable(family) {
+    const key = family.toLowerCase();
+    if (availableFamilies.has(key))
+        return true;
+    let found = true;
+    if (__APPLE__) {
+        found = false;
+        const names = UIFont.familyNames;
+        for (let i = 0; i < names.count; i++) {
+            if (names.objectAtIndex(i).toLowerCase() === key) {
+                found = true;
+                break;
+            }
+        }
+    }
+    else if (__ANDROID__) {
+        registerAppFontsDirectory();
+        found = org.nativescript.mason.masonkit.AppFonts.resolve(family) != null || !android.graphics.Typeface.create(family, android.graphics.Typeface.NORMAL).equals(android.graphics.Typeface.DEFAULT);
+    }
+    // Only hits are cached: a family can be registered later, a font file can't disappear.
+    if (found)
+        availableFamilies.add(key);
+    return found;
+}
+/**
+ * The single family the natives should use for a CSS `font-family` value: the first
+ * family in the list that is generic or available, as CSS font matching picks it.
+ * Quotes are removed, so `'Mukta Mahee'` and `Mukta Mahee` name the same family.
+ * Falls back to the first family named when none is available.
+ */
+export function pickFontFamily(value, isAvailable = isFontFamilyAvailable) {
+    const families = parseFontFamilyList(value);
+    if (families.length === 0)
+        return value;
+    return families.find((family) => GENERIC_FAMILIES.has(family.toLowerCase()) || isAvailable(family)) ?? families[0];
+}

package/foreign-layout.d.ts

@@ -0,0 +1,6 @@
+/** Start mirroring a plain child's layout styles into its Mason leaf. Call after the native insert. */
+export declare function adoptForeignLayout(view: any): void;
+/** iOS: a content change core reports through requestLayout drops the child's cached Mason measurement. */
+export declare function invalidateOnLayoutRequest(view: any, mason: any): void;
+/** Stop mirroring and give the child its own Style prototype and requestLayout back. */
+export declare function releaseForeignLayout(view: any): void;

package/foreign-layout.js

@@ -0,0 +1,151 @@
+import { releaseCssEnvironmentStyle } from './css-environment';
+import { masonLayout as layout } from './display-density';
+import { widthProperty, heightProperty, minWidthProperty, minHeightProperty, maxWidthProperty, maxHeightProperty, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty } from '@nativescript/core/ui/styling/style-properties';
+import { alignSelfProperty, flexGrowProperty, flexShrinkProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { aspectRatioProperty, bottomProperty, flexBasisProperty, gridColumnEndProperty, gridColumnStartProperty, gridRowEndProperty, gridRowStartProperty, justifySelfProperty, leftProperty, positionProperty, rightProperty, topProperty } from './properties';
+import { Style } from './style';
+import { isMasonView_ } from './symbols';
+const foreignStyle_ = Symbol('mason:foreignStyle');
+const foreignProto_ = Symbol('mason:foreignProto');
+const foreignInvalidate_ = Symbol('mason:foreignInvalidate');
+// Core px objects are device pixels; Mason reads px as CSS pixels, and numbers as dip.
+function toMason(value) {
+    return value?.unit === 'px' ? layout.toDeviceIndependentPixels(value.value) : value;
+}
+function scalar(property, fallback = property.defaultValue) {
+    const { name } = property;
+    const unset = toMason(fallback);
+    return (helper, style) => {
+        helper[name] = property.isSet(style) ? toMason(style[name]) : unset;
+    };
+}
+function selfAlign(property) {
+    const { name } = property;
+    return (helper, style) => {
+        const value = style[name];
+        helper[name] = value == null || value === 'auto' ? 'normal' : value;
+    };
+}
+const gridEdges = [gridRowStartProperty, gridColumnStartProperty, gridRowEndProperty, gridColumnEndProperty];
+// One complete area, so a single edge never inherits stale native shorthand state.
+const writeGrid = (helper, style) => {
+    helper.gridArea = `${style.gridRowStart ?? 'auto'} / ${style.gridColumnStart ?? 'auto'} / ${style.gridRowEnd ?? 'auto'} / ${style.gridColumnEnd ?? 'auto'}`;
+};
+// Windows panels copy these from the XAML element on every measure.
+const entries = [];
+function add(properties, write) {
+    for (const property of properties)
+        entries.push([property, write(property)]);
+}
+// Windows panels copy these from the XAML element on every measure.
+if (!false) {
+    add([widthProperty, heightProperty, maxWidthProperty, maxHeightProperty, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty], scalar);
+    // Core's 0 default would disable Mason's automatic minimum size.
+    add([minWidthProperty, minHeightProperty], (p) => scalar(p, 'auto'));
+}
+add([flexGrowProperty, flexShrinkProperty, flexBasisProperty, aspectRatioProperty, positionProperty, leftProperty, rightProperty, topProperty, bottomProperty], scalar);
+add([alignSelfProperty, justifySelfProperty], selfAlign);
+add(gridEdges, () => writeGrid);
+const foreignProtos = new WeakMap();
+// Native views whose leaf this bridge has written; a leaf outlives a detach.
+const written = new WeakSet();
+function foreignProto(proto) {
+    let shadow = foreignProtos.get(proto);
+    if (shadow)
+        return shadow;
+    shadow = Object.create(proto);
+    for (const [property, write] of entries) {
+        for (const key of new Set([property.name, property.cssName, property.cssLocalName, property.keyframe])) {
+            if (!key)
+                continue;
+            let owner = proto;
+            let descriptor;
+            while (owner && !(descriptor = Object.getOwnPropertyDescriptor(owner, key)))
+                owner = Object.getPrototypeOf(owner);
+            const set = descriptor?.set;
+            if (!set)
+                continue;
+            Object.defineProperty(shadow, key, {
+                configurable: true,
+                enumerable: descriptor.enumerable,
+                get: descriptor.get,
+                set(value) {
+                    set.call(this, value);
+                    const helper = this.viewRef?.get()?.[foreignStyle_];
+                    if (helper)
+                        write(helper, this);
+                },
+            });
+        }
+    }
+    Object.defineProperty(shadow, foreignProto_, { value: true });
+    foreignProtos.set(proto, shadow);
+    return shadow;
+}
+/** Start mirroring a plain child's layout styles into its Mason leaf. Call after the native insert. */
+export function adoptForeignLayout(view) {
+    const style = view?.style;
+    const native = view?.nativeViewProtected;
+    if (!style || !native || view[isMasonView_])
+        return;
+    const helper = Style.fromView(view, native);
+    view[foreignStyle_] = helper;
+    if (!style[foreignProto_])
+        Object.setPrototypeOf(style, foreignProto(Object.getPrototypeOf(style)));
+    // A fresh leaf already holds Mason's defaults, so it only needs the values core has set.
+    const all = written.has(native);
+    written.add(native);
+    let grid = false;
+    for (const [property, write] of entries) {
+        if (!all && !property.isSet(style))
+            continue;
+        if (write === writeGrid)
+            grid = true;
+        else
+            write(helper, style);
+    }
+    if (grid)
+        writeGrid(helper, style);
+}
+/** iOS: a content change core reports through requestLayout drops the child's cached Mason measurement. */
+export function invalidateOnLayoutRequest(view, mason) {
+    const hook = view[foreignInvalidate_];
+    if (hook) {
+        hook.mason = mason;
+        return;
+    }
+    const original = view.requestLayout;
+    if (typeof original !== 'function')
+        return;
+    const state = {
+        mason,
+        own: Object.getOwnPropertyDescriptor(view, 'requestLayout'),
+        requestLayout() {
+            const native = this.nativeViewProtected;
+            if (native)
+                state.mason.invalidateForeignView(native);
+            return original.call(this);
+        },
+    };
+    view.requestLayout = state.requestLayout;
+    view[foreignInvalidate_] = state;
+}
+/** Stop mirroring and give the child its own Style prototype and requestLayout back. */
+export function releaseForeignLayout(view) {
+    const hook = view?.[foreignInvalidate_];
+    if (hook) {
+        view[foreignInvalidate_] = undefined;
+        if (hook.own)
+            Object.defineProperty(view, 'requestLayout', hook.own);
+        else
+            delete view.requestLayout;
+    }
+    if (!view?.[foreignStyle_])
+        return;
+    releaseCssEnvironmentStyle(view[foreignStyle_]);
+    view[foreignStyle_].resetState();
+    view[foreignStyle_] = undefined;
+    const style = view.style;
+    if (style?.[foreignProto_])
+        Object.setPrototypeOf(style, Object.getPrototypeOf(Object.getPrototypeOf(style)));
+}

package/gradient-stops.d.ts

@@ -0,0 +1,25 @@
+/** A stop with two positions (`red 10% 30%`) is two stops of the same colour. */
+export declare function expandColorStops(stops: string[]): string[];
+/**
+ * Fills in the positions a gradient leaves out, per CSS Images: the first and
+ * last stops default to 0 and 1, a position before an earlier one moves up to
+ * it, and a run of stops without positions spreads evenly between its neighbours.
+ */
+export declare function resolveStopPositions(positions: Array<number | null>): number[];
+/** A repeating gradient's stops tiled across [0, end], so a plain gradient draws it. */
+export declare function repeatStops(offsets: number[], colors: number[], end?: number): {
+    offsets: number[];
+    colors: number[];
+};
+/** How far past its ending shape a radial gradient reaches in the box, in radii (at least 1). */
+export declare function radialReach(cx: number, cy: number, rx: number, ry: number): number;
+/** A repeating radial gradient as a plain one: stops tiled to the farthest corner, radii grown to match. */
+export declare function repeatRadial<T extends {
+    rx: number;
+    ry: number;
+    offsets: number[];
+    colors: number[];
+}>(g: T & {
+    cx: number;
+    cy: number;
+}): T;

package/gradient-stops.js

@@ -0,0 +1,112 @@
+import { tokenizeCss } from './css-shorthands';
+// Mirrors GradientStops.kt, for platforms that parse gradients in TS (Windows).
+/** A stop with two positions (`red 10% 30%`) is two stops of the same colour. */
+export function expandColorStops(stops) {
+    return stops.flatMap((stop) => {
+        let parts;
+        try {
+            parts = tokenizeCss(stop);
+        }
+        catch {
+            return [stop];
+        }
+        return parts.length === 3 ? [`${parts[0]} ${parts[1]}`, `${parts[0]} ${parts[2]}`] : [stop];
+    });
+}
+/**
+ * Fills in the positions a gradient leaves out, per CSS Images: the first and
+ * last stops default to 0 and 1, a position before an earlier one moves up to
+ * it, and a run of stops without positions spreads evenly between its neighbours.
+ */
+export function resolveStopPositions(positions) {
+    const n = positions.length;
+    const resolved = new Array(n).fill(0);
+    let anchor = -1;
+    for (let i = 0; i < n; i++) {
+        let given = positions[i];
+        if (given == null) {
+            if (i === 0)
+                given = 0;
+            else if (i === n - 1)
+                given = 1;
+            else
+                continue;
+        }
+        const position = anchor >= 0 ? Math.max(given, resolved[anchor]) : given;
+        resolved[i] = position;
+        if (anchor >= 0) {
+            const start = resolved[anchor];
+            for (let k = anchor + 1; k < i; k++) {
+                resolved[k] = start + ((position - start) * (k - anchor)) / (i - anchor);
+            }
+        }
+        anchor = i;
+    }
+    return resolved;
+}
+const MAX_REPEATED_STOPS = 2048;
+function mixArgb(a, b, f) {
+    let out = 0;
+    for (const shift of [24, 16, 8, 0]) {
+        const ca = (a >>> shift) & 0xff;
+        const cb = (b >>> shift) & 0xff;
+        out |= Math.round(ca + (cb - ca) * f) << shift;
+    }
+    return out >>> 0;
+}
+function colorAt(offsets, colors, t, fromRight) {
+    const n = offsets.length;
+    if (t < offsets[0] || (!fromRight && t === offsets[0]))
+        return colors[0] >>> 0;
+    for (let i = 1; i < n; i++) {
+        if (t < offsets[i] || (!fromRight && t === offsets[i])) {
+            const span = offsets[i] - offsets[i - 1];
+            return mixArgb(colors[i - 1], colors[i], span > 0 ? (t - offsets[i - 1]) / span : 1);
+        }
+    }
+    return colors[n - 1] >>> 0;
+}
+/** A repeating gradient's stops tiled across [0, end], so a plain gradient draws it. */
+export function repeatStops(offsets, colors, end = 1) {
+    const n = offsets.length;
+    if (n < 2 || colors.length !== n)
+        return { offsets, colors };
+    const first = offsets[0];
+    const period = offsets[n - 1] - first;
+    if (!(period > 1e-4))
+        return { offsets, colors };
+    const tiledOffsets = [];
+    const tiledColors = [];
+    for (let k = Math.floor(-first / period); first + k * period <= end && tiledOffsets.length < MAX_REPEATED_STOPS; k++) {
+        for (let i = 0; i < n; i++) {
+            tiledOffsets.push(offsets[i] + k * period);
+            tiledColors.push(colors[i] >>> 0);
+        }
+    }
+    const outOffsets = [0];
+    const outColors = [colorAt(tiledOffsets, tiledColors, 0, true)];
+    for (let i = 0; i < tiledOffsets.length; i++) {
+        if (tiledOffsets[i] > 0 && tiledOffsets[i] < end) {
+            outOffsets.push(tiledOffsets[i]);
+            outColors.push(tiledColors[i]);
+        }
+    }
+    outOffsets.push(end);
+    outColors.push(colorAt(tiledOffsets, tiledColors, end, false));
+    return { offsets: outOffsets, colors: outColors };
+}
+/** How far past its ending shape a radial gradient reaches in the box, in radii (at least 1). */
+export function radialReach(cx, cy, rx, ry) {
+    let reach = 1;
+    for (const x of [0, 1]) {
+        for (const y of [0, 1])
+            reach = Math.max(reach, Math.hypot((x - cx) / rx, (y - cy) / ry));
+    }
+    return reach;
+}
+/** A repeating radial gradient as a plain one: stops tiled to the farthest corner, radii grown to match. */
+export function repeatRadial(g) {
+    const reach = radialReach(g.cx, g.cy, g.rx, g.ry);
+    const tiled = repeatStops(g.offsets, g.colors, reach);
+    return { ...g, rx: g.rx * reach, ry: g.ry * reach, offsets: tiled.offsets.map((o) => o / reach), colors: tiled.colors };
+}

package/index.android.d.ts

@@ -0,0 +1,11 @@
+export { View } from './view';
+export { Scroll } from './scroll';
+export { ViewBase, Event } from './common';
+export type { ScrollBehavior, ScrollLogicalPosition, ScrollToOptions, ScrollIntoViewOptions } from './common';
+export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
+export type { CssSafeAreaInsets, CssEnvironmentHost, CssEnvironmentSource } from './css-environment';
+export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
+export { setCssUnitContext, cssUnits } from './units';
+export { registerAppFontsDirectory } from './fonts';
+export type * from './layout-types';

package/index.android.js

@@ -0,0 +1,9 @@
+/// <reference path="./typings/native.d.ts" />
+export { View } from './view';
+export { Scroll } from './scroll';
+export { ViewBase, Event } from './common';
+export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
+export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
+export { setCssUnitContext, cssUnits } from './units';
+export { registerAppFontsDirectory } from './fonts';