@vgai/editor 0.2.0

package/src/components/inspectors/JointsSection.tsx

@@ -0,0 +1,255 @@
+import type { SceneEntity, SceneJoint } from '@engine/scene/scene-types';
+import { useEditorStore } from '../../EditorContext';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Vec3Input } from '../primitives/Vec3Input';
+import type { SectionProps } from './multi-edit-utils';
+
+const jointTypes: SceneJoint['type'][] = ['fixed', 'revolute', 'prismatic', 'spherical', 'spring'];
+
+const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+const selectStyle: React.CSSProperties = {
+  width: '100%',
+  background: '#1e1e1e',
+  color: '#c5c8ce',
+  border: '1px solid #333',
+  borderRadius: 2,
+  padding: '3px 4px',
+  fontSize: 12,
+};
+const btnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '2px 6px',
+  cursor: 'pointer',
+  fontSize: 10,
+};
+
+export function JointsSection({ entities }: SectionProps) {
+  const store = useEditorStore();
+  if (entities.length !== 1) return null;
+  const entity = entities[0]!;
+  // Only show if entity has physics
+  if (!entity.physics) return null;
+
+  const id = entity.id!;
+  const joints = entity.joints ?? [];
+
+  // Get all entities with physics for the target picker
+  const physicsEntities = store.allEntities().filter((e) => e.physics && e.id !== id);
+
+  const updateJoints = (newJoints: SceneJoint[]) => {
+    store.updateEntity(id, { joints: newJoints.length > 0 ? newJoints : undefined });
+  };
+
+  const updateJoint = (index: number, partial: Partial<SceneJoint>) => {
+    const next = joints.map((j, i) => (i === index ? { ...j, ...partial } : j));
+    updateJoints(next);
+  };
+
+  const removeJoint = (index: number) => {
+    updateJoints(joints.filter((_, i) => i !== index));
+  };
+
+  const addJoint = () => {
+    const target = physicsEntities[0]?.id ?? '';
+    const newJoint: SceneJoint = { type: 'fixed', target };
+    updateJoints([...joints, newJoint]);
+  };
+
+  if (joints.length === 0 && physicsEntities.length === 0) return null;
+
+  return (
+    <SectionHeader label="Joints" defaultOpen={joints.length > 0}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {joints.map((joint, i) => (
+          <JointEntry
+            key={i}
+            joint={joint}
+            index={i}
+            physicsEntities={physicsEntities}
+            onUpdate={(partial) => updateJoint(i, partial)}
+            onRemove={() => removeJoint(i)}
+          />
+        ))}
+        {physicsEntities.length > 0 && (
+          <button type="button" style={btnStyle} onClick={addJoint}>
+            + Add Joint
+          </button>
+        )}
+        {physicsEntities.length === 0 && joints.length === 0 && (
+          <div style={{ fontSize: 10, color: '#666', fontStyle: 'italic' }}>
+            No other physics entities to connect to.
+          </div>
+        )}
+      </div>
+    </SectionHeader>
+  );
+}
+
+function JointEntry({
+  joint,
+  index,
+  physicsEntities,
+  onUpdate,
+  onRemove,
+}: {
+  joint: SceneJoint;
+  index: number;
+  physicsEntities: SceneEntity[];
+  onUpdate: (partial: Partial<SceneJoint>) => void;
+  onRemove: () => void;
+}) {
+  const showAxis = joint.type === 'revolute' || joint.type === 'prismatic';
+  const showLimits = joint.type === 'revolute' || joint.type === 'prismatic';
+  const showSpring = joint.type === 'spring';
+
+  const targetName = physicsEntities.find((e) => e.id === joint.target)?.name ?? '(missing target)';
+
+  return (
+    <div
+      style={{
+        background: '#1a1a1a',
+        border: '1px solid #333',
+        borderRadius: 3,
+        padding: 6,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+      }}
+    >
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+        <span style={{ fontSize: 10, color: '#8c8c8c', fontWeight: 600 }}>#{index}</span>
+        <select
+          value={joint.type}
+          onChange={(e) => onUpdate({ type: e.target.value as SceneJoint['type'] })}
+          style={{ ...selectStyle, flex: 1 }}
+        >
+          {jointTypes.map((t) => (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          ))}
+        </select>
+        <button
+          type="button"
+          onClick={onRemove}
+          style={{
+            ...btnStyle,
+            color: '#F53352',
+            padding: '1px 4px',
+          }}
+        >
+          x
+        </button>
+      </div>
+
+      {/* Target */}
+      <div>
+        <div style={labelStyle}>Target ({targetName})</div>
+        <select
+          value={joint.target}
+          onChange={(e) => onUpdate({ target: e.target.value })}
+          style={selectStyle}
+        >
+          {physicsEntities.map((e) => (
+            <option key={e.id} value={e.id!}>
+              {e.name}
+            </option>
+          ))}
+          {!physicsEntities.find((e) => e.id === joint.target) && (
+            <option value={joint.target}>(missing: {joint.target.slice(0, 8)}...)</option>
+          )}
+        </select>
+      </div>
+
+      {/* Anchors */}
+      <div>
+        <div style={labelStyle}>Anchor (local)</div>
+        <Vec3Input
+          value={joint.anchor ?? [0, 0, 0]}
+          onChange={(v) => onUpdate({ anchor: v })}
+          step={0.05}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Target Anchor</div>
+        <Vec3Input
+          value={joint.targetAnchor ?? [0, 0, 0]}
+          onChange={(v) => onUpdate({ targetAnchor: v })}
+          step={0.05}
+        />
+      </div>
+
+      {/* Axis (revolute/prismatic) */}
+      {showAxis && (
+        <div>
+          <div style={labelStyle}>Axis</div>
+          <Vec3Input
+            value={joint.axis ?? [0, 1, 0]}
+            onChange={(v) => onUpdate({ axis: v })}
+            step={0.1}
+          />
+        </div>
+      )}
+
+      {/* Limits (revolute in degrees / prismatic in distance) */}
+      {showLimits && (
+        <div>
+          <div style={labelStyle}>
+            Limits ({joint.type === 'revolute' ? 'degrees' : 'distance'})
+          </div>
+          <div style={{ display: 'flex', gap: 4 }}>
+            <NumberInput
+              label="Min"
+              value={joint.limits?.min ?? -180}
+              onChange={(v) => onUpdate({ limits: { min: v, max: joint.limits?.max ?? 180 } })}
+              step={joint.type === 'revolute' ? 5 : 0.1}
+              style={{ flex: 1 }}
+            />
+            <NumberInput
+              label="Max"
+              value={joint.limits?.max ?? 180}
+              onChange={(v) => onUpdate({ limits: { min: joint.limits?.min ?? -180, max: v } })}
+              step={joint.type === 'revolute' ? 5 : 0.1}
+              style={{ flex: 1 }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Spring params */}
+      {showSpring && (
+        <>
+          <div>
+            <div style={labelStyle}>Stiffness</div>
+            <NumberInput
+              value={joint.stiffness ?? 10}
+              onChange={(v) => onUpdate({ stiffness: v })}
+              step={1}
+            />
+          </div>
+          <div>
+            <div style={labelStyle}>Damping</div>
+            <NumberInput
+              value={joint.damping ?? 1}
+              onChange={(v) => onUpdate({ damping: v })}
+              step={0.1}
+            />
+          </div>
+          <div>
+            <div style={labelStyle}>Rest Length</div>
+            <NumberInput
+              value={joint.restLength ?? 1}
+              onChange={(v) => onUpdate({ restLength: v })}
+              step={0.1}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/inspectors/LightSection.tsx

@@ -0,0 +1,116 @@
+import type { SceneLight } from '@engine/scene/scene-types';
+import { useEditorStore } from '../../EditorContext';
+import { ColorInput } from '../primitives/ColorInput';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Tooltip } from '../primitives/Tooltip';
+import type { SectionProps } from './multi-edit-utils';
+import { commonNum, commonStr } from './multi-edit-utils';
+
+const lightTypes: SceneLight['type'][] = ['directional', 'point', 'spot', 'hemisphere'];
+
+export function LightSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  if (!entities.every((e) => e.light)) return null;
+
+  const lightType = commonStr(entities, (e) => e.light?.type);
+  const color = commonStr(entities, (e) => e.light?.color ?? '#ffffff');
+  const intensity = commonNum(entities, (e) => e.light?.intensity ?? 1);
+
+  const update = (partial: Partial<SceneLight>) => {
+    store.batchMutate(ids, (entity) => {
+      if (entity.light) Object.assign(entity.light, partial);
+    });
+  };
+
+  return (
+    <SectionHeader label="Light">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Type</div>
+          <select
+            value={lightType ?? ''}
+            onChange={(e) => update({ type: e.target.value as SceneLight['type'] })}
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              color: lightType === null ? '#666' : '#c5c8ce',
+              fontStyle: lightType === null ? 'italic' : 'normal',
+              border: '1px solid #333',
+              borderRadius: 2,
+              padding: '3px 4px',
+              fontSize: 12,
+            }}
+          >
+            {lightType === null && (
+              <option value="" disabled>
+                (mixed)
+              </option>
+            )}
+            {lightTypes.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Color</div>
+          <ColorInput value={color} onChange={(v) => update({ color: v })} />
+        </div>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Intensity</div>
+          <NumberInput value={intensity} onChange={(v) => update({ intensity: v })} step={0.1} />
+        </div>
+        {lightType === 'hemisphere' && (
+          <div>
+            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Ground Color</div>
+            <ColorInput
+              value={commonStr(entities, (e) => e.light?.groundColor ?? '#000000')}
+              onChange={(v) => update({ groundColor: v })}
+            />
+          </div>
+        )}
+        {(lightType === 'point' || lightType === 'spot') && (
+          <div>
+            <Tooltip text="Falloff distance (0 = infinite)" position="right">
+              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Distance</div>
+            </Tooltip>
+            <NumberInput
+              value={commonNum(entities, (e) => e.light?.distance ?? 0)}
+              onChange={(v) => update({ distance: v })}
+              step={1}
+            />
+          </div>
+        )}
+        {lightType === 'spot' && (
+          <>
+            <div>
+              <Tooltip text="Spotlight cone angle" position="right">
+                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Angle (deg)</div>
+              </Tooltip>
+              <NumberInput
+                value={commonNum(
+                  entities,
+                  (e) => (e.light?.angle ?? Math.PI / 6) * (180 / Math.PI),
+                )}
+                onChange={(v) => update({ angle: v * (Math.PI / 180) })}
+                step={1}
+              />
+            </div>
+            <div>
+              <Tooltip text="Soft edge falloff (0–1)" position="right">
+                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Penumbra</div>
+              </Tooltip>
+              <NumberInput
+                value={commonNum(entities, (e) => e.light?.penumbra ?? 0)}
+                onChange={(v) => update({ penumbra: v })}
+                step={0.05}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </SectionHeader>
+  );
+}