react-three-game 0.0.44 → 0.0.45

package/README.md

@@ -72,21 +72,29 @@ interface GameObject {
 ## Custom Components
 
 ```tsx
-import { Component, registerComponent } from 'react-three-game';
+import { Component, registerComponent, FieldRenderer, FieldDefinition } from 'react-three-game';
 import { useFrame } from '@react-three/fiber';
 
+const rotatorFields: FieldDefinition[] = [
+  { name: 'speed', type: 'number', label: 'Speed', step: 0.1 },
+  { name: 'axis', type: 'select', label: 'Axis', options: [
+    { value: 'x', label: 'X' },
+    { value: 'y', label: 'Y' },
+    { value: 'z', label: 'Z' },
+  ]},
+];
+
 const Rotator: Component = {
   name: 'Rotator',
   Editor: ({ component, onUpdate }) => (
-    <input type="number" value={component.properties.speed}
-      onChange={e => onUpdate({ speed: +e.target.value })} />
+    <FieldRenderer fields={rotatorFields} values={component.properties} onChange={onUpdate} />
   ),
   View: ({ properties, children }) => {
     const ref = useRef<Group>(null);
     useFrame((_, dt) => { ref.current!.rotation.y += dt * properties.speed });
     return <group ref={ref}>{children}</group>;
   },
-  defaultProperties: { speed: 1 }
+  defaultProperties: { speed: 1, axis: 'y' }
 };
 
 registerComponent(Rotator); // before rendering PrefabEditor
@@ -94,6 +102,32 @@ registerComponent(Rotator); // before rendering PrefabEditor
 
 **Wrapper** components accept `children` (animations, controllers). **Leaf** components don't (lights, particles).
 
+### Schema-Driven Field Types
+
+The `FieldRenderer` component auto-generates editor UI from a field schema:
+
+| Type | Description | Options |
+|------|-------------|---------|
+| `vector3` | X/Y/Z inputs with drag-to-scrub | `snap?: number` |
+| `number` | Numeric input | `min?`, `max?`, `step?` |
+| `string` | Text input | `placeholder?` |
+| `color` | Color picker + hex input | — |
+| `boolean` | Checkbox | — |
+| `select` | Dropdown | `options: { value, label }[]` |
+| `custom` | Render function for one-off UI | `render: (props) => ReactNode` |
+
+```tsx
+// Custom field example for complex one-off UI
+{
+  name: 'gradient',
+  type: 'custom',
+  label: 'Gradient',
+  render: ({ value, onChange, values, onChangeMultiple }) => (
+    <GradientPicker value={value} onChange={onChange} />
+  ),
+}
+```
+
 ## Visual Editor
 
 ```jsx

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 export { default as GameCanvas } from './shared/GameCanvas';
+export * from './helpers';
+export { sound as soundManager } from './helpers/SoundManager';
 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';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export { FieldRenderer, Input, Label, Vector3Input, ColorInput, StringInput, BooleanInput, SelectInput, } from './tools/prefabeditor/components/Input';
+export * from './tools/prefabeditor/utils';
+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';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
-export { sound as soundManager } from './helpers/SoundManager';
-export * from './helpers';

package/dist/index.js

@@ -1,14 +1,17 @@
-// 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 { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+// Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export * as editorStyles from './tools/prefabeditor/styles';
+// 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';
 // Asset Tools
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
-export { sound as soundManager } from './helpers/SoundManager';
-// Helpers
-export * from './helpers';

package/dist/tools/assetviewer/page.js

@@ -103,7 +103,7 @@ function ModelCard({ file, onSelect, basePath = "" }) {
     if (error) {
         return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }, children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);

package/dist/tools/prefabeditor/EditorUI.js

@@ -15,10 +15,8 @@ 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, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }) {
     const [collapsed, setCollapsed] = useState(false);
-    const { transformMode, setTransformMode } = useEditorContext();
     const updateNodeHandler = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
             return;
@@ -36,9 +34,9 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePa
 .prefab-scroll::-webkit-scrollbar-track { background: transparent; }
 .prefab-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
 .prefab-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
-        ` }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
+        ` }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
 }
-function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
+function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     var _a;
     const ALL_COMPONENTS = getAllComponents();
     const allKeys = Object.keys(ALL_COMPONENTS);
@@ -58,7 +56,7 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                         return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), title: "Remove Component", onClick: () => updateNode(n => {
                                                 const _a = n.components || {}, _b = key, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
                                                 return Object.assign(Object.assign({}, n), { components: rest });
-                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode }))] }, key));
+                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath }))] }, key));
                     })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
                                 if (!addType)
                                     return;

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

@@ -7,8 +7,6 @@ export interface Component {
         component: ComponentData;
         onUpdate: (newComp: any) => void;
         basePath?: string;
-        transformMode?: "translate" | "rotate" | "scale";
-        setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
     }>;
     defaultProperties: any;
     View?: FC<any>;

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

@@ -2,34 +2,34 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useEffect } from "react";
 import { useFrame } from "@react-three/fiber";
 import { Vector3 } from "three";
-import { Input, Label } from "./Input";
+import { FieldRenderer, Input } from "./Input";
+const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+const directionalLightFields = [
+    { 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 }) => {
+            var _a, _b, _c, _d, _e, _f;
+            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(Input, { step: 0.1, value: (_a = values.shadowCameraNear) !== null && _a !== void 0 ? _a : 0.1, onChange: v => onChangeMultiple({ shadowCameraNear: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(Input, { step: 1, value: (_b = values.shadowCameraFar) !== null && _b !== void 0 ? _b : 100, onChange: v => onChangeMultiple({ shadowCameraFar: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(Input, { step: 1, value: (_c = values.shadowCameraTop) !== null && _c !== void 0 ? _c : 30, onChange: v => onChangeMultiple({ shadowCameraTop: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(Input, { step: 1, value: (_d = values.shadowCameraBottom) !== null && _d !== void 0 ? _d : -30, onChange: v => onChangeMultiple({ shadowCameraBottom: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(Input, { step: 1, value: (_e = values.shadowCameraLeft) !== null && _e !== void 0 ? _e : -30, onChange: v => onChangeMultiple({ shadowCameraLeft: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(Input, { step: 1, value: (_f = values.shadowCameraRight) !== null && _f !== void 0 ? _f : 30, onChange: v => onChangeMultiple({ shadowCameraRight: v }) })] })] }));
+        },
+    },
+    {
+        name: 'targetOffset',
+        type: 'custom',
+        label: 'Target Offset',
+        render: ({ value, onChange }) => {
+            const offset = value !== null && value !== void 0 ? value : [0, -5, 0];
+            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(Input, { step: 0.5, value: offset[0], onChange: v => onChange([v, offset[1], offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(Input, { step: 0.5, value: offset[1], onChange: v => onChange([offset[0], v, offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(Input, { step: 0.5, value: offset[2], onChange: v => onChange([offset[0], offset[1], v]) })] })] }));
+        },
+    },
+];
 function DirectionalLightComponentEditor({ component, onUpdate }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    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,
-        castShadow: (_c = component.properties.castShadow) !== null && _c !== void 0 ? _c : true,
-        shadowMapSize: (_d = component.properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024,
-        shadowCameraNear: (_e = component.properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1,
-        shadowCameraFar: (_f = component.properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100,
-        shadowCameraTop: (_g = component.properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30,
-        shadowCameraBottom: (_h = component.properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30,
-        shadowCameraLeft: (_j = component.properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30,
-        shadowCameraRight: (_k = component.properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30,
-        targetOffset: (_l = component.properties.targetOffset) !== null && _l !== void 0 ? _l : [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 };
-    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: "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 })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Shadow Map Size" }), _jsx(Input, { step: "256", value: props.shadowMapSize, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowMapSize: value })) })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Shadow Camera" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(Input, { step: "0.1", value: props.shadowCameraNear, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraNear: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(Input, { step: "1", value: props.shadowCameraFar, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraFar: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(Input, { step: "1", value: props.shadowCameraTop, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraTop: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(Input, { step: "1", value: props.shadowCameraBottom, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraBottom: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(Input, { step: "1", value: props.shadowCameraLeft, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraLeft: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(Input, { step: "1", value: props.shadowCameraRight, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraRight: value })) })] })] })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Target Offset" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(Input, { step: "0.5", value: props.targetOffset[0], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [value, props.targetOffset[1], props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(Input, { step: "0.5", value: props.targetOffset[1], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [props.targetOffset[0], value, props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(Input, { step: "0.5", value: props.targetOffset[2], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [props.targetOffset[0], props.targetOffset[1], value] })) })] })] })] })] });
+    return (_jsx(FieldRenderer, { fields: directionalLightFields, values: component.properties, onChange: onUpdate }));
 }
 function DirectionalLightView({ properties, editMode }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, Label } from "./Input";
+import { FieldRenderer, Input, Label } from "./Input";
 const GEOMETRY_ARGS = {
     box: {
         labels: ["Width", "Height", "Depth"],
@@ -17,27 +17,46 @@ const GEOMETRY_ARGS = {
 function GeometryComponentEditor({ component, onUpdate, }) {
     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 = [
+        {
+            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 (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: currentSchema.labels.map((label, i) => {
+                        var _a;
+                        return (_jsxs("div", { children: [_jsx(Label, { children: label }), _jsx(Input, { value: (_a = currentArgs[i]) !== null && _a !== void 0 ? _a : currentSchema.defaults[i], step: 0.1, onChange: value => {
+                                        const next = [...currentArgs];
+                                        next[i] = value;
+                                        onChangeMultiple({ args: next });
+                                    } })] }, label));
+                    }) }));
+            },
+        },
+    ];
+    // Handle geometry type change to reset args
+    const handleChange = (newValues) => {
+        if ('geometryType' in newValues && newValues.geometryType !== geometryType) {
+            onUpdate({ geometryType: newValues.geometryType, args: GEOMETRY_ARGS[newValues.geometryType].defaults });
+        }
+        else {
+            onUpdate(newValues);
+        }
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Type" }), _jsxs("select", { style: selectStyle, value: geometryType, onChange: e => {
-                            const type = e.target.value;
-                            onUpdate({ geometryType: type, args: GEOMETRY_ARGS[type].defaults });
-                        }, children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] })] }), schema.labels.map((label, i) => {
-                var _a;
-                return (_jsxs("div", { children: [_jsx(Label, { children: label }), _jsx(Input, { value: (_a = args[i]) !== null && _a !== void 0 ? _a : schema.defaults[i], step: "0.1", onChange: value => {
-                                const next = [...args];
-                                next[i] = value;
-                                onUpdate({ args: next });
-                            } })] }, label));
-            })] }));
+    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: handleChange }));
 }
 // View for Geometry component
 function GeometryComponentView({ properties, children }) {

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

@@ -1,4 +1,50 @@
 import React from 'react';
+export type FieldType = 'vector3' | 'number' | 'string' | 'color' | 'boolean' | 'select';
+interface BaseFieldDefinition {
+    name: string;
+    label: string;
+}
+interface Vector3FieldDefinition extends BaseFieldDefinition {
+    type: 'vector3';
+    snap?: number;
+}
+interface NumberFieldDefinition extends BaseFieldDefinition {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface StringFieldDefinition extends BaseFieldDefinition {
+    type: 'string';
+    placeholder?: string;
+}
+interface ColorFieldDefinition extends BaseFieldDefinition {
+    type: 'color';
+}
+interface BooleanFieldDefinition extends BaseFieldDefinition {
+    type: 'boolean';
+}
+interface SelectFieldDefinition extends BaseFieldDefinition {
+    type: 'select';
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+interface CustomFieldDefinition extends BaseFieldDefinition {
+    type: 'custom';
+    render: (props: {
+        value: any;
+        onChange: (value: any) => void;
+        values: Record<string, any>;
+        onChangeMultiple: (values: Record<string, any>) => void;
+    }) => React.ReactNode;
+}
+export type FieldDefinition = Vector3FieldDefinition | NumberFieldDefinition | StringFieldDefinition | ColorFieldDefinition | BooleanFieldDefinition | SelectFieldDefinition | CustomFieldDefinition;
+declare const styles: {
+    input: React.CSSProperties;
+    label: React.CSSProperties;
+};
 interface InputProps {
     value: number;
     onChange: (value: number) => void;
@@ -17,4 +63,35 @@ export declare function Vector3Input({ label, value, onChange, snap }: {
     onChange: (v: [number, number, number]) => void;
     snap?: number;
 }): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ColorInput({ label, value, onChange }: {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StringInput({ label, value, onChange, placeholder }: {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BooleanInput({ label, value, onChange }: {
+    label?: string;
+    value: boolean;
+    onChange: (value: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SelectInput({ label, value, onChange, options }: {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: {
+        value: string;
+        label: string;
+    }[];
+}): import("react/jsx-runtime").JSX.Element;
+interface FieldRendererProps {
+    fields: FieldDefinition[];
+    values: Record<string, any>;
+    onChange: (values: Record<string, any>) => void;
+}
+export declare function FieldRenderer({ fields, values, onChange }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;
+export { styles };

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

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+// ============================================================================
+// Shared Styles
+// ============================================================================
 // Shared styles
 const styles = {
     input: {
@@ -127,3 +130,65 @@ export function Vector3Input({ label, value, onChange, snap }) {
                                 }
                             } })] }, key))) })] }));
 }
+// ============================================================================
+// Additional Input Components
+// ============================================================================
+export function ColorInput({ label, value, onChange }) {
+    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: {
+                            height: 20,
+                            width: 20,
+                            backgroundColor: 'transparent',
+                            border: 'none',
+                            cursor: 'pointer',
+                            padding: 0,
+                        }, value: value, onChange: e => onChange(e.target.value) }), _jsx("input", { type: "text", style: Object.assign(Object.assign({}, styles.input), { flex: 1 }), value: value, onChange: e => onChange(e.target.value) })] })] }));
+}
+export function StringInput({ label, value, onChange, placeholder }) {
+    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "text", style: styles.input, value: value, onChange: e => onChange(e.target.value), placeholder: placeholder })] }));
+}
+export function BooleanInput({ label, value, onChange }) {
+    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _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: value, onChange: e => onChange(e.target.checked) })] }));
+}
+export function SelectInput({ label, value, onChange, options }) {
+    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx("select", { style: styles.input, value: value, onChange: e => onChange(e.target.value), children: options.map(opt => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }));
+}
+export function FieldRenderer({ fields, values, onChange }) {
+    const updateField = (name, value) => {
+        onChange({ [name]: value });
+    };
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: fields.map(field => {
+            var _a, _b;
+            const value = values[field.name];
+            switch (field.type) {
+                case 'vector3':
+                    return (_jsx(Vector3Input, { label: field.label, value: value !== null && value !== void 0 ? value : [0, 0, 0], onChange: v => updateField(field.name, v), snap: field.snap }, field.name));
+                case 'number':
+                    return (_jsxs("div", { children: [_jsx(Label, { children: field.label }), _jsx(Input, { value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step })] }, field.name));
+                case 'string':
+                    return (_jsx(StringInput, { label: field.label, value: value !== null && value !== void 0 ? value : '', onChange: v => updateField(field.name, v), placeholder: field.placeholder }, field.name));
+                case 'color':
+                    return (_jsx(ColorInput, { label: field.label, value: value !== null && value !== void 0 ? value : '#ffffff', onChange: v => updateField(field.name, v) }, field.name));
+                case 'boolean':
+                    return (_jsx(BooleanInput, { label: field.label, value: value !== null && value !== void 0 ? value : false, onChange: v => updateField(field.name, v) }, field.name));
+                case 'select':
+                    return (_jsx(SelectInput, { label: field.label, value: (_b = value !== null && value !== void 0 ? value : (_a = field.options[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '', onChange: v => updateField(field.name, v), options: field.options }, field.name));
+                case 'custom':
+                    return (_jsxs("div", { children: [field.label && _jsx(Label, { children: field.label }), field.render({
+                                value,
+                                onChange: v => updateField(field.name, v),
+                                values,
+                                onChangeMultiple: onChange,
+                            })] }, field.name));
+                default:
+                    return null;
+            }
+        }) }));
+}
+// Export styles for use in custom field renderers
+export { styles };

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

@@ -1,11 +1,10 @@
 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 { FieldRenderer, Input } 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;
+function TexturePicker({ value, onChange, basePath }) {
     const [textureFiles, setTextureFiles] = useState([]);
     const [showPicker, setShowPicker] = useState(false);
     useEffect(() => {
@@ -15,30 +14,62 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
             .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)" })] })] })] })] }))] }));
+    return (_jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleTextureViewer, { file: 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(TextureListViewer, { files: textureFiles, selected: value || undefined, onSelect: (file) => {
+                        onChange(file);
+                        setShowPicker(false);
+                    }, basePath: basePath }) }))] }));
+}
+function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
+    const hasTexture = !!component.properties.texture;
+    const hasRepeat = component.properties.repeat;
+    const fields = [
+        { name: 'color', type: 'color', label: 'Color' },
+        { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
+        {
+            name: 'texture',
+            type: 'custom',
+            label: 'Texture File',
+            render: ({ value, onChange }) => (_jsx(TexturePicker, { value: value, onChange: onChange, basePath: basePath })),
+        },
+        // Conditional texture settings
+        ...(hasTexture ? [
+            { name: 'repeat', type: 'boolean', label: 'Repeat Texture' },
+            ...(hasRepeat ? [{
+                    name: 'repeatCount',
+                    type: 'custom',
+                    label: 'Repeat (X, Y)',
+                    render: ({ value, onChange }) => {
+                        var _a, _b;
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); } }), _jsx(Input, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); } })] }));
+                    },
+                }] : []),
+            { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },
+            {
+                name: 'minFilter',
+                type: 'select',
+                label: 'Min Filter',
+                options: [
+                    { value: 'NearestFilter', label: 'Nearest' },
+                    { value: 'NearestMipmapNearestFilter', label: 'Nearest Mipmap Nearest' },
+                    { value: 'NearestMipmapLinearFilter', label: 'Nearest Mipmap Linear' },
+                    { value: 'LinearFilter', label: 'Linear' },
+                    { value: 'LinearMipmapNearestFilter', label: 'Linear Mipmap Nearest' },
+                    { value: 'LinearMipmapLinearFilter', label: 'Linear Mipmap Linear (Default)' },
+                ],
+            },
+            {
+                name: 'magFilter',
+                type: 'select',
+                label: 'Mag Filter',
+                options: [
+                    { value: 'NearestFilter', label: 'Nearest' },
+                    { value: 'LinearFilter', label: 'Linear (Default)' },
+                ],
+            },
+        ] : []),
+    ];
+    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
 }
-;
 // View for Material component
 function MaterialComponentView({ properties, loadedTextures }) {
     var _a;