react-three-game 0.0.65 → 0.0.67

package/README.md

@@ -68,6 +68,127 @@ export default function Home() {
 
 `GameCanvas` provides the library's WebGPU canvas setup.
 
+## Prefab Editor
+
+```jsx
+import { useRef } from 'react';
+import { PrefabEditor } from 'react-three-game';
+
+// Standalone editor
+<PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
+
+// Canvas-only editing mode (keeps canvas selection/gizmos, hides hierarchy + inspector + toolbar)
+<PrefabEditor initialPrefab={sceneData} showUI={false} />
+
+// With custom R3F components
+<PrefabEditor initialPrefab={sceneData}>
+  <CustomComponent />
+</PrefabEditor>
+```
+
+### Embedded / Headless Editor
+
+```tsx
+import { useRef } from 'react';
+import type { Object3D } from 'three';
+import { PrefabEditor, type PrefabEditorRef } from 'react-three-game';
+
+export function EmbeddedEditor({ prefab, onPrefabChange }: {
+  prefab: any;
+  onPrefabChange: (nextPrefab: any) => void;
+}) {
+  const editorRef = useRef<PrefabEditorRef>(null);
+
+  function loadScene(nextPrefab: any) {
+    editorRef.current?.replacePrefab(nextPrefab);
+  }
+
+  function importRuntimeModel(model: Object3D) {
+    editorRef.current?.addModel('models/runtime/chair.glb', model, {
+      name: 'Chair',
+      parentId: 'root',
+    });
+  }
+
+  return (
+    <div style={{ position: 'relative', height: 600 }}>
+      <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 10 }}>
+        <button onClick={() => loadScene(prefab)}>Reload Scene</button>
+        <button onClick={() => editorRef.current?.exportGLBData()}>Export GLB Data</button>
+      </div>
+
+      <PrefabEditor
+        ref={editorRef}
+        initialPrefab={prefab}
+        onPrefabChange={onPrefabChange}
+        showUI={false}
+        physics={false}
+        enableWindowDrop={false}
+        canvasProps={{ style: { height: '100%', width: '100%' } }}
+      />
+    </div>
+  );
+}
+```
+
+`showUI={false}` hides the built-in editor chrome but keeps canvas selection, transform controls, and scene interaction. For embedded tools, use the editor ref instead of reaching through `rootRef`:
+
+- `replacePrefab(prefab)` replaces the current scene through the editor state pipeline and resets editor history/selection.
+- `setPrefab(prefab)` updates the current prefab in place and preserves selection when the selected node ID still exists.
+- `addModel(path, model, options?)` creates a model node and injects the runtime asset in one step.
+- `addTexture(path, texture, options?)` creates a textured plane node and injects the runtime texture in one step.
+- `exportGLBData()` returns the GLB `ArrayBuffer` without triggering a download.
+- `canvasProps` forwards canvas-level sizing, camera, event, and style props to `GameCanvas`.
+
+### Editor State Bridge
+
+Compose small helper components inside `PrefabEditor` when custom UI needs to control the editor.
+
+```tsx
+import { useEffect } from 'react';
+import {
+  PrefabEditor,
+  useEditorContext,
+  type EditorContextType,
+} from 'react-three-game';
+
+function EditorStateBridge({ onReady }: { onReady: (editorState: EditorContextType) => void }) {
+  const editorState = useEditorContext();
+
+  useEffect(() => {
+    onReady(editorState);
+  }, [editorState, onReady]);
+
+  return null;
+}
+
+function CustomEditor() {
+  return (
+    <PrefabEditor initialPrefab={sceneData} showUI={false}>
+      <EditorStateBridge onReady={({ setTransformMode }) => setTransformMode('translate')} />
+    </PrefabEditor>
+  );
+}
+```
+
+- `useEditorContext()` is available to children rendered inside `PrefabEditor`.
+- Use it for editor state: transform mode, edit/play checks, focus actions, and export buttons.
+- Keep bridge components small and focused on one editor concern.
+
+### Edit Mode vs Play Mode
+
+- edit mode: selection, inspector, transform gizmos, editor shortcuts
+- play mode: physics and runtime behavior
+- skip editor-only code when `editMode` is `false`
+- use `showUI={false}` for custom shells
+- use `enableWindowDrop={false}` when the host app owns drag/drop
+
+Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
+
+Editor menu structure:
+- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
+- `Menu > Export`: `GLB`, `PNG`
+
 ## GameObject Schema
 
 ```typescript
@@ -95,10 +216,52 @@ interface GameObject {
 | Transform | `position`, `rotation`, `scale` — all `[x,y,z]` arrays, rotation in radians |
 | Geometry | `geometryType`: box/sphere/plane/cylinder, `args`: dimension array |
 | Material | `color`, `texture?`, `metalness?`, `roughness?` |
-| Physics | `type`: dynamic/fixed/kinematicPosition/kinematicVelocity, `mass?`, `restitution?` (bounciness), `friction?`, plus any Rapier props |
+| Physics | `type`: dynamic/fixed/kinematicPosition/kinematicVelocity, `mass?`, `restitution?` (bounciness), `friction?`, `linearVelocity?`, `angularVelocity?`, plus any Rapier props |
 | Model | `filename` (GLB/FBX path), `instanced?` for GPU batching |
 | SpotLight | `color`, `intensity`, `angle`, `penumbra` |
 
+## Tree Utilities
+
+```typescript
+import { findNode, updateNode, updateNodeById, deleteNode, cloneNode, exportGLBData } from 'react-three-game';
+
+const node = findNode(root, nodeId);
+const updated = updateNode(root, nodeId, n => ({ ...n, disabled: true }));  // or updateNodeById
+const afterDelete = deleteNode(root, nodeId);
+const cloned = cloneNode(node);
+const glbData = await exportGLBData(sceneRoot);  // export scene to GLB ArrayBuffer
+```
+
+### Scene State Updates
+
+```tsx
+function VisibilityToggle({
+  editorRef,
+  visible,
+}: {
+  editorRef: React.RefObject<PrefabEditorRef | null>;
+  visible: boolean;
+}) {
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    const prefab = editor.prefab;
+    const root = updateNodeById(prefab.root, 'helper-grid', node => ({
+      ...node,
+      disabled: !visible,
+    }));
+
+    editor.setPrefab({ ...prefab, root });
+  }, [editorRef, visible]);
+
+  return null;
+}
+```
+
+- Use `updateNode(...)` or `updateNodeById(...)` for scene state changes inside the prefab tree.
+- For sensor and collision event patterns, see advanced physics examples.
+
 ## Custom Components
 
 ```tsx
@@ -160,102 +323,12 @@ The `FieldRenderer` component auto-generates editor UI from a field schema:
 }
 ```
 
-## Prefab Editor
-
-```jsx
-import { useRef } from 'react';
-import { PrefabEditor } from 'react-three-game';
-
-// Standalone editor
-<PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
-
-// Canvas-only editing mode (keeps canvas selection/gizmos, hides hierarchy + inspector + toolbar)
-<PrefabEditor initialPrefab={sceneData} showUI={false} />
-
-// With custom R3F components
-<PrefabEditor initialPrefab={sceneData}>
-  <CustomComponent />
-</PrefabEditor>
-```
-
-### Embedded / Headless Editor
-
-```tsx
-import { useRef } from 'react';
-import type { Object3D } from 'three';
-import { PrefabEditor, type PrefabEditorRef } from 'react-three-game';
-
-export function EmbeddedEditor({ prefab, onPrefabChange }: {
-  prefab: any;
-  onPrefabChange: (nextPrefab: any) => void;
-}) {
-  const editorRef = useRef<PrefabEditorRef>(null);
-
-  function loadScene(nextPrefab: any) {
-    editorRef.current?.replacePrefab(nextPrefab);
-  }
-
-  function importRuntimeModel(model: Object3D) {
-    editorRef.current?.addModel('models/runtime/chair.glb', model, {
-      name: 'Chair',
-      parentId: 'root',
-    });
-  }
-
-  return (
-    <div style={{ position: 'relative', height: 600 }}>
-      <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 10 }}>
-        <button onClick={() => loadScene(prefab)}>Reload Scene</button>
-        <button onClick={() => editorRef.current?.exportGLBData()}>Export GLB Data</button>
-      </div>
-
-      <PrefabEditor
-        ref={editorRef}
-        initialPrefab={prefab}
-        onPrefabChange={onPrefabChange}
-        showUI={false}
-        physics={false}
-        enableWindowDrop={false}
-        canvasProps={{ style: { height: '100%', width: '100%' } }}
-      />
-    </div>
-  );
-}
-```
-
-`showUI={false}` hides the built-in editor chrome but keeps canvas selection, transform controls, and scene interaction. For embedded tools, use the editor ref instead of reaching through `rootRef`:
-
-- `replacePrefab(prefab)` replaces the current scene through the editor state pipeline and resets editor history/selection.
-- `addModel(path, model, options?)` creates a model node and injects the runtime asset in one step.
-- `addTexture(path, texture, options?)` creates a textured plane node and injects the runtime texture in one step.
-- `exportGLBData()` returns the GLB `ArrayBuffer` without triggering a download.
-- `canvasProps` forwards canvas-level sizing, camera, event, and style props to `GameCanvas`.
-- `setPrefab(prefab)` remains as a backward-compatible alias for `replacePrefab(prefab)`.
-
-Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
-
-Editor menu structure:
-- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
-- `Menu > Export`: `GLB`, `PNG`
-
 ## Internals
 
 - **Transforms**: Local in JSON, world computed via matrix multiplication
 - **Instancing**: `model.properties.instanced = true` switches the node to the batched instance path (`<Merged>` / `<InstancedRigidBodies>`) instead of the standard model render path
 - **Models**: GLB/GLTF (Draco) and FBX auto-load from `filename`
 
-## Tree Utilities
-
-```typescript
-import { findNode, updateNode, updateNodeById, deleteNode, cloneNode, exportGLBData } from 'react-three-game';
-
-const node = findNode(root, nodeId);
-const updated = updateNode(root, nodeId, n => ({ ...n, disabled: true }));  // or updateNodeById
-const afterDelete = deleteNode(root, nodeId);
-const cloned = cloneNode(node);
-const glbData = await exportGLBData(sceneRoot);  // export scene to GLB ArrayBuffer
-```
-
 ## Development
 
 ```bash

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export * from './helpers';
 export { sound as soundManager } from './helpers/SoundManager';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export { useEditorContext } from './tools/prefabeditor/EditorContext';
+export type { EditorContextType } from './tools/prefabeditor/EditorContext';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
+export { FieldRenderer, FieldGroup, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
 export * from './tools/prefabeditor/utils';
 export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 export type { PrefabEditorAssetOptions, PrefabEditorProps, PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
@@ -13,8 +15,8 @@ export type { Component } from './tools/prefabeditor/components/ComponentRegistr
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
 export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
 export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
-export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, PhysicsEventPayload } from './tools/prefabeditor/GameEvents';
+export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, InteractionEventType, PhysicsEventPayload, ClickEventPayload } from './tools/prefabeditor/GameEvents';
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 export type { EntityEventType, EntityEventPayload } from './tools/prefabeditor/GameEvents';
 export * from './tools/dragdrop';
-export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { TextureListViewer, ModelListViewer, SoundListViewer, TexturePicker, ModelPicker, SingleTextureViewer, SingleModelViewer, SingleSoundViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/index.js

@@ -6,10 +6,11 @@ export { sound as soundManager } from './helpers/SoundManager';
 // Prefab Editor - Components
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export { useEditorContext } from './tools/prefabeditor/EditorContext';
 // Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 // Prefab Editor - Input Components
-export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
+export { FieldRenderer, FieldGroup, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
 // Prefab Editor - Styles & Utils
 export * from './tools/prefabeditor/utils';
 // Game Events (physics + custom events)
@@ -18,4 +19,4 @@ export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/pref
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 // Asset Tools
 export * from './tools/dragdrop';
-export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { TextureListViewer, ModelListViewer, SoundListViewer, TexturePicker, ModelPicker, SingleTextureViewer, SingleModelViewer, SingleSoundViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/shared/GameCanvas.js

@@ -33,7 +33,7 @@ extend({
 export default function GameCanvas(_a) {
     var { loader = false, children, glConfig, canvasRef, onCreated, style } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated", "style"]);
     const [frameloop, setFrameloop] = useState("never");
-    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none' }, style), shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none' }, style), shadows: { type: PCFShadowMap }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
                     // @ts-expect-error futuristic
                     shadowMap: true, antialias: true }, glConfig));

package/dist/tools/assetviewer/page.d.ts

@@ -19,14 +19,25 @@ interface SoundListViewerProps {
     basePath?: string;
 }
 export declare function SoundListViewer({ files, selected, onSelect, basePath }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TexturePicker({ value, onChange, basePath }: {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModelPicker({ value, onChange, basePath, pickerKey }: {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    basePath?: string;
+    pickerKey?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SingleTextureViewer({ file, basePath }: {
     file?: string;
     basePath?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SingleModelViewer({ file, basePath }: {
     file?: string;
     basePath?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SingleSoundViewer({ file, basePath }: {
     file?: string;
     basePath?: string;

package/dist/tools/assetviewer/page.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
-import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
+import { Component as ReactComponent, Suspense, useEffect, useLayoutEffect, useState, useRef } from "react";
+import { createPortal } from 'react-dom';
 import { TextureLoader } from "three";
 import { loadModel } from "../dragdrop";
 class ErrorBoundary extends ReactComponent {
@@ -93,9 +94,9 @@ function TextureCard({ file, onSelect, basePath = "" }) {
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
-        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#c30000', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#aeaeae', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function TextureSphere({ url, onError }) {
     const [texture, setTexture] = useState(null);
@@ -119,9 +120,9 @@ function ModelCard({ file, onSelect, basePath = "", size = 60, }) {
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
-        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#c30000', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { width: size, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { width: size, aspectRatio: '1 / 1', backgroundColor: '#aeaeae', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);
@@ -155,15 +156,68 @@ function SoundCard({ file, onSelect, basePath = "" }) {
     const fullPath = basePath ? `/${basePath}${file}` : file;
     return (_jsxs("div", { onClick: () => onSelect(file), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { color: '#f9fafb', fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
 }
+const PICKER_POPUP_WIDTH = 260;
+const PICKER_POPUP_HEIGHT = 360;
+function AssetPicker({ value, onChange, basePath, manifestFolder, preview, renderList, rootStyle, controlsStyle, changeButtonStyle, clearButtonStyle, popupStyle, }) {
+    const [files, setFiles] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
+    const [resolvedPopupStyle, setResolvedPopupStyle] = useState(null);
+    const triggerRef = useRef(null);
+    useEffect(() => {
+        fetch(`${basePath}/${manifestFolder}/manifest.json`)
+            .then(r => r.json())
+            .then(data => setFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, [basePath, manifestFolder]);
+    useLayoutEffect(() => {
+        if (!showPicker || !triggerRef.current || typeof window === 'undefined')
+            return;
+        const updatePosition = () => {
+            var _a;
+            const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!rect)
+                return;
+            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
+            const fallbackLeft = rect.right + 8;
+            const fitsLeft = preferredLeft >= 8;
+            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
+            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
+            setResolvedPopupStyle(Object.assign({ position: 'fixed', left,
+                top, padding: 12, width: PICKER_POPUP_WIDTH, height: PICKER_POPUP_HEIGHT, overflow: 'hidden', zIndex: 1000, boxShadow: '0 4px 16px rgba(0,0,0,0.6)', background: '#111827', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6 }, popupStyle));
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [popupStyle, showPicker]);
+    return (_jsxs("div", { style: rootStyle, children: [preview, _jsxs("div", { style: controlsStyle, children: [_jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: changeButtonStyle, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => onChange(undefined), style: clearButtonStyle, children: "Clear" })] }), showPicker && resolvedPopupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: resolvedPopupStyle, onMouseLeave: () => setShowPicker(false), children: renderList({
+                    files,
+                    value,
+                    onSelect: (file) => {
+                        onChange(file);
+                        setShowPicker(false);
+                    },
+                    basePath,
+                }) }), document.body)] }));
+}
+export function TexturePicker({ value, onChange, basePath = "" }) {
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4 }, clearButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4, marginLeft: 4 }, preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
+}
+export function ModelPicker({ value, onChange, basePath = "", pickerKey }) {
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, clearButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, popupStyle: { background: 'rgba(0,0,0,0.9)', border: '1px solid rgba(34, 211, 238, 0.3)' }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
+}
 // Single Asset Viewer Components - display only one selected asset
 export function SingleTextureViewer({ file, basePath = "" }) {
     if (!file)
-        return null;
+        return _jsx("div", { style: { width: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
     return (_jsxs(_Fragment, { children: [_jsx(TextureCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleModelViewer({ file, basePath = "" }) {
     if (!file)
-        return null;
+        return _jsx("div", { style: { width: 112, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
     return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { }, size: 112 }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleSoundViewer({ file, basePath = "" }) {

package/dist/tools/dragdrop/index.d.ts

@@ -1,4 +1,4 @@
 export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
 export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
 export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
-export type { LoadedModel, LoadedTexture, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";
+export type { LoadedModel, LoadedTexture, LoadedModels, LoadedTextures, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";

package/dist/tools/dragdrop/modelLoader.d.ts

@@ -1,6 +1,8 @@
 import type { Object3D, Texture } from "three";
 export type LoadedModel = Object3D;
 export type LoadedTexture = Texture;
+export type LoadedModels = Record<string, LoadedModel>;
+export type LoadedTextures = Record<string, LoadedTexture>;
 export type ModelLoadResult = {
     success: boolean;
     model?: LoadedModel;

package/dist/tools/prefabeditor/EditorContext.d.ts

@@ -1,4 +1,5 @@
-interface EditorContextType {
+export interface EditorContextType {
+    editMode: boolean;
     transformMode: "translate" | "rotate" | "scale";
     setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
     snapResolution: number;
@@ -13,4 +14,3 @@ interface EditorContextType {
 }
 export declare const EditorContext: import("react").Context<EditorContextType | null>;
 export declare function useEditorContext(): EditorContextType;
-export {};

package/dist/tools/prefabeditor/EditorTree.js

@@ -118,8 +118,19 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         if (selectedId === nodeId)
             setSelectedId(null);
     };
+    const toggleNodeFlag = (nodeId, key) => {
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { [key]: !node[key] }))) })));
+    };
     const handleToggleDisabled = (nodeId) => {
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { disabled: !node.disabled }))) })));
+        toggleNodeFlag(nodeId, 'disabled');
+    };
+    const handleToggleLocked = (nodeId) => {
+        var _a;
+        const willLock = !((_a = findNode(prefabData.root, nodeId)) === null || _a === void 0 ? void 0 : _a.locked);
+        toggleNodeFlag(nodeId, 'locked');
+        if (willLock && selectedId === nodeId) {
+            setSelectedId(null);
+        }
     };
     const closeContextMenu = () => setContextMenu(null);
     const openContextMenu = (nodeId, x, y) => {
@@ -130,7 +141,10 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         setSelectedId(nodeId);
         onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId);
     };
-    const renderTreeNodeMenu = (nodeId, isRoot, onClose) => (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, onAddChild: handleAddChild, onFocus: handleFocus, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
+    const renderTreeNodeMenu = (nodeId, isRoot, onClose) => {
+        var _a;
+        return (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, locked: (_a = findNode(prefabData.root, nodeId)) === null || _a === void 0 ? void 0 : _a.locked, onAddChild: handleAddChild, onFocus: handleFocus, onToggleLock: isRoot ? undefined : handleToggleLocked, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
+    };
     const handleDragStart = (e, id) => {
         if (id === prefabData.root.id)
             return e.preventDefault();
@@ -203,7 +217,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                         marginRight: 4,
                                         cursor: 'pointer',
                                         visibility: hasChildren ? 'visible' : 'hidden'
-                                    }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Node Actions", style: {
+                                    }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id }), node.locked && _jsx("span", { style: { marginLeft: 6, opacity: 0.6 }, children: "\uD83D\uDD12" })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Node Actions", style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',

package/dist/tools/prefabeditor/EditorTreeMenus.d.ts

@@ -12,11 +12,13 @@ export declare function MenuTriggerButton({ buttonRef, onToggle, title, style, c
     style: React.CSSProperties;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }: {
+export declare function TreeNodeMenu({ isRoot, nodeId, locked, onAddChild, onFocus, onToggleLock, onDuplicate, onDelete, onClose, }: {
     isRoot: boolean;
     nodeId: string;
+    locked?: boolean;
     onAddChild: (parentId: string) => void;
     onFocus: (nodeId: string) => void;
+    onToggleLock?: (nodeId: string) => void;
     onDuplicate?: (nodeId: string) => void;
     onDelete?: (nodeId: string) => void;
     onClose: () => void;

package/dist/tools/prefabeditor/EditorTreeMenus.js

@@ -53,8 +53,8 @@ export function MenuTriggerButton({ buttonRef, onToggle, title, style, children,
             onToggle();
         }, title: title, children: children }));
 }
-export function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }) {
-    return (_jsxs(MenuPanel, { children: [_jsx(MenuItemButton, { onClick: () => { onAddChild(nodeId); onClose(); }, children: "Add Child" }), _jsx(MenuItemButton, { onClick: () => { onFocus(nodeId); onClose(); }, children: "Focus Camera" }), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
+export function TreeNodeMenu({ isRoot, nodeId, locked, onAddChild, onFocus, onToggleLock, onDuplicate, onDelete, onClose, }) {
+    return (_jsxs(MenuPanel, { children: [_jsx(MenuItemButton, { onClick: () => { onAddChild(nodeId); onClose(); }, children: "Add Child" }), _jsx(MenuItemButton, { onClick: () => { onFocus(nodeId); onClose(); }, children: "Focus Camera" }), !isRoot && onToggleLock && (_jsx(MenuItemButton, { onClick: () => { onToggleLock(nodeId); onClose(); }, children: locked ? 'Unlock' : 'Lock' })), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
 }
 export function TreeContextMenu({ contextMenu, onClose, children, }) {
     var _a, _b;
@@ -84,18 +84,17 @@ export function TreeContextMenu({ contextMenu, onClose, children, }) {
         };
     }, [contextMenu, onClose]);
     useEffect(() => {
-        if (!contextMenu || !panelRef.current || typeof window === 'undefined')
+        if (!contextMenu) {
+            setPosition(null);
+            return;
+        }
+        if (!panelRef.current || typeof window === 'undefined')
             return;
         const panelRect = panelRef.current.getBoundingClientRect();
         const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
         const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
         setPosition({ left, top });
     }, [contextMenu]);
-    useEffect(() => {
-        if (!contextMenu) {
-            setPosition(null);
-        }
-    }, [contextMenu]);
     if (!contextMenu || typeof document === 'undefined')
         return null;
     return createPortal(_jsx("div", { ref: panelRef, style: {

package/dist/tools/prefabeditor/EditorUI.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
@@ -36,12 +36,8 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     const ALL_COMPONENTS = getAllComponents();
     const allKeys = Object.keys(ALL_COMPONENTS);
     const available = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
-    const [addType, setAddType] = useState(available[0] || "");
-    useEffect(() => {
-        const newAvailable = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
-        if (!newAvailable.includes(addType))
-            setAddType(newAvailable[0] || "");
-    }, [Object.keys(node.components || {}).join(',')]);
+    const [preferredAddType, setAddType] = useState(available[0] || "");
+    const addType = available.includes(preferredAddType) ? preferredAddType : (available[0] || "");
     return _jsxs("div", { style: inspector.content, className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;