@vgai/editor 0.2.0

package/src/authoring/first-party-inspector/EnvironmentSection.tsx

@@ -0,0 +1,550 @@
+/**
+ * First-party scene Environment inspector (C2, docs/unified-world-editor/
+ * 26-unified-editor-spec.md §4 C2) — the deselect-state panel: Scene name/
+ * background, Skybox/IBL, Ambient Light, Fog, Tone Mapping, Post
+ * Processing, Rendering, Navigation-bake, Collision Layers. Verbatim from
+ * the deleted `components/InspectorPanel.tsx` (former :502-1003).
+ *
+ * Registered by `register.tsx` for the no-selection state (`nodeId ===
+ * null`); its registration `suppresses` the generic shell's `environment`
+ * built-in (the ingest-only background/fog note) so the two never
+ * double-render for a first-party session.
+ */
+
+import { DEFAULTS } from '@engine/scene/defaults';
+import type {
+  SceneEnvironment,
+  SceneNavigation,
+  ScenePhysicsSettings,
+  SceneToneMapping,
+} from '@engine/scene/scene-types';
+import { PostProcessingSection } from '../../components/inspectors/PostProcessingSection';
+import { RenderingSection } from '../../components/inspectors/RenderingSection';
+import { ColorInput } from '../../components/primitives/ColorInput';
+import { NumberInput } from '../../components/primitives/NumberInput';
+import { SectionHeader } from '../../components/primitives/SectionHeader';
+import { useEditorStore } from '../../EditorContext';
+import type { EditorStore } from '../../editor-store';
+import type { InspectorSectionProps } from '../../inspector-section-registry';
+
+const btnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '3px 8px',
+  cursor: 'pointer',
+  fontSize: 11,
+};
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#8c8c8c',
+  marginBottom: 2,
+};
+
+const fogTypes = ['linear', 'exponential'] as const;
+
+export function EnvironmentSection(_props: InspectorSectionProps) {
+  const store = useEditorStore();
+  const env = store.environment ?? {};
+
+  return (
+    <>
+      <SectionHeader label="Scene">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div>
+            <div style={labelStyle}>Name</div>
+            <input
+              value={store.sceneName}
+              onChange={(e) => {
+                store.setSceneName(e.target.value);
+              }}
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                border: '1px solid #333',
+                borderRadius: 2,
+                color: '#c5c8ce',
+                fontSize: 12,
+                padding: '3px 6px',
+              }}
+            />
+          </div>
+          <div>
+            <div style={labelStyle}>Background</div>
+            <ColorInput
+              value={env.background ?? '#aaaaaa'}
+              onChange={(v) => store.updateEnvironment({ background: v })}
+            />
+          </div>
+        </div>
+      </SectionHeader>
+
+      <SectionHeader label="Skybox / IBL" defaultOpen={false}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div>
+            <div style={labelStyle}>HDR / Image Path</div>
+            <input
+              value={env.skybox ?? ''}
+              onChange={(e) => {
+                if (e.target.value) {
+                  store.updateEnvironment({ skybox: e.target.value });
+                } else {
+                  const { skybox: _s, ...rest } = env;
+                  store.updateEnvironment(rest);
+                }
+              }}
+              placeholder="/assets/env/sky.hdr"
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                border: '1px solid #333',
+                borderRadius: 2,
+                color: '#c5c8ce',
+                fontSize: 12,
+                padding: '3px 6px',
+              }}
+            />
+          </div>
+          <div>
+            <div style={labelStyle}>IBL Intensity</div>
+            <NumberInput
+              value={env.envMapIntensity ?? 1.0}
+              onChange={(v) => store.updateEnvironment({ envMapIntensity: v })}
+              step={0.1}
+            />
+          </div>
+          {env.skybox && (
+            <button
+              type="button"
+              style={{ ...btnStyle, fontSize: 10, padding: '2px 6px' }}
+              onClick={() => {
+                const { skybox: _s, envMapIntensity: _i, ...rest } = env;
+                store.setEnvironment(rest as SceneEnvironment);
+              }}
+            >
+              Remove Skybox
+            </button>
+          )}
+        </div>
+      </SectionHeader>
+
+      <SectionHeader label="Ambient Light">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div>
+            <div style={labelStyle}>Color</div>
+            <ColorInput
+              value={env.ambient?.color ?? '#ffffff'}
+              onChange={(v) =>
+                store.updateEnvironment({
+                  ambient: { color: v, intensity: env.ambient?.intensity ?? 0.5 },
+                })
+              }
+            />
+          </div>
+          <div>
+            <div style={labelStyle}>Intensity</div>
+            <NumberInput
+              value={env.ambient?.intensity ?? 0.5}
+              onChange={(v) =>
+                store.updateEnvironment({
+                  ambient: { color: env.ambient?.color ?? '#ffffff', intensity: v },
+                })
+              }
+              step={0.1}
+            />
+          </div>
+        </div>
+      </SectionHeader>
+
+      <SectionHeader label="Fog" defaultOpen={false}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div>
+            <div style={labelStyle}>Type</div>
+            <select
+              value={env.fog?.type ?? 'linear'}
+              onChange={(e) =>
+                store.updateEnvironment({
+                  fog: {
+                    ...env.fog,
+                    type: e.target.value as (typeof fogTypes)[number],
+                    color: env.fog?.color ?? '#cccccc',
+                  },
+                })
+              }
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                border: '1px solid #333',
+                borderRadius: 2,
+                color: '#c5c8ce',
+                fontSize: 11,
+                padding: '2px 4px',
+              }}
+            >
+              {fogTypes.map((t) => (
+                <option key={t} value={t}>
+                  {t}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <div style={labelStyle}>Color</div>
+            <ColorInput
+              value={env.fog?.color ?? '#cccccc'}
+              onChange={(v) =>
+                store.updateEnvironment({
+                  fog: { ...env.fog, type: env.fog?.type ?? 'linear', color: v },
+                })
+              }
+            />
+          </div>
+          {(env.fog?.type ?? 'linear') === 'linear' ? (
+            <>
+              <div>
+                <div style={labelStyle}>Near</div>
+                <NumberInput
+                  value={env.fog?.near ?? 10}
+                  onChange={(v) =>
+                    store.updateEnvironment({
+                      fog: {
+                        ...env.fog,
+                        type: 'linear',
+                        color: env.fog?.color ?? '#cccccc',
+                        near: v,
+                      },
+                    })
+                  }
+                  step={1}
+                />
+              </div>
+              <div>
+                <div style={labelStyle}>Far</div>
+                <NumberInput
+                  value={env.fog?.far ?? 100}
+                  onChange={(v) =>
+                    store.updateEnvironment({
+                      fog: {
+                        ...env.fog,
+                        type: 'linear',
+                        color: env.fog?.color ?? '#cccccc',
+                        far: v,
+                      },
+                    })
+                  }
+                  step={1}
+                />
+              </div>
+            </>
+          ) : (
+            <div>
+              <div style={labelStyle}>Density</div>
+              <NumberInput
+                value={env.fog?.density ?? 0.01}
+                onChange={(v) =>
+                  store.updateEnvironment({
+                    fog: {
+                      ...env.fog,
+                      type: 'exponential',
+                      color: env.fog?.color ?? '#cccccc',
+                      density: v,
+                    },
+                  })
+                }
+                step={0.005}
+              />
+            </div>
+          )}
+          {env.fog && (
+            <button
+              type="button"
+              style={{ ...btnStyle, fontSize: 10, padding: '2px 6px' }}
+              onClick={() => {
+                const { fog: _fog, ...rest } = env;
+                store.setEnvironment(rest as SceneEnvironment);
+              }}
+            >
+              Remove Fog
+            </button>
+          )}
+        </div>
+      </SectionHeader>
+
+      <SectionHeader label="Tone Mapping" defaultOpen={false}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div>
+            <div style={labelStyle}>Mode</div>
+            <select
+              value={env.toneMapping?.mode ?? DEFAULTS.toneMapping.mode}
+              onChange={(e) =>
+                store.updateEnvironment({
+                  toneMapping: {
+                    exposure: env.toneMapping?.exposure ?? DEFAULTS.toneMapping.exposure,
+                    mode: e.target.value as NonNullable<SceneToneMapping['mode']>,
+                  },
+                })
+              }
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                border: '1px solid #333',
+                borderRadius: 2,
+                color: '#c5c8ce',
+                fontSize: 11,
+                padding: '2px 4px',
+              }}
+            >
+              {(['none', 'linear', 'reinhard', 'cineon', 'aces', 'agx'] as const).map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <div style={labelStyle}>Exposure</div>
+            <NumberInput
+              value={env.toneMapping?.exposure ?? DEFAULTS.toneMapping.exposure}
+              onChange={(v) =>
+                store.updateEnvironment({
+                  toneMapping: { ...env.toneMapping, exposure: v },
+                })
+              }
+              step={0.1}
+            />
+          </div>
+        </div>
+      </SectionHeader>
+
+      <PostProcessingSection />
+
+      <RenderingSection store={store} />
+
+      <SectionHeader label="Navigation" defaultOpen={false}>
+        <NavigationBakeSection store={store} />
+      </SectionHeader>
+
+      <SectionHeader label="Collision Layers" defaultOpen={false}>
+        <CollisionLayerEditor store={store} />
+      </SectionHeader>
+    </>
+  );
+}
+
+function CollisionLayerEditor({ store }: { store: EditorStore }) {
+  const env = store.environment ?? {};
+  const physSettings: ScenePhysicsSettings = env.physics ?? {};
+  const layers = physSettings.collisionLayers ?? [];
+
+  const updatePhysics = (partial: Partial<ScenePhysicsSettings>) => {
+    store.updateEnvironment({ physics: { ...physSettings, ...partial } });
+  };
+
+  const addLayer = () => {
+    if (layers.length >= 16) return;
+    updatePhysics({ collisionLayers: [...layers, `Layer ${layers.length}`] });
+  };
+
+  const removeLayer = (index: number) => {
+    updatePhysics({ collisionLayers: layers.filter((_, i) => i !== index) });
+  };
+
+  const renameLayer = (index: number, name: string) => {
+    const next = [...layers];
+    next[index] = name;
+    updatePhysics({ collisionLayers: next });
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      {layers.map((name, i) => (
+        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <span style={{ fontSize: 10, color: '#8c8c8c', width: 16, textAlign: 'right' }}>{i}</span>
+          <input
+            value={name}
+            onChange={(e) => renameLayer(i, e.target.value)}
+            style={{
+              flex: 1,
+              background: '#1e1e1e',
+              border: '1px solid #333',
+              borderRadius: 2,
+              color: '#c5c8ce',
+              fontSize: 11,
+              padding: '2px 4px',
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => removeLayer(i)}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: '#666',
+              cursor: 'pointer',
+              fontSize: 11,
+              padding: '0 4px',
+            }}
+          >
+            x
+          </button>
+        </div>
+      ))}
+      {layers.length < 16 && (
+        <button
+          type="button"
+          onClick={addLayer}
+          style={{
+            ...btnStyle,
+            fontSize: 10,
+            padding: '2px 6px',
+            alignSelf: 'flex-start',
+          }}
+        >
+          + Add Layer
+        </button>
+      )}
+      {layers.length === 0 && (
+        <div style={{ fontSize: 10, color: '#666', fontStyle: 'italic' }}>
+          No collision layers defined. Add layers to enable per-entity collision filtering.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NavigationBakeSection({ store }: { store: EditorStore }) {
+  const env = store.environment ?? {};
+  const nav: SceneNavigation = env.navigation ?? {};
+
+  const updateNav = (partial: Partial<SceneNavigation>) => {
+    store.updateEnvironment({ navigation: { ...nav, ...partial } });
+  };
+
+  const stale = store.navMeshStale;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <div>
+        <div style={labelStyle}>Cell Size</div>
+        <NumberInput
+          value={nav.cellSize ?? 0.3}
+          onChange={(v) => updateNav({ cellSize: v })}
+          step={0.05}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Cell Height</div>
+        <NumberInput
+          value={nav.cellHeight ?? 0.2}
+          onChange={(v) => updateNav({ cellHeight: v })}
+          step={0.05}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Walkable Slope Angle</div>
+        <NumberInput
+          value={nav.walkableSlopeAngle ?? 45}
+          onChange={(v) => updateNav({ walkableSlopeAngle: v })}
+          step={1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Walkable Height</div>
+        <NumberInput
+          value={nav.walkableHeight ?? 2}
+          onChange={(v) => updateNav({ walkableHeight: v })}
+          step={0.1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Walkable Climb</div>
+        <NumberInput
+          value={nav.walkableClimb ?? 1}
+          onChange={(v) => updateNav({ walkableClimb: v })}
+          step={0.1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Walkable Radius</div>
+        <NumberInput
+          value={nav.walkableRadius ?? 0.5}
+          onChange={(v) => updateNav({ walkableRadius: v })}
+          step={0.1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Max Edge Length</div>
+        <NumberInput
+          value={nav.maxEdgeLen ?? 12}
+          onChange={(v) => updateNav({ maxEdgeLen: v })}
+          step={1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Max Simplification Error</div>
+        <NumberInput
+          value={nav.maxSimplificationError ?? 1.3}
+          onChange={(v) => updateNav({ maxSimplificationError: v })}
+          step={0.1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Min Region Area</div>
+        <NumberInput
+          value={nav.minRegionArea ?? 8}
+          onChange={(v) => updateNav({ minRegionArea: v })}
+          step={1}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>Merge Region Area</div>
+        <NumberInput
+          value={nav.mergeRegionArea ?? 20}
+          onChange={(v) => updateNav({ mergeRegionArea: v })}
+          step={1}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+        <button
+          type="button"
+          onClick={() => window.dispatchEvent(new CustomEvent('editor:bake-navmesh'))}
+          style={{
+            flex: 1,
+            background: stale ? '#3a5f1e' : '#333',
+            color: '#c5c8ce',
+            border: `1px solid ${stale ? '#5a8f2e' : '#444'}`,
+            borderRadius: 3,
+            padding: '4px 8px',
+            cursor: 'pointer',
+            fontSize: 11,
+            fontWeight: 600,
+          }}
+        >
+          {stale ? 'Bake NavMesh *' : 'Bake NavMesh'}
+        </button>
+        <button
+          type="button"
+          onClick={() => window.dispatchEvent(new CustomEvent('editor:clear-navmesh'))}
+          style={{
+            background: '#333',
+            color: '#c5c8ce',
+            border: '1px solid #444',
+            borderRadius: 3,
+            padding: '4px 8px',
+            cursor: 'pointer',
+            fontSize: 11,
+          }}
+        >
+          Clear
+        </button>
+      </div>
+      {stale && (
+        <div style={{ fontSize: 10, color: '#e0a030', marginTop: 2 }}>
+          Scene changed since last bake
+        </div>
+      )}
+    </div>
+  );
+}