react-three-game 0.0.55 → 0.0.57

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

@@ -0,0 +1,47 @@
+import { Environment } from '@react-three/drei';
+import { Component } from './ComponentRegistry';
+import { FieldGroup, NumberField } from './Input';
+import { Object3D, Texture } from 'three';
+
+function EnvironmentView({
+    properties,
+    children,
+    editMode,
+    loadedTextures,
+    loadedModels,
+}: {
+    properties: any;
+    children?: React.ReactNode;
+    editMode?: boolean;
+    loadedTextures?: Record<string, Texture>;
+    loadedModels?: Record<string, Object3D>;
+}) {
+    const { intensity = 1, resolution = 256 } = properties;
+    const assetRevision = `${Object.keys(loadedTextures ?? {}).sort().join('|')}::${Object.keys(loadedModels ?? {}).sort().join('|')}`;
+
+    return (
+        <Environment
+            key={assetRevision}
+            background={true}
+            environmentIntensity={intensity}
+            resolution={resolution}
+            frames={editMode ? undefined : 1}
+        >
+            {children}
+        </Environment>
+    );
+}
+
+const EnvironmentComponent: Component = {
+    name: 'Environment',
+    Editor: ({ component, onUpdate }) => (
+        <FieldGroup>
+            <NumberField name="intensity" label="Intensity" values={component.properties} onChange={onUpdate} min={0} step={0.1} fallback={1} />
+            <NumberField name="resolution" label="Resolution" values={component.properties} onChange={onUpdate} min={64} step={64} fallback={256} />
+        </FieldGroup>
+    ),
+    View: EnvironmentView,
+    defaultProperties: {},
+};
+
+export default EnvironmentComponent;

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

@@ -1,28 +1,49 @@
 import { Component } from "./ComponentRegistry";
-import { FieldRenderer, FieldDefinition, Input, Label } from "./Input";
+import { FieldGroup, NumberField, SelectField } from "./Input";
 
 const GEOMETRY_ARGS: Record<string, {
-    labels: string[];
-    defaults: number[];
+    fields: Array<{
+        name: string;
+        label: string;
+        defaultValue: number;
+        min?: number;
+        step?: number;
+    }>;
 }> = {
     box: {
-        labels: ["Width", "Height", "Depth"],
-        defaults: [1, 1, 1],
+        fields: [
+            { name: 'width', label: 'Width', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'depth', label: 'Depth', defaultValue: 1, min: 0.01, step: 0.1 },
+        ],
     },
     sphere: {
-        labels: ["Radius", "Width Segments", "Height Segments"],
-        defaults: [1, 32, 16],
+        fields: [
+            { name: 'radius', label: 'Radius', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'widthSegments', label: 'Width Segments', defaultValue: 32, min: 3, step: 1 },
+            { name: 'heightSegments', label: 'Height Segments', defaultValue: 16, min: 2, step: 1 },
+        ],
     },
     plane: {
-        labels: ["Width", "Height"],
-        defaults: [1, 1],
+        fields: [
+            { name: 'width', label: 'Width', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
+        ],
     },
     cylinder: {
-        labels: ["Radius Top", "Radius Bottom", "Height", "Radial Segments"],
-        defaults: [1, 1, 1, 32],
+        fields: [
+            { name: 'radiusTop', label: 'Radius Top', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'radiusBottom', label: 'Radius Bottom', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'radialSegments', label: 'Radial Segments', defaultValue: 32, min: 3, step: 1 },
+        ],
     },
 };
 
+function getDefaultArgs(geometryType: string) {
+    return (GEOMETRY_ARGS[geometryType]?.fields ?? []).map(field => field.defaultValue);
+}
+
 function GeometryComponentEditor({
     component,
     onUpdate,
@@ -30,67 +51,52 @@ function GeometryComponentEditor({
     component: any;
     onUpdate: (newProps: any) => void;
 }) {
-    const { geometryType, args = [] } = component.properties;
-    const schema = GEOMETRY_ARGS[geometryType];
-
-    const fields: FieldDefinition[] = [
-        {
-            name: 'geometryType',
-            type: 'select',
-            label: 'Type',
-            options: [
-                { value: 'box', label: 'Box' },
-                { value: 'sphere', label: 'Sphere' },
-                { value: 'plane', label: 'Plane' },
-                { value: 'cylinder', label: 'Cylinder' },
-            ],
-        },
-        {
-            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: 4 }}>
-                        {currentSchema.labels.map((label, i) => (
-                            <Input
-                                key={label}
-                                label={label}
-                                value={currentArgs[i] ?? currentSchema.defaults[i]}
-                                step={0.1}
-                                min={0.01}
-                                onChange={value => {
-                                    const next = [...currentArgs];
-                                    next[i] = value;
-                                    onChangeMultiple({ args: next });
-                                }}
-                            />
-                        ))}
-                    </div>
-                );
-            },
-        },
-    ];
+    const geometryType = component.properties.geometryType ?? 'box';
+    const schema = GEOMETRY_ARGS[geometryType] ?? GEOMETRY_ARGS.box;
+    const args = component.properties.args ?? getDefaultArgs(geometryType);
 
     // 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 });
+            onUpdate({ geometryType: newValues.geometryType, args: getDefaultArgs(newValues.geometryType) });
         } else {
             onUpdate(newValues);
         }
     };
 
+    const updateArg = (index: number, value: number) => {
+        const next = [...args];
+        next[index] = value;
+        onUpdate({ args: next });
+    };
+
     return (
-        <FieldRenderer
-            fields={fields}
-            values={component.properties}
-            onChange={handleChange}
-        />
+        <FieldGroup>
+            <SelectField
+                name="geometryType"
+                label="Type"
+                values={component.properties}
+                onChange={handleChange}
+                options={[
+                    { value: 'box', label: 'Box' },
+                    { value: 'sphere', label: 'Sphere' },
+                    { value: 'plane', label: 'Plane' },
+                    { value: 'cylinder', label: 'Cylinder' },
+                ]}
+            />
+            {schema.fields.map((field, index) => (
+                <NumberField
+                    key={field.name}
+                    name={field.name}
+                    label={field.label}
+                    values={{ [field.name]: args[index] ?? field.defaultValue }}
+                    onChange={(next) => updateArg(index, next[field.name])}
+                    fallback={field.defaultValue}
+                    min={field.min}
+                    step={field.step}
+                />
+            ))}
+        </FieldGroup>
     );
 }
 
@@ -120,7 +126,7 @@ const GeometryComponent: Component = {
     nonComposable: true,
     defaultProperties: {
         geometryType: 'box',
-        args: GEOMETRY_ARGS.box.defaults,
+        args: getDefaultArgs('box'),
     }
 };
 

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { colors } from '../styles';
 
 // ============================================================================
 // Field Definition Types
@@ -61,32 +62,57 @@ export type FieldDefinition =
     | CustomFieldDefinition;
 
 // ============================================================================
-// Shared Styles
+// Shared Styles (derived from shared color tokens)
 // ============================================================================
 
-// Shared styles
 const styles = {
     input: {
         width: '80px',
-        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)',
+        backgroundColor: colors.bgInput,
+        border: `1px solid ${colors.border}`,
+        padding: '3px 6px',
+        fontSize: '11px',
+        color: colors.text,
         fontFamily: 'monospace',
         outline: 'none',
         textAlign: 'right',
+        borderRadius: 3,
     } as React.CSSProperties,
     label: {
         display: 'block',
-        fontSize: '9px',
-        color: 'rgba(34, 211, 238, 0.9)',
+        fontSize: '10px',
+        color: colors.textMuted,
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: 2,
+        fontWeight: 500,
     } as React.CSSProperties,
 };
 
+function getNumericStep(step: string | number | undefined, fallback: number) {
+    if (typeof step === 'number' && Number.isFinite(step) && step > 0) return step;
+
+    if (typeof step === 'string') {
+        const parsed = parseFloat(step);
+        if (Number.isFinite(parsed) && parsed > 0) return parsed;
+    }
+
+    return fallback;
+}
+
+function getStepPrecision(step: number) {
+    if (!Number.isFinite(step) || step <= 0) return 3;
+
+    const stepString = step.toString();
+    if (stepString.includes('e-')) {
+        const exponent = stepString.split('e-')[1];
+        return exponent ? parseInt(exponent, 10) : 3;
+    }
+
+    const decimal = stepString.split('.')[1];
+    return decimal?.length ?? 0;
+}
+
 interface InputProps {
     value: number;
     onChange: (value: number) => void;
@@ -127,15 +153,12 @@ export function Input({ value, onChange, step, min, max, style, label }: InputPr
     } | null>(null);
 
     const startScrub = (e: React.PointerEvent) => {
-        if (!label) return;
-        e.preventDefault();
-
         dragState.current = {
             startX: e.clientX,
             startValue: value
         };
 
-        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        e.currentTarget.setPointerCapture(e.pointerId);
         document.body.style.cursor = "ew-resize";
     };
 
@@ -144,18 +167,20 @@ export function Input({ value, onChange, step, min, max, style, label }: InputPr
 
         const { startX, startValue } = dragState.current;
         const dx = e.clientX - startX;
+        const baseStep = getNumericStep(step, 0.1);
+        let scrubStep = baseStep;
+        if (e.shiftKey) scrubStep /= 10;
+        if (e.altKey) scrubStep *= 10;
 
-        let speed = 0.02;
-        if (e.shiftKey) speed *= 0.1; // fine
-        if (e.altKey) speed *= 5;     // coarse
-
-        let nextValue = startValue + dx * speed;
+        const precision = getStepPrecision(scrubStep);
+        const deltaSteps = Math.round(dx / 8);
+        let nextValue = startValue + deltaSteps * scrubStep;
 
         // Apply min/max constraints
         if (min !== undefined && nextValue < min) nextValue = min;
         if (max !== undefined && nextValue > max) nextValue = max;
 
-        setDraft(nextValue.toFixed(3));
+        setDraft(nextValue.toFixed(precision));
         onChange(nextValue);
     };
 
@@ -164,7 +189,7 @@ export function Input({ value, onChange, step, min, max, style, label }: InputPr
 
         dragState.current = null;
         document.body.style.cursor = "";
-        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+        e.currentTarget.releasePointerCapture(e.pointerId);
     };
 
     if (label) {
@@ -178,14 +203,10 @@ export function Input({ value, onChange, step, min, max, style, label }: InputPr
                     style={{
                         ...styles.label,
                         marginBottom: 0,
-                        cursor: 'ew-resize',
                         userSelect: 'none',
                         flex: '0 0 auto',
                         minWidth: 20,
                     }}
-                    onPointerDown={startScrub}
-                    onPointerMove={onScrubMove}
-                    onPointerUp={endScrub}
                 >
                     {label}
                 </span>
@@ -202,7 +223,10 @@ export function Input({ value, onChange, step, min, max, style, label }: InputPr
                     step={step}
                     min={min}
                     max={max}
-                    style={{ ...styles.input, ...style }}
+                    style={{ ...styles.input, cursor: 'ew-resize', ...style }}
+                    onPointerDown={startScrub}
+                    onPointerMove={onScrubMove}
+                    onPointerUp={endScrub}
                 />
             </div>
         );
@@ -222,7 +246,10 @@ export function Input({ value, onChange, step, min, max, style, label }: InputPr
             step={step}
             min={min}
             max={max}
-            style={{ ...styles.input, ...style }}
+            style={{ ...styles.input, cursor: 'ew-resize', ...style }}
+            onPointerDown={startScrub}
+            onPointerMove={onScrubMove}
+            onPointerUp={endScrub}
         />
     );
 }
@@ -235,12 +262,14 @@ export function Vector3Input({
     label,
     value,
     onChange,
-    snap
+    snap,
+    labelExtra
 }: {
     label: string;
     value: [number, number, number];
     onChange: (v: [number, number, number]) => void;
     snap?: number;
+    labelExtra?: React.ReactNode;
 }) {
     const snapValue = (num: number) => {
         if (!snap) return num;
@@ -272,15 +301,13 @@ export function Vector3Input({
     };
 
     const startScrub = (e: React.PointerEvent, index: number) => {
-        e.preventDefault();
-
         dragState.current = {
             index,
             startX: e.clientX,
             startValue: value[index]
         };
 
-        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        e.currentTarget.setPointerCapture(e.pointerId);
         document.body.style.cursor = "ew-resize";
     };
 
@@ -313,18 +340,21 @@ export function Vector3Input({
 
         dragState.current = null;
         document.body.style.cursor = "";
-        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+        e.currentTarget.releasePointerCapture(e.pointerId);
     };
 
     const axes = [
-        { key: "x", color: 'rgba(248, 113, 113, 1)', index: 0 },
-        { key: "y", color: 'rgba(134, 239, 172, 1)', index: 1 },
-        { key: "z", color: 'rgba(96, 165, 250, 1)', index: 2 }
+        { key: "x", color: '#e06c75', index: 0 },
+        { key: "y", color: '#98c379', index: 1 },
+        { key: "z", color: '#61afef', index: 2 }
     ] as const;
 
     return (
         <div style={{ marginBottom: 8 }}>
-            <label style={{ ...styles.label, marginBottom: 4 }}>{label}</label>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
+                <label style={{ ...styles.label, marginBottom: 0 }}>{label}</label>
+                {labelExtra}
+            </div>
             <div style={{ display: 'flex', gap: 4 }}>
                 {axes.map(({ key, color, index }) => (
                     <div
@@ -334,25 +364,25 @@ export function Vector3Input({
                             display: 'flex',
                             alignItems: 'center',
                             gap: 4,
-                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                            border: '1px solid rgba(34, 211, 238, 0.2)',
-                            borderRadius: 4,
+                            backgroundColor: colors.bgInput,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: 3,
                             padding: '4px 6px',
-                            minHeight: 32,
+                            minHeight: 28,
+                            cursor: 'ew-resize',
                         }}
+                        onPointerDown={e => startScrub(e, index)}
+                        onPointerMove={onScrubMove}
+                        onPointerUp={endScrub}
                     >
                         <span
                             style={{
-                                fontSize: '12px',
-                                fontWeight: 'bold',
+                                fontSize: 11,
+                                fontWeight: 600,
                                 color,
                                 width: 12,
-                                cursor: 'ew-resize',
                                 userSelect: 'none',
                             }}
-                            onPointerDown={e => startScrub(e, index)}
-                            onPointerMove={onScrubMove}
-                            onPointerUp={endScrub}
                         >
                             {key.toUpperCase()}
                         </span>
@@ -361,12 +391,13 @@ export function Vector3Input({
                                 flex: 1,
                                 backgroundColor: 'transparent',
                                 border: 'none',
-                                fontSize: '12px',
-                                color: 'rgba(165, 243, 252, 1)',
+                                fontSize: 11,
+                                color: colors.text,
                                 fontFamily: 'monospace',
                                 outline: 'none',
                                 width: '100%',
                                 minWidth: 0,
+                                cursor: 'inherit',
                             }}
                             type="text"
                             value={draft[index]}
@@ -411,11 +442,11 @@ export function ColorInput({
                     style={{
                         height: 32,
                         width: 48,
-                        backgroundColor: 'transparent',
-                        border: '1px solid rgba(34, 211, 238, 0.3)',
-                        borderRadius: 4,
+                        backgroundColor: colors.bgInput,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 3,
                         cursor: 'pointer',
-                        padding: 0,
+                        padding: 2,
                         flexShrink: 0,
                     }}
                     value={value}
@@ -474,8 +505,7 @@ export function BooleanInput({
                 style={{
                     height: 16,
                     width: 16,
-                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                    border: '1px solid rgba(34, 211, 238, 0.3)',
+                    accentColor: colors.accent,
                     cursor: 'pointer',
                 }}
                 checked={value}
@@ -514,6 +544,170 @@ export function SelectInput({
     );
 }
 
+interface BoundFieldProps {
+    name: string;
+    values: Record<string, any>;
+    onChange: (values: Record<string, any>) => void;
+}
+
+interface BoundNumberFieldProps extends BoundFieldProps {
+    label: string;
+    fallback?: number;
+    step?: string | number;
+    min?: number;
+    max?: number;
+    style?: React.CSSProperties;
+}
+
+interface BoundStringFieldProps extends BoundFieldProps {
+    label: string;
+    fallback?: string;
+    placeholder?: string;
+}
+
+interface BoundColorFieldProps extends BoundFieldProps {
+    label: string;
+    fallback?: string;
+}
+
+interface BoundBooleanFieldProps extends BoundFieldProps {
+    label: string;
+    fallback?: boolean;
+}
+
+interface BoundSelectFieldProps extends BoundFieldProps {
+    label: string;
+    fallback?: string;
+    options: { value: string; label: string }[];
+}
+
+interface BoundVector3FieldProps extends BoundFieldProps {
+    label: string;
+    fallback?: [number, number, number];
+    snap?: number;
+    labelExtra?: React.ReactNode;
+}
+
+function bindFieldChange(name: string, onChange: (values: Record<string, any>) => void) {
+    return (value: any) => onChange({ [name]: value });
+}
+
+export function FieldGroup({ children }: { children: React.ReactNode }) {
+    return <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{children}</div>;
+}
+
+export function NumberField({
+    name,
+    label,
+    values,
+    onChange,
+    fallback = 0,
+    step,
+    min,
+    max,
+    style,
+}: BoundNumberFieldProps) {
+    return (
+        <Input
+            label={label}
+            value={values[name] ?? fallback}
+            onChange={bindFieldChange(name, onChange)}
+            step={step}
+            min={min}
+            max={max}
+            style={style}
+        />
+    );
+}
+
+export function StringField({
+    name,
+    label,
+    values,
+    onChange,
+    fallback = '',
+    placeholder,
+}: BoundStringFieldProps) {
+    return (
+        <StringInput
+            label={label}
+            value={values[name] ?? fallback}
+            onChange={bindFieldChange(name, onChange)}
+            placeholder={placeholder}
+        />
+    );
+}
+
+export function ColorField({
+    name,
+    label,
+    values,
+    onChange,
+    fallback = '#ffffff',
+}: BoundColorFieldProps) {
+    return (
+        <ColorInput
+            label={label}
+            value={values[name] ?? fallback}
+            onChange={bindFieldChange(name, onChange)}
+        />
+    );
+}
+
+export function BooleanField({
+    name,
+    label,
+    values,
+    onChange,
+    fallback = false,
+}: BoundBooleanFieldProps) {
+    return (
+        <BooleanInput
+            label={label}
+            value={values[name] ?? fallback}
+            onChange={bindFieldChange(name, onChange)}
+        />
+    );
+}
+
+export function SelectField({
+    name,
+    label,
+    values,
+    onChange,
+    fallback,
+    options,
+}: BoundSelectFieldProps) {
+    return (
+        <SelectInput
+            label={label}
+            value={values[name] ?? fallback ?? options[0]?.value ?? ''}
+            onChange={bindFieldChange(name, onChange)}
+            options={options}
+        />
+    );
+}
+
+export function Vector3Field({
+    name,
+    label,
+    values,
+    onChange,
+    fallback = [0, 0, 0],
+    snap,
+    labelExtra,
+}: BoundVector3FieldProps) {
+    return (
+        <Vector3Input
+            label={label}
+            value={values[name] ?? fallback}
+            onChange={bindFieldChange(name, onChange)}
+            snap={snap}
+            labelExtra={labelExtra}
+        />
+    );
+}
+
 // ============================================================================
 // Field Renderer - Schema-driven UI generation
 // ============================================================================