react-three-game 0.0.16 → 0.0.18

package/dist/tools/prefabeditor/components/TransformComponent.js

@@ -1,6 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function TransformComponentEditor({ component, onUpdate }) {
-    return _jsxs("div", { className: "flex flex-col", children: [_jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
+function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }) {
+    const s = {
+        button: {
+            padding: '2px 6px',
+            background: 'transparent',
+            color: 'rgba(255,255,255,0.9)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            cursor: 'pointer',
+            font: 'inherit',
+        },
+        buttonActive: {
+            background: 'rgba(255,255,255,0.10)',
+        },
+    };
+    return _jsxs("div", { className: "flex flex-col", children: [transformMode && setTransformMode && (_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Transform Mode" }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign(Object.assign({}, s.button), { flex: 1 }), (transformMode === mode ? s.buttonActive : {})), onPointerEnter: (e) => {
+                                if (transformMode !== mode)
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            }, onPointerLeave: (e) => {
+                                if (transformMode !== mode)
+                                    e.currentTarget.style.background = 'transparent';
+                            }, children: mode }, mode))) })] })), _jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
 }
 const TransformComponent = {
     name: 'Transform',
@@ -18,5 +38,10 @@ export function Vector3Input({ label, value, onChange }) {
         newValue[index] = parseFloat(val) || 0;
         onChange(newValue);
     };
-    return _jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: label }), _jsxs("div", { className: "flex gap-0.5", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-red-400/80 font-mono", children: "X" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[0], onChange: e => handleChange(0, e.target.value) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-green-400/80 font-mono", children: "Y" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[1], onChange: e => handleChange(1, e.target.value) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-blue-400/80 font-mono", children: "Z" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[2], onChange: e => handleChange(2, e.target.value) })] })] })] });
+    const axes = [
+        { key: 'x', color: 'red', index: 0 },
+        { key: 'y', color: 'green', index: 1 },
+        { key: 'z', color: 'blue', index: 2 }
+    ];
+    return _jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: label }), _jsx("div", { className: "flex gap-1", children: axes.map(({ key, color, index }) => (_jsxs("div", { className: "flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]", children: [_jsx("span", { className: `text-xs font-bold text-${color}-400 w-3`, children: key.toUpperCase() }), _jsx("input", { className: "flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0", type: "number", step: "0.1", value: value[index].toFixed(2), onChange: e => handleChange(index, e.target.value), onFocus: e => e.target.select() })] }, key))) })] });
 }

package/dist/tools/prefabeditor/components/index.js

@@ -3,6 +3,7 @@ import TransformComponent from './TransformComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
+import DirectionalLightComponent from './DirectionalLightComponent';
 import ModelComponent from './ModelComponent';
 export default [
     GeometryComponent,
@@ -10,5 +11,6 @@ export default [
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
+    DirectionalLightComponent,
     ModelComponent
 ];

package/dist/tools/prefabeditor/hooks/useModelLoader.d.ts

@@ -0,0 +1,10 @@
+import { Object3D } from 'three';
+/**
+ * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
+ * Returns the loaded model with proper caching and suspense support
+ */
+export declare function useModel(filename: string | undefined): Object3D | null;
+/**
+ * Preload a model to avoid suspense boundaries during runtime
+ */
+export declare function preloadModel(filename: string): void;

package/dist/tools/prefabeditor/hooks/useModelLoader.js

@@ -0,0 +1,40 @@
+import { useGLTF, useFBX } from '@react-three/drei';
+import { useMemo } from 'react';
+/**
+ * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
+ * Returns the loaded model with proper caching and suspense support
+ */
+export function useModel(filename) {
+    const isFBX = filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.fbx');
+    const isGLTF = (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.glb')) || (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.gltf'));
+    // Normalize path (ensure leading slash)
+    const normalizedPath = useMemo(() => {
+        if (!filename)
+            return '';
+        return filename.startsWith('/') ? filename : `/${filename}`;
+    }, [filename]);
+    // Load models using drei hooks (these handle caching automatically)
+    const gltf = useGLTF(isGLTF && normalizedPath ? normalizedPath : '', true);
+    const fbx = useFBX(isFBX && normalizedPath ? normalizedPath : '');
+    // Return the appropriate model
+    if (!filename)
+        return null;
+    if (isGLTF)
+        return gltf.scene;
+    if (isFBX)
+        return fbx;
+    return null;
+}
+/**
+ * Preload a model to avoid suspense boundaries during runtime
+ */
+export function preloadModel(filename) {
+    const normalizedPath = filename.startsWith('/') ? filename : `/${filename}`;
+    const isFBX = filename.toLowerCase().endsWith('.fbx');
+    if (isFBX) {
+        useFBX.preload(normalizedPath);
+    }
+    else {
+        useGLTF.preload(normalizedPath);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,12 +17,12 @@
   "type": "module",
   "workspaces": ["docs"],
   "peerDependencies": {
-    "@react-three/fiber": "^9.0.0",
-    "@react-three/drei": "^10.0.0",
-    "@react-three/rapier": "^2.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "three": "^0.181.0"
+    "@react-three/fiber": ">=9.0.0",
+    "@react-three/drei": ">=10.0.0",
+    "@react-three/rapier": ">=2.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "three": ">=0.182.0"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",
@@ -34,7 +34,7 @@
     "concurrently": "^9.2.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "three": "^0.181.2",
+    "three": "^0.182.0",
     "typescript": "^5.9.3"
   }
 }

package/src/index.ts

@@ -10,6 +10,10 @@ export {
   SharedCanvas,
 } from './tools/assetviewer/page';
 
+// Component Registry
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+
 // Helpers
 export * from './helpers';
 

package/src/tools/prefabeditor/EditorTree.tsx

@@ -74,6 +74,17 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             overflow: "hidden",
             textOverflow: "ellipsis",
         },
+        dragHandle: {
+            width: 14,
+            height: 14,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginRight: 4,
+            opacity: 0.4,
+            cursor: "grab",
+            fontSize: 10,
+        },
         contextMenu: {
             position: "fixed",
             zIndex: 50,
@@ -179,40 +190,38 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
 
     // Drag and Drop
     const handleDragStart = (e: React.DragEvent, id: string) => {
-        e.stopPropagation();
         if (id === prefabData.root.id) {
-            e.preventDefault(); // Cannot drag root
+            e.preventDefault();
             return;
         }
-        setDraggedId(id);
         e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", id);
+        setDraggedId(id);
+    };
+
+    const handleDragEnd = () => {
+        setDraggedId(null);
     };
 
     const handleDragOver = (e: React.DragEvent, targetId: string) => {
-        e.preventDefault();
-        e.stopPropagation();
         if (!draggedId || draggedId === targetId) return;
-
-        // Check for cycles: target cannot be a descendant of dragged node
         const draggedNode = findNode(prefabData.root, draggedId);
         if (draggedNode && findNode(draggedNode, targetId)) return;
 
+        e.preventDefault();
         e.dataTransfer.dropEffect = "move";
     };
 
     const handleDrop = (e: React.DragEvent, targetId: string) => {
-        e.preventDefault();
-        e.stopPropagation();
         if (!draggedId || draggedId === targetId) return;
 
+        e.preventDefault();
+
         setPrefabData(prev => {
             const newRoot = JSON.parse(JSON.stringify(prev.root));
+            const draggedNode = findNode(newRoot, draggedId);
+            if (draggedNode && findNode(draggedNode, targetId)) return prev;
 
-            // Check cycle again on the fresh tree
-            const draggedNodeRef = findNode(newRoot, draggedId);
-            if (draggedNodeRef && findNode(draggedNodeRef, targetId)) return prev;
-
-            // Remove from old parent
             const parent = findParent(newRoot, draggedId);
             if (!parent) return prev;
 
@@ -221,7 +230,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
 
             parent.children = parent.children!.filter(c => c.id !== draggedId);
 
-            // Add to new parent
             const target = findNode(newRoot, targetId);
             if (target) {
                 target.children = target.children || [];
@@ -247,11 +255,13 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                         ...styles.row,
                         ...(isSelected ? styles.rowSelected : null),
                         paddingLeft: `${depth * 10 + 6}px`,
+                        cursor: node.id !== prefabData.root.id ? "grab" : "pointer",
                     }}
+                    draggable={node.id !== prefabData.root.id}
                     onClick={(e) => { e.stopPropagation(); setSelectedId(node.id); }}
                     onContextMenu={(e) => handleContextMenu(e, node.id)}
-                    draggable={node.id !== prefabData.root.id}
                     onDragStart={(e) => handleDragStart(e, node.id)}
+                    onDragEnd={handleDragEnd}
                     onDragOver={(e) => handleDragOver(e, node.id)}
                     onDrop={(e) => handleDrop(e, node.id)}
                     onPointerEnter={(e) => {
@@ -276,6 +286,19 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                     >
                         {isCollapsed ? '▶' : '▼'}
                     </span>
+                    {node.id !== prefabData.root.id && (
+                        <span
+                            style={styles.dragHandle}
+                            onPointerEnter={(e) => {
+                                (e.currentTarget as HTMLSpanElement).style.opacity = "0.9";
+                            }}
+                            onPointerLeave={(e) => {
+                                (e.currentTarget as HTMLSpanElement).style.opacity = "0.4";
+                            }}
+                        >
+                            ⋮⋮
+                        </span>
+                    )}
                     <span style={styles.idText}>
                         {node.id}
                     </span>

package/src/tools/prefabeditor/EditorUI.tsx

@@ -256,33 +256,6 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
             </button>
         </div>
 
-        <div style={s.section}>
-            <label style={s.label}>Mode</label>
-            <div style={{ display: 'flex', gap: 6 }}>
-                {["translate", "rotate", "scale"].map(mode => (
-                    <button
-                        key={mode}
-                        onClick={() => setTransformMode(mode as any)}
-                        style={{
-                            ...s.button,
-                            flex: 1,
-                            ...(transformMode === mode ? s.buttonActive : null),
-                        }}
-                        onPointerEnter={(e) => {
-                            if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.08)';
-                        }}
-                        onPointerLeave={(e) => {
-                            if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
-                        }}
-                    >
-                        {mode[0].toUpperCase()}
-                    </button>
-                ))}
-            </div>
-        </div>
-
-        {/* Components (legacy renderer removed) */}
-
         {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
             if (!comp) return null;
             const componentDef = ALL_COMPONENTS[comp.type];
@@ -322,6 +295,8 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                                 }
                             }))}
                             basePath={basePath}
+                            transformMode={transformMode}
+                            setTransformMode={setTransformMode}
                         />
                     ) : null}
                 </div>

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { Merged } from '@react-three/drei';
-import * as THREE from 'three';
 import { InstancedRigidBodies } from "@react-three/rapier";
+import { Mesh, Matrix4, Object3D, Group } from "three";
 
 // --- Types ---
 export type InstanceData = {
@@ -13,7 +13,8 @@ export type InstanceData = {
     physics?: { type: 'dynamic' | 'fixed' };
 };
 
-function arrayEquals(a: number[], b: number[]) {
+// Helper functions for comparison
+function arrayEquals(a: number[], b: number[]): boolean {
     if (a === b) return true;
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
@@ -22,7 +23,7 @@ function arrayEquals(a: number[], b: number[]) {
     return true;
 }
 
-function instanceEquals(a: InstanceData, b: InstanceData) {
+function instanceEquals(a: InstanceData, b: InstanceData): boolean {
     return a.id === b.id &&
         a.meshPath === b.meshPath &&
         arrayEquals(a.position, b.position) &&
@@ -36,7 +37,7 @@ type GameInstanceContextType = {
     addInstance: (instance: InstanceData) => void;
     removeInstance: (id: string) => void;
     instances: InstanceData[];
-    meshes: Record<string, THREE.Mesh>;
+    meshes: Record<string, Mesh>;
     instancesMap?: Record<string, React.ComponentType<any>>;
     modelParts?: Record<string, number>;
 };
@@ -44,13 +45,14 @@ const GameInstanceContext = createContext<GameInstanceContextType | null>(null);
 
 export function GameInstanceProvider({
     children,
-    models
-    , onSelect, registerRef
+    models,
+    onSelect,
+    registerRef
 }: {
     children: React.ReactNode,
-    models: { [filename: string]: THREE.Object3D },
+    models: { [filename: string]: Object3D },
     onSelect?: (id: string | null) => void,
-    registerRef?: (id: string, obj: THREE.Object3D | null) => void,
+    registerRef?: (id: string, obj: Object3D | null) => void,
 }) {
     const [instances, setInstances] = useState<InstanceData[]>([]);
 
@@ -58,6 +60,7 @@ export function GameInstanceProvider({
         setInstances(prev => {
             const idx = prev.findIndex(i => i.id === instance.id);
             if (idx !== -1) {
+                // Update existing if changed
                 if (instanceEquals(prev[idx], instance)) {
                     return prev;
                 }
@@ -65,6 +68,7 @@ export function GameInstanceProvider({
                 copy[idx] = instance;
                 return copy;
             }
+            // Add new
             return [...prev, instance];
         });
     }, []);
@@ -76,27 +80,26 @@ export function GameInstanceProvider({
         });
     }, []);
 
-    // Flatten all model meshes once
+    // Flatten all model meshes once (models → flat mesh parts)
     const { flatMeshes, modelParts } = useMemo(() => {
-        const flatMeshes: Record<string, THREE.Mesh> = {};
+        const flatMeshes: Record<string, Mesh> = {};
         const modelParts: Record<string, number> = {};
 
         Object.entries(models).forEach(([modelKey, model]) => {
             const root = model;
             root.updateWorldMatrix(false, true);
-            const rootInverse = new THREE.Matrix4().copy(root.matrixWorld).invert();
+            const rootInverse = new Matrix4().copy(root.matrixWorld).invert();
 
             let partIndex = 0;
 
             root.traverse((obj: any) => {
                 if (obj.isMesh) {
                     const geom = obj.geometry.clone();
-
                     const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
                     geom.applyMatrix4(relativeTransform);
 
                     const partKey = `${modelKey}__${partIndex}`;
-                    flatMeshes[partKey] = new THREE.Mesh(geom, obj.material);
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
                     partIndex++;
                 }
             });
@@ -106,7 +109,7 @@ export function GameInstanceProvider({
         return { flatMeshes, modelParts };
     }, [models]);
 
-    // Group instances by meshPath + physics type
+    // Group instances by meshPath + physics type for batch rendering
     const grouped = useMemo(() => {
         const groups: Record<string, { physicsType: string, instances: InstanceData[] }> = {};
         for (const inst of instances) {
@@ -128,10 +131,10 @@ export function GameInstanceProvider({
                 modelParts
             }}
         >
-            {/* 1) Normal prefab hierarchy: NOT inside any <Merged> */}
+            {/* Render normal prefab hierarchy (non-instanced objects) */}
             {children}
 
-            {/* 2) Physics instanced groups: no <Merged>, just InstancedRigidBodies */}
+            {/* Render physics-enabled instanced groups using InstancedRigidBodies */}
             {Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType === 'none') return null;
                 const modelKey = group.instances[0].meshPath;
@@ -149,7 +152,7 @@ export function GameInstanceProvider({
                 );
             })}
 
-            {/* 3) Non-physics instanced visuals: own <Merged> per model */}
+            {/* Render non-physics instanced visuals using Merged (one per model type) */}
             {Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType !== 'none') return null;
 
@@ -157,8 +160,8 @@ export function GameInstanceProvider({
                 const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0) return null;
 
-                // Restrict meshes to just this model's parts for this Merged
-                const meshesForModel: Record<string, THREE.Mesh> = {};
+                // Create mesh subset for this specific model
+                const meshesForModel: Record<string, Mesh> = {};
                 for (let i = 0; i < partCount; i++) {
                     const partKey = `${modelKey}__${i}`;
                     meshesForModel[partKey] = flatMeshes[partKey];
@@ -188,7 +191,7 @@ export function GameInstanceProvider({
     );
 }
 
-// Physics instancing stays the same
+// Render physics-enabled instances using InstancedRigidBodies
 function InstancedRigidGroup({
     group,
     modelKey,
@@ -198,7 +201,7 @@ function InstancedRigidGroup({
     group: { physicsType: string, instances: InstanceData[] },
     modelKey: string,
     partCount: number,
-    flatMeshes: Record<string, THREE.Mesh>
+    flatMeshes: Record<string, Mesh>
 }) {
     const instances = useMemo(
         () => group.instances.map(inst => ({
@@ -232,24 +235,33 @@ function InstancedRigidGroup({
     );
 }
 
-// Non-physics instanced visuals: per-instance group using Merged's Instance components
+// Render non-physics instances using Merged's per-instance groups
 function NonPhysicsInstancedGroup({
     modelKey,
     group,
     partCount,
-    instancesMap
-    , onSelect, registerRef
+    instancesMap,
+    onSelect,
+    registerRef
 }: {
     modelKey: string;
     group: { physicsType: string, instances: InstanceData[] };
     partCount: number;
     instancesMap: Record<string, React.ComponentType<any>>;
     onSelect?: (id: string | null) => void;
-    registerRef?: (id: string, obj: THREE.Object3D | null) => void;
+    registerRef?: (id: string, obj: Object3D | null) => void;
 }) {
     const clickValid = useRef(false);
-    const handlePointerDown = (e: any) => { e.stopPropagation(); clickValid.current = true; };
-    const handlePointerMove = () => { if (clickValid.current) clickValid.current = false; };
+
+    const handlePointerDown = (e: any) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+
+    const handlePointerMove = () => {
+        if (clickValid.current) clickValid.current = false;
+    };
+
     const handlePointerUp = (e: any, id: string) => {
         if (clickValid.current) {
             e.stopPropagation();
@@ -263,7 +275,7 @@ function NonPhysicsInstancedGroup({
             {group.instances.map(inst => (
                 <group
                     key={inst.id}
-                    ref={(el) => { registerRef?.(inst.id, el as unknown as THREE.Object3D | null); }}
+                    ref={(el) => { registerRef?.(inst.id, el as unknown as Object3D | null); }}
                     position={inst.position}
                     rotation={inst.rotation}
                     scale={inst.scale}
@@ -283,8 +295,8 @@ function NonPhysicsInstancedGroup({
 }
 
 
-// --- GameInstance: just registers an instance, renders nothing ---
-export const GameInstance = React.forwardRef<THREE.Group, {
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
+export const GameInstance = React.forwardRef<Group, {
     id: string;
     modelUrl: string;
     position: [number, number, number];
@@ -320,7 +332,6 @@ export const GameInstance = React.forwardRef<THREE.Group, {
         };
     }, [addInstance, removeInstance, instance]);
 
-
-    // No visual here – provider will render visuals for all instances
+    // No visual rendering - provider handles all instanced visuals
     return null;
 });