react-three-game 0.0.42 → 0.0.45

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

@@ -1,8 +1,8 @@
 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 = "" }) {
+import { FieldRenderer } from './Input';
+function ModelPicker({ value, onChange, basePath, nodeId }) {
     const [modelFiles, setModelFiles] = useState([]);
     const [showPicker, setShowPicker] = useState(false);
     useEffect(() => {
@@ -13,14 +13,23 @@ function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
             .catch(console.error);
     }, [basePath]);
     const handleModelSelect = (file) => {
-        // Remove leading slash for prefab compatibility
         const filename = file.startsWith('/') ? file.slice(1) : file;
-        onUpdate({ 'filename': filename });
+        onChange(filename);
+        setShowPicker(false);
     };
-    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" })] })] });
+    return (_jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : 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: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }))] }));
+}
+function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
+    const fields = [
+        {
+            name: 'filename',
+            type: 'custom',
+            label: 'Model File',
+            render: ({ value, onChange }) => (_jsx(ModelPicker, { value: value, onChange: onChange, basePath: basePath, nodeId: node === null || node === void 0 ? void 0 : node.id })),
+        },
+        { name: 'instanced', type: 'boolean', label: 'Instanced' },
+    ];
+    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {

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

@@ -1,19 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { RigidBody } from "@react-three/rapier";
-import { Label } from "./Input";
+import { FieldRenderer } from "./Input";
+const physicsFields = [
+    {
+        name: 'type',
+        type: 'select',
+        label: 'Type',
+        options: [
+            { value: 'dynamic', label: 'Dynamic' },
+            { value: 'fixed', label: 'Fixed' },
+        ],
+    },
+    {
+        name: 'collider',
+        type: 'select',
+        label: 'Collider',
+        options: [
+            { value: 'hull', label: 'Hull (convex)' },
+            { value: 'trimesh', label: 'Trimesh (exact)' },
+            { value: 'cuboid', label: 'Cuboid (box)' },
+            { value: 'ball', label: 'Ball (sphere)' },
+        ],
+    },
+];
 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)" })] })] })] }));
+    return (_jsx(FieldRenderer, { fields: physicsFields, values: component.properties, onChange: onUpdate }));
 }
 function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }) {
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');

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

@@ -1,27 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { Input, Label } from "./Input";
+import { FieldRenderer } from "./Input";
+const spotLightFields = [
+    { name: 'color', type: 'color', label: 'Color' },
+    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
+    { name: 'angle', type: 'number', label: 'Angle', step: 0.1, min: 0, max: Math.PI },
+    { name: 'penumbra', type: 'number', label: 'Penumbra', step: 0.1, min: 0, max: 1 },
+    { name: 'distance', type: 'number', label: 'Distance', step: 1, min: 0 },
+    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
+];
 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 })) })] })] });
+    return (_jsx(FieldRenderer, { fields: spotLightFields, values: component.properties, onChange: onUpdate }));
 }
 function SpotLightView({ properties, editMode }) {
     var _a, _b, _c, _d, _e, _f;

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

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Vector3Input, Label } from "./Input";
+import { FieldRenderer, Label } from "./Input";
 import { useEditorContext } from "../EditorContext";
 const buttonStyle = {
     padding: '2px 6px',
@@ -11,24 +11,32 @@ const buttonStyle = {
     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 })] });
+function TransformModeSelector({ transformMode, setTransformMode, snapResolution, setSnapResolution }) {
+    return (_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'] }) })] }));
+}
+function TransformComponentEditor({ component, onUpdate }) {
+    const { transformMode, setTransformMode, snapResolution, setSnapResolution } = useEditorContext();
+    const fields = [
+        { name: 'position', type: 'vector3', label: 'Position', snap: snapResolution },
+        { name: 'rotation', type: 'vector3', label: 'Rotation', snap: snapResolution },
+        { name: 'scale', type: 'vector3', label: 'Scale', snap: snapResolution },
+    ];
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode, snapResolution: snapResolution, setSnapResolution: setSnapResolution }), _jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate })] }));
 }
 const TransformComponent = {
     name: 'Transform',

package/dist/tools/prefabeditor/page.js

@@ -1,5 +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 }) }) });
+    return _jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(PrefabEditor, { children: _jsx("directionalLight", { position: [5, 10, 7.5], intensity: 1, castShadow: true }) }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.42",
+  "version": "0.0.45",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/index.ts

@@ -1,16 +1,38 @@
-// Core Components
+// Core
 export { default as GameCanvas } from './shared/GameCanvas';
 
-// Prefab Editor
+// Helpers
+export * from './helpers';
+export { sound as soundManager } from './helpers/SoundManager';
+
+// Prefab Editor - Components
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
-export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
-export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
+
+// Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+
+// Prefab Editor - Input Components
+export {
+  FieldRenderer,
+  Input,
+  Label,
+  Vector3Input,
+  ColorInput,
+  StringInput,
+  BooleanInput,
+  SelectInput,
+} from './tools/prefabeditor/components/Input';
+
+// Prefab Editor - Styles & Utils
+export * from './tools/prefabeditor/utils';
+
+// Prefab Editor - Types
+export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
 export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
-export * as editorStyles from './tools/prefabeditor/styles';
-export * from './tools/prefabeditor/utils';
 
 // Asset Tools
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
@@ -20,7 +42,3 @@ export {
   SoundListViewer,
   SharedCanvas,
 } from './tools/assetviewer/page';
-export { sound as soundManager } from './helpers/SoundManager';
-
-// Helpers
-export * from './helpers';

package/src/shared/GameCanvas.tsx

@@ -24,7 +24,7 @@ export default function GameCanvas({ loader = false, children, glConfig, ...prop
 
     return <>
         <Canvas
-            style={{ touchAction: 'none' }}
+            style={{ touchAction: 'none', userSelect: 'none' }}
             shadows={{ type: PCFShadowMap, }}
             frameloop={frameloop}
             gl={async ({ canvas }) => {

package/src/tools/assetviewer/page.tsx

@@ -269,9 +269,9 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
                     <View style={{ width: '100%', height: '100%' }}>
                         <PerspectiveCamera makeDefault position={[0, 1, 3]} fov={50} />
                         <Suspense fallback={null}>
-                            <Stage intensity={0.5} environment="city">
-                                <ModelPreview url={fullPath} onError={() => setError(true)} />
-                            </Stage>
+                            <ambientLight intensity={1} />
+                            <pointLight position={[5, 5, 5]} intensity={0.5} />
+                            <ModelPreview url={fullPath} onError={() => setError(true)} />
                             <OrbitControls enableZoom={false} />
                         </Suspense>
                     </View>

package/src/tools/prefabeditor/EditorUI.tsx

@@ -4,7 +4,6 @@ import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 import { base, inspector } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
-import { useEditorContext } from './EditorContext';
 
 function EditorUI({
     prefabData,
@@ -28,7 +27,6 @@ function EditorUI({
     canRedo?: boolean;
 }) {
     const [collapsed, setCollapsed] = useState(false);
-    const { transformMode, setTransformMode } = useEditorContext();
 
     const updateNodeHandler = (updater: (n: GameObjectType) => GameObjectType) => {
         if (!prefabData || !setPrefabData || !selectedId) return;
@@ -63,8 +61,6 @@ function EditorUI({
                     node={selectedNode}
                     updateNode={updateNodeHandler}
                     deleteNode={deleteNodeHandler}
-                    transformMode={transformMode}
-                    setTransformMode={setTransformMode}
                     basePath={basePath}
                 />
             )}
@@ -89,15 +85,11 @@ function NodeInspector({
     node,
     updateNode,
     deleteNode,
-    transformMode,
-    setTransformMode,
     basePath
 }: {
     node: GameObjectType;
     updateNode: (updater: (n: GameObjectType) => GameObjectType) => void;
     deleteNode: () => void;
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
     basePath?: string;
 }) {
     const ALL_COMPONENTS = getAllComponents();
@@ -170,8 +162,6 @@ function NodeInspector({
                                     }
                                 }))}
                                 basePath={basePath}
-                                transformMode={transformMode}
-                                setTransformMode={setTransformMode}
                             />
                         )}
                     </div>

package/src/tools/prefabeditor/components/ComponentRegistry.ts

@@ -3,13 +3,11 @@ import { ComponentData, GameObject } from "../types";
 
 export interface Component {
     name: string;
-    Editor: FC<{ 
+    Editor: FC<{
         node?: GameObject;
-        component: ComponentData; 
-        onUpdate: (newComp: any) => void; 
+        component: ComponentData;
+        onUpdate: (newComp: any) => void;
         basePath?: string;
-        transformMode?: "translate" | "rotate" | "scale";
-        setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
     }>;
     defaultProperties: any;
     // Allow View to accept extra props for special cases (like material)

package/src/tools/prefabeditor/components/DirectionalLightComponent.tsx

@@ -2,86 +2,82 @@ import { Component } from "./ComponentRegistry";
 import { useRef, useEffect } from "react";
 import { useFrame } from "@react-three/fiber";
 import { DirectionalLight, Object3D, Vector3 } from "three";
-import { Input, Label } from "./Input";
+import { FieldRenderer, FieldDefinition, Input } from "./Input";
 
-function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    const props = {
-        color: component.properties.color ?? '#ffffff',
-        intensity: component.properties.intensity ?? 1.0,
-        castShadow: component.properties.castShadow ?? true,
-        shadowMapSize: component.properties.shadowMapSize ?? 1024,
-        shadowCameraNear: component.properties.shadowCameraNear ?? 0.1,
-        shadowCameraFar: component.properties.shadowCameraFar ?? 100,
-        shadowCameraTop: component.properties.shadowCameraTop ?? 30,
-        shadowCameraBottom: component.properties.shadowCameraBottom ?? -30,
-        shadowCameraLeft: component.properties.shadowCameraLeft ?? -30,
-        shadowCameraRight: component.properties.shadowCameraRight ?? 30,
-        targetOffset: component.properties.targetOffset ?? [0, -5, 0]
-    };
-
-    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',
-    };
-
-    const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 } as const;
 
-    return <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div>
-            <Label>Color</Label>
-            <div style={{ display: 'flex', gap: 2 }}>
-                <input
-                    type="color"
-                    style={{ height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
-                    value={props.color}
-                    onChange={e => onUpdate({ ...component.properties, color: e.target.value })}
-                />
-                <input type="text" style={textInputStyle} value={props.color} onChange={e => onUpdate({ ...component.properties, color: e.target.value })} />
-            </div>
-        </div>
-        <div>
-            <Label>Intensity</Label>
-            <Input step="0.1" value={props.intensity} onChange={value => onUpdate({ ...component.properties, intensity: value })} />
-        </div>
-        <div>
-            <Label>Cast Shadow</Label>
-            <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({ ...component.properties, castShadow: e.target.checked })}
-            />
-        </div>
-        <div>
-            <Label>Shadow Map Size</Label>
-            <Input step="256" value={props.shadowMapSize} onChange={value => onUpdate({ ...component.properties, shadowMapSize: value })} />
-        </div>
-        <div style={{ borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }}>
-            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>Shadow Camera</label>
+const directionalLightFields: FieldDefinition[] = [
+    { name: 'color', type: 'color', label: 'Color' },
+    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
+    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
+    { name: 'shadowMapSize', type: 'number', label: 'Shadow Map Size', step: 256, min: 256 },
+    {
+        name: '_shadowCamera',
+        type: 'custom',
+        label: 'Shadow Camera',
+        render: ({ values, onChangeMultiple }) => (
             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
-                <div><label style={smallLabel}>Near</label><Input step="0.1" value={props.shadowCameraNear} onChange={value => onUpdate({ ...component.properties, shadowCameraNear: value })} /></div>
-                <div><label style={smallLabel}>Far</label><Input step="1" value={props.shadowCameraFar} onChange={value => onUpdate({ ...component.properties, shadowCameraFar: value })} /></div>
-                <div><label style={smallLabel}>Top</label><Input step="1" value={props.shadowCameraTop} onChange={value => onUpdate({ ...component.properties, shadowCameraTop: value })} /></div>
-                <div><label style={smallLabel}>Bottom</label><Input step="1" value={props.shadowCameraBottom} onChange={value => onUpdate({ ...component.properties, shadowCameraBottom: value })} /></div>
-                <div><label style={smallLabel}>Left</label><Input step="1" value={props.shadowCameraLeft} onChange={value => onUpdate({ ...component.properties, shadowCameraLeft: value })} /></div>
-                <div><label style={smallLabel}>Right</label><Input step="1" value={props.shadowCameraRight} onChange={value => onUpdate({ ...component.properties, shadowCameraRight: value })} /></div>
+                <div>
+                    <label style={smallLabel}>Near</label>
+                    <Input step={0.1} value={values.shadowCameraNear ?? 0.1} onChange={v => onChangeMultiple({ shadowCameraNear: v })} />
+                </div>
+                <div>
+                    <label style={smallLabel}>Far</label>
+                    <Input step={1} value={values.shadowCameraFar ?? 100} onChange={v => onChangeMultiple({ shadowCameraFar: v })} />
+                </div>
+                <div>
+                    <label style={smallLabel}>Top</label>
+                    <Input step={1} value={values.shadowCameraTop ?? 30} onChange={v => onChangeMultiple({ shadowCameraTop: v })} />
+                </div>
+                <div>
+                    <label style={smallLabel}>Bottom</label>
+                    <Input step={1} value={values.shadowCameraBottom ?? -30} onChange={v => onChangeMultiple({ shadowCameraBottom: v })} />
+                </div>
+                <div>
+                    <label style={smallLabel}>Left</label>
+                    <Input step={1} value={values.shadowCameraLeft ?? -30} onChange={v => onChangeMultiple({ shadowCameraLeft: v })} />
+                </div>
+                <div>
+                    <label style={smallLabel}>Right</label>
+                    <Input step={1} value={values.shadowCameraRight ?? 30} onChange={v => onChangeMultiple({ shadowCameraRight: v })} />
+                </div>
             </div>
-        </div>
-        <div style={{ borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }}>
-            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>Target Offset</label>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
-                <div><label style={smallLabel}>X</label><Input step="0.5" value={props.targetOffset[0]} onChange={value => onUpdate({ ...component.properties, targetOffset: [value, props.targetOffset[1], props.targetOffset[2]] })} /></div>
-                <div><label style={smallLabel}>Y</label><Input step="0.5" value={props.targetOffset[1]} onChange={value => onUpdate({ ...component.properties, targetOffset: [props.targetOffset[0], value, props.targetOffset[2]] })} /></div>
-                <div><label style={smallLabel}>Z</label><Input step="0.5" value={props.targetOffset[2]} onChange={value => onUpdate({ ...component.properties, targetOffset: [props.targetOffset[0], props.targetOffset[1], value] })} /></div>
-            </div>
-        </div>
-    </div>;
+        ),
+    },
+    {
+        name: 'targetOffset',
+        type: 'custom',
+        label: 'Target Offset',
+        render: ({ value, onChange }) => {
+            const offset = value ?? [0, -5, 0];
+            return (
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
+                    <div>
+                        <label style={smallLabel}>X</label>
+                        <Input step={0.5} value={offset[0]} onChange={v => onChange([v, offset[1], offset[2]])} />
+                    </div>
+                    <div>
+                        <label style={smallLabel}>Y</label>
+                        <Input step={0.5} value={offset[1]} onChange={v => onChange([offset[0], v, offset[2]])} />
+                    </div>
+                    <div>
+                        <label style={smallLabel}>Z</label>
+                        <Input step={0.5} value={offset[2]} onChange={v => onChange([offset[0], offset[1], v])} />
+                    </div>
+                </div>
+            );
+        },
+    },
+];
+
+function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return (
+        <FieldRenderer
+            fields={directionalLightFields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
+    );
 }
 
 function DirectionalLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {

package/src/tools/prefabeditor/components/GeometryComponent.tsx

@@ -1,5 +1,5 @@
 import { Component } from "./ComponentRegistry";
-import { Input, Label } from "./Input";
+import { FieldRenderer, FieldDefinition, Input, Label } from "./Input";
 
 const GEOMETRY_ARGS: Record<string, {
     labels: string[];
@@ -29,46 +29,63 @@ function GeometryComponentEditor({
     const { geometryType, args = [] } = component.properties;
     const schema = GEOMETRY_ARGS[geometryType];
 
-    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',
+    const fields: FieldDefinition[] = [
+        {
+            name: 'geometryType',
+            type: 'select',
+            label: 'Type',
+            options: [
+                { value: 'box', label: 'Box' },
+                { value: 'sphere', label: 'Sphere' },
+                { value: 'plane', label: 'Plane' },
+            ],
+        },
+        {
+            name: 'args',
+            type: 'custom',
+            label: '',
+            render: ({ values, onChangeMultiple }) => {
+                const currentType = values.geometryType;
+                const currentSchema = GEOMETRY_ARGS[currentType];
+                const currentArgs = values.args || currentSchema.defaults;
+
+                return (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                        {currentSchema.labels.map((label, i) => (
+                            <div key={label}>
+                                <Label>{label}</Label>
+                                <Input
+                                    value={currentArgs[i] ?? currentSchema.defaults[i]}
+                                    step={0.1}
+                                    onChange={value => {
+                                        const next = [...currentArgs];
+                                        next[i] = value;
+                                        onChangeMultiple({ args: next });
+                                    }}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                );
+            },
+        },
+    ];
+
+    // Handle geometry type change to reset args
+    const handleChange = (newValues: Record<string, any>) => {
+        if ('geometryType' in newValues && newValues.geometryType !== geometryType) {
+            onUpdate({ geometryType: newValues.geometryType, args: GEOMETRY_ARGS[newValues.geometryType].defaults });
+        } else {
+            onUpdate(newValues);
+        }
     };
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <div>
-                <Label>Type</Label>
-                <select style={selectStyle} value={geometryType} onChange={e => {
-                    const type = e.target.value;
-                    onUpdate({ geometryType: type, args: GEOMETRY_ARGS[type].defaults });
-                }}>
-                    <option value="box">Box</option>
-                    <option value="sphere">Sphere</option>
-                    <option value="plane">Plane</option>
-                </select>
-            </div>
-
-            {schema.labels.map((label, i) => (
-                <div key={label}>
-                    <Label>{label}</Label>
-                    <Input
-                        value={args[i] ?? schema.defaults[i]}
-                        step="0.1"
-                        onChange={value => {
-                            const next = [...args];
-                            next[i] = value;
-                            onUpdate({ args: next });
-                        }}
-                    />
-                </div>
-            ))}
-        </div>
+        <FieldRenderer
+            fields={fields}
+            values={component.properties}
+            onChange={handleChange}
+        />
     );
 }