react-three-game 0.0.41 → 0.0.42

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
+import { useEffect, useState } from 'react';
+import { Input, Label } from './Input';
+import { useMemo } from 'react';
+import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter } from 'three';
+function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
+    var _a, _b, _c, _d;
+    const [textureFiles, setTextureFiles] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
+    useEffect(() => {
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}textures/manifest.json`)
+            .then(r => r.json())
+            .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, [basePath]);
+    const textInputStyle = {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }, value: component.properties.color, onChange: e => onUpdate({ color: e.target.value }) }), _jsx("input", { type: "text", style: textInputStyle, value: component.properties.color, onChange: e => onUpdate({ color: e.target.value }) })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.wireframe || false, onChange: e => onUpdate({ wireframe: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Wireframe" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Texture File" }), _jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleTextureViewer, { file: component.properties.texture || undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Hide' : 'Change' }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => {
+                                        onUpdate({ texture: file });
+                                        setShowPicker(false);
+                                    }, basePath: basePath }) }))] })] }), component.properties.texture && (_jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 4, marginTop: 4 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.repeat || false, onChange: e => onUpdate({ repeat: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx(Label, { children: "Repeat (X, Y)" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: value => {
+                                            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: [value, y] });
+                                        } }), _jsx(Input, { value: (_d = (_c = component.properties.repeatCount) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 1, onChange: value => {
+                                            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, value] });
+                                        } })] })] })), _jsxs("div", { style: { marginTop: 4 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }, children: [_jsx("input", { type: "checkbox", style: { width: 12, height: 12 }, checked: component.properties.generateMipmaps !== false, onChange: e => onUpdate({ generateMipmaps: e.target.checked }) }), _jsx("label", { style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, children: "Generate Mipmaps" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Min Filter" }), _jsxs("select", { style: Object.assign(Object.assign({}, textInputStyle), { width: '100%', cursor: 'pointer' }), value: component.properties.minFilter || 'LinearMipmapLinearFilter', onChange: e => onUpdate({ minFilter: e.target.value }), children: [_jsx("option", { value: "NearestFilter", children: "Nearest" }), _jsx("option", { value: "NearestMipmapNearestFilter", children: "Nearest Mipmap Nearest" }), _jsx("option", { value: "NearestMipmapLinearFilter", children: "Nearest Mipmap Linear" }), _jsx("option", { value: "LinearFilter", children: "Linear" }), _jsx("option", { value: "LinearMipmapNearestFilter", children: "Linear Mipmap Nearest" }), _jsx("option", { value: "LinearMipmapLinearFilter", children: "Linear Mipmap Linear (Default)" })] })] }), _jsxs("div", { style: { marginTop: 4 }, children: [_jsx(Label, { children: "Mag Filter" }), _jsxs("select", { style: Object.assign(Object.assign({}, textInputStyle), { width: '100%', cursor: 'pointer' }), value: component.properties.magFilter || 'LinearFilter', onChange: e => onUpdate({ magFilter: e.target.value }), children: [_jsx("option", { value: "NearestFilter", children: "Nearest" }), _jsx("option", { value: "LinearFilter", children: "Linear (Default)" })] })] })] })] }))] }));
+}
+;
+// View for Material component
+function MaterialComponentView({ properties, loadedTextures }) {
+    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 generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
+    const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
+    const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
+    const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+    const minFilterMap = {
+        NearestFilter,
+        LinearFilter,
+        NearestMipmapNearestFilter,
+        NearestMipmapLinearFilter,
+        LinearMipmapNearestFilter,
+        LinearMipmapLinearFilter
+    };
+    const magFilterMap = {
+        NearestFilter,
+        LinearFilter
+    };
+    const finalTexture = useMemo(() => {
+        var _a, _b;
+        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.generateMipmaps = generateMipmaps;
+        t.minFilter = (_a = minFilterMap[minFilter]) !== null && _a !== void 0 ? _a : LinearMipmapLinearFilter;
+        t.magFilter = (_b = magFilterMap[magFilter]) !== null && _b !== void 0 ? _b : LinearFilter;
+        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], generateMipmaps, minFilter, magFilter]);
+    if (!properties) {
+        return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
+    }
+    const { color, wireframe = false } = properties;
+    return (_jsx("meshStandardMaterial", { color: color, 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,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
+import { useEffect, useState, useMemo } from 'react';
+import { Label } from './Input';
+function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
+    const [modelFiles, setModelFiles] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
+    useEffect(() => {
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}models/manifest.json`)
+            .then(r => r.json())
+            .then(data => setModelFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, [basePath]);
+    const handleModelSelect = (file) => {
+        // Remove leading slash for prefab compatibility
+        const filename = file.startsWith('/') ? file.slice(1) : file;
+        onUpdate({ 'filename': filename });
+    };
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Model File" }), _jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: component.properties.filename ? `/${component.properties.filename}` : undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Hide' : 'Change' }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: (file) => {
+                                        handleModelSelect(file);
+                                        setShowPicker(false);
+                                    }, basePath: basePath }, node === null || node === void 0 ? void 0 : node.id) }))] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ instanced: e.target.checked }), style: { width: 12, height: 12 } }), _jsx("label", { htmlFor: "instanced-checkbox", style: { fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }, 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 _jsx(_Fragment, { children: children });
+    const sourceModel = loadedModels === null || loadedModels === void 0 ? void 0 : loadedModels[properties.filename];
+    // Clone model once and set up shadows - memoized to avoid cloning on every render
+    const clonedModel = useMemo(() => {
+        if (!sourceModel)
+            return null;
+        const clone = sourceModel.clone();
+        clone.traverse((obj) => {
+            if (obj.isMesh) {
+                obj.castShadow = true;
+                obj.receiveShadow = true;
+            }
+        });
+        return clone;
+    }, [sourceModel]);
+    if (!clonedModel)
+        return _jsx(_Fragment, { children: children });
+    return _jsx("primitive", { object: clonedModel, children: children });
+}
+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,10 @@
+import { Component } from "./ComponentRegistry";
+export interface PhysicsProps {
+    type: "fixed" | "dynamic";
+    collider?: string;
+    mass?: number;
+    restitution?: number;
+    friction?: number;
+}
+declare const PhysicsComponent: Component;
+export default PhysicsComponent;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RigidBody } from "@react-three/rapier";
+import { Label } from "./Input";
+function PhysicsComponentEditor({ component, onUpdate }) {
+    const { type = 'dynamic', collider = 'hull' } = component.properties;
+    const selectStyle = {
+        width: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Type" }), _jsxs("select", { style: selectStyle, value: type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Collider" }), _jsxs("select", { style: selectStyle, value: collider, onChange: e => onUpdate({ collider: e.target.value }), children: [_jsx("option", { value: "hull", children: "Hull (convex)" }), _jsx("option", { value: "trimesh", children: "Trimesh (exact)" }), _jsx("option", { value: "cuboid", children: "Cuboid (box)" }), _jsx("option", { value: "ball", children: "Ball (sphere)" })] })] })] }));
+}
+function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }) {
+    const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
+    // In edit mode, include position/rotation in key to force remount when transform changes
+    // This ensures the RigidBody debug visualization updates even when physics is paused
+    const rbKey = editMode
+        ? `${properties.type || 'dynamic'}_${colliders}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${properties.type || 'dynamic'}_${colliders}`;
+    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, position: position, rotation: rotation, scale: scale, children: children }, rbKey));
+}
+const PhysicsComponent = {
+    name: 'Physics',
+    Editor: PhysicsComponentEditor,
+    View: PhysicsComponentView,
+    defaultProperties: { type: 'dynamic', collider: 'hull' }
+};
+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,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { Input, Label } from "./Input";
+function SpotLightComponentEditor({ component, onUpdate }) {
+    var _a, _b, _c, _d, _e, _f;
+    const props = {
+        color: (_a = component.properties.color) !== null && _a !== void 0 ? _a : '#ffffff',
+        intensity: (_b = component.properties.intensity) !== null && _b !== void 0 ? _b : 1.0,
+        angle: (_c = component.properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6,
+        penumbra: (_d = component.properties.penumbra) !== null && _d !== void 0 ? _d : 0.5,
+        distance: (_e = component.properties.distance) !== null && _e !== void 0 ? _e : 100,
+        castShadow: (_f = component.properties.castShadow) !== null && _f !== void 0 ? _f : true
+    };
+    const textInputStyle = {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }, value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { color: e.target.value })) }), _jsx("input", { type: "text", style: textInputStyle, value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { color: e.target.value })) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Intensity" }), _jsx(Input, { step: "0.1", value: props.intensity, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { intensity: value })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Angle" }), _jsx(Input, { step: "0.1", min: 0, max: Math.PI, value: props.angle, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { angle: value })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Penumbra" }), _jsx(Input, { step: "0.1", min: 0, max: 1, value: props.penumbra, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { penumbra: value })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Distance" }), _jsx(Input, { step: "1", min: 0, value: props.distance, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { distance: value })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Cast Shadow" }), _jsx("input", { type: "checkbox", style: { height: 16, width: 16, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', cursor: 'pointer' }, checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { castShadow: e.target.checked })) })] })] });
+}
+function SpotLightView({ properties, editMode }) {
+    var _a, _b, _c, _d, _e, _f;
+    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
+    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
+    const angle = (_c = properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6;
+    const penumbra = (_d = properties.penumbra) !== null && _d !== void 0 ? _d : 0.5;
+    const distance = (_e = properties.distance) !== null && _e !== void 0 ? _e : 100;
+    const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
+    const spotLightRef = useRef(null);
+    const targetRef = useRef(null);
+    useEffect(() => {
+        if (spotLightRef.current && targetRef.current) {
+            spotLightRef.current.target = targetRef.current;
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+}
+const SpotLightComponent = {
+    name: 'SpotLight',
+    Editor: SpotLightComponentEditor,
+    View: SpotLightView,
+    defaultProperties: {}
+};
+export default SpotLightComponent;

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

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

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

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Vector3Input, Label } from "./Input";
+import { useEditorContext } from "../EditorContext";
+const buttonStyle = {
+    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',
+    flex: 1,
+};
+function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }) {
+    const { snapResolution, setSnapResolution } = useEditorContext();
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [transformMode && setTransformMode && (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs(Label, { children: ["Transform Mode ", snapResolution > 0 && `(Snap: ${snapResolution})`] }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
+                            const isActive = transformMode === mode;
+                            return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent' }), onPointerEnter: (e) => {
+                                    if (!isActive)
+                                        e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                                }, onPointerLeave: (e) => {
+                                    if (!isActive)
+                                        e.currentTarget.style.background = 'transparent';
+                                }, children: mode }, mode));
+                        }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent', width: '100%' }), onPointerEnter: (e) => {
+                                if (snapResolution === 0)
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            }, onPointerLeave: (e) => {
+                                if (snapResolution === 0)
+                                    e.currentTarget.style.background = 'transparent';
+                            }, children: ["Snap: ", snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'] }) })] })), _jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }), snap: snapResolution }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }), snap: snapResolution }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }), snap: snapResolution })] });
+}
+const TransformComponent = {
+    name: 'Transform',
+    Editor: TransformComponentEditor,
+    defaultProperties: {
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+        scale: [1, 1, 1]
+    }
+};
+export default TransformComponent;

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,16 @@
+import GeometryComponent from './GeometryComponent';
+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,
+    TransformComponent,
+    MaterialComponent,
+    PhysicsComponent,
+    SpotLightComponent,
+    DirectionalLightComponent,
+    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 }) }) });
+}