@vgai/editor 0.2.0

package/src/components/inspectors/RenderingSection.tsx

@@ -0,0 +1,109 @@
+import { RENDER_FEATURES, type RenderFeature } from '@engine/render/render-features';
+import type { SceneEnvironment } from '@engine/scene/scene-types';
+import type { EditorStore } from '../../editor-store';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#c5c8ce' };
+const selectStyle: React.CSSProperties = {
+  width: '100%',
+  background: '#2a2d35',
+  color: '#c5c8ce',
+  border: '1px solid #3a3d45',
+  borderRadius: 3,
+  padding: '2px 4px',
+  fontSize: 11,
+};
+const noteStyle: React.CSSProperties = {
+  fontSize: 10,
+  color: '#8c8c8c',
+  lineHeight: 1.4,
+  marginBottom: 4,
+};
+
+type RenderingValue = boolean | number | string;
+type RenderingSettings = Record<string, RenderingValue>;
+
+export function RenderingSection({ store }: { store: EditorStore }) {
+  const env: SceneEnvironment = store.environment ?? {};
+  const rendering = (env.rendering ?? {}) as RenderingSettings;
+
+  const setFeature = (key: string, value: RenderingValue) => {
+    store.updateEnvironment({
+      rendering: { ...rendering, [key]: value },
+    } as Partial<SceneEnvironment>);
+  };
+
+  const renderControl = (feature: RenderFeature) => {
+    const current = rendering[feature.key] ?? feature.default;
+
+    if (feature.kind === 'toggle') {
+      return (
+        <div
+          key={feature.key}
+          style={{ display: 'flex', alignItems: 'center', gap: 6 }}
+          title={feature.description}
+        >
+          <input
+            type="checkbox"
+            checked={current as boolean}
+            onChange={(e) => setFeature(feature.key, e.target.checked)}
+          />
+          <span style={labelStyle}>{feature.label}</span>
+        </div>
+      );
+    }
+
+    if (feature.kind === 'number') {
+      return (
+        <div key={feature.key} title={feature.description}>
+          <div style={{ ...labelStyle, color: '#8c8c8c', marginBottom: 2 }}>{feature.label}</div>
+          <NumberInput
+            value={current as number}
+            onChange={(v) => {
+              let next = v;
+              if (feature.range) {
+                const [min, max] = feature.range;
+                next = Math.min(max, Math.max(min, v));
+              }
+              setFeature(feature.key, next);
+            }}
+            step={0.05}
+          />
+        </div>
+      );
+    }
+
+    // enum
+    return (
+      <div key={feature.key} title={feature.description}>
+        <div style={{ ...labelStyle, color: '#8c8c8c', marginBottom: 2 }}>{feature.label}</div>
+        <select
+          value={current as string}
+          onChange={(e) => setFeature(feature.key, e.target.value)}
+          style={selectStyle}
+        >
+          {(feature.options ?? []).map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  };
+
+  return (
+    <SectionHeader label="Rendering" defaultOpen={false}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div style={noteStyle}>
+          <code>autoBatch</code>, <code>frustumCulling</code>, and <code>lod</code> apply at
+          runtime/play (the editor viewport renders unbatched). <code>shadows</code>,{' '}
+          <code>postProcessing</code>, and <code>resolutionScale</code> apply live in the editor
+          too.
+        </div>
+        {RENDER_FEATURES.map(renderControl)}
+      </div>
+    </SectionHeader>
+  );
+}

package/src/components/inspectors/ShadowSection.tsx

@@ -0,0 +1,84 @@
+import { useEditorStore } from '../../EditorContext';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Tooltip } from '../primitives/Tooltip';
+import type { SectionProps } from './multi-edit-utils';
+import { commonBool, commonNum } from './multi-edit-utils';
+
+export function ShadowSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  if (!entities.every((e) => e.shadow)) return null;
+
+  const enabled = commonBool(entities, (e) => e.shadow?.enabled ?? false);
+  const mapSize = commonNum(entities, (e) => e.shadow?.mapSize ?? 1024);
+  const bias = commonNum(entities, (e) => e.shadow?.bias ?? 0);
+  const radius = commonNum(entities, (e) => e.shadow?.radius ?? 1);
+
+  return (
+    <SectionHeader label="Shadow">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
+          <input
+            type="checkbox"
+            checked={enabled ?? false}
+            ref={(el) => {
+              if (el) el.indeterminate = enabled === null;
+            }}
+            onChange={(e) => {
+              store.batchMutate(ids, (entity) => {
+                if (entity.shadow) entity.shadow.enabled = e.target.checked;
+              });
+            }}
+          />
+          Enabled
+        </label>
+        {(enabled === true || enabled === null) && (
+          <>
+            <div>
+              <Tooltip text="Shadow resolution (higher = sharper)" position="right">
+                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Map Size</div>
+              </Tooltip>
+              <NumberInput
+                value={mapSize}
+                onChange={(v) => {
+                  store.batchMutate(ids, (entity) => {
+                    if (entity.shadow) entity.shadow.mapSize = Math.round(v);
+                  });
+                }}
+                step={256}
+              />
+            </div>
+            <div>
+              <Tooltip text="Reduce shadow acne artifacts" position="right">
+                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Bias</div>
+              </Tooltip>
+              <NumberInput
+                value={bias}
+                onChange={(v) => {
+                  store.batchMutate(ids, (entity) => {
+                    if (entity.shadow) entity.shadow.bias = v;
+                  });
+                }}
+                step={0.0001}
+              />
+            </div>
+            <div>
+              <Tooltip text="Soft shadow blur radius" position="right">
+                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Radius</div>
+              </Tooltip>
+              <NumberInput
+                value={radius}
+                onChange={(v) => {
+                  store.batchMutate(ids, (entity) => {
+                    if (entity.shadow) entity.shadow.radius = v;
+                  });
+                }}
+                step={0.5}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </SectionHeader>
+  );
+}

package/src/components/inspectors/SplineSection.tsx

@@ -0,0 +1,191 @@
+import type { SceneSpline } 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';
+import { commonBool, commonNum, commonStr } from './multi-edit-utils';
+
+const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+
+const btnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '2px 6px',
+  cursor: 'pointer',
+  fontSize: 10,
+};
+
+export function SplineSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  const entity = entities[0]!;
+  const spline = entity.spline;
+
+  if (!entities.every((e) => e.spline)) return null;
+  const splineData = spline!;
+
+  const curveType = commonStr(entities, (e) => e.spline?.curveType);
+  const closed = commonBool(entities, (e) => e.spline?.closed ?? false);
+  const tension = commonNum(entities, (e) => e.spline?.tension ?? 0.5);
+  const resolution = commonNum(entities, (e) => e.spline?.resolution ?? 50);
+
+  const update = (partial: Partial<SceneSpline>) => {
+    store.batchMutate(ids, (entity) => {
+      if (entity.spline) Object.assign(entity.spline, partial);
+    });
+  };
+
+  const updatePoint = (index: number, value: [number, number, number]) => {
+    store.batchMutate(ids, (entity) => {
+      if (entity.spline?.points[index]) {
+        entity.spline.points[index] = value;
+      }
+    });
+  };
+
+  const addPoint = () => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.spline) return;
+      const pts = entity.spline.points;
+      const last = pts[pts.length - 1]!;
+      pts.push([last[0] + 1, last[1], last[2]]);
+    });
+  };
+
+  const removePoint = (index: number) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.spline || entity.spline.points.length <= 2) return;
+      entity.spline.points.splice(index, 1);
+    });
+  };
+
+  const isSingle = entities.length === 1;
+
+  return (
+    <SectionHeader label="Spline">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {/* Curve Type */}
+        <div>
+          <div style={labelStyle}>Curve Type</div>
+          <select
+            value={curveType ?? ''}
+            onChange={(e) =>
+              update({
+                curveType: e.target.value as SceneSpline['curveType'],
+              })
+            }
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              border: '1px solid #333',
+              borderRadius: 2,
+              color: '#c5c8ce',
+              fontSize: 11,
+              padding: '2px 4px',
+            }}
+          >
+            <option value="centripetal">Centripetal</option>
+            <option value="chordal">Chordal</option>
+            <option value="catmullrom">Catmull-Rom</option>
+          </select>
+        </div>
+
+        {/* Closed */}
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <input
+              type="checkbox"
+              checked={closed ?? false}
+              ref={(el) => {
+                if (el) el.indeterminate = closed === null;
+              }}
+              onChange={(e) => update({ closed: e.target.checked })}
+            />
+            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Closed Loop</span>
+          </div>
+        </div>
+
+        {/* Tension (catmullrom only) */}
+        {(curveType === 'catmullrom' || curveType === null) && (
+          <div>
+            <div style={labelStyle}>Tension</div>
+            <NumberInput value={tension} onChange={(v) => update({ tension: v })} step={0.05} />
+          </div>
+        )}
+
+        {/* Resolution */}
+        <div>
+          <div style={labelStyle}>Resolution</div>
+          <NumberInput
+            value={resolution}
+            onChange={(v) => update({ resolution: Math.max(2, Math.round(v)) })}
+            step={10}
+          />
+        </div>
+
+        {/* Points list — single entity only */}
+        {isSingle && (
+          <div>
+            <div style={{ ...labelStyle, marginTop: 4 }}>Points ({splineData.points.length})</div>
+            <div
+              style={{
+                maxHeight: 200,
+                overflowY: 'auto',
+                scrollbarWidth: 'thin',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+              }}
+            >
+              {splineData.points.map((pt, i) => (
+                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <span
+                    style={{
+                      fontSize: 9,
+                      color: '#666',
+                      width: 14,
+                      textAlign: 'right',
+                      flexShrink: 0,
+                    }}
+                  >
+                    {i}
+                  </span>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Vec3Input
+                      value={[pt[0], pt[1], pt[2]]}
+                      onChange={(v) => updatePoint(i, v)}
+                      step={0.1}
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removePoint(i)}
+                    disabled={splineData.points.length <= 2}
+                    style={{
+                      ...btnStyle,
+                      padding: '1px 5px',
+                      fontSize: 9,
+                      opacity: splineData.points.length <= 2 ? 0.3 : 1,
+                      cursor: splineData.points.length <= 2 ? 'default' : 'pointer',
+                    }}
+                  >
+                    x
+                  </button>
+                </div>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={addPoint}
+              style={{ ...btnStyle, marginTop: 4, alignSelf: 'flex-start' }}
+            >
+              + Add Point
+            </button>
+          </div>
+        )}
+      </div>
+    </SectionHeader>
+  );
+}

package/src/components/inspectors/TransformSection.tsx

@@ -0,0 +1,191 @@
+import * as THREE from 'three';
+import { useEditorStore } from '../../EditorContext';
+import { SectionHeader } from '../primitives/SectionHeader';
+import { Vec3Input } from '../primitives/Vec3Input';
+import type { SectionProps } from './multi-edit-utils';
+import { commonVec3 } from './multi-edit-utils';
+
+export function quatToEulerDeg(q: [number, number, number, number]): [number, number, number] {
+  const euler = new THREE.Euler().setFromQuaternion(new THREE.Quaternion(q[0], q[1], q[2], q[3]));
+  return [
+    THREE.MathUtils.radToDeg(euler.x),
+    THREE.MathUtils.radToDeg(euler.y),
+    THREE.MathUtils.radToDeg(euler.z),
+  ];
+}
+
+export function eulerDegToQuat(deg: [number, number, number]): [number, number, number, number] {
+  const euler = new THREE.Euler(
+    THREE.MathUtils.degToRad(deg[0]),
+    THREE.MathUtils.degToRad(deg[1]),
+    THREE.MathUtils.degToRad(deg[2]),
+  );
+  const q = new THREE.Quaternion().setFromEuler(euler);
+  return [q.x, q.y, q.z, q.w];
+}
+
+const pivotBtnStyle: React.CSSProperties = {
+  background: '#2a2a2a',
+  color: '#8c8c8c',
+  border: '1px solid #444',
+  borderRadius: 2,
+  padding: '2px 6px',
+  fontSize: 10,
+  cursor: 'pointer',
+};
+
+export function TransformSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  const multi = entities.length > 1;
+
+  const posVec = commonVec3(entities, (e) => e.transform?.position ?? [0, 0, 0]);
+  const rotVec = commonVec3(entities, (e) => quatToEulerDeg(e.transform?.rotation ?? [0, 0, 0, 1]));
+  const sclVec = commonVec3(entities, (e) => e.transform?.scale ?? [1, 1, 1]);
+  const pivVec = commonVec3(entities, (e) => e.pivot ?? [0, 0, 0]);
+
+  const setPos = (axis: 0 | 1 | 2, v: number) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.transform) entity.transform = {};
+      const pos = [...(entity.transform.position ?? [0, 0, 0])] as [number, number, number];
+      pos[axis] = v;
+      entity.transform.position = pos;
+    });
+  };
+
+  const updatePos = (v: [number, number, number]) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.transform) entity.transform = {};
+      entity.transform.position = v;
+    });
+  };
+
+  const setRot = (axis: 0 | 1 | 2, v: number) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.transform) entity.transform = {};
+      const euler = quatToEulerDeg(entity.transform.rotation ?? [0, 0, 0, 1]);
+      euler[axis] = v;
+      entity.transform.rotation = eulerDegToQuat(euler);
+    });
+  };
+
+  const updateRot = (deg: [number, number, number]) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.transform) entity.transform = {};
+      entity.transform.rotation = eulerDegToQuat(deg);
+    });
+  };
+
+  const setScl = (axis: 0 | 1 | 2, v: number) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.transform) entity.transform = {};
+      const scl = [...(entity.transform.scale ?? [1, 1, 1])] as [number, number, number];
+      scl[axis] = v;
+      entity.transform.scale = scl;
+    });
+  };
+
+  const updateScl = (v: [number, number, number]) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.transform) entity.transform = {};
+      entity.transform.scale = v;
+    });
+  };
+
+  const setPiv = (axis: 0 | 1 | 2, v: number) => {
+    store.batchMutate(ids, (entity) => {
+      const piv = [...(entity.pivot ?? [0, 0, 0])] as [number, number, number];
+      piv[axis] = v;
+      const isZero = piv[0] === 0 && piv[1] === 0 && piv[2] === 0;
+      if (isZero) {
+        delete entity.pivot;
+      } else {
+        entity.pivot = piv;
+      }
+    });
+  };
+
+  const updatePiv = (v: [number, number, number]) => {
+    store.batchMutate(ids, (entity) => {
+      const isZero = v[0] === 0 && v[1] === 0 && v[2] === 0;
+      if (isZero) {
+        delete entity.pivot;
+      } else {
+        entity.pivot = v;
+      }
+    });
+  };
+
+  const hasPivot = entities.some(
+    (e) => e.pivot && (e.pivot[0] !== 0 || e.pivot[1] !== 0 || e.pivot[2] !== 0),
+  );
+
+  return (
+    <SectionHeader label="Transform">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Position</div>
+          <Vec3Input
+            value={posVec}
+            onChange={updatePos}
+            onAxisChange={setPos}
+            step={0.1}
+            testIdPrefix="transform-position"
+          />
+        </div>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Rotation (degrees)</div>
+          <Vec3Input value={rotVec} onChange={updateRot} onAxisChange={setRot} step={1} />
+        </div>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Scale</div>
+          <Vec3Input value={sclVec} onChange={updateScl} onAxisChange={setScl} step={0.05} />
+        </div>
+        <div>
+          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Pivot</div>
+          <Vec3Input value={pivVec} onChange={updatePiv} onAxisChange={setPiv} step={0.1} />
+          <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+            {hasPivot && (
+              <button
+                type="button"
+                style={pivotBtnStyle}
+                onClick={() => {
+                  store.batchMutate(ids, (entity) => {
+                    delete entity.pivot;
+                  });
+                }}
+              >
+                Reset
+              </button>
+            )}
+            {!multi && (
+              <button
+                type="button"
+                style={pivotBtnStyle}
+                onClick={() => {
+                  const entity = entities[0]!;
+                  const obj = store.objectMap.get(entity.id!);
+                  if (!obj) return;
+                  const box = new THREE.Box3().setFromObject(obj);
+                  if (box.isEmpty()) return;
+                  const center = box.getCenter(new THREE.Vector3());
+                  const entityWorldPos = new THREE.Vector3();
+                  obj.getWorldPosition(entityWorldPos);
+                  const offset = center.sub(entityWorldPos);
+                  const invQuat = obj.quaternion.clone().invert();
+                  offset.applyQuaternion(invQuat);
+                  store.updatePivot(entity.id!, [
+                    Math.round(offset.x * 1000) / 1000,
+                    Math.round(offset.y * 1000) / 1000,
+                    Math.round(offset.z * 1000) / 1000,
+                  ]);
+                }}
+              >
+                Center to Bounds
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </SectionHeader>
+  );
+}