react-native-tgfx 0.0.0 → 0.0.2-alpha.0

package/lib/compiler/image.js

@@ -0,0 +1,71 @@
+// Mirrored by the Fit enum and samplingOf()/tileModeOf() in cpp/TgfxScene.cpp.
+const FIT_CODE = {
+    fill: 0,
+    contain: 1,
+    cover: 2,
+    fitWidth: 3,
+    fitHeight: 4,
+    none: 5,
+    scaleDown: 6,
+};
+const SAMPLING_CODE = {
+    nearest: 0,
+    linear: 1,
+    mipmap: 2,
+};
+const TILE_CODE = {
+    clamp: 0,
+    repeat: 1,
+    mirror: 2,
+    decal: 3,
+};
+export function fitCode(fit, fallback = 'contain') {
+    return FIT_CODE[fit] ?? FIT_CODE[fallback];
+}
+export function samplingCode(sampling) {
+    return SAMPLING_CODE[sampling] ?? SAMPLING_CODE.linear;
+}
+export function tileCode(tile, fallback = 'clamp') {
+    return TILE_CODE[tile] ?? TILE_CODE[fallback];
+}
+// `.handle` is a JSI getter read once per image node per commit, so the id is remembered here.
+const handles = new WeakMap();
+/**
+ * The registry id the native engine resolves the image by, or 0 for "nothing to
+ * draw". Reading `.handle` off a disposed handle throws, and a scene must not
+ * fail to compile because an image went away mid-commit.
+ */
+export function imageHandle(image) {
+    if (image == null || typeof image !== 'object') {
+        return 0;
+    }
+    const cached = handles.get(image);
+    if (cached !== undefined) {
+        return cached;
+    }
+    let handle;
+    try {
+        handle = image.handle;
+    }
+    catch {
+        return 0;
+    }
+    if (typeof handle !== 'number') {
+        return 0;
+    }
+    handles.set(image, handle);
+    return handle;
+}
+/** Write `srcFlag` and, when present, the source rect. */
+export function writeSrcRect(w, rect) {
+    const r = rect;
+    if (r == null) {
+        w.push(0);
+        return;
+    }
+    w.push(1);
+    w.push(Number(r.x) || 0);
+    w.push(Number(r.y) || 0);
+    w.push(Number(r.width) || 0);
+    w.push(Number(r.height) || 0);
+}

package/lib/compiler/paint.d.ts

@@ -0,0 +1,65 @@
+import { type Color } from './colors';
+import { type BlendMode, type ColorFilterInput, type ImageFilterInput } from './filters';
+import { type Fit, type Sampling, type SrcRect, type TileMode } from './image';
+import type { UniformValue } from '../types';
+import type { Vector } from './transform';
+import { type MaybeSharedValue } from './values';
+import type { SceneWriter } from './writer';
+/** Public paint inputs shared by every drawing component and `<Paint>`. */
+export interface PaintInput {
+    color?: Color;
+    style?: 'fill' | 'stroke';
+    strokeWidth?: number | MaybeSharedValue<number>;
+    strokeCap?: 'butt' | 'round' | 'square';
+    strokeJoin?: 'miter' | 'round' | 'bevel';
+    opacity?: number | MaybeSharedValue<number>;
+    antiAlias?: boolean;
+    blendMode?: BlendMode;
+    gradient?: GradientInput;
+    colorFilter?: ColorFilterInput;
+    imageFilter?: ImageFilterInput;
+}
+export interface GradientInput {
+    kind: 'linear' | 'radial' | 'sweep' | 'diamond' | 'fractalNoise' | 'turbulence' | 'runtime' | 'image';
+    image?: unknown;
+    tx?: TileMode;
+    ty?: TileMode;
+    sampling?: Sampling;
+    fit?: Fit;
+    rect?: SrcRect;
+    start?: Vector;
+    end?: Vector;
+    center?: Vector;
+    radius?: number;
+    colors: Color[];
+    positions?: number[];
+    startAngle?: number;
+    endAngle?: number;
+    freqX?: number;
+    freqY?: number;
+    octaves?: number;
+    seed?: number;
+    source?: string;
+    uniforms?: Record<string, UniformValue>;
+    children?: GradientInput[];
+}
+/** Merge two paint inputs; defined fields in `over` win. */
+export declare function mergePaint(base: PaintInput | undefined, over: PaintInput | undefined): PaintInput;
+/** Props with no paint fields, for callers that only have an inherited paint. */
+export declare const NO_PAINT_PROPS: Record<string, unknown>;
+/**
+ * Write a node's paint into the program: color, flags, stroke geometry, the
+ * alpha multiplier (a live slot when the node's own opacity is animated), and
+ * an optional shader.
+ *
+ * Fields are read straight off the node's props, falling back to the inherited
+ * paint — the same precedence {@link mergePaint} gives, without building a
+ * merged object per node. Only the rare node that carries `<Paint>` or gradient
+ * children merges eagerly and passes the result as `inherited`.
+ *
+ * `forceStroke` is for `<Line>`, which has no interior to fill: the engine draws
+ * the compiled paint as-is, so the style has to be settled here.
+ */
+export declare function writePaint(w: SceneWriter, props: Record<string, unknown>, inherited: PaintInput, alpha: number | unknown, forceStroke?: boolean): void;
+/** Extract only the paint-related fields from an arbitrary props object. */
+export declare function pickPaintInput(props: Record<string, unknown>): PaintInput;

package/lib/compiler/paint.js

@@ -0,0 +1,207 @@
+import { isColorComponents, resolveColor } from './colors';
+import { hasFilters, writeFilters, } from './filters';
+import { fitCode, imageHandle, samplingCode, tileCode, } from './image';
+import { transpileShader } from './sksl';
+import { isSharedValue, resolveNumber, resolveValue, } from './values';
+const CAPS = { butt: 0, round: 1, square: 2 };
+const JOINS = { miter: 0, round: 1, bevel: 2 };
+const SHADER_KIND = {
+    linear: 0,
+    radial: 1,
+    sweep: 2,
+    diamond: 3,
+    fractalNoise: 4,
+    turbulence: 5,
+    runtime: 6,
+    image: 7,
+};
+const NO_SHADER = -1;
+/** Merge two paint inputs; defined fields in `over` win. */
+export function mergePaint(base, over) {
+    if (base == null) {
+        return over ?? {};
+    }
+    if (over == null) {
+        return base;
+    }
+    const out = { ...base };
+    for (const key of Object.keys(over)) {
+        const v = over[key];
+        if (v !== undefined) {
+            // @ts-expect-error index assignment across the union is safe here.
+            out[key] = v;
+        }
+    }
+    return out;
+}
+function writeStops(w, g) {
+    w.push(g.colors.length);
+    for (const color of g.colors) {
+        w.push(resolveColor(resolveValue(color)));
+    }
+    const positions = g.positions;
+    w.push(positions?.length ?? 0);
+    for (const position of positions ?? []) {
+        w.push(resolveNumber(position));
+    }
+}
+function writeGradient(w, g) {
+    w.push(SHADER_KIND[g.kind]);
+    switch (g.kind) {
+        case 'image': {
+            w.push(imageHandle(g.image));
+            w.push(tileCode(g.tx));
+            w.push(tileCode(g.ty));
+            w.push(samplingCode(g.sampling));
+            if (g.rect == null) {
+                w.push(0);
+                return;
+            }
+            w.push(1);
+            w.push(resolveNumber(g.rect.x));
+            w.push(resolveNumber(g.rect.y));
+            w.push(resolveNumber(g.rect.width));
+            w.push(resolveNumber(g.rect.height));
+            w.push(fitCode(g.fit));
+            return;
+        }
+        case 'runtime': {
+            const { body, preamble, functionNames, uniformNames, uniformSizes, childNames, } = transpileShader(g.source ?? '');
+            const children = g.children ?? [];
+            // A missing child leaves `TGFX_CHILD_n` bound to nothing and the node silently unpainted.
+            if (children.length !== childNames.length) {
+                throw new Error(`[tgfx] shader: the source declares ${childNames.length} 'uniform shader' (${childNames.join(', ') || 'none'}) but ${children.length} shader ${children.length === 1 ? 'child was' : 'children were'} given — pass one shader child per declaration, in order`);
+            }
+            w.pushString(body);
+            w.pushString(preamble);
+            w.push(functionNames.length);
+            for (const name of functionNames) {
+                w.pushString(name);
+            }
+            w.push(uniformNames.length);
+            for (const name of uniformNames) {
+                const raw = g.uniforms?.[name];
+                const values = Array.isArray(raw) ? raw : raw != null ? [raw] : [];
+                const size = uniformSizes[name] ?? 1;
+                w.pushString(name);
+                w.push(size);
+                for (let i = 0; i < size; i++) {
+                    w.pushAnim(values[i] ?? 0);
+                }
+            }
+            w.push(children.length);
+            for (const child of children) {
+                writeGradient(w, child);
+            }
+            return;
+        }
+        case 'fractalNoise':
+        case 'turbulence':
+            w.push(resolveNumber(g.freqX, 0.05));
+            w.push(resolveNumber(g.freqY, 0.05));
+            w.push(resolveNumber(g.octaves, 1));
+            w.push(resolveNumber(g.seed, 0));
+            return;
+        case 'sweep':
+            w.push(resolveNumber(g.center?.x));
+            w.push(resolveNumber(g.center?.y));
+            w.push(resolveNumber(g.startAngle, 0));
+            w.push(resolveNumber(g.endAngle, 360));
+            writeStops(w, g);
+            return;
+        case 'radial':
+        case 'diamond':
+            w.push(resolveNumber(g.center?.x));
+            w.push(resolveNumber(g.center?.y));
+            w.push(resolveNumber(g.radius));
+            writeStops(w, g);
+            return;
+        default:
+            w.push(resolveNumber(g.start?.x));
+            w.push(resolveNumber(g.start?.y));
+            w.push(resolveNumber(g.end?.x));
+            w.push(resolveNumber(g.end?.y));
+            writeStops(w, g);
+    }
+}
+/** Props with no paint fields, for callers that only have an inherited paint. */
+export const NO_PAINT_PROPS = {};
+/**
+ * Write a node's paint into the program: color, flags, stroke geometry, the
+ * alpha multiplier (a live slot when the node's own opacity is animated), and
+ * an optional shader.
+ *
+ * Fields are read straight off the node's props, falling back to the inherited
+ * paint — the same precedence {@link mergePaint} gives, without building a
+ * merged object per node. Only the rare node that carries `<Paint>` or gradient
+ * children merges eagerly and passes the result as `inherited`.
+ *
+ * `forceStroke` is for `<Line>`, which has no interior to fill: the engine draws
+ * the compiled paint as-is, so the style has to be settled here.
+ */
+export function writePaint(w, props, inherited, alpha, forceStroke = false) {
+    const color = props.color !== undefined ? props.color : inherited.color;
+    const style = props.style !== undefined ? props.style : inherited.style;
+    const strokeWidth = props.strokeWidth !== undefined ? props.strokeWidth : inherited.strokeWidth;
+    const cap = props.strokeCap !== undefined ? props.strokeCap : inherited.strokeCap;
+    const join = props.strokeJoin !== undefined ? props.strokeJoin : inherited.strokeJoin;
+    const antiAlias = props.antiAlias !== undefined ? props.antiAlias : inherited.antiAlias;
+    const gradient = props.gradient !== undefined ? props.gradient : inherited.gradient;
+    const blendMode = props.blendMode !== undefined ? props.blendMode : inherited.blendMode;
+    // Filters only reach a paint through its children, so `inherited` is their only source.
+    const { colorFilter, imageFilter } = inherited;
+    const filtered = hasFilters(blendMode, colorFilter, imageFilter);
+    // Four live channels only when one moves; a literal `[r, g, b, a]` packs into the word below.
+    const channels = isColorComponents(color) && color.some(isSharedValue) ? color : null;
+    w.push(resolveColor(resolveValue(color)));
+    w.push((forceStroke || style === 'stroke' ? 1 : 0) |
+        (antiAlias !== false ? 2 : 0) |
+        (filtered ? 4 : 0) |
+        (channels != null ? 8 : 0));
+    if (channels != null) {
+        for (let i = 0; i < 4; i++) {
+            w.pushAnim(channels[i], i === 3 ? 1 : 0);
+        }
+    }
+    w.pushAnim(strokeWidth, 1);
+    w.push(CAPS[cap ?? 'butt']);
+    w.push(JOINS[join ?? 'miter']);
+    w.pushAnim(alpha, 1);
+    if (filtered) {
+        writeFilters(w, blendMode, colorFilter, imageFilter);
+    }
+    if (gradient == null) {
+        w.push(NO_SHADER);
+        return;
+    }
+    writeGradient(w, gradient);
+}
+/** Extract only the paint-related fields from an arbitrary props object. */
+export function pickPaintInput(props) {
+    const out = {};
+    if (props.color !== undefined) {
+        out.color = resolveValue(props.color);
+    }
+    if (props.style !== undefined) {
+        out.style = props.style;
+    }
+    if (props.strokeWidth !== undefined) {
+        out.strokeWidth = props.strokeWidth;
+    }
+    if (props.strokeCap !== undefined) {
+        out.strokeCap = props.strokeCap;
+    }
+    if (props.strokeJoin !== undefined) {
+        out.strokeJoin = props.strokeJoin;
+    }
+    if (props.opacity !== undefined) {
+        out.opacity = props.opacity;
+    }
+    if (props.antiAlias !== undefined) {
+        out.antiAlias = Boolean(props.antiAlias);
+    }
+    if (props.blendMode !== undefined) {
+        out.blendMode = props.blendMode;
+    }
+    return out;
+}

package/lib/compiler/sksl.d.ts

@@ -0,0 +1,10 @@
+/** Cached and shared between callers, so every field is read-only. */
+export interface TranspiledShader {
+    readonly body: string;
+    readonly preamble: string;
+    readonly functionNames: readonly string[];
+    readonly uniformNames: readonly string[];
+    readonly uniformSizes: Readonly<Record<string, number>>;
+    readonly childNames: readonly string[];
+}
+export declare function transpileShader(source: string): TranspiledShader;

package/lib/compiler/sksl.js

@@ -0,0 +1,180 @@
+const TYPES = {
+    half: { glsl: 'float', size: 1 },
+    half2: { glsl: 'vec2', size: 2 },
+    half3: { glsl: 'vec3', size: 3 },
+    half4: { glsl: 'vec4', size: 4 },
+    float: { glsl: 'float', size: 1 },
+    float2: { glsl: 'vec2', size: 2 },
+    float3: { glsl: 'vec3', size: 3 },
+    float4: { glsl: 'vec4', size: 4 },
+    vec2: { glsl: 'vec2', size: 2 },
+    vec3: { glsl: 'vec3', size: 3 },
+    vec4: { glsl: 'vec4', size: 4 },
+    int: { glsl: 'int', size: 1 },
+    float2x2: { glsl: 'mat2', size: 4 },
+    float3x3: { glsl: 'mat3', size: 9 },
+    float4x4: { glsl: 'mat4', size: 16 },
+};
+function toGlslTypes(src) {
+    return src
+        .replace(/\bhalf([234])\b/g, 'vec$1')
+        .replace(/\bhalf\b/g, 'float')
+        .replace(/\bfloat([234])x\1\b/g, (_, n) => `mat${n}`)
+        .replace(/\bfloat([234])\b/g, 'vec$1');
+}
+function blockAt(src, open) {
+    let depth = 0;
+    for (let i = open; i < src.length; i++) {
+        if (src[i] === '{') {
+            depth++;
+        }
+        else if (src[i] === '}') {
+            depth--;
+            if (depth === 0) {
+                return src.slice(open + 1, i);
+            }
+        }
+    }
+    throw new Error('[tgfx] shader: unbalanced braces');
+}
+function hasBareComma(src) {
+    let depth = 0;
+    for (const c of src) {
+        if (c === '(') {
+            depth++;
+        }
+        else if (c === ')') {
+            depth--;
+        }
+        else if (c === ',' && depth === 0) {
+            return true;
+        }
+    }
+    return false;
+}
+function topLevelChunks(src) {
+    const chunks = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < src.length; i++) {
+        const c = src[i];
+        if (c === '{') {
+            depth++;
+            continue;
+        }
+        if (c === '}') {
+            depth--;
+        }
+        else if (c !== ';') {
+            continue;
+        }
+        // A `}` the `struct` grammar follows with `;` is closed by that `;`.
+        if (depth > 0 || (c === '}' && /^\s*;/.test(src.slice(i + 1)))) {
+            continue;
+        }
+        chunks.push(src.slice(start, i + 1));
+        start = i + 1;
+    }
+    if (src.slice(start).trim() !== '') {
+        throw new Error(`[tgfx] shader: unterminated declaration above main(): '${src
+            .slice(start)
+            .trim()}'`);
+    }
+    return chunks;
+}
+function declaredName(chunk) {
+    const struct = /\bstruct\s+(\w+)/.exec(chunk);
+    if (struct != null) {
+        return struct[1];
+    }
+    const paren = chunk.indexOf('(');
+    const assign = chunk.indexOf('=');
+    const declarator = /^\s*(?:const\s+)?\w+\s+(\w+)\s*(?:\[[^\]]*\])?\s*(?:\(|=|;)/.exec(chunk);
+    if (declarator == null) {
+        throw new Error(`[tgfx] shader: unsupported declaration above main(): '${chunk.trim()}'`);
+    }
+    // `float a = 1.0, b = 2.0;` would leave `b` unmangled and silently colliding.
+    if ((paren < 0 || assign < paren) && hasBareComma(chunk)) {
+        throw new Error(`[tgfx] shader: declare one name per statement above main(): '${chunk.trim()}'`);
+    }
+    return declarator[1];
+}
+const CACHE = new Map();
+export function transpileShader(source) {
+    const hit = CACHE.get(source);
+    if (hit !== undefined) {
+        return hit;
+    }
+    const result = transpile(source);
+    if (CACHE.size >= 64) {
+        CACHE.clear();
+    }
+    CACHE.set(source, result);
+    return result;
+}
+function transpile(source) {
+    const uniformNames = [];
+    const uniformSizes = {};
+    const childNames = [];
+    // Stripped first, so a commented-out `uniform` is not collected and prose cannot trip the guard.
+    const withoutComments = source.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, ' ');
+    const withoutUniforms = withoutComments.replace(/\buniform\s+(\w+)\s+(\w+)\s*;/g, (_all, type, name) => {
+        if (type === 'shader') {
+            childNames.push(name);
+            return '';
+        }
+        const info = TYPES[type];
+        if (info == null) {
+            throw new Error(`[tgfx] shader: unsupported uniform type '${type}'`);
+        }
+        uniformNames.push(name);
+        uniformSizes[name] = info.size;
+        return '';
+    });
+    const signature = /\b(?:half4|float4|vec4)\s+main\s*\(([^)]*)\)\s*\{/.exec(withoutUniforms);
+    if (signature == null) {
+        throw new Error("[tgfx] shader: expected a 'vec4 main(vec2 pos)' entry point");
+    }
+    const open = signature.index + signature[0].length - 1;
+    const body = blockAt(withoutUniforms, open);
+    const before = withoutUniforms.slice(0, signature.index);
+    const after = withoutUniforms.slice(open + body.length + 2);
+    // Only what precedes `main` is lifted, so a helper below it would be dropped.
+    if (after.trim() !== '') {
+        throw new Error(`[tgfx] shader: declarations must come before main(), found after it: '${after.trim()}'`);
+    }
+    const param = /\b(?:half2|float2|vec2)\s+(\w+)/.exec(signature[1] ?? '');
+    const bind = param != null ? `vec2 ${param[1]} = fragCoord;\n` : '';
+    // A declaration the uniform pass could not consume would be emitted verbatim and fail in the driver.
+    if (/\buniform\b/.test(before)) {
+        throw new Error('[tgfx] shader: unsupported uniform declaration — only scalar, vector and square-matrix uniforms are supported, not arrays');
+    }
+    const chunks = topLevelChunks(before);
+    const names = chunks.map(declaredName);
+    let glsl = toGlslTypes(`${bind}${body}`).trim();
+    let functions = toGlslTypes(chunks.join('')).trim();
+    // Both spellings become `TGFX_CHILD_0(coord)`, after the type rewrite so a child cannot be mangled.
+    childNames.forEach((name, index) => {
+        const calls = [
+            new RegExp(`\\b${name}\\s*\\.\\s*eval\\s*\\(`, 'g'),
+            new RegExp(`\\bsample\\s*\\(\\s*${name}\\s*,\\s*`, 'g'),
+        ];
+        for (const call of calls) {
+            glsl = glsl.replace(call, `TGFX_CHILD_${index}(`);
+            functions = functions.replace(call, `TGFX_CHILD_${index}(`);
+        }
+    });
+    for (const name of childNames) {
+        if (new RegExp(`\\b${name}\\b`).test(glsl + functions)) {
+            throw new Error(`[tgfx] shader: child '${name}' may only be used as '${name}.eval(coord)' or 'sample(${name}, coord)'`);
+        }
+    }
+    return {
+        body: glsl,
+        preamble: functions,
+        functionNames: names,
+        uniformNames,
+        uniformSizes,
+        childNames,
+    };
+}

package/lib/compiler/text.d.ts

@@ -0,0 +1,37 @@
+import { type Node } from '../reconciler/types';
+import type { FontProps, ParagraphProps } from '../types';
+import type { SceneWriter } from './writer';
+export declare function alignCode(align: unknown): number;
+/** CSS weight for a `fontWeight` prop. Unknown values fall back to normal. */
+export declare function weightValue(weight: unknown): number;
+/**
+ * The family/weight/style block `<Text>` and `<TextPath>` share, in the order
+ * SceneRenderer::readTextSpec reads it.
+ */
+export declare function writeFont(w: SceneWriter, p: Record<string, unknown>): void;
+/**
+ * The run list, read by SceneRenderer::readTextRuns: a count, then per run its
+ * string and what it overrides of the paragraph's face. A `<Text>` with no
+ * `<Span>` children writes exactly one run that overrides nothing, so a plain
+ * label costs one extra word plus a zeroed style block.
+ *
+ * A run's own `fontSize` is deliberately not animated: the layout is memoised
+ * against the paragraph's size, and a second moving size would miss that memo on
+ * every frame. 0 means "the paragraph's size", which is the animated one.
+ */
+export declare function writeTextRuns(w: SceneWriter, node: Node, props: Record<string, unknown>): void;
+/** The style block for `measureText`, defaulted the same way the writer does. */
+export declare function fontStyleOf(props?: Omit<FontProps, 'fontSize'> & ParagraphProps & {
+    fontSize?: number;
+}): {
+    fontSize: number;
+    fontFamily: string;
+    fontWeight: number;
+    italic: boolean;
+    letterSpacing: number;
+    width: number;
+    align: number;
+    lineHeight: number;
+    maxLines: number;
+    ellipsis: string;
+};

package/lib/compiler/text.js

@@ -0,0 +1,77 @@
+import { NodeType } from '../reconciler/types';
+import { resolveColor } from './colors';
+import { resolveNumber, resolveValue } from './values';
+const ALIGN = { left: 0, center: 1, right: 2 };
+export function alignCode(align) {
+    return ALIGN[align] ?? 0;
+}
+/** CSS weight for a `fontWeight` prop. Unknown values fall back to normal. */
+export function weightValue(weight) {
+    if (weight === 'bold') {
+        return 700;
+    }
+    if (typeof weight === 'number' && weight >= 1 && weight <= 1000) {
+        return Math.round(weight);
+    }
+    return 400;
+}
+/**
+ * The family/weight/style block `<Text>` and `<TextPath>` share, in the order
+ * SceneRenderer::readTextSpec reads it.
+ */
+export function writeFont(w, p) {
+    w.pushString(p.fontFamily != null ? String(p.fontFamily) : '');
+    w.push(weightValue(p.fontWeight));
+    w.push(p.fontStyle === 'italic' ? 1 : 0);
+    w.push(resolveNumber(p.letterSpacing, 0));
+}
+/**
+ * The run list, read by SceneRenderer::readTextRuns: a count, then per run its
+ * string and what it overrides of the paragraph's face. A `<Text>` with no
+ * `<Span>` children writes exactly one run that overrides nothing, so a plain
+ * label costs one extra word plus a zeroed style block.
+ *
+ * A run's own `fontSize` is deliberately not animated: the layout is memoised
+ * against the paragraph's size, and a second moving size would miss that memo on
+ * every frame. 0 means "the paragraph's size", which is the animated one.
+ */
+export function writeTextRuns(w, node, props) {
+    const spans = node.children.filter((child) => child.type === NodeType.Span);
+    if (spans.length === 0) {
+        w.push(1);
+        writeRun(w, String(resolveValue(props.text) ?? ''), {});
+        return;
+    }
+    w.push(spans.length);
+    for (const span of spans) {
+        writeRun(w, String(resolveValue(span.props.text) ?? ''), span.props);
+    }
+}
+function writeRun(w, text, p) {
+    w.pushString(text);
+    w.pushString(p.fontFamily != null ? String(p.fontFamily) : '');
+    // 0, not 400: the paragraph's weight is what an unset span inherits.
+    w.push(p.fontWeight !== undefined ? weightValue(p.fontWeight) : 0);
+    // 0 inherit, 1 italic, 2 upright — a flag could not say "unset", and an implicit run always is.
+    w.push(p.fontStyle === 'italic' ? 1 : p.fontStyle === 'normal' ? 2 : 0);
+    w.push(resolveNumber(p.letterSpacing, 0));
+    w.push(resolveNumber(p.fontSize, 0));
+    const hasColor = p.color !== undefined;
+    w.push(hasColor ? 1 : 0);
+    w.push(hasColor ? resolveColor(resolveValue(p.color)) : 0);
+}
+/** The style block for `measureText`, defaulted the same way the writer does. */
+export function fontStyleOf(props = {}) {
+    return {
+        fontSize: props.fontSize ?? 14,
+        fontFamily: props.fontFamily ?? '',
+        fontWeight: weightValue(props.fontWeight),
+        italic: props.fontStyle === 'italic',
+        letterSpacing: props.letterSpacing ?? 0,
+        width: props.width ?? 0,
+        align: alignCode(props.textAlign),
+        lineHeight: props.lineHeight ?? 0,
+        maxLines: props.maxLines ?? 0,
+        ellipsis: props.ellipsis ?? '',
+    };
+}

package/lib/compiler/transform.d.ts

@@ -0,0 +1,34 @@
+type Num = number | {
+    value: number;
+};
+type Angle = number | `${number}deg` | `${number}rad` | {
+    value: number;
+};
+export type TransformOp = {
+    translateX: Num;
+} | {
+    translateY: Num;
+} | {
+    translate: [Num, Num];
+} | {
+    scale: Num;
+} | {
+    scaleX: Num;
+} | {
+    scaleY: Num;
+} | {
+    rotate: Angle;
+} | {
+    rotateZ: Angle;
+} | {
+    skewX: Angle;
+} | {
+    skewY: Angle;
+};
+export type Transform = TransformOp[];
+export interface Vector {
+    x: number;
+    y: number;
+}
+export declare function toRadians(v: number | string): number;
+export {};