onejs-react 0.1.0 → 0.1.2

package/src/host-config.ts

@@ -1,6 +1,9 @@
 import type {HostConfig} from 'react-reconciler';
-import type {BaseProps, ViewStyle} 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;
 
 // Global declarations for QuickJS environment
 declare function setTimeout(callback: () => void, ms?: number): number;
@@ -32,6 +35,7 @@ declare const CS: {
     UnityEngine: {
         UIElements: {
             VisualElement: new () => CSObject;
+            TextElement: new () => CSObject;
             Label: new () => CSObject;
             Button: new () => CSObject;
             TextField: new () => CSObject;
@@ -49,6 +53,15 @@ declare const CS: {
             ListViewReorderMode: CSEnum;
             AlternatingRowBackground: CSEnum;
             CollectionVirtualizationMethod: CSEnum;
+            DisplayStyle: CSEnum;
+        };
+    };
+    OneJS: {
+        GPU: {
+            GPUBridge: {
+                SetElementBackgroundImage: (element: CSObject, rtHandle: number) => void;
+                ClearElementBackgroundImage: (element: CSObject) => void;
+            };
         };
     };
 };
@@ -59,24 +72,6 @@ declare const __eventAPI: {
     removeAllEventListeners: (element: CSObject) => void;
 };
 
-interface CSObject {
-    __csHandle: number;
-    __csType: string;
-    Add: (child: CSObject) => void;
-    Insert: (index: number, child: CSObject) => void;
-    Remove: (child: CSObject) => void;
-    RemoveAt: (index: number) => void;
-    IndexOf: (child: CSObject) => number;
-    Clear: () => void;
-    style: CSStyle;
-    text?: string;
-    value?: unknown;
-    label?: string;
-    AddToClassList: (className: string) => void;
-    RemoveFromClassList: (className: string) => void;
-    ClearClassList: () => void;
-}
-
 interface CSStyle {
     [key: string]: unknown;
 }
@@ -132,6 +127,10 @@ interface CSListView extends CSObject {
     Rebuild: () => void;
 }
 
+// Elements that merge text children into their text property instead of adding as visual children
+// This enables <Label>Hello {"World"}</Label> to render as single line, matching React Native behavior
+const TEXT_MERGE_TYPES = new Set(['ojs-label', 'ojs-text', 'ojs-button']);
+
 // Instance type used by the reconciler
 export interface Instance {
     element: CSObject;
@@ -139,6 +138,14 @@ export interface Instance {
     props: BaseProps;
     eventHandlers: Map<string, Function>;
     appliedStyleKeys: Set<string>; // Track which style properties are currently applied
+    // For text-merging parents: ordered list of merged text children
+    mergedTextChildren?: Instance[];
+    // For merged text children: reference to parent they're merged into
+    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
@@ -149,6 +156,7 @@ export type ChildSet = never; // Not using persistent mode
 // Element types use 'ojs-' prefix to avoid conflicts with HTML/SVG in @types/react
 const TYPE_MAP: Record<string, () => CSObject> = {
     'ojs-view': () => new CS.UnityEngine.UIElements.VisualElement(),
+    'ojs-text': () => new CS.UnityEngine.UIElements.TextElement(),
     'ojs-label': () => new CS.UnityEngine.UIElements.Label(),
     'ojs-button': () => new CS.UnityEngine.UIElements.Button(),
     'ojs-textfield': () => new CS.UnityEngine.UIElements.TextField(),
@@ -161,17 +169,68 @@ const TYPE_MAP: Record<string, () => CSObject> = {
 
 // Event prop to event type mapping
 const EVENT_PROPS: Record<string, string> = {
+    // Click
     onClick: 'click',
+
+    // Pointer events
     onPointerDown: 'pointerdown',
     onPointerUp: 'pointerup',
     onPointerMove: 'pointermove',
     onPointerEnter: 'pointerenter',
     onPointerLeave: 'pointerleave',
+    onPointerCancel: 'pointercancel',
+    onPointerCapture: 'pointercapture',
+    onPointerCaptureOut: 'pointercaptureout',
+    onPointerStationary: 'pointerstationary',
+
+    // Mouse events
+    onMouseDown: 'mousedown',
+    onMouseUp: 'mouseup',
+    onMouseMove: 'mousemove',
+    onMouseEnter: 'mouseenter',
+    onMouseLeave: 'mouseleave',
+    onMouseOver: 'mouseover',
+    onMouseOut: 'mouseout',
+    onWheel: 'wheel',
+    onContextClick: 'contextclick',
+
+    // Focus events
     onFocus: 'focus',
     onBlur: 'blur',
+    onFocusIn: 'focusin',
+    onFocusOut: 'focusout',
+
+    // Keyboard events
     onKeyDown: 'keydown',
     onKeyUp: 'keyup',
+
+    // Input events
     onChange: 'change',
+    onInput: 'input',
+
+    // Drag events
+    onDragEnter: 'dragenter',
+    onDragLeave: 'dragleave',
+    onDragUpdated: 'dragupdated',
+    onDragPerform: 'dragperform',
+    onDragExited: 'dragexited',
+
+    // Geometry events
+    onGeometryChanged: 'geometrychanged',
+
+    // Navigation events
+    onNavigationMove: 'navigationmove',
+    onNavigationSubmit: 'navigationsubmit',
+    onNavigationCancel: 'navigationcancel',
+
+    // Tooltip
+    onTooltip: 'tooltip',
+
+    // Transition events
+    onTransitionRun: 'transitionrun',
+    onTransitionStart: 'transitionstart',
+    onTransitionEnd: 'transitionend',
+    onTransitionCancel: 'transitioncancel',
 };
 
 // Shorthand style properties that expand to multiple properties
@@ -237,6 +296,35 @@ function getExpandedStyleKeys(style: ViewStyle | undefined): Set<string> {
     return keys;
 }
 
+/**
+ * RenderTexture-like object for backgroundImage style property.
+ * Can be either:
+ * - A marker object with __rtHandle (from rt.getUnityObject())
+ * - A RenderTexture object directly (has __handle property)
+ */
+interface RenderTextureRef {
+    __rtHandle?: number;
+    __handle?: number;
+}
+
+/**
+ * Check if a value is a RenderTexture or RenderTexture handle marker.
+ * Supports both:
+ * - Direct RenderTexture objects (have __handle)
+ * - Marker objects from getUnityObject() (have __rtHandle)
+ */
+function isRenderTextureHandle(value: unknown): value is RenderTextureRef {
+    if (typeof value !== "object" || value === null) return false;
+    return "__rtHandle" in value || "__handle" in value;
+}
+
+/**
+ * Get the RT handle from a RenderTexture-like object.
+ */
+function getRenderTextureHandle(value: RenderTextureRef): number {
+    return value.__rtHandle ?? value.__handle ?? -1;
+}
+
 // Apply style properties to element, returns the set of applied keys
 function applyStyle(element: CSObject, style: ViewStyle | undefined): Set<string> {
     const appliedKeys = new Set<string>();
@@ -255,6 +343,14 @@ function applyStyle(element: CSObject, style: ViewStyle | undefined): Set<string
                 s[prop] = parsed;
                 appliedKeys.add(prop);
             }
+        } else if (key === "backgroundImage" && isRenderTextureHandle(value)) {
+            // Special handling for RenderTexture background images
+            // Supports both direct RenderTexture objects and marker objects
+            const handle = getRenderTextureHandle(value);
+            if (handle >= 0) {
+                CS.OneJS.GPU.GPUBridge.SetElementBackgroundImage(element, handle);
+            }
+            appliedKeys.add(key);
         } else {
             // Parse and apply individual property
             s[key] = parseStyleValue(key, value);
@@ -269,8 +365,13 @@ function clearRemovedStyles(element: CSObject, oldKeys: Set<string>, newKeys: Se
     const s = element.style;
     for (const key of oldKeys) {
         if (!newKeys.has(key)) {
-            // Setting to undefined clears the inline style, falling back to USS
-            s[key] = undefined;
+            if (key === "backgroundImage") {
+                // Special handling for backgroundImage - use GPUBridge to clear
+                CS.OneJS.GPU.GPUBridge.ClearElementBackgroundImage(element);
+            } else {
+                // Setting to undefined clears the inline style, falling back to USS
+                s[key] = undefined;
+            }
         }
     }
 }
@@ -334,126 +435,325 @@ function applyEvents(instance: Instance, props: BaseProps) {
     }
 }
 
-// Apply component-specific props
-function applyComponentProps(element: CSObject, type: string, props: Record<string, unknown>) {
-    // For Label, Button - set text property directly
-    if (props.text !== undefined) {
-        (element as { text: string }).text = props.text as string;
+/**
+ * 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;
+        }
     }
-    // For TextField, Toggle, Slider - set value property
-    if (props.value !== undefined) {
-        (element as { value: unknown }).value = props.value;
+}
+
+// MARK: Text Merging
+// Rebuild concatenated text from merged text children
+function rebuildMergedText(instance: Instance) {
+    const children = instance.mergedTextChildren;
+    if (!children || children.length === 0) {
+        // No merged children - clear text (or keep prop-based text?)
+        // For now, set to empty - if user wants text, they should use children
+        instance.element.text = '';
+        return;
     }
-    // For input elements that have a label
-    if (props.label !== undefined) {
-        (element as { label: string }).label = props.label as string;
+    instance.element.text = children.map(c => c.element.text || '').join('');
+}
+
+// Check if a child should be merged into parent's text property
+function shouldMergeText(parentInstance: Instance, child: Instance): boolean {
+    // Don't merge if parent has mixed content (non-text children were added)
+    if (parentInstance.hasMixedContent) return false;
+    return TEXT_MERGE_TYPES.has(parentInstance.type) && child.type === 'text';
+}
+
+// "Unmerge" all text children - add them as actual visual children
+// Called when a non-text child is added, breaking the pure-text assumption
+function unmergTextChildren(parentInstance: Instance) {
+    const children = parentInstance.mergedTextChildren;
+    if (!children || children.length === 0) return;
+
+    // Clear parent's merged text
+    parentInstance.element.text = '';
+
+    // Add each merged text child as an actual visual child
+    for (const child of children) {
+        child.mergedInto = undefined;
+        parentInstance.element.Add(child.element);
     }
 
-    // ScrollView-specific properties
-    if (type === 'ojs-scrollview') {
-        const sv = element as CSScrollView;
-        if (props.mode !== undefined) {
-            sv.mode = CS.UnityEngine.UIElements.ScrollViewMode[props.mode as string];
-        }
-        if (props.horizontalScrollerVisibility !== undefined) {
-            sv.horizontalScrollerVisibility = CS.UnityEngine.UIElements.ScrollerVisibility[props.horizontalScrollerVisibility as string];
-        }
-        if (props.verticalScrollerVisibility !== undefined) {
-            sv.verticalScrollerVisibility = CS.UnityEngine.UIElements.ScrollerVisibility[props.verticalScrollerVisibility as string];
-        }
-        if (props.elasticity !== undefined) {
-            sv.elasticity = props.elasticity as number;
-        }
-        if (props.elasticAnimationIntervalMs !== undefined) {
-            sv.elasticAnimationIntervalMs = props.elasticAnimationIntervalMs as number;
-        }
-        if (props.scrollDecelerationRate !== undefined) {
-            sv.scrollDecelerationRate = props.scrollDecelerationRate as number;
-        }
-        if (props.mouseWheelScrollSize !== undefined) {
-            sv.mouseWheelScrollSize = props.mouseWheelScrollSize as number;
-        }
-        if (props.horizontalPageSize !== undefined) {
-            sv.horizontalPageSize = props.horizontalPageSize as number;
-        }
-        if (props.verticalPageSize !== undefined) {
-            sv.verticalPageSize = props.verticalPageSize as number;
-        }
-        if (props.touchScrollBehavior !== undefined) {
-            sv.touchScrollBehavior = CS.UnityEngine.UIElements.TouchScrollBehavior[props.touchScrollBehavior as string];
-        }
-        if (props.nestedInteractionKind !== undefined) {
-            sv.nestedInteractionKind = CS.UnityEngine.UIElements.NestedInteractionKind[props.nestedInteractionKind as string];
-        }
+    // Clear the merged children list
+    parentInstance.mergedTextChildren = undefined;
+    parentInstance.hasMixedContent = true;
+}
+
+// Handle adding a non-text child to a text-merge parent
+// This triggers unmerging of any previously merged text
+function handleNonTextChild(parentInstance: Instance) {
+    if (TEXT_MERGE_TYPES.has(parentInstance.type) && !parentInstance.hasMixedContent) {
+        unmergTextChildren(parentInstance);
     }
+}
 
-    // ListView-specific properties
-    if (type === 'ojs-listview') {
-        const lv = element as CSListView;
+// Append a text child to a text-merging parent
+function appendMergedTextChild(parentInstance: Instance, child: Instance) {
+    if (!parentInstance.mergedTextChildren) {
+        parentInstance.mergedTextChildren = [];
+    }
+    parentInstance.mergedTextChildren.push(child);
+    child.mergedInto = parentInstance;
+    rebuildMergedText(parentInstance);
+}
 
-        // Data binding - these are the core callbacks
-        if (props.itemsSource !== undefined) {
-            lv.itemsSource = props.itemsSource as unknown[];
-        }
-        if (props.makeItem !== undefined) {
-            lv.makeItem = props.makeItem as () => CSObject;
-        }
-        if (props.bindItem !== undefined) {
-            lv.bindItem = props.bindItem as (element: CSObject, index: number) => void;
-        }
-        if (props.unbindItem !== undefined) {
-            lv.unbindItem = props.unbindItem as (element: CSObject, index: number) => void;
-        }
-        if (props.destroyItem !== undefined) {
-            lv.destroyItem = props.destroyItem as (element: CSObject) => void;
-        }
+// Insert a text child before another in a text-merging parent
+function insertMergedTextChild(parentInstance: Instance, child: Instance, beforeChild: Instance) {
+    if (!parentInstance.mergedTextChildren) {
+        parentInstance.mergedTextChildren = [];
+    }
+    const index = parentInstance.mergedTextChildren.indexOf(beforeChild);
+    if (index >= 0) {
+        parentInstance.mergedTextChildren.splice(index, 0, child);
+    } else {
+        parentInstance.mergedTextChildren.push(child);
+    }
+    child.mergedInto = parentInstance;
+    rebuildMergedText(parentInstance);
+}
 
-        // Virtualization
-        if (props.fixedItemHeight !== undefined) {
-            lv.fixedItemHeight = props.fixedItemHeight as number;
-        }
-        if (props.virtualizationMethod !== undefined) {
-            lv.virtualizationMethod = CS.UnityEngine.UIElements.CollectionVirtualizationMethod[props.virtualizationMethod as string];
+// Remove a text child from a text-merging parent
+function removeMergedTextChild(parentInstance: Instance, child: Instance) {
+    const children = parentInstance.mergedTextChildren;
+    if (children) {
+        const index = children.indexOf(child);
+        if (index >= 0) {
+            children.splice(index, 1);
         }
+    }
+    child.mergedInto = undefined;
+    rebuildMergedText(parentInstance);
+}
 
-        // Selection
-        if (props.selectionType !== undefined) {
-            lv.selectionType = CS.UnityEngine.UIElements.SelectionType[props.selectionType as string];
-        }
-        if (props.selectedIndex !== undefined) {
-            lv.selectedIndex = props.selectedIndex as number;
-        }
-        if (props.selectedIndices !== undefined) {
-            lv.selectedIndices = props.selectedIndices as number[];
-        }
+// MARK: Component-specific prop handlers
 
-        // Reordering
-        if (props.reorderable !== undefined) {
-            lv.reorderable = props.reorderable as boolean;
-        }
-        if (props.reorderMode !== undefined) {
-            lv.reorderMode = CS.UnityEngine.UIElements.ListViewReorderMode[props.reorderMode as string];
-        }
+// Apply common props (text, value, label)
+function applyCommonProps(element: CSObject, props: Record<string, unknown>) {
+    if (props.text !== undefined) (element as { text: string }).text = props.text as string;
+    if (props.value !== undefined) (element as { value: unknown }).value = props.value;
+    if (props.label !== undefined) (element as { label: string }).label = props.label as string;
+}
 
-        // Header/Footer
-        if (props.showFoldoutHeader !== undefined) {
-            lv.showFoldoutHeader = props.showFoldoutHeader as boolean;
-        }
-        if (props.headerTitle !== undefined) {
-            lv.headerTitle = props.headerTitle as string;
-        }
-        if (props.showAddRemoveFooter !== undefined) {
-            lv.showAddRemoveFooter = props.showAddRemoveFooter as boolean;
-        }
+// Helper to set enum prop if defined
+function setEnumProp<T>(target: T, key: keyof T, props: Record<string, unknown>, propKey: string, enumType: CSEnum) {
+    if (props[propKey] !== undefined) {
+        (target as Record<string, unknown>)[key as string] = enumType[props[propKey] as string];
+    }
+}
 
-        // Appearance
-        if (props.showBorder !== undefined) {
-            lv.showBorder = props.showBorder as boolean;
-        }
-        if (props.showAlternatingRowBackgrounds !== undefined) {
-            lv.showAlternatingRowBackgrounds = CS.UnityEngine.UIElements.AlternatingRowBackground[props.showAlternatingRowBackgrounds as string];
+// Helper to set value prop if defined
+function setValueProp<T>(target: T, key: keyof T, props: Record<string, unknown>, propKey: string) {
+    if (props[propKey] !== undefined) {
+        (target as Record<string, unknown>)[key as string] = props[propKey];
+    }
+}
+
+// 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;
+    setEnumProp(element, 'mode', props, 'mode', UIE.ScrollViewMode);
+    setEnumProp(element, 'horizontalScrollerVisibility', props, 'horizontalScrollerVisibility', UIE.ScrollerVisibility);
+    setEnumProp(element, 'verticalScrollerVisibility', props, 'verticalScrollerVisibility', UIE.ScrollerVisibility);
+    setEnumProp(element, 'touchScrollBehavior', props, 'touchScrollBehavior', UIE.TouchScrollBehavior);
+    setEnumProp(element, 'nestedInteractionKind', props, 'nestedInteractionKind', UIE.NestedInteractionKind);
+    setValueProp(element, 'elasticity', props, 'elasticity');
+    setValueProp(element, 'elasticAnimationIntervalMs', props, 'elasticAnimationIntervalMs');
+    setValueProp(element, 'scrollDecelerationRate', props, 'scrollDecelerationRate');
+    setValueProp(element, 'mouseWheelScrollSize', props, 'mouseWheelScrollSize');
+    setValueProp(element, 'horizontalPageSize', props, 'horizontalPageSize');
+    setValueProp(element, 'verticalPageSize', props, 'verticalPageSize');
+}
+
+// Apply ListView-specific properties
+function applyListViewProps(element: CSListView, props: Record<string, unknown>) {
+    const UIE = CS.UnityEngine.UIElements;
+
+    // Data binding callbacks
+    setValueProp(element, 'itemsSource', props, 'itemsSource');
+    setValueProp(element, 'makeItem', props, 'makeItem');
+    setValueProp(element, 'bindItem', props, 'bindItem');
+    setValueProp(element, 'unbindItem', props, 'unbindItem');
+    setValueProp(element, 'destroyItem', props, 'destroyItem');
+
+    // Virtualization
+    setValueProp(element, 'fixedItemHeight', props, 'fixedItemHeight');
+    setEnumProp(element, 'virtualizationMethod', props, 'virtualizationMethod', UIE.CollectionVirtualizationMethod);
+
+    // Selection
+    setEnumProp(element, 'selectionType', props, 'selectionType', UIE.SelectionType);
+    setValueProp(element, 'selectedIndex', props, 'selectedIndex');
+    setValueProp(element, 'selectedIndices', props, 'selectedIndices');
+
+    // Reordering
+    setValueProp(element, 'reorderable', props, 'reorderable');
+    setEnumProp(element, 'reorderMode', props, 'reorderMode', UIE.ListViewReorderMode);
+
+    // Header/Footer
+    setValueProp(element, 'showFoldoutHeader', props, 'showFoldoutHeader');
+    setValueProp(element, 'headerTitle', props, 'headerTitle');
+    setValueProp(element, 'showAddRemoveFooter', props, 'showAddRemoveFooter');
+
+    // Appearance
+    setValueProp(element, 'showBorder', props, 'showBorder');
+    setEnumProp(element, 'showAlternatingRowBackgrounds', props, 'showAlternatingRowBackgrounds', UIE.AlternatingRowBackground);
+}
+
+// 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-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);
+    }
 }
 
 // Create an instance
@@ -475,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;
@@ -499,14 +800,20 @@ 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>);
 
     instance.props = newProps;
 }
 
-// The host config for react-reconciler
-export const hostConfig: HostConfig<
+// NOTE: We use a type assertion because @types/react-reconciler (0.28.x) is outdated
+// and doesn't match react-reconciler 0.31.x (React 19). The HostConfig interface
+// has changed significantly - notably commitUpdate no longer receives updatePayload.
+// Once @types/react-reconciler is updated for React 19, we can use proper typing.
+type OurHostConfig = HostConfig<
     string,           // Type
     BaseProps,        // Props
     Container,        // Container
@@ -514,13 +821,16 @@ export const hostConfig: HostConfig<
     TextInstance,     // TextInstance
     never,            // SuspenseInstance
     never,            // HydratableInstance
-    Instance,         // PublicInstance
+    CSObject,         // PublicInstance - refs point to the actual UI Toolkit element
     {},               // HostContext
     true,             // UpdatePayload (true = needs update)
     ChildSet,         // ChildSet
     number,           // TimeoutHandle
     number            // NoTimeout
-> = {
+>;
+
+// The host config for react-reconciler
+export const hostConfig = {
     supportsMutation: true,
     supportsPersistence: false,
     supportsHydration: false,
@@ -528,13 +838,16 @@ export const hostConfig: HostConfig<
     isPrimaryRenderer: true,
     noTimeout: -1,
 
-    createInstance(type, props) {
+    createInstance(type: string, props: BaseProps) {
         return createInstance(type, props);
     },
 
-    createTextInstance(text) {
-        // Create a Label for text content
-        const element = new CS.UnityEngine.UIElements.Label();
+    createTextInstance(text: string) {
+        // Create a TextElement for implicit text content
+        // Using TextElement (not Label) for semantic clarity:
+        // - TextElement = raw text content in JSX
+        // - Label = explicit <Label> component
+        const element = new CS.UnityEngine.UIElements.TextElement();
         element.text = text;
         return {
             element,
@@ -545,28 +858,46 @@ export const hostConfig: HostConfig<
         };
     },
 
-    appendInitialChild(parentInstance, child) {
-        parentInstance.element.Add(child.element);
+    appendInitialChild(parentInstance: Instance, child: Instance) {
+        if (shouldMergeText(parentInstance, child)) {
+            appendMergedTextChild(parentInstance, child);
+        } else {
+            // Non-text child - unmerge any previously merged text first
+            handleNonTextChild(parentInstance);
+            parentInstance.element.Add(child.element);
+        }
     },
 
-    appendChild(parentInstance, child) {
-        parentInstance.element.Add(child.element);
+    appendChild(parentInstance: Instance, child: Instance) {
+        if (shouldMergeText(parentInstance, child)) {
+            appendMergedTextChild(parentInstance, child);
+        } else {
+            // Non-text child - unmerge any previously merged text first
+            handleNonTextChild(parentInstance);
+            parentInstance.element.Add(child.element);
+        }
     },
 
-    appendChildToContainer(container, child) {
+    appendChildToContainer(container: Container, child: Instance) {
         container.Add(child.element);
     },
 
-    insertBefore(parentInstance, child, beforeChild) {
-        const index = parentInstance.element.IndexOf(beforeChild.element);
-        if (index >= 0) {
-            parentInstance.element.Insert(index, child.element);
+    insertBefore(parentInstance: Instance, child: Instance, beforeChild: Instance) {
+        if (shouldMergeText(parentInstance, child)) {
+            insertMergedTextChild(parentInstance, child, beforeChild);
         } else {
-            parentInstance.element.Add(child.element);
+            // Non-text child - unmerge any previously merged text first
+            handleNonTextChild(parentInstance);
+            const index = parentInstance.element.IndexOf(beforeChild.element);
+            if (index >= 0) {
+                parentInstance.element.Insert(index, child.element);
+            } else {
+                parentInstance.element.Add(child.element);
+            }
         }
     },
 
-    insertInContainerBefore(container, child, beforeChild) {
+    insertInContainerBefore(container: Container, child: Instance, beforeChild: Instance) {
         const index = container.IndexOf(beforeChild.element);
         if (index >= 0) {
             container.Insert(index, child.element);
@@ -575,37 +906,47 @@ export const hostConfig: HostConfig<
         }
     },
 
-    removeChild(parentInstance, child) {
-        __eventAPI.removeAllEventListeners(child.element);
-        parentInstance.element.Remove(child.element);
+    removeChild(parentInstance: Instance, child: Instance) {
+        if (child.mergedInto === parentInstance) {
+            // Child was merged into parent's text - remove from merged children
+            removeMergedTextChild(parentInstance, child);
+        } else {
+            __eventAPI.removeAllEventListeners(child.element);
+            parentInstance.element.Remove(child.element);
+        }
     },
 
-    removeChildFromContainer(container, child) {
+    removeChildFromContainer(container: Container, child: Instance) {
         __eventAPI.removeAllEventListeners(child.element);
         container.Remove(child.element);
     },
 
-    prepareUpdate(_instance, _type, oldProps, newProps) {
+    prepareUpdate(_instance: Instance, _type: string, oldProps: BaseProps, newProps: BaseProps) {
         // Return true if we need to update, null if no update needed
         return oldProps !== newProps ? true : null;
     },
 
     // React 19 changed the signature: (instance, type, oldProps, newProps, fiber)
     // The updatePayload parameter was removed!
-    commitUpdate(instance, _type, oldProps, newProps, _fiber) {
+    commitUpdate(instance: Instance, _type: string, oldProps: BaseProps, newProps: BaseProps, _fiber: unknown) {
         updateInstance(instance, oldProps, newProps);
     },
 
-    commitTextUpdate(textInstance, _oldText, newText) {
+    commitTextUpdate(textInstance: Instance, _oldText: string, newText: string) {
         textInstance.element.text = newText;
+        // If this text is merged into a parent, rebuild the parent's concatenated text
+        if (textInstance.mergedInto) {
+            rebuildMergedText(textInstance.mergedInto);
+        }
     },
 
     finalizeInitialChildren() {
         return false;
     },
 
-    getPublicInstance(instance) {
-        return instance;
+    getPublicInstance(instance: Instance) {
+        // Return the actual UI Toolkit element so refs point to it
+        return instance.element;
     },
 
     prepareForCommit() {
@@ -624,7 +965,7 @@ export const hostConfig: HostConfig<
         return {};
     },
 
-    getChildHostContext(parentHostContext) {
+    getChildHostContext(parentHostContext: {}) {
         return parentHostContext;
     },
 
@@ -632,7 +973,7 @@ export const hostConfig: HostConfig<
         return false;
     },
 
-    clearContainer(container) {
+    clearContainer(container: Container) {
         container.Clear();
     },
 
@@ -704,16 +1045,16 @@ export const hostConfig: 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
@@ -746,4 +1087,4 @@ export const hostConfig: HostConfig<
     bindToConsole(methodName: string, args: unknown[], _badgeName: string) {
         return (console as Record<string, Function>)[methodName]?.bind(console, ...args);
     },
-};
+} as unknown as OurHostConfig;