onejs-react 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/__tests__/components.test.tsx

@@ -22,7 +22,7 @@ import {
     Image,
     clearImageCache,
 } from '../components';
-import { MockVisualElement, MockTexture2D, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI, mockFileSystem } from './mocks';
+import { MockVisualElement, MockTexture2D, MockVectorImage, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI, mockFileSystem, mockUrlAssets } from './mocks';
 
 // Helper to extract value from style (handles both raw values and MockLength/MockColor)
 function getStyleValue(style: unknown): unknown {
@@ -443,6 +443,98 @@ describe('components', () => {
 
             expect(readSpy).toHaveBeenCalledTimes(2);
         });
+
+        it('loads SVG synchronously via SVGUtils in the editor', async () => {
+            mockFileSystem.set("/project/App/assets/icons/star.svg", "<svg></svg>");
+            (globalThis as any).__workingDir = "/project/App";
+
+            const container = createMockContainer();
+            render(<Image src="icons/star.svg" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockVectorImage);
+            expect((el.image as MockVectorImage).svgText).toBe("<svg></svg>");
+        });
+    });
+
+    describe('Image on URL StreamingAssets platforms (Android APK, WebGL)', () => {
+        const JAR_BASE = "jar:file:///data/app/base.apk!/assets";
+
+        // Simulate an Android player: not the editor, and streamingAssetsPath
+        // is a jar: URL inside the APK that System.IO.File cannot read
+        beforeEach(() => {
+            const app = (globalThis as any).CS.UnityEngine.Application;
+            app.isEditor = false;
+            app.streamingAssetsPath = JAR_BASE;
+        });
+
+        it('loads raster images asynchronously via Network.LoadTextureFromUrl', async () => {
+            mockUrlAssets.set(`${JAR_BASE}/onejs/assets/images/logo.png`, [0x89, 0x50, 0x4e, 0x47]);
+
+            const container = createMockContainer();
+            render(<Image src="images/logo.png" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockTexture2D);
+            expect((el.image as MockTexture2D)._loaded).toBe(true);
+            expect((el.image as MockTexture2D).filterMode).toBe(1); // Bilinear
+        });
+
+        it('loads SVG asynchronously via fetch + SVGUtils', async () => {
+            mockUrlAssets.set(`${JAR_BASE}/onejs/assets/icons/spinner.svg`, "<svg>spin</svg>");
+
+            const container = createMockContainer();
+            render(<Image src="icons/spinner.svg" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockVectorImage);
+            expect((el.image as MockVectorImage).svgText).toBe("<svg>spin</svg>");
+        });
+
+        it('keeps a null image and logs an error when the asset is missing', async () => {
+            const container = createMockContainer();
+            render(<Image src="images/missing.png" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeNull();
+            expect(console.error).toHaveBeenCalledWith(
+                expect.stringContaining("Image src not found: images/missing.png")
+            );
+        });
+
+        it('dedupes concurrent loads and serves later mounts from the cache', async () => {
+            mockUrlAssets.set(`${JAR_BASE}/onejs/assets/a.png`, [0x89]);
+            const cs = (globalThis as any).CS;
+            const loadSpy = vi.spyOn(cs.OneJS.Network, 'LoadTextureFromUrl');
+
+            // Two simultaneous mounts of the same src share one request
+            const container1 = createMockContainer();
+            render(
+                <View>
+                    <Image src="a.png" />
+                    <Image src="a.png" />
+                </View>,
+                container1 as any
+            );
+            await flushMicrotasks();
+
+            expect(loadSpy).toHaveBeenCalledTimes(1);
+            const view = container1.children[0];
+            expect((view.children[0] as any).image).toBeInstanceOf(MockTexture2D);
+            expect((view.children[1] as any).image).toBeInstanceOf(MockTexture2D);
+
+            // A later mount resolves synchronously from the cache
+            const container2 = createMockContainer();
+            render(<Image src="a.png" />, container2 as any);
+            await flushMicrotasks();
+
+            expect(loadSpy).toHaveBeenCalledTimes(1);
+            expect((container2.children[0] as any).image).toBeInstanceOf(MockTexture2D);
+        });
     });
 
     describe('event handler mapping', () => {

package/src/__tests__/mocks.ts

@@ -263,11 +263,26 @@ export class MockTexture2D {
     }
 }
 
+/**
+ * Mock VectorImage as produced by SVGUtils.LoadFromString
+ */
+export class MockVectorImage {
+    constructor(public svgText: string) {}
+}
+
 /**
  * Mock file system for image loading tests.
- * Tests can add entries to control which files "exist" and what bytes they contain.
+ * Tests can add entries to control which files "exist" and what they contain:
+ * number[] entries are raster bytes, string entries are text (e.g. SVG source).
+ */
+export const mockFileSystem = new Map<string, number[] | string>()
+
+/**
+ * Mock URL-addressable assets for StreamingAssets-as-URL platforms (Android
+ * APK jar: URLs, WebGL http URLs). Keyed by full URL; number[] entries are
+ * served by Network.LoadTextureFromUrl, string entries by the fetch stub.
  */
-export const mockFileSystem = new Map<string, number[]>()
+export const mockUrlAssets = new Map<string, number[] | string>()
 
 /**
  * Create the mock CS global object that mirrors QuickJSBootstrap.js proxy
@@ -286,7 +301,14 @@ export function createMockCS() {
                 },
                 File: {
                     Exists: (path: string) => mockFileSystem.has(path),
-                    ReadAllBytes: (path: string) => mockFileSystem.get(path) || [],
+                    ReadAllBytes: (path: string) => {
+                        const entry = mockFileSystem.get(path);
+                        return Array.isArray(entry) ? entry : [];
+                    },
+                    ReadAllText: (path: string) => {
+                        const entry = mockFileSystem.get(path);
+                        return typeof entry === "string" ? entry : "";
+                    },
                 },
             },
         },
@@ -345,6 +367,20 @@ export function createMockCS() {
             },
         },
         OneJS: {
+            SVGUtils: {
+                LoadFromString: (svgText: string) => new MockVectorImage(svgText),
+            },
+            // Mirrors CS.OneJS.Network (Network.cs): LoadTextureFromUrl resolves
+            // to a Texture2D on success, null on failure (no throw).
+            Network: {
+                LoadTextureFromUrl: async (url: string) => {
+                    const entry = mockUrlAssets.get(url);
+                    if (!Array.isArray(entry)) return null;
+                    const tex = new MockTexture2D(2, 2);
+                    tex.LoadImage(entry);
+                    return tex;
+                },
+            },
             GPU: {
                 GPUBridge: {
                     SetElementBackgroundImage: () => {},
@@ -368,6 +404,23 @@ export function createMockCS() {
                     }
                 },
             },
+            // Mirrors the real CS.OneJS.NodeBridge: resolve element handles and
+            // delegate to the same tree ops the slow path would have called.
+            NodeBridge: {
+                Add: (parentHandle: number, childHandle: number) => {
+                    const parent = findElementByHandle(parentHandle);
+                    const child = findElementByHandle(childHandle);
+                    if (parent && child) parent.Add(child);
+                },
+                Insert: (parentHandle: number, index: number, childHandle: number) => {
+                    const parent = findElementByHandle(parentHandle);
+                    const child = findElementByHandle(childHandle);
+                    if (parent && child) parent.Insert(index, child);
+                },
+                RemoveFromHierarchy: (childHandle: number) => {
+                    findElementByHandle(childHandle)?.RemoveFromHierarchy();
+                },
+            },
         },
     };
 }
@@ -392,6 +445,7 @@ export function findElementByHandle(handle: number): MockVisualElement | undefin
 export function resetAllMocks(): void {
     createdElements = [];
     mockFileSystem.clear();
+    mockUrlAssets.clear();
 }
 
 /**

package/src/__tests__/painter.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from "vitest"
+import { Painter, batchedVisualContent } from "../painter"
+
+// Opcodes mirrored from painter.ts / PainterBridge.cs. These assertions are the
+// guard that the JS recorder and the C# replay engine stay in sync.
+const OP = {
+    BeginPath: 1, ClosePath: 2, MoveTo: 3, LineTo: 4, Arc: 5, ArcTo: 6,
+    Bezier: 7, Quad: 8, Fill: 9, Stroke: 10, LineWidth: 11, FillColor: 12,
+    StrokeColor: 13, LineCap: 14, LineJoin: 15, MiterLimit: 16,
+    DashOffset: 17, DashPattern: 18,
+}
+
+describe("Painter command buffer", () => {
+    let lastBuffer: Float32Array | null
+    let executeSpy: ReturnType<typeof vi.fn>
+    const mgc = {} as never
+
+    beforeEach(() => {
+        lastBuffer = null
+        executeSpy = vi.fn((_mgc: unknown, buffer: Float32Array) => {
+            lastBuffer = buffer
+        })
+        // setup.ts installs a fresh mock CS each test; augment it with PainterBridge.
+        ;(globalThis as any).CS.OneJS.PainterBridge = { Execute: executeSpy }
+    })
+
+    it("flushes recorded ops as a Float32Array and resets", () => {
+        const p = new Painter()
+        p.beginPath()
+        p.moveTo(10, 20)
+        p.lineTo(30, 40)
+        p.fill()
+
+        expect(p.length).toBe(9)
+        p.flush(mgc)
+
+        expect(executeSpy).toHaveBeenCalledTimes(1)
+        expect(lastBuffer).toBeInstanceOf(Float32Array)
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.BeginPath,
+            OP.MoveTo, 10, 20,
+            OP.LineTo, 30, 40,
+            OP.Fill, 0, // default rule = NonZero
+        ])
+        // Buffer is reset after flush so the next repaint starts clean.
+        expect(p.length).toBe(0)
+    })
+
+    it("applies defaults: arc direction Clockwise (0) and color alpha 1", () => {
+        const p = new Painter()
+        p.fillColor(0.5, 0.25, 0.125)
+        p.arc(100, 100, 80, 0, 0.5)
+        p.flush(mgc)
+
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.FillColor, 0.5, 0.25, 0.125, 1,
+            OP.Arc, 100, 100, 80, 0, 0.5, 0, // dir default = Clockwise
+        ])
+    })
+
+    it("honors explicit enum options", () => {
+        const p = new Painter()
+        p.lineCap(Painter.LineCap.Round)
+        p.lineJoin(Painter.LineJoin.Bevel)
+        p.fill(Painter.FillRule.OddEven)
+        p.flush(mgc)
+
+        expect(Array.from(lastBuffer!)).toEqual([
+            OP.LineCap, 1,
+            OP.LineJoin, 1,
+            OP.Fill, 1,
+        ])
+    })
+
+    it("flush is a no-op when nothing was recorded", () => {
+        new Painter().flush(mgc)
+        expect(executeSpy).not.toHaveBeenCalled()
+    })
+
+    it("methods are chainable", () => {
+        const p = new Painter()
+        const ret = p.beginPath().moveTo(0, 0).lineTo(1, 1)
+        expect(ret).toBe(p)
+    })
+
+    it("batchedVisualContent reuses one buffer and does not accumulate across repaints", () => {
+        const draw = (p: Painter) => {
+            p.beginPath()
+            p.moveTo(1, 2)
+        }
+        const callback = batchedVisualContent(draw)
+
+        callback(mgc)
+        const first = Array.from(lastBuffer!)
+        callback(mgc)
+        const second = Array.from(lastBuffer!)
+
+        expect(executeSpy).toHaveBeenCalledTimes(2)
+        expect(first).toEqual([OP.BeginPath, OP.MoveTo, 1, 2])
+        // Second repaint is identical, not double-length - the painter cleared.
+        expect(second).toEqual(first)
+    })
+})

package/src/__tests__/setup.ts

@@ -9,7 +9,7 @@
  */
 
 import { vi, beforeEach, afterEach } from "vitest";
-import { createMockCS, resetAllMocks } from "./mocks";
+import { createMockCS, resetAllMocks, mockUrlAssets } from "./mocks";
 import { clearImageCache } from "../components";
 
 // Extend globalThis type for our mocks
@@ -60,9 +60,20 @@ beforeEach(() => {
     // Use real setTimeout/clearTimeout - React scheduler depends on them
     (global as any).setTimeout = originalSetTimeout;
     (global as any).clearTimeout = originalClearTimeout;
+
+    // Mock fetch serving text entries from mockUrlAssets (mirrors the
+    // UnityWebRequest-backed fetch from QuickJSBootstrap.js)
+    vi.stubGlobal("fetch", vi.fn(async (url: string) => {
+        const entry = mockUrlAssets.get(url);
+        if (typeof entry !== "string") {
+            return { ok: false, status: 404, statusText: "Not Found", text: async () => "" };
+        }
+        return { ok: true, status: 200, statusText: "OK", text: async () => entry };
+    }));
 });
 
 // Clean up after each test
 afterEach(() => {
     vi.clearAllMocks();
+    vi.unstubAllGlobals();
 });

package/src/components.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, createElement, useMemo, type ReactElement, type Ref } from 'react';
+import { forwardRef, createElement, useEffect, useMemo, useState, type ReactElement, type Ref } from 'react';
 import type {
   BaseProps,
   ViewProps,
@@ -33,6 +33,14 @@ useExtensions(CS.UnityEngine.ImageConversion)
 
 // Module-level image cache shared across all Image instances
 const _imageCache = new Map<string, any>()
+// In-flight async loads keyed by src, so simultaneous mounts share one request
+const _imagePending = new Map<string, Promise<any>>()
+
+// On Android, streamingAssetsPath is a jar:file://...apk!/assets URL; on WebGL
+// it's http(s). System.IO.File can't read those - they need UnityWebRequest.
+function _isUrlPath(path: string): boolean {
+    return path.includes("://")
+}
 
 function _resolveAssetPath(src: string): string {
     const Path = CS.System.IO.Path
@@ -46,7 +54,11 @@ function _resolveAssetPath(src: string): string {
             : Path.Combine(Path.GetDirectoryName(CS.UnityEngine.Application.dataPath), "App")
         return Path.Combine(workingDir, "assets", src)
     }
-    return Path.Combine(CS.UnityEngine.Application.streamingAssetsPath, "onejs", "assets", src)
+    const streamingAssets = CS.UnityEngine.Application.streamingAssetsPath
+    if (_isUrlPath(streamingAssets)) {
+        return `${streamingAssets}/onejs/assets/${src}`
+    }
+    return Path.Combine(streamingAssets, "onejs", "assets", src)
 }
 
 function _loadImageAsset(src: string): any | null {
@@ -54,6 +66,9 @@ function _loadImageAsset(src: string): any | null {
     if (cached) return cached
 
     const fullPath = _resolveAssetPath(src)
+    // URL paths (Android APK, WebGL) can't be read synchronously; the Image
+    // component falls back to _loadImageAssetAsync for these.
+    if (_isUrlPath(fullPath)) return null
     if (!CS.System.IO.File.Exists(fullPath)) {
         console.error(`Image src not found: ${src} (resolved to ${fullPath})`)
         return null
@@ -75,12 +90,52 @@ function _loadImageAsset(src: string): any | null {
     return result
 }
 
+function _loadImageAssetAsync(src: string, url: string): Promise<any> {
+    const existing = _imagePending.get(src)
+    if (existing) return existing
+
+    const promise = (async (): Promise<any> => {
+        try {
+            let result: any
+            if (src.toLowerCase().endsWith(".svg")) {
+                const res = await fetch(url)
+                if (!res.ok) {
+                    console.error(`Image src not found: ${src} (resolved to ${url})`)
+                    return null
+                }
+                const svgText = await res.text()
+                result = CS.OneJS.SVGUtils.LoadFromString(svgText)
+            } else {
+                const tex = await CS.OneJS.Network.LoadTextureFromUrl(url)
+                if (!tex) {
+                    console.error(`Image src not found: ${src} (resolved to ${url})`)
+                    return null
+                }
+                tex.filterMode = CS.UnityEngine.FilterMode.Bilinear
+                result = tex
+            }
+            _imageCache.set(src, result)
+            return result
+        } catch (e) {
+            console.error(`Image src failed to load: ${src} (resolved to ${url}): ${e}`)
+            return null
+        }
+    })()
+
+    _imagePending.set(src, promise)
+    promise.then(() => {
+        if (_imagePending.get(src) === promise) _imagePending.delete(src)
+    })
+    return promise
+}
+
 /**
  * Clear the Image component's image cache.
  * Call this if you need to force-reload images (e.g., after replacing files on disk).
  */
 export function clearImageCache(): void {
     _imageCache.clear()
+    _imagePending.clear()
 }
 
 // Props with ref support for intrinsic elements
@@ -170,11 +225,27 @@ export const ScrollView = forwardRef<ScrollViewElement, ScrollViewProps>((props,
 ScrollView.displayName = 'ScrollView';
 
 export const Image = forwardRef<ImageElement, ImageProps>(({ src, image, ...rest }, ref) => {
+  const [loaded, setLoaded] = useState<{ src: string; image: any } | null>(null)
   const resolved = useMemo(() => {
     if (src) return _loadImageAsset(src)
     return image
   }, [src, image])
-  return <ojs-image ref={ref} image={resolved} {...rest} />;
+
+  // Async fallback for platforms where StreamingAssets is a URL (Android APK,
+  // WebGL): load via UnityWebRequest, then re-render with the result.
+  useEffect(() => {
+    if (!src || resolved) return
+    const fullPath = _resolveAssetPath(src)
+    if (!_isUrlPath(fullPath)) return
+    let cancelled = false
+    _loadImageAssetAsync(src, fullPath).then((result) => {
+      if (!cancelled && result) setLoaded({ src, image: result })
+    })
+    return () => { cancelled = true }
+  }, [src, resolved])
+
+  const asyncImage = loaded && loaded.src === src ? loaded.image : null
+  return <ojs-image ref={ref} image={resolved ?? asyncImage} {...rest} />;
 });
 Image.displayName = 'Image';
 

package/src/host-config.ts

@@ -75,6 +75,11 @@ declare const CS: {
             ApplyStyles: (element: CSObject, styles: Record<string, unknown>) => void;
             AddClassesBatch: (element: CSObject, classes: string[]) => void;
         };
+        NodeBridge: {
+            Add: (parentHandle: number, childHandle: number) => void;
+            Insert: (parentHandle: number, index: number, childHandle: number) => void;
+            RemoveFromHierarchy: (childHandle: number) => void;
+        };
     };
 };
 
@@ -229,7 +234,6 @@ const EVENT_PROPS: Record<string, string> = {
     onPointerCancel: 'pointercancel',
     onPointerCapture: 'pointercapture',
     onPointerCaptureOut: 'pointercaptureout',
-    onPointerStationary: 'pointerstationary',
 
     // Mouse events
     onMouseDown: 'mousedown',
@@ -571,6 +575,35 @@ function untrackParent(child: CSObject) {
     }
 }
 
+// Tree wiring routes through CS.OneJS.NodeBridge, a zero-alloc fast path, instead
+// of the per-element VisualElement.Add/Insert/RemoveFromHierarchy reflection calls.
+// Handles are read from the proxy's __csHandle (a JS-side field, no crossing).
+// Falls back to the direct proxy call when a handle isn't available (e.g. a
+// container that isn't a handle-tracked element).
+function elementHandle(el: CSObject): number {
+    return (el as unknown as { __csHandle?: number }).__csHandle ?? -1;
+}
+
+function nodeAdd(parentEl: CSObject, childEl: CSObject) {
+    const ph = elementHandle(parentEl);
+    const ch = elementHandle(childEl);
+    if (ph > 0 && ch > 0) CS.OneJS.NodeBridge.Add(ph, ch);
+    else parentEl.Add(childEl);
+}
+
+function nodeInsert(parentEl: CSObject, index: number, childEl: CSObject) {
+    const ph = elementHandle(parentEl);
+    const ch = elementHandle(childEl);
+    if (ph > 0 && ch > 0) CS.OneJS.NodeBridge.Insert(ph, index, ch);
+    else parentEl.Insert(index, childEl);
+}
+
+function nodeRemoveFromHierarchy(childEl: CSObject) {
+    const ch = elementHandle(childEl);
+    if (ch > 0) CS.OneJS.NodeBridge.RemoveFromHierarchy(ch);
+    else childEl.RemoveFromHierarchy();
+}
+
 
 // Apply event handlers
 function applyEvents(instance: Instance, props: BaseProps) {
@@ -655,7 +688,7 @@ function unmergTextChildren(parentInstance: Instance) {
     // Add each merged text child as an actual visual child
     for (const child of children) {
         child.mergedInto = undefined;
-        parentInstance.element.Add(child.element);
+        nodeAdd(parentInstance.element, child.element);
     }
 
     // Clear the merged children list
@@ -727,12 +760,12 @@ function insertElementBefore(parentEl: CSObject, childEl: CSObject, beforeChildE
     if (beforeIndex < 0) {
         // beforeChild isn't actually in the parent (should not normally happen).
         // Fall back to appending, preserving the previous fallback behavior.
-        parentEl.Add(childEl);
+        nodeAdd(parentEl, childEl);
         return;
     }
     const childIndex = parentEl.IndexOf(childEl);
     const target = childIndex >= 0 && childIndex < beforeIndex ? beforeIndex - 1 : beforeIndex;
-    parentEl.Insert(target, childEl);
+    nodeInsert(parentEl, target, childEl);
 }
 
 // MARK: Component-specific prop handlers
@@ -1092,7 +1125,7 @@ export const hostConfig = {
             appendMergedTextChild(parentInstance, child);
         } else {
             handleNonTextChild(parentInstance);
-            parentInstance.element.Add(child.element);
+            nodeAdd(parentInstance.element, child.element);
         }
         trackParent(child.element, parentInstance.element);
     },
@@ -1102,13 +1135,13 @@ export const hostConfig = {
             appendMergedTextChild(parentInstance, child);
         } else {
             handleNonTextChild(parentInstance);
-            parentInstance.element.Add(child.element);
+            nodeAdd(parentInstance.element, child.element);
         }
         trackParent(child.element, parentInstance.element);
     },
 
     appendChildToContainer(container: Container, child: Instance) {
-        container.Add(child.element);
+        nodeAdd(container, child.element);
         // Container is the root - no parent to track
     },
 
@@ -1136,7 +1169,7 @@ export const hostConfig = {
             // is a safe no-op if it's already detached. Using it instead of
             // parentInstance.element.Remove(child.element) keeps unmount from throwing
             // when the root was cleared before React tore the tree down (hot reload).
-            child.element.RemoveFromHierarchy();
+            nodeRemoveFromHierarchy(child.element);
         }
         untrackParent(child.element);
     },
@@ -1145,7 +1178,7 @@ export const hostConfig = {
         __eventAPI.removeAllEventListeners(child.element);
         // See removeChild: tolerant of an already-detached element so a hot-reload
         // teardown (which clears the root first) can still unmount cleanly.
-        child.element.RemoveFromHierarchy();
+        nodeRemoveFromHierarchy(child.element);
         untrackParent(child.element);
     },
 

package/src/index.ts

@@ -48,6 +48,9 @@ export type {
 // Vector Drawing
 export { Transform2D, useVectorContent } from './vector';
 
+// Batched vector drawing - single-crossing command buffer (see painter.ts)
+export { Painter, batchedVisualContent, useBatchedVectorContent } from './painter';
+
 // Sync Hooks & C# Interop Utilities
 export { useFrameSync, useFrameSyncWith, useThrottledSync, useEventSync, toArray } from './hooks';
 export type { EventSource } from './hooks';

package/src/painter.ts

@@ -0,0 +1,212 @@
+/**
+ * Batched vector drawing for OneJS.
+ *
+ * A Painter records drawing ops into a flat numeric buffer and flushes them to
+ * C# in a single crossing via CS.OneJS.PainterBridge.Execute, instead of making
+ * one reflection crossing per Painter2D call (and per `new Vector2`/`new Color`)
+ * the way raw mgc.painter2D usage does. On the QuickJS interpreter those
+ * per-op crossings are the dominant cost of custom vector drawing.
+ *
+ * For the common case, wrap your draw function with batchedVisualContent so the
+ * flush is automatic:
+ *
+ *     import { batchedVisualContent } from "onejs-react"
+ *
+ *     <View
+ *         style={{ width: 200, height: 200 }}
+ *         onGenerateVisualContent={batchedVisualContent((p) => {
+ *             p.fillColor(1, 0, 0, 1)
+ *             p.beginPath()
+ *             p.arc(100, 100, 80, 0, Math.PI * 2)
+ *             p.fill()
+ *         })}
+ *     />
+ *
+ * Gradients, textures, and DrawText are not part of the buffer; for those keep
+ * using the raw mgc.painter2D / mgc API.
+ */
+
+import { useRef, useEffect, type DependencyList, type RefObject } from "react"
+import type { VisualElement, MeshGenerationContext, GenerateVisualContentCallback } from "./types"
+
+declare const CS: {
+    OneJS: {
+        PainterBridge: {
+            Execute: (mgc: MeshGenerationContext, buffer: Float32Array) => void
+        }
+    }
+}
+
+// Opcode contract - must match Assets/Singtaa/OneJS/Runtime/PainterBridge.cs.
+const OP_BEGIN_PATH = 1
+const OP_CLOSE_PATH = 2
+const OP_MOVE_TO = 3
+const OP_LINE_TO = 4
+const OP_ARC = 5
+const OP_ARC_TO = 6
+const OP_BEZIER_CURVE_TO = 7
+const OP_QUADRATIC_CURVE_TO = 8
+const OP_FILL = 9
+const OP_STROKE = 10
+const OP_LINE_WIDTH = 11
+const OP_FILL_COLOR = 12
+const OP_STROKE_COLOR = 13
+const OP_LINE_CAP = 14
+const OP_LINE_JOIN = 15
+const OP_MITER_LIMIT = 16
+const OP_DASH_OFFSET = 17
+const OP_DASH_PATTERN = 18
+
+/**
+ * Records Painter2D drawing ops into a numeric buffer for batched playback.
+ *
+ * Methods are chainable. Coordinates and colors are plain numbers (no CS object
+ * construction), which is the whole point - the buffer crosses to C# once and
+ * the structs are built C#-side.
+ *
+ * Enum-like options live as statics so they do not collide with the CS enum
+ * type aliases (ArcDirection, FillRule, ...) re-exported from the package root:
+ *   p.arc(..., Painter.ArcDirection.CounterClockwise)
+ *   p.fill(Painter.FillRule.OddEven)
+ */
+export class Painter {
+    /** Stroke cap style. Values are the buffer contract, not Unity enum values. */
+    static readonly LineCap = { Butt: 0, Round: 1 } as const
+    /** Stroke join style. */
+    static readonly LineJoin = { Miter: 0, Bevel: 1, Round: 2 } as const
+    /** Fill rule for self-intersecting paths. */
+    static readonly FillRule = { NonZero: 0, OddEven: 1 } as const
+    /** Arc sweep direction. */
+    static readonly ArcDirection = { Clockwise: 0, CounterClockwise: 1 } as const
+
+    private _buf: number[] = []
+
+    /** Discard all recorded ops, keeping allocated capacity for reuse. */
+    clear(): this {
+        this._buf.length = 0
+        return this
+    }
+
+    /** Number of recorded floats. Useful for diagnostics and tests. */
+    get length(): number {
+        return this._buf.length
+    }
+
+    beginPath(): this { this._buf.push(OP_BEGIN_PATH); return this }
+    closePath(): this { this._buf.push(OP_CLOSE_PATH); return this }
+    moveTo(x: number, y: number): this { this._buf.push(OP_MOVE_TO, x, y); return this }
+    lineTo(x: number, y: number): this { this._buf.push(OP_LINE_TO, x, y); return this }
+
+    /** Arc with center (cx, cy). Angles in radians. dir uses Painter.ArcDirection. */
+    arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, dir: number = 0 /* Clockwise */): this {
+        this._buf.push(OP_ARC, cx, cy, radius, startAngle, endAngle, dir)
+        return this
+    }
+
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this {
+        this._buf.push(OP_ARC_TO, x1, y1, x2, y2, radius)
+        return this
+    }
+
+    bezierCurveTo(c1x: number, c1y: number, c2x: number, c2y: number, x: number, y: number): this {
+        this._buf.push(OP_BEZIER_CURVE_TO, c1x, c1y, c2x, c2y, x, y)
+        return this
+    }
+
+    quadraticCurveTo(cx: number, cy: number, x: number, y: number): this {
+        this._buf.push(OP_QUADRATIC_CURVE_TO, cx, cy, x, y)
+        return this
+    }
+
+    /** Fill the current path. rule uses Painter.FillRule (default NonZero). */
+    fill(rule: number = 0 /* NonZero */): this { this._buf.push(OP_FILL, rule); return this }
+    stroke(): this { this._buf.push(OP_STROKE); return this }
+
+    lineWidth(w: number): this { this._buf.push(OP_LINE_WIDTH, w); return this }
+    fillColor(r: number, g: number, b: number, a: number = 1): this { this._buf.push(OP_FILL_COLOR, r, g, b, a); return this }
+    strokeColor(r: number, g: number, b: number, a: number = 1): this { this._buf.push(OP_STROKE_COLOR, r, g, b, a); return this }
+    lineCap(cap: number): this { this._buf.push(OP_LINE_CAP, cap); return this }
+    lineJoin(join: number): this { this._buf.push(OP_LINE_JOIN, join); return this }
+    miterLimit(limit: number): this { this._buf.push(OP_MITER_LIMIT, limit); return this }
+    dashOffset(offset: number): this { this._buf.push(OP_DASH_OFFSET, offset); return this }
+    dashPattern(dash: number, gap: number): this { this._buf.push(OP_DASH_PATTERN, dash, gap); return this }
+
+    /**
+     * Send all recorded ops to C# in one crossing, then reset the buffer.
+     * No-op when nothing was recorded.
+     */
+    flush(mgc: MeshGenerationContext): void {
+        if (this._buf.length === 0) return
+        CS.OneJS.PainterBridge.Execute(mgc, Float32Array.from(this._buf))
+        this._buf.length = 0
+    }
+}
+
+/**
+ * Wrap a draw function so it records into a reused Painter and auto-flushes in
+ * one crossing after each repaint. The recommended entry point for batched
+ * drawing - assign the result straight to onGenerateVisualContent.
+ */
+export function batchedVisualContent(draw: (p: Painter) => void): GenerateVisualContentCallback {
+    const painter = new Painter()
+    return (mgc: MeshGenerationContext) => {
+        painter.clear()
+        draw(painter)
+        painter.flush(mgc)
+    }
+}
+
+/**
+ * Batched counterpart to useVectorContent. Returns a ref to attach to a
+ * VisualElement; the draw callback records into a reused Painter that flushes in
+ * a single crossing. Repaints automatically when deps change.
+ *
+ * @example
+ * const ref = useBatchedVectorContent((p) => {
+ *     p.fillColor(1, 0, 0, 1)
+ *     p.beginPath()
+ *     p.arc(100, 100, radius, 0, Math.PI * 2)
+ *     p.fill()
+ * }, [radius])
+ * return <View ref={ref} style={{ width: 200, height: 200 }} />
+ */
+export function useBatchedVectorContent(
+    draw: (p: Painter) => void,
+    deps: DependencyList = []
+): RefObject<VisualElement | null> {
+    const ref = useRef<VisualElement | null>(null)
+    const drawRef = useRef(draw)
+    drawRef.current = draw
+
+    useEffect(() => {
+        const element = ref.current
+        if (!element) return
+
+        const painter = new Painter()
+        const callback: GenerateVisualContentCallback = (mgc) => {
+            painter.clear()
+            drawRef.current(painter)
+            painter.flush(mgc)
+        }
+
+        const el = element as unknown as { generateVisualContent: GenerateVisualContentCallback | null }
+        el.generateVisualContent = callback
+        element.MarkDirtyRepaint()
+
+        return () => {
+            el.generateVisualContent = null
+        }
+    }, [])
+
+    const isFirstRender = useRef(true)
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false
+            return
+        }
+        const element = ref.current
+        if (element) element.MarkDirtyRepaint()
+    }, deps)
+
+    return ref
+}

package/src/types.ts

@@ -436,7 +436,6 @@ export interface BaseProps {
   onPointerCancel?: PointerEventHandler;
   onPointerCapture?: PointerEventHandler;
   onPointerCaptureOut?: PointerEventHandler;
-  onPointerStationary?: PointerEventHandler;
 
   // Mouse events
   onMouseDown?: MouseEventHandler;