onejs-react 0.1.1 → 0.1.2

package/README.md

@@ -10,7 +10,7 @@ React 19 reconciler for Unity's UI Toolkit.
 | `src/renderer.ts` | Entry point: `render(element, container)` |
 | `src/components.tsx` | Component wrappers: View, Text, Label, Button, TextField, etc. |
 | `src/screen.tsx` | Responsive design: ScreenProvider, useBreakpoint, useScreenSize, useResponsive |
-| `src/types.ts` | TypeScript type definitions |
+| `src/types.ts` | TypeScript type definitions (includes Vector Drawing types) |
 | `src/index.ts` | Package exports |
 
 ## Components
@@ -48,6 +48,70 @@ function App() {
 render(<App />, __root);
 ```
 
+## Type Usage Guide
+
+OneJS has multiple type sources. Here's when to use each:
+
+### React Components (Most Common)
+
+Import types from `onejs-react` for refs and component props:
+
+```tsx
+import { View, Button, VisualElement, ButtonElement } from "onejs-react"
+
+function MyComponent() {
+    const viewRef = useRef<VisualElement>(null)
+    const buttonRef = useRef<ButtonElement>(null)
+
+    useEffect(() => {
+        buttonRef.current?.Focus()
+    }, [])
+
+    return (
+        <View ref={viewRef}>
+            <Button ref={buttonRef} text="Click me" />
+        </View>
+    )
+}
+```
+
+### Imperative Element Creation
+
+For creating elements outside React, use `unity-types`:
+
+```tsx
+import { Button } from "UnityEngine.UIElements"
+
+const btn = new Button()
+btn.text = "Dynamic Button"
+__root.Add(btn)
+```
+
+### render() Container
+
+The `render()` function accepts any `RenderContainer`:
+
+```tsx
+import { render, RenderContainer } from "onejs-react"
+
+// __root is provided by the runtime
+render(<App />, __root)
+```
+
+### Type Hierarchy
+
+```
+RenderContainer         (minimal: __csHandle, __csType)
+    └── VisualElement   (full API: style, hierarchy, events)
+        ├── TextElement (+ text property)
+        │   ├── LabelElement
+        │   └── ButtonElement
+        ├── TextFieldElement (+ value, isPasswordField, etc.)
+        ├── ToggleElement    (+ value: boolean)
+        ├── SliderElement    (+ value, lowValue, highValue)
+        └── ScrollViewElement (+ scrollOffset, ScrollTo)
+```
+
 ## Key Concepts
 
 - **Element types**: Use `ojs-` prefix internally (e.g., `ojs-view`, `ojs-button`) to avoid conflicts with HTML types
@@ -77,6 +141,123 @@ Test suite uses Vitest with mocked Unity CS globals. Tests are in `src/__tests__
 | `mocks.ts` | Mock implementations of Unity UI Toolkit classes |
 | `setup.ts` | Global test setup for CS, __eventAPI |
 
+## Vector Drawing
+
+OneJS exposes Unity's `Painter2D` API for GPU-accelerated vector graphics. Any element can render custom vector content via `onGenerateVisualContent`.
+
+### Basic Usage
+
+```tsx
+import { View, render } from "onejs-react"
+
+function Circle() {
+    return (
+        <View
+            style={{ width: 200, height: 200, backgroundColor: "#333" }}
+            onGenerateVisualContent={(mgc) => {
+                const p = mgc.painter2D
+
+                // Draw a filled circle
+                p.fillColor = new CS.UnityEngine.Color(1, 0, 0, 1) // Red
+                p.BeginPath()
+                p.Arc(
+                    new CS.UnityEngine.Vector2(100, 100), // center
+                    80,                                   // radius
+                    CS.UnityEngine.UIElements.Angle.Degrees(0),
+                    CS.UnityEngine.UIElements.Angle.Degrees(360),
+                    CS.UnityEngine.UIElements.ArcDirection.Clockwise
+                )
+                p.Fill(CS.UnityEngine.UIElements.FillRule.NonZero)
+            }}
+        />
+    )
+}
+```
+
+### Painter2D Methods
+
+Path operations:
+- `BeginPath()` - Start a new path
+- `ClosePath()` - Close the current subpath
+- `MoveTo(point)` - Move to point without drawing
+- `LineTo(point)` - Draw line to point
+- `Arc(center, radius, startAngle, endAngle, direction)` - Draw arc
+- `ArcTo(p1, p2, radius)` - Draw arc tangent to two lines
+- `BezierCurveTo(cp1, cp2, end)` - Cubic bezier curve
+- `QuadraticCurveTo(cp, end)` - Quadratic bezier curve
+
+Rendering:
+- `Fill(fillRule)` - Fill the current path
+- `Stroke()` - Stroke the current path
+
+Properties:
+- `fillColor` - Fill color (Unity Color)
+- `strokeColor` - Stroke color (Unity Color)
+- `lineWidth` - Stroke width in pixels
+- `lineCap` - Line cap style (Butt, Round, Square)
+- `lineJoin` - Line join style (Miter, Round, Bevel)
+
+### Triggering Repaints
+
+Use `MarkDirtyRepaint()` to trigger a repaint when drawing state changes:
+
+```tsx
+function AnimatedCircle() {
+    const ref = useRef<VisualElement>(null)
+    const [radius, setRadius] = useState(50)
+
+    useEffect(() => {
+        // Trigger repaint when radius changes
+        ref.current?.MarkDirtyRepaint()
+    }, [radius])
+
+    return (
+        <View
+            ref={ref}
+            style={{ width: 200, height: 200 }}
+            onGenerateVisualContent={(mgc) => {
+                const p = mgc.painter2D
+                p.fillColor = new CS.UnityEngine.Color(0, 0.5, 1, 1)
+                p.BeginPath()
+                p.Arc(
+                    new CS.UnityEngine.Vector2(100, 100),
+                    radius,
+                    CS.UnityEngine.UIElements.Angle.Degrees(0),
+                    CS.UnityEngine.UIElements.Angle.Degrees(360),
+                    CS.UnityEngine.UIElements.ArcDirection.Clockwise
+                )
+                p.Fill(CS.UnityEngine.UIElements.FillRule.NonZero)
+            }}
+        />
+    )
+}
+```
+
+### Differences from HTML5 Canvas
+
+| Feature | Unity Painter2D | HTML5 Canvas |
+|---------|-----------------|--------------|
+| Transforms | Manual point calculation | Built-in translate/rotate/scale |
+| Gradients | Limited (strokeGradient) | Full linear/radial/conic |
+| State Stack | Not built-in | save()/restore() |
+| Text | Via MeshGenerationContext.DrawText() | fillText/strokeText |
+| Shadows | Not available | shadowBlur, shadowColor |
+| Clipping | Via nested VisualElements | clip() path-based |
+
+### Types
+
+The following types are re-exported from `unity-types`:
+
+```typescript
+type Vector2 = CS.UnityEngine.Vector2
+type Color = CS.UnityEngine.Color
+type Angle = CS.UnityEngine.UIElements.Angle
+type ArcDirection = CS.UnityEngine.UIElements.ArcDirection
+type Painter2D = CS.UnityEngine.UIElements.Painter2D
+type MeshGenerationContext = CS.UnityEngine.UIElements.MeshGenerationContext
+type GenerateVisualContentCallback = (context: MeshGenerationContext) => void
+```
+
 ## Dependencies
 
 - `react-reconciler@0.31.x` (React 19 compatible)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -38,6 +38,7 @@
     "@types/react-reconciler": "^0.28.9",
     "react": "^19.0.0",
     "typescript": "^5.7.0",
+    "unity-types": "file:../unity-types",
     "vitest": "^2.1.0"
   },
   "license": "MIT"

package/src/host-config.ts

@@ -1,6 +1,6 @@
 import type {HostConfig} from 'react-reconciler';
-import type {BaseProps, ViewStyle, VisualElement} from './types';
-import {parseStyleValue} from './style-parser';
+import type {BaseProps, ViewStyle, VisualElement, GenerateVisualContentCallback} from './types';
+import {parseStyleValue, parseColor} from './style-parser';
 
 // CSObject is an alias for VisualElement - they represent the same C# objects
 type CSObject = VisualElement;
@@ -53,6 +53,7 @@ declare const CS: {
             ListViewReorderMode: CSEnum;
             AlternatingRowBackground: CSEnum;
             CollectionVirtualizationMethod: CSEnum;
+            DisplayStyle: CSEnum;
         };
     };
     OneJS: {
@@ -143,6 +144,8 @@ export interface Instance {
     mergedInto?: Instance;
     // Set to true when a non-text child is added, disabling further text merging
     hasMixedContent?: boolean;
+    // For vector drawing: track the current generateVisualContent callback
+    visualContentCallback?: GenerateVisualContentCallback;
 }
 
 export type TextInstance = Instance; // For Label elements with text content
@@ -432,6 +435,38 @@ function applyEvents(instance: Instance, props: BaseProps) {
     }
 }
 
+/**
+ * Apply generateVisualContent callback for vector drawing.
+ * Uses Unity's generateVisualContent delegate on VisualElement.
+ *
+ * This follows the same pattern as ListView's makeItem/bindItem callbacks -
+ * we assign JS functions directly to C# delegate properties via the interop layer.
+ */
+function applyVisualContentCallback(instance: Instance, props: BaseProps) {
+    const callback = props.onGenerateVisualContent;
+    const existingCallback = instance.visualContentCallback;
+
+    if (callback !== existingCallback) {
+        const element = instance.element as unknown as { generateVisualContent: GenerateVisualContentCallback | null };
+
+        // Remove old callback if exists
+        if (existingCallback) {
+            // Clear the delegate via C# interop
+            element.generateVisualContent = null;
+        }
+
+        // Add new callback if provided
+        if (callback) {
+            // Assign callback to generateVisualContent property
+            // The C# interop layer handles the delegate conversion
+            element.generateVisualContent = callback;
+            instance.visualContentCallback = callback;
+        } else {
+            instance.visualContentCallback = undefined;
+        }
+    }
+}
+
 // MARK: Text Merging
 // Rebuild concatenated text from merged text children
 function rebuildMergedText(instance: Instance) {
@@ -541,6 +576,111 @@ function setValueProp<T>(target: T, key: keyof T, props: Record<string, unknown>
     }
 }
 
+// Apply TextField-specific properties
+function applyTextFieldProps(element: CSObject, props: Record<string, unknown>) {
+    // Map readOnly prop to isReadOnly property
+    if (props.readOnly !== undefined) {
+        (element as { isReadOnly: boolean }).isReadOnly = props.readOnly as boolean;
+    }
+    if (props.multiline !== undefined) {
+        (element as { multiline: boolean }).multiline = props.multiline as boolean;
+    }
+    if (props.maxLength !== undefined) {
+        (element as { maxLength: number }).maxLength = props.maxLength as number;
+    }
+    if (props.isPasswordField !== undefined) {
+        (element as { isPasswordField: boolean }).isPasswordField = props.isPasswordField as boolean;
+    }
+    if (props.maskChar !== undefined) {
+        (element as { maskChar: string }).maskChar = (props.maskChar as string).charAt(0);
+    }
+    if (props.isDelayed !== undefined) {
+        (element as { isDelayed: boolean }).isDelayed = props.isDelayed as boolean;
+    }
+    if (props.selectAllOnFocus !== undefined) {
+        (element as { selectAllOnFocus: boolean }).selectAllOnFocus = props.selectAllOnFocus as boolean;
+    }
+    if (props.selectAllOnMouseUp !== undefined) {
+        (element as { selectAllOnMouseUp: boolean }).selectAllOnMouseUp = props.selectAllOnMouseUp as boolean;
+    }
+    if (props.hideMobileInput !== undefined) {
+        (element as { hideMobileInput: boolean }).hideMobileInput = props.hideMobileInput as boolean;
+    }
+    if (props.autoCorrection !== undefined) {
+        (element as { autoCorrection: boolean }).autoCorrection = props.autoCorrection as boolean;
+    }
+    // Note: placeholder is handled differently in Unity - it's set via the textEdition interface
+    // For now we skip it as it requires more complex handling
+}
+
+// Apply Slider-specific properties
+function applySliderProps(element: CSObject, props: Record<string, unknown>) {
+    if (props.lowValue !== undefined) {
+        (element as { lowValue: number }).lowValue = props.lowValue as number;
+    }
+    if (props.highValue !== undefined) {
+        (element as { highValue: number }).highValue = props.highValue as number;
+    }
+    if (props.showInputField !== undefined) {
+        (element as { showInputField: boolean }).showInputField = props.showInputField as boolean;
+    }
+    if (props.inverted !== undefined) {
+        (element as { inverted: boolean }).inverted = props.inverted as boolean;
+    }
+    if (props.pageSize !== undefined) {
+        (element as { pageSize: number }).pageSize = props.pageSize as number;
+    }
+    if (props.fill !== undefined) {
+        (element as { fill: boolean }).fill = props.fill as boolean;
+    }
+    if (props.direction !== undefined) {
+        const UIE = CS.UnityEngine.UIElements;
+        (element as { direction: unknown }).direction = UIE.SliderDirection[props.direction as string];
+    }
+}
+
+// Apply Toggle-specific properties
+function applyToggleProps(element: CSObject, props: Record<string, unknown>) {
+    if (props.text !== undefined) {
+        (element as { text: string }).text = props.text as string;
+    }
+    if (props.toggleOnLabelClick !== undefined) {
+        (element as { toggleOnLabelClick: boolean }).toggleOnLabelClick = props.toggleOnLabelClick as boolean;
+    }
+}
+
+// Apply Image-specific properties
+function applyImageProps(element: CSObject, props: Record<string, unknown>) {
+    if (props.image !== undefined) {
+        (element as { image: unknown }).image = props.image;
+    }
+    if (props.sprite !== undefined) {
+        (element as { sprite: unknown }).sprite = props.sprite;
+    }
+    if (props.vectorImage !== undefined) {
+        (element as { vectorImage: unknown }).vectorImage = props.vectorImage;
+    }
+    if (props.scaleMode !== undefined) {
+        const scaleMode = CS.UnityEngine.ScaleMode[props.scaleMode as string];
+        (element as { scaleMode: unknown }).scaleMode = scaleMode;
+    }
+    if (props.tintColor !== undefined) {
+        // Parse color string to Unity Color
+        const color = parseColor(props.tintColor as string);
+        if (color) {
+            (element as { tintColor: unknown }).tintColor = color;
+        }
+    }
+    if (props.sourceRect !== undefined) {
+        const rect = props.sourceRect as { x: number; y: number; width: number; height: number };
+        (element as { sourceRect: unknown }).sourceRect = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
+    }
+    if (props.uv !== undefined) {
+        const rect = props.uv as { x: number; y: number; width: number; height: number };
+        (element as { uv: unknown }).uv = new CS.UnityEngine.Rect(rect.x, rect.y, rect.width, rect.height);
+    }
+}
+
 // Apply ScrollView-specific properties
 function applyScrollViewProps(element: CSScrollView, props: Record<string, unknown>) {
     const UIE = CS.UnityEngine.UIElements;
@@ -593,9 +733,23 @@ function applyListViewProps(element: CSListView, props: Record<string, unknown>)
 
 // Apply component-specific props based on element type
 function applyComponentProps(element: CSObject, type: string, props: Record<string, unknown>) {
+    // For Slider, apply range props (lowValue/highValue) BEFORE value
+    // Unity's Slider clamps value to [lowValue, highValue], so range must be set first
+    if (type === 'ojs-slider') {
+        applySliderProps(element, props);
+        applyCommonProps(element, props);
+        return;
+    }
+
     applyCommonProps(element, props);
 
-    if (type === 'ojs-scrollview') {
+    if (type === 'ojs-textfield') {
+        applyTextFieldProps(element, props);
+    } else if (type === 'ojs-toggle') {
+        applyToggleProps(element, props);
+    } else if (type === 'ojs-image') {
+        applyImageProps(element, props);
+    } else if (type === 'ojs-scrollview') {
         applyScrollViewProps(element as CSScrollView, props);
     } else if (type === 'ojs-listview') {
         applyListViewProps(element as CSListView, props);
@@ -621,6 +775,7 @@ function createInstance(type: string, props: BaseProps): Instance {
 
     applyClassName(element, props.className);
     applyEvents(instance, props);
+    applyVisualContentCallback(instance, props);
     applyComponentProps(element, type, props as Record<string, unknown>);
 
     return instance;
@@ -645,6 +800,9 @@ function updateInstance(instance: Instance, oldProps: BaseProps, newProps: BaseP
     // Update events
     applyEvents(instance, newProps);
 
+    // Update vector drawing callback
+    applyVisualContentCallback(instance, newProps);
+
     // Update component-specific props
     applyComponentProps(element, instance.type, newProps as Record<string, unknown>);
 
@@ -887,16 +1045,16 @@ export const hostConfig = {
 
     // Visibility support
     hideInstance(instance: Instance) {
-        instance.element.style.display = 'none';
+        instance.element.style.display = CS.UnityEngine.UIElements.DisplayStyle.None;
     },
     hideTextInstance(textInstance: TextInstance) {
-        textInstance.element.style.display = 'none';
+        textInstance.element.style.display = CS.UnityEngine.UIElements.DisplayStyle.None;
     },
     unhideInstance(instance: Instance, _props: BaseProps) {
-        instance.element.style.display = '';
+        instance.element.style.display = CS.UnityEngine.UIElements.DisplayStyle.Flex;
     },
     unhideTextInstance(textInstance: TextInstance, _text: string) {
-        textInstance.element.style.display = '';
+        textInstance.element.style.display = CS.UnityEngine.UIElements.DisplayStyle.Flex;
     },
 
     // Text content

package/src/index.ts

@@ -35,6 +35,9 @@ export type {
   BreakpointName,
 } from './screen';
 
+// Vector Drawing
+export { Transform2D, useVectorContent } from './vector';
+
 // Types
 export type {
   ViewStyle,
@@ -84,4 +87,12 @@ export type {
   SliderElement,
   ScrollViewElement,
   ImageElement,
+  // Vector drawing types
+  Vector2,
+  Color,
+  Angle,
+  ArcDirection,
+  Painter2D,
+  MeshGenerationContext,
+  GenerateVisualContentCallback,
 } from './types';

package/src/style-parser.ts

@@ -13,6 +13,17 @@ declare const CS: {
             Length: new (value: number, unit?: number) => CSLength;
             LengthUnit: { Pixel: number; Percent: number };
             StyleKeyword: { Auto: number; None: number; Initial: number };
+            // Enums for style properties
+            FlexDirection: Record<string, number>;
+            Wrap: Record<string, number>;
+            Align: Record<string, number>;
+            Justify: Record<string, number>;
+            Position: Record<string, number>;
+            Overflow: Record<string, number>;
+            DisplayStyle: Record<string, number>;
+            Visibility: Record<string, number>;
+            WhiteSpace: Record<string, number>;
+            TextAnchor: Record<string, number>;
         };
     };
 };
@@ -80,12 +91,119 @@ const NUMBER_PROPERTIES = new Set([
     "flexGrow", "flexShrink", "opacity",
 ])
 
-// Enum properties - these get passed through as-is (C# handles conversion)
-const ENUM_PROPERTIES = new Set([
-    "flexDirection", "flexWrap", "alignItems", "alignSelf", "alignContent", "justifyContent",
-    "position", "overflow", "display", "visibility", "whiteSpace",
-    "unityTextAlign", "fontStyle",
-])
+// Enum property mappings: React style value -> Unity enum value
+// Keys are camelCase (React/CSS style), values map to Unity enum member names
+const ENUM_MAPPINGS: Record<string, { enum: () => Record<string, number>, values: Record<string, string> }> = {
+    flexDirection: {
+        enum: () => CS.UnityEngine.UIElements.FlexDirection,
+        values: {
+            "row": "Row",
+            "row-reverse": "RowReverse",
+            "column": "Column",
+            "column-reverse": "ColumnReverse",
+        }
+    },
+    flexWrap: {
+        enum: () => CS.UnityEngine.UIElements.Wrap,
+        values: {
+            "nowrap": "NoWrap",
+            "wrap": "Wrap",
+            "wrap-reverse": "WrapReverse",
+        }
+    },
+    alignItems: {
+        enum: () => CS.UnityEngine.UIElements.Align,
+        values: {
+            "auto": "Auto",
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "stretch": "Stretch",
+        }
+    },
+    alignSelf: {
+        enum: () => CS.UnityEngine.UIElements.Align,
+        values: {
+            "auto": "Auto",
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "stretch": "Stretch",
+        }
+    },
+    alignContent: {
+        enum: () => CS.UnityEngine.UIElements.Align,
+        values: {
+            "auto": "Auto",
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "stretch": "Stretch",
+        }
+    },
+    justifyContent: {
+        enum: () => CS.UnityEngine.UIElements.Justify,
+        values: {
+            "flex-start": "FlexStart",
+            "flex-end": "FlexEnd",
+            "center": "Center",
+            "space-between": "SpaceBetween",
+            "space-around": "SpaceAround",
+        }
+    },
+    position: {
+        enum: () => CS.UnityEngine.UIElements.Position,
+        values: {
+            "relative": "Relative",
+            "absolute": "Absolute",
+        }
+    },
+    overflow: {
+        enum: () => CS.UnityEngine.UIElements.Overflow,
+        values: {
+            "visible": "Visible",
+            "hidden": "Hidden",
+        }
+    },
+    display: {
+        enum: () => CS.UnityEngine.UIElements.DisplayStyle,
+        values: {
+            "flex": "Flex",
+            "none": "None",
+        }
+    },
+    visibility: {
+        enum: () => CS.UnityEngine.UIElements.Visibility,
+        values: {
+            "visible": "Visible",
+            "hidden": "Hidden",
+        }
+    },
+    whiteSpace: {
+        enum: () => CS.UnityEngine.UIElements.WhiteSpace,
+        values: {
+            "normal": "Normal",
+            "nowrap": "NoWrap",
+        }
+    },
+}
+
+/**
+ * Parse an enum style value
+ * @param key - Style property name
+ * @param value - String value from React style (e.g., "row", "flex-start")
+ * @returns Unity enum value or null if not found
+ */
+function parseEnumValue(key: string, value: string): number | null {
+    const mapping = ENUM_MAPPINGS[key]
+    if (!mapping) return null
+
+    const unityEnumName = mapping.values[value]
+    if (!unityEnumName) return null
+
+    const enumType = mapping.enum()
+    return enumType[unityEnumName] ?? null
+}
 
 /**
  * Parse a length value from various formats
@@ -236,9 +354,11 @@ export function parseStyleValue(key: string, value: unknown): unknown {
         return value
     }
 
-    // Enum properties - pass through as-is (C# handles string -> enum)
-    if (ENUM_PROPERTIES.has(key)) {
-        return value
+    // Enum properties - convert string to Unity enum value
+    if (key in ENUM_MAPPINGS && typeof value === "string") {
+        const parsed = parseEnumValue(key, value)
+        if (parsed !== null) return parsed
+        // Fall through if parsing failed
     }
 
     // Unknown property - pass through unchanged

package/src/types.ts

@@ -124,7 +124,7 @@ export interface ViewStyle {
   color?: StyleColor;
   /** Font size in pixels. Examples: 16, "16px" */
   fontSize?: StyleLength;
-  fontStyle?: 'normal' | 'italic' | 'bold' | 'bold-and-italic';
+  /** Text alignment. Note: Use USS class or stylesheet for -unity-font-style (italic/bold) */
   unityTextAlign?: 'upper-left' | 'upper-center' | 'upper-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'lower-left' | 'lower-center' | 'lower-right';
   whiteSpace?: 'normal' | 'nowrap';
 }
@@ -213,6 +213,55 @@ export type GeometryEventHandler = (event: GeometryEventData) => void;
 export type NavigationEventHandler = (event: NavigationEventData) => void;
 export type TransitionEventHandler = (event: TransitionEventData) => void;
 
+// Vector Drawing Types - Re-export from unity-types (CS.* namespace)
+// These types are provided by the unity-types package and represent Unity's actual API
+
+/** Unity Vector2 - 2D point/vector. Use CS.UnityEngine.Vector2 at runtime. */
+export type Vector2 = CS.UnityEngine.Vector2;
+
+/** Unity Color - RGBA color. Use CS.UnityEngine.Color at runtime. */
+export type Color = CS.UnityEngine.Color;
+
+/** Unity Angle - Represents an angle with unit. Use CS.UnityEngine.UIElements.Angle at runtime. */
+export type Angle = CS.UnityEngine.UIElements.Angle;
+
+/** Unity ArcDirection - Direction for arc drawing. Use CS.UnityEngine.UIElements.ArcDirection at runtime. */
+export type ArcDirection = CS.UnityEngine.UIElements.ArcDirection;
+
+/** Unity Painter2D - Vector drawing API. Accessed via mgc.painter2D in generateVisualContent. */
+export type Painter2D = CS.UnityEngine.UIElements.Painter2D;
+
+/**
+ * Unity MeshGenerationContext - Provides rendering context within generateVisualContent callback.
+ *
+ * Access painter2D for vector drawing, or use DrawText/DrawVectorImage for other content.
+ *
+ * @example
+ * <View
+ *     style={{ width: 200, height: 200 }}
+ *     onGenerateVisualContent={(mgc) => {
+ *         const p = mgc.painter2D
+ *
+ *         p.fillColor = new CS.UnityEngine.Color(0, 0.5, 1, 1)
+ *         p.BeginPath()
+ *         p.Arc(
+ *             new CS.UnityEngine.Vector2(100, 100),
+ *             80,
+ *             CS.UnityEngine.UIElements.Angle.Degrees(0),
+ *             CS.UnityEngine.UIElements.Angle.Degrees(360),
+ *             CS.UnityEngine.UIElements.ArcDirection.Clockwise
+ *         )
+ *         p.Fill()
+ *     }}
+ * />
+ */
+export type MeshGenerationContext = CS.UnityEngine.UIElements.MeshGenerationContext;
+
+/**
+ * Callback type for generateVisualContent
+ */
+export type GenerateVisualContentCallback = (context: MeshGenerationContext) => void;
+
 // Base props for all components
 export interface BaseProps {
   key?: string | number;
@@ -281,6 +330,35 @@ export interface BaseProps {
   onTransitionStart?: TransitionEventHandler;
   onTransitionEnd?: TransitionEventHandler;
   onTransitionCancel?: TransitionEventHandler;
+
+  // Vector drawing
+  /**
+   * Callback for custom vector drawing via Unity's generateVisualContent.
+   * Called when the element needs to repaint its visual content.
+   *
+   * Use element.MarkDirtyRepaint() to trigger a repaint when your drawing state changes.
+   *
+   * @example
+   * <View
+   *     style={{ width: 200, height: 200 }}
+   *     onGenerateVisualContent={(mgc) => {
+   *         const p = mgc.painter2D
+   *         const Angle = CS.UnityEngine.UIElements.Angle
+   *
+   *         p.fillColor = new CS.UnityEngine.Color(0, 0.5, 1, 1)
+   *         p.BeginPath()
+   *         p.Arc(
+   *             new CS.UnityEngine.Vector2(100, 100),
+   *             80,
+   *             Angle.Degrees(0),
+   *             Angle.Degrees(360),
+   *             CS.UnityEngine.UIElements.ArcDirection.Clockwise
+   *         )
+   *         p.Fill()
+   *     }}
+   * />
+   */
+  onGenerateVisualContent?: GenerateVisualContentCallback;
 }
 
 // Component-specific props
@@ -300,23 +378,39 @@ export interface ButtonProps extends BaseProps {
 
 export interface TextFieldProps extends BaseProps {
   value?: string;
+  label?: string;
   placeholder?: string;
   multiline?: boolean;
   readOnly?: boolean;
   maxLength?: number;
+  isPasswordField?: boolean;
+  maskChar?: string;
+  isDelayed?: boolean;
+  selectAllOnFocus?: boolean;
+  selectAllOnMouseUp?: boolean;
+  hideMobileInput?: boolean;
+  autoCorrection?: boolean;
   onChange?: ChangeEventHandler<string>;
 }
 
 export interface ToggleProps extends BaseProps {
   value?: boolean;
   label?: string;
+  text?: string;
+  toggleOnLabelClick?: boolean;
   onChange?: ChangeEventHandler<boolean>;
 }
 
 export interface SliderProps extends BaseProps {
   value?: number;
+  label?: string;
   lowValue?: number;
   highValue?: number;
+  direction?: 'Horizontal' | 'Vertical';
+  pageSize?: number;
+  showInputField?: boolean;
+  inverted?: boolean;
+  fill?: boolean;
   onChange?: ChangeEventHandler<number>;
 }
 
@@ -344,8 +438,20 @@ export interface ScrollViewProps extends BaseProps {
 }
 
 export interface ImageProps extends BaseProps {
-  src?: string;
-  scaleMode?: 'stretch-to-fill' | 'scale-and-crop' | 'scale-to-fit';
+  /** Image source - can be a Texture2D, Sprite, or path string */
+  image?: object;
+  /** Sprite to display (alternative to image) */
+  sprite?: object;
+  /** Vector image to display */
+  vectorImage?: object;
+  /** How the image scales to fit the element */
+  scaleMode?: 'StretchToFill' | 'ScaleAndCrop' | 'ScaleToFit';
+  /** Tint color applied to the image */
+  tintColor?: string;
+  /** Source rectangle within the texture (normalized 0-1 coordinates) */
+  sourceRect?: { x: number; y: number; width: number; height: number };
+  /** UV coordinates for the image */
+  uv?: { x: number; y: number; width: number; height: number };
 }
 
 /**
@@ -400,6 +506,27 @@ export interface VisualElement extends RenderContainer {
 
   // Layout
   MarkDirtyRepaint: () => void;
+
+  // Vector drawing
+  /**
+   * Callback delegate for custom visual content generation.
+   * Can be used via ref for raw access to Unity's generateVisualContent.
+   *
+   * @example
+   * useEffect(() => {
+   *     const ve = ref.current
+   *     const draw = (mgc) => { ... }
+   *     ve.generateVisualContent += draw
+   *     return () => { ve.generateVisualContent -= draw }
+   * }, [])
+   */
+  generateVisualContent: {
+    (callback: GenerateVisualContentCallback): void;
+  } & {
+    // Delegate operators (C# interop)
+    '+='?: (callback: GenerateVisualContentCallback) => void;
+    '-='?: (callback: GenerateVisualContentCallback) => void;
+  };
 }
 
 // Specific element types for better ref typing

package/src/vector.ts

@@ -0,0 +1,312 @@
+/**
+ * Vector drawing utilities for OneJS.
+ *
+ * Provides Transform2D for applying 2D transformations to drawing coordinates,
+ * since Unity's Painter2D doesn't have built-in transform support.
+ *
+ * Also provides useVectorContent hook for automatic repaint on dependency changes.
+ */
+
+import { useRef, useEffect, useCallback, type DependencyList, type RefObject } from 'react'
+import type { Vector2, VisualElement, MeshGenerationContext, GenerateVisualContentCallback } from './types'
+
+// Global declarations for Unity interop
+declare const CS: {
+    UnityEngine: {
+        Vector2: new (x: number, y: number) => Vector2;
+    };
+};
+
+/**
+ * 2D transformation helper for vector drawing.
+ *
+ * Unity's Painter2D doesn't support transforms (translate, rotate, scale).
+ * This class provides client-side matrix math to transform coordinates
+ * before passing them to Painter2D methods.
+ *
+ * @example
+ * import { Transform2D } from "onejs-react"
+ *
+ * <View
+ *     style={{ width: 200, height: 200 }}
+ *     onGenerateVisualContent={(mgc) => {
+ *         const p = mgc.painter2D
+ *         const t = new Transform2D()
+ *
+ *         // Center and rotate 45 degrees
+ *         t.translate(100, 100)
+ *         t.rotate(Math.PI / 4)
+ *
+ *         // Draw a square using transformed coordinates
+ *         p.BeginPath()
+ *         p.MoveTo(t.point(-40, -40))
+ *         p.LineTo(t.point(40, -40))
+ *         p.LineTo(t.point(40, 40))
+ *         p.LineTo(t.point(-40, 40))
+ *         p.ClosePath()
+ *         p.Fill()
+ *     }}
+ * />
+ */
+export class Transform2D {
+    // Current transformation matrix (a, b, c, d, e, f)
+    // [ a  c  e ]   [ x ]   [ a*x + c*y + e ]
+    // [ b  d  f ] * [ y ] = [ b*x + d*y + f ]
+    // [ 0  0  1 ]   [ 1 ]   [       1       ]
+    private _a: number = 1
+    private _b: number = 0
+    private _c: number = 0
+    private _d: number = 1
+    private _e: number = 0
+    private _f: number = 0
+
+    // State stack for save/restore
+    private _stack: Array<[number, number, number, number, number, number]> = []
+
+    /**
+     * Save the current transformation state to the stack.
+     * Use restore() to return to this state later.
+     */
+    save(): void {
+        this._stack.push([this._a, this._b, this._c, this._d, this._e, this._f])
+    }
+
+    /**
+     * Restore the most recently saved transformation state.
+     * If the stack is empty, resets to identity.
+     */
+    restore(): void {
+        const state = this._stack.pop()
+        if (state) {
+            [this._a, this._b, this._c, this._d, this._e, this._f] = state
+        } else {
+            this.reset()
+        }
+    }
+
+    /**
+     * Reset the transformation to identity (no transformation).
+     */
+    reset(): void {
+        this._a = 1
+        this._b = 0
+        this._c = 0
+        this._d = 1
+        this._e = 0
+        this._f = 0
+    }
+
+    /**
+     * Apply a translation (move the origin).
+     * @param x - Horizontal translation
+     * @param y - Vertical translation
+     */
+    translate(x: number, y: number): void {
+        // new_e = a*x + c*y + e
+        // new_f = b*x + d*y + f
+        this._e += this._a * x + this._c * y
+        this._f += this._b * x + this._d * y
+    }
+
+    /**
+     * Apply a rotation around the current origin.
+     * @param angle - Rotation angle in radians (clockwise)
+     */
+    rotate(angle: number): void {
+        const cos = Math.cos(angle)
+        const sin = Math.sin(angle)
+
+        // Multiply current matrix by rotation matrix
+        const a = this._a * cos + this._c * sin
+        const b = this._b * cos + this._d * sin
+        const c = this._a * -sin + this._c * cos
+        const d = this._b * -sin + this._d * cos
+
+        this._a = a
+        this._b = b
+        this._c = c
+        this._d = d
+    }
+
+    /**
+     * Apply a scale transformation.
+     * @param x - Horizontal scale factor
+     * @param y - Vertical scale factor (defaults to x for uniform scale)
+     */
+    scale(x: number, y?: number): void {
+        const sy = y ?? x
+
+        this._a *= x
+        this._b *= x
+        this._c *= sy
+        this._d *= sy
+    }
+
+    /**
+     * Transform a point using the current transformation matrix.
+     * @param x - X coordinate in local space
+     * @param y - Y coordinate in local space
+     * @returns Transformed point as Unity Vector2
+     */
+    point(x: number, y: number): Vector2 {
+        const tx = this._a * x + this._c * y + this._e
+        const ty = this._b * x + this._d * y + this._f
+        return new CS.UnityEngine.Vector2(tx, ty)
+    }
+
+    /**
+     * Transform multiple points at once.
+     * @param coords - Array of [x, y] coordinate pairs
+     * @returns Array of transformed Vector2 points
+     *
+     * @example
+     * const corners = t.points([-40, -40], [40, -40], [40, 40], [-40, 40])
+     * p.MoveTo(corners[0])
+     * for (let i = 1; i < corners.length; i++) p.LineTo(corners[i])
+     */
+    points(...coords: [number, number][]): Vector2[] {
+        return coords.map(([x, y]) => this.point(x, y))
+    }
+
+    /**
+     * Get the raw transformation values.
+     * Useful for debugging or advanced matrix operations.
+     *
+     * Returns [a, b, c, d, e, f] where:
+     * - a, d: scale
+     * - b, c: rotation/skew
+     * - e, f: translation
+     */
+    get values(): [number, number, number, number, number, number] {
+        return [this._a, this._b, this._c, this._d, this._e, this._f]
+    }
+
+    /**
+     * Set the transformation matrix directly.
+     * @param a - Horizontal scale (1 = no scale)
+     * @param b - Vertical skew
+     * @param c - Horizontal skew
+     * @param d - Vertical scale (1 = no scale)
+     * @param e - Horizontal translation
+     * @param f - Vertical translation
+     */
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void {
+        this._a = a
+        this._b = b
+        this._c = c
+        this._d = d
+        this._e = e
+        this._f = f
+    }
+
+    /**
+     * Multiply the current matrix by another matrix.
+     * @param a - Horizontal scale
+     * @param b - Vertical skew
+     * @param c - Horizontal skew
+     * @param d - Vertical scale
+     * @param e - Horizontal translation
+     * @param f - Vertical translation
+     */
+    transform(a: number, b: number, c: number, d: number, e: number, f: number): void {
+        const a_ = this._a * a + this._c * b
+        const b_ = this._b * a + this._d * b
+        const c_ = this._a * c + this._c * d
+        const d_ = this._b * c + this._d * d
+        const e_ = this._a * e + this._c * f + this._e
+        const f_ = this._b * e + this._d * f + this._f
+
+        this._a = a_
+        this._b = b_
+        this._c = c_
+        this._d = d_
+        this._e = e_
+        this._f = f_
+    }
+}
+
+/**
+ * Hook for vector drawing with automatic repaint on dependency changes.
+ *
+ * Returns a ref to attach to a VisualElement. When dependencies change,
+ * automatically calls MarkDirtyRepaint() to trigger a redraw.
+ *
+ * @param draw - Drawing callback that receives MeshGenerationContext
+ * @param deps - Dependency array (like useEffect) - repaint when these change
+ * @returns Ref to attach to the element
+ *
+ * @example
+ * ```tsx
+ * function AnimatedCircle() {
+ *     const [radius, setRadius] = useState(50)
+ *
+ *     const ref = useVectorContent((mgc) => {
+ *         const p = mgc.painter2D
+ *         const Angle = CS.UnityEngine.UIElements.Angle
+ *
+ *         p.fillColor = new CS.UnityEngine.Color(1, 0, 0, 1)
+ *         p.BeginPath()
+ *         p.Arc(
+ *             new CS.UnityEngine.Vector2(100, 100),
+ *             radius,
+ *             Angle.Degrees(0),
+ *             Angle.Degrees(360),
+ *             CS.UnityEngine.UIElements.ArcDirection.Clockwise
+ *         )
+ *         p.Fill()
+ *     }, [radius]) // Auto-repaints when radius changes
+ *
+ *     return <View ref={ref} style={{ width: 200, height: 200 }} />
+ * }
+ * ```
+ */
+export function useVectorContent(
+    draw: GenerateVisualContentCallback,
+    deps: DependencyList = []
+): RefObject<VisualElement | null> {
+    const ref = useRef<VisualElement | null>(null)
+    const drawRef = useRef(draw)
+
+    // Keep drawRef current
+    drawRef.current = draw
+
+    // Register callback and handle updates
+    useEffect(() => {
+        const element = ref.current
+        if (!element) return
+
+        // Create a stable wrapper that always calls the latest draw function
+        const callback: GenerateVisualContentCallback = (mgc) => {
+            drawRef.current(mgc)
+        }
+
+        // Assign the callback to generateVisualContent
+        // Use unknown cast because VisualElement interface doesn't expose this property directly
+        const el = element as unknown as { generateVisualContent: GenerateVisualContentCallback | null }
+        el.generateVisualContent = callback
+
+        // Initial repaint to render content
+        element.MarkDirtyRepaint()
+
+        return () => {
+            // Clear callback on cleanup
+            el.generateVisualContent = null
+        }
+    }, []) // Only run once on mount
+
+    // Trigger repaint when dependencies change (but not on first render)
+    const isFirstRender = useRef(true)
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false
+            return
+        }
+
+        const element = ref.current
+        if (element) {
+            element.MarkDirtyRepaint()
+        }
+    }, deps)
+
+    return ref
+}