react-three-game 0.0.1 → 0.0.2

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -0,0 +1,273 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MapControls, TransformControls } from "@react-three/drei";
+import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
+import { Vector3, Euler, Quaternion, SRGBColorSpace, TextureLoader, Matrix4 } from "three";
+import { getComponent } from "./components/ComponentRegistry";
+import { loadModel } from "../dragdrop/modelLoader";
+import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
+// register all components
+import { registerComponent } from './components/ComponentRegistry';
+import components from './components/';
+components.forEach(registerComponent);
+function updatePrefabNode(root, id, update) {
+    if (root.id === id) {
+        return update(root);
+    }
+    if (root.children) {
+        return Object.assign(Object.assign({}, root), { children: root.children.map(child => updatePrefabNode(child, id, update)) });
+    }
+    return root;
+}
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode }, ref) => {
+    const [loadedModels, setLoadedModels] = useState({});
+    const [loadedTextures, setLoadedTextures] = useState({});
+    // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
+    const loadingRefs = useRef(new Set());
+    const objectRefs = useRef({});
+    const [selectedObject, setSelectedObject] = useState(null);
+    const registerRef = useCallback((id, obj) => {
+        objectRefs.current[id] = obj;
+        if (id === selectedId) {
+            setSelectedObject(obj);
+        }
+    }, [selectedId]);
+    useEffect(() => {
+        if (selectedId) {
+            setSelectedObject(objectRefs.current[selectedId] || null);
+        }
+        else {
+            setSelectedObject(null);
+        }
+    }, [selectedId]);
+    // const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate"); // Removed local state
+    const updateNode = (updater) => {
+        if (!selectedId || !onPrefabChange)
+            return;
+        const newRoot = updatePrefabNode(data.root, selectedId, updater);
+        onPrefabChange(Object.assign(Object.assign({}, data), { root: newRoot }));
+    };
+    const onTransformChange = () => {
+        if (!selectedId || !onPrefabChange)
+            return;
+        const obj = objectRefs.current[selectedId];
+        if (!obj)
+            return;
+        // 1. Get world matrix from the actual Three object
+        const worldMatrix = obj.matrixWorld.clone();
+        // 2. Compute parent world matrix from the prefab tree
+        const parentWorld = computeParentWorldMatrix(data.root, selectedId);
+        const parentInv = parentWorld.clone().invert();
+        // 3. Convert world -> local
+        const localMatrix = new Matrix4().multiplyMatrices(parentInv, worldMatrix);
+        const lp = new Vector3();
+        const lq = new Quaternion();
+        const ls = new Vector3();
+        localMatrix.decompose(lp, lq, ls);
+        const le = new Euler().setFromQuaternion(lq);
+        // 4. Write back LOCAL transform into the prefab node
+        const newRoot = updatePrefabNode(data.root, selectedId, (node) => {
+            var _a, _b, _c;
+            return (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node === null || node === void 0 ? void 0 : node.components), { transform: {
+                        type: "Transform",
+                        properties: {
+                            position: [lp.x, lp.y, lp.z],
+                            rotation: [le.x, le.y, le.z],
+                            scale: [ls.x, ls.y, ls.z],
+                        },
+                    }, geometry: (_a = node.components) === null || _a === void 0 ? void 0 : _a.geometry, material: (_b = node.components) === null || _b === void 0 ? void 0 : _b.material, model: (_c = node.components) === null || _c === void 0 ? void 0 : _c.model }) }));
+        });
+        onPrefabChange(Object.assign(Object.assign({}, data), { root: newRoot }));
+    };
+    useEffect(() => {
+        const loadAssets = () => __awaiter(void 0, void 0, void 0, function* () {
+            const modelsToLoad = new Set();
+            const texturesToLoad = new Set();
+            const traverse = (node) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if (!node)
+                    return;
+                if ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename) {
+                    modelsToLoad.add(node.components.model.properties.filename);
+                }
+                if ((_f = (_e = (_d = node.components) === null || _d === void 0 ? void 0 : _d.material) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.texture) {
+                    texturesToLoad.add(node.components.material.properties.texture);
+                }
+                (_g = node.children) === null || _g === void 0 ? void 0 : _g.forEach(traverse);
+            };
+            traverse(data.root);
+            for (const filename of modelsToLoad) {
+                if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
+                    loadingRefs.current.add(filename);
+                    const result = yield loadModel(filename, "");
+                    if (result.success && result.model) {
+                        setLoadedModels(prev => (Object.assign(Object.assign({}, prev), { [filename]: result.model })));
+                    }
+                }
+            }
+            const textureLoader = new TextureLoader();
+            for (const filename of texturesToLoad) {
+                if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
+                    loadingRefs.current.add(filename);
+                    textureLoader.load(filename, (texture) => {
+                        texture.colorSpace = SRGBColorSpace;
+                        setLoadedTextures(prev => (Object.assign(Object.assign({}, prev), { [filename]: texture })));
+                    });
+                }
+            }
+        });
+        loadAssets();
+    }, [data, loadedModels, loadedTextures]);
+    return _jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: loadedModels, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: new Matrix4() }) }), editMode && _jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedId && selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] })] });
+});
+function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = new Matrix4(), }) {
+    var _a, _b, _c, _d;
+    // Early return if gameObject is null or undefined
+    if (!gameObject)
+        return null;
+    // Build a small context object to avoid long param lists
+    const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
+    // --- 1. Transform (local + world) ---
+    const transformProps = getNodeTransformProps(gameObject);
+    const localMatrix = new Matrix4().compose(new Vector3(...transformProps.position), new Quaternion().setFromEuler(new Euler(...transformProps.rotation)), new Vector3(...transformProps.scale));
+    const worldMatrix = parentMatrix.clone().multiply(localMatrix);
+    // preserve click/drag detection from previous implementation
+    const clickValid = useRef(false);
+    const handlePointerDown = (e) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+    const handlePointerMove = () => {
+        if (clickValid.current)
+            clickValid.current = false;
+    };
+    const handlePointerUp = (e) => {
+        if (clickValid.current) {
+            e.stopPropagation();
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+        }
+        clickValid.current = false;
+    };
+    if (!gameObject.enabled || !gameObject.visible)
+        return null;
+    // --- 2. If instanced, short-circuit to a tiny clean branch ---
+    const isInstanced = !!((_c = (_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced);
+    if (isInstanced) {
+        return renderInstancedNode(gameObject, worldMatrix, ctx);
+    }
+    // --- 3. Core content decided by component registry ---
+    const core = renderCoreNode(gameObject, ctx, parentMatrix);
+    // --- 4. Wrap with physics if needed ---
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
+    // --- 5. Render children (always relative transforms) ---
+    const children = ((_d = gameObject.children) !== null && _d !== void 0 ? _d : []).map((child) => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: worldMatrix }, child.id)));
+    // --- 6. Final group wrapper ---
+    return (_jsxs("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: [physicsWrapped, children] }));
+}
+// Helper: render an instanced GameInstance (terminal node)
+function renderInstancedNode(gameObject, worldMatrix, ctx) {
+    var _a, _b, _c, _d;
+    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
+    const wp = new Vector3();
+    const wq = new Quaternion();
+    const ws = new Vector3();
+    worldMatrix.decompose(wp, wq, ws);
+    const we = new Euler().setFromQuaternion(wq);
+    const modelUrl = (_d = (_c = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.filename;
+    return (_jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: [wp.x, wp.y, wp.z], rotation: [we.x, we.y, we.z], scale: [ws.x, ws.y, ws.z], physics: ctx.editMode ? undefined : physics === null || physics === void 0 ? void 0 : physics.properties }));
+}
+// Helper: render main model/geometry content for a non-instanced node
+function renderCoreNode(gameObject, ctx, parentMatrix) {
+    var _a, _b, _c;
+    const geometry = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.geometry;
+    const material = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.material;
+    const modelComp = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
+    const geometryDef = geometry ? getComponent('Geometry') : undefined;
+    const materialDef = material ? getComponent('Material') : undefined;
+    const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
+    // Generic component views (exclude geometry/material/model)
+    const contextProps = {
+        loadedModels: ctx.loadedModels,
+        loadedTextures: ctx.loadedTextures,
+        isSelected: ctx.selectedId === gameObject.id,
+        editMode: ctx.editMode,
+        parentMatrix,
+        registerRef: ctx.registerRef,
+    };
+    const allComponentViews = gameObject.components
+        ? Object.entries(gameObject.components)
+            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model')
+            .map(([key, comp]) => {
+            const def = getComponent(key);
+            if (!def || !def.View || !comp)
+                return null;
+            return _jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key);
+        })
+        : null;
+    // If we have a model (non-instanced) render it as a primitive with material override
+    if (isModelAvailable) {
+        const modelObj = ctx.loadedModels[modelComp.properties.filename].clone();
+        return (_jsxs("primitive", { object: modelObj, children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), allComponentViews] }));
+    }
+    // Otherwise, if geometry present, render a mesh
+    if (geometry && geometryDef && geometryDef.View) {
+        return (_jsxs("mesh", { children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps), "geometry"), material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), allComponentViews] }));
+    }
+    // Default: render other component views (no geometry/model)
+    return _jsx(_Fragment, { children: allComponentViews });
+}
+// Helper: wrap core content with physics component when necessary
+function wrapPhysicsIfNeeded(gameObject, content, ctx) {
+    var _a;
+    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
+    if (!physics)
+        return content;
+    const physicsDef = getComponent('Physics');
+    if (!physicsDef || !physicsDef.View)
+        return content;
+    return (_jsx(physicsDef.View, { properties: Object.assign(Object.assign({}, physics.properties), { id: gameObject.id }), registerRef: ctx.registerRef, editMode: ctx.editMode, children: content }));
+}
+export default PrefabRoot;
+function getNodeTransformProps(node) {
+    var _a, _b, _c, _d, _e;
+    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
+    return {
+        position: (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0],
+        rotation: (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0],
+        scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
+    };
+}
+function computeParentWorldMatrix(root, targetId) {
+    var _a;
+    const identity = new Matrix4();
+    function traverse(node, parentWorld) {
+        if (node.id === targetId) {
+            // parentWorld is what we want
+            return parentWorld.clone();
+        }
+        const { position, rotation, scale } = getNodeTransformProps(node);
+        const localPos = new Vector3(...position);
+        const localRot = new Euler(...rotation);
+        const localScale = new Vector3(...scale);
+        const localMat = new Matrix4().compose(localPos, new Quaternion().setFromEuler(localRot), localScale);
+        const worldMat = parentWorld.clone().multiply(localMat);
+        if (node.children) {
+            for (const child of node.children) {
+                const res = traverse(child, worldMat);
+                if (res)
+                    return res;
+            }
+        }
+        return null;
+    }
+    return (_a = traverse(root, identity)) !== null && _a !== void 0 ? _a : identity;
+}

package/dist/tools/prefabeditor/components/ComponentRegistry.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+export interface Component {
+    name: string;
+    Editor: FC<{
+        component: any;
+        onUpdate: (newComp: any) => void;
+    }>;
+    defaultProperties: any;
+    View?: FC<any>;
+}
+export declare function registerComponent(component: Component): void;
+export declare function getComponent(name: string): Component | undefined;
+export declare function getAllComponents(): Record<string, Component>;

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

@@ -0,0 +1,13 @@
+const REGISTRY = {};
+export function registerComponent(component) {
+    if (REGISTRY[component.name]) {
+        throw new Error(`Component with name ${component.name} already registered.`);
+    }
+    REGISTRY[component.name] = component;
+}
+export function getComponent(name) {
+    return REGISTRY[name];
+}
+export function getAllComponents() {
+    return Object.assign({}, REGISTRY);
+}

package/dist/tools/prefabeditor/components/GeometryComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const GeometryComponent: Component;
+export default GeometryComponent;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GeometryComponentEditor({ component, onUpdate }) {
+    return _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Type" }), _jsxs("select", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.geometryType, onChange: e => onUpdate({ geometryType: e.target.value }), children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] })] });
+}
+// View for Geometry component
+function GeometryComponentView({ properties, children }) {
+    const { geometryType, args = [] } = properties;
+    // Only return the geometry node, do not wrap in mesh or group
+    switch (geometryType) {
+        case "box":
+            return _jsx("boxGeometry", { args: args });
+        case "sphere":
+            return _jsx("sphereGeometry", { args: args });
+        case "plane":
+            return _jsx("planeGeometry", { args: args });
+        default:
+            return _jsx("boxGeometry", { args: [1, 1, 1] });
+    }
+}
+const GeometryComponent = {
+    name: 'Geometry',
+    Editor: GeometryComponentEditor,
+    View: GeometryComponentView,
+    defaultProperties: {
+        geometryType: 'box'
+    }
+};
+export default GeometryComponent;

package/dist/tools/prefabeditor/components/MaterialComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from './ComponentRegistry';
+declare const MaterialComponent: Component;
+export default MaterialComponent;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextureListViewer } from '../../assetviewer/page';
+import { useEffect, useState } from 'react';
+function MaterialComponentEditor({ component, onUpdate }) {
+    var _a, _b, _c, _d;
+    const [textureFiles, setTextureFiles] = useState([]);
+    useEffect(() => {
+        fetch('/textures/manifest.json')
+            .then(r => r.json())
+            .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, []);
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.wireframe || false, onChange: e => onUpdate({ 'wireframe': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Wireframe" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Texture" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => onUpdate({ 'texture': file }) }) })] }), component.properties.texture && (_jsxs("div", { className: "border-t border-cyan-500/20 pt-1 mt-1", children: [_jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.repeat || false, onChange: e => onUpdate({ 'repeat': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Repeat (X, Y)" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "number", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: e => {
+                                            var _a, _b;
+                                            const y = (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 1;
+                                            onUpdate({ 'repeatCount': [parseFloat(e.target.value), y] });
+                                        } }), _jsx("input", { type: "number", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: (_d = (_c = component.properties.repeatCount) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 1, onChange: e => {
+                                            var _a, _b;
+                                            const x = (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1;
+                                            onUpdate({ 'repeatCount': [x, parseFloat(e.target.value)] });
+                                        } })] })] }))] }))] }));
+}
+;
+import { useMemo } from 'react';
+import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace } from 'three';
+// View for Material component
+function MaterialComponentView({ properties, loadedTextures, isSelected }) {
+    var _a;
+    const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
+    const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
+    const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
+    const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+    const finalTexture = useMemo(() => {
+        if (!texture)
+            return undefined;
+        const t = texture.clone();
+        if (repeat) {
+            t.wrapS = t.wrapT = RepeatWrapping;
+            if (repeatCount)
+                t.repeat.set(repeatCount[0], repeatCount[1]);
+        }
+        else {
+            t.wrapS = t.wrapT = ClampToEdgeWrapping;
+            t.repeat.set(1, 1);
+        }
+        t.colorSpace = SRGBColorSpace;
+        t.needsUpdate = true;
+        return t;
+    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1]]);
+    if (!properties) {
+        return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
+    }
+    const { color, wireframe = false } = properties;
+    const displayColor = isSelected ? "cyan" : color;
+    return _jsx("meshStandardMaterial", { color: displayColor, wireframe: wireframe, map: finalTexture, transparent: !!finalTexture, side: DoubleSide }, (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture');
+}
+const MaterialComponent = {
+    name: 'Material',
+    Editor: MaterialComponentEditor,
+    View: MaterialComponentView,
+    defaultProperties: {
+        color: '#ffffff',
+        wireframe: false
+    }
+};
+export default MaterialComponent;

package/dist/tools/prefabeditor/components/ModelComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from './ComponentRegistry';
+declare const ModelComponent: Component;
+export default ModelComponent;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ModelListViewer } from '../../assetviewer/page';
+import { useEffect, useState } from 'react';
+function ModelComponentEditor({ component, onUpdate }) {
+    const [modelFiles, setModelFiles] = useState([]);
+    useEffect(() => {
+        fetch('/models/manifest.json')
+            .then(r => r.json())
+            .then(data => setModelFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, []);
+    const handleModelSelect = (file) => {
+        // Remove leading slash for prefab compatibility
+        const filename = file.startsWith('/') ? file.slice(1) : file;
+        onUpdate({ 'filename': filename });
+    };
+    return _jsxs("div", { children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Model" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ 'instanced': e.target.checked }), className: "w-3 h-3" }), _jsx("label", { htmlFor: "instanced-checkbox", className: "text-[9px] text-cyan-400/60", children: "Instanced" })] })] });
+}
+// View for Model component
+function ModelComponentView({ properties, loadedModels, children }) {
+    // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
+    if (!properties.filename || properties.instanced)
+        return children || null;
+    if (loadedModels && loadedModels[properties.filename]) {
+        return _jsxs(_Fragment, { children: [_jsx("primitive", { object: loadedModels[properties.filename].clone() }), children] });
+    }
+    // Optionally, render a placeholder if model is not loaded
+    return children || null;
+}
+const ModelComponent = {
+    name: 'Model',
+    Editor: ModelComponentEditor,
+    View: ModelComponentView,
+    defaultProperties: {
+        filename: '',
+        instanced: false
+    }
+};
+export default ModelComponent;

package/dist/tools/prefabeditor/components/PhysicsComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const PhysicsComponent: Component;
+export default PhysicsComponent;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function PhysicsComponentEditor({ component, onUpdate }) {
+    return _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Type" }), _jsxs("select", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] })] });
+}
+import { RigidBody } from "@react-three/rapier";
+function PhysicsComponentView({ properties, children, registerRef, transform, editMode }) {
+    if (editMode)
+        return children;
+    return (_jsx(RigidBody, { ref: el => registerRef && registerRef(properties.id, el), position: transform === null || transform === void 0 ? void 0 : transform.position, rotation: transform === null || transform === void 0 ? void 0 : transform.rotation, scale: transform === null || transform === void 0 ? void 0 : transform.scale, type: properties.type, colliders: "cuboid", children: children }));
+}
+const PhysicsComponent = {
+    name: 'Physics',
+    Editor: PhysicsComponentEditor,
+    View: PhysicsComponentView,
+    defaultProperties: {
+        type: 'dynamic'
+    }
+};
+export default PhysicsComponent;

package/dist/tools/prefabeditor/components/SpotLightComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const SpotLightComponent: Component;
+export default SpotLightComponent;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SpotLightComponentEditor({ component, onUpdate }) {
+    return _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.intensity, onChange: e => onUpdate({ 'intensity': parseFloat(e.target.value) }) })] })] });
+}
+// The view component for SpotLight
+function SpotLightView({ properties }) {
+    // You can expand this with more spotlight properties as needed
+    return _jsx("spotLight", { color: properties.color, intensity: properties.intensity });
+}
+const SpotLightComponent = {
+    name: 'SpotLight',
+    Editor: SpotLightComponentEditor,
+    View: SpotLightView,
+    defaultProperties: {
+        color: '#ffffff',
+        intensity: 1.0
+    }
+};
+export default SpotLightComponent;

package/dist/tools/prefabeditor/components/TransformComponent.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "./ComponentRegistry";
+declare const TransformComponent: Component;
+export default TransformComponent;
+export declare function Vector3Input({ label, value, onChange }: {
+    label: string;
+    value: [number, number, number];
+    onChange: (v: [number, number, number]) => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+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 }) })] });
+}
+const TransformComponent = {
+    name: 'Transform',
+    Editor: TransformComponentEditor,
+    defaultProperties: {
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+        scale: [1, 1, 1]
+    }
+};
+export default TransformComponent;
+export function Vector3Input({ label, value, onChange }) {
+    const handleChange = (index, val) => {
+        const newValue = [...value];
+        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) })] })] })] });
+}

package/dist/tools/prefabeditor/components/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./ComponentRegistry").Component[];
+export default _default;

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

@@ -0,0 +1,14 @@
+import GeometryComponent from './GeometryComponent';
+import TransformComponent from './TransformComponent';
+import MaterialComponent from './MaterialComponent';
+import PhysicsComponent from './PhysicsComponent';
+import SpotLightComponent from './SpotLightComponent';
+import ModelComponent from './ModelComponent';
+export default [
+    GeometryComponent,
+    TransformComponent,
+    MaterialComponent,
+    PhysicsComponent,
+    SpotLightComponent,
+    ModelComponent
+];

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

@@ -0,0 +1 @@
+export default function PrefabEditorPage(): import("react/jsx-runtime").JSX.Element;

package/dist/tools/prefabeditor/page.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PrefabEditor from "./PrefabEditor";
+export default function PrefabEditorPage() {
+    return _jsx("div", { className: "w-screen h-screen", children: _jsx(PrefabEditor, { children: _jsx("directionalLight", { position: [5, 10, 7.5], intensity: 1, castShadow: true }) }) });
+}

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

@@ -0,0 +1,29 @@
+export interface Prefab {
+    id: string;
+    name: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    assets?: string[] | {
+        [assetName: string]: string;
+    };
+    onStart?: (target: any) => void;
+    root: GameObject;
+}
+export interface GameObject {
+    id: string;
+    enabled: boolean;
+    visible: boolean;
+    ref?: any;
+    children?: GameObject[];
+    components?: {
+        [uuid: string]: Component | undefined;
+    };
+}
+interface Component {
+    type: string;
+    properties: {
+        [key: string]: any;
+    };
+}
+export {};

package/dist/tools/prefabeditor/types.js

@@ -0,0 +1 @@
+export {};