@vgai/editor 0.2.0

package/src/components/inspectors/PostProcessingSection.tsx

@@ -0,0 +1,1290 @@
+import { DEFAULTS } from '@engine/scene/defaults';
+import type { SceneEnvironment, ScenePostProcessing } from '@engine/scene/scene-types';
+import { useEditorStore } from '../../EditorContext';
+import type { EditorStore } from '../../editor-store';
+import { ColorInput } from '../primitives/ColorInput';
+import { NumberInput } from '../primitives/NumberInput';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+const effectLabel: React.CSSProperties = {
+  fontSize: 10,
+  color: '#8c8c8c',
+  fontWeight: 700,
+  marginTop: 6,
+};
+const selectStyle: React.CSSProperties = {
+  width: '100%',
+  background: '#2a2d35',
+  color: '#c5c8ce',
+  border: '1px solid #3a3d45',
+  borderRadius: 3,
+  padding: '2px 4px',
+  fontSize: 11,
+};
+const textInputStyle: React.CSSProperties = {
+  ...selectStyle,
+  boxSizing: 'border-box' as const,
+};
+
+const d = DEFAULTS.postProcessing;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function updatePP(
+  store: EditorStore,
+  env: SceneEnvironment,
+  key: keyof ScenePostProcessing,
+  partial: Record<string, unknown>,
+): void {
+  const prev = env.postProcessing?.[key];
+  store.updateEnvironment({
+    postProcessing: { ...env.postProcessing, [key]: { ...prev, ...partial } },
+  });
+}
+
+function EnabledCheckbox({
+  store,
+  env,
+  effectKey,
+  checked,
+}: {
+  store: EditorStore;
+  env: SceneEnvironment;
+  effectKey: keyof ScenePostProcessing;
+  checked: boolean;
+}) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => updatePP(store, env, effectKey, { enabled: e.target.checked })}
+      />
+      <span style={{ fontSize: 11, color: '#c5c8ce' }}>Enabled</span>
+    </div>
+  );
+}
+
+function Num({
+  store,
+  env,
+  effectKey,
+  field,
+  label,
+  value,
+  step,
+}: {
+  store: EditorStore;
+  env: SceneEnvironment;
+  effectKey: keyof ScenePostProcessing;
+  field: string;
+  label: string;
+  value: number;
+  step?: number;
+}) {
+  return (
+    <div>
+      <div style={labelStyle}>{label}</div>
+      <NumberInput
+        value={value}
+        onChange={(v) => updatePP(store, env, effectKey, { [field]: v })}
+        step={step ?? 0.1}
+      />
+    </div>
+  );
+}
+
+function Check({
+  store,
+  env,
+  effectKey,
+  field,
+  label,
+  checked,
+}: {
+  store: EditorStore;
+  env: SceneEnvironment;
+  effectKey: keyof ScenePostProcessing;
+  field: string;
+  label: string;
+  checked: boolean;
+}) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => updatePP(store, env, effectKey, { [field]: e.target.checked })}
+      />
+      <span style={{ fontSize: 11, color: '#c5c8ce' }}>{label}</span>
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export function PostProcessingSection() {
+  const store = useEditorStore();
+  const env: SceneEnvironment = store.environment ?? {};
+  const pp = env.postProcessing;
+
+  return (
+    <SectionHeader label="Post Processing" defaultOpen={false}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {/* ═══════════════════════════════════════════════════════════════
+            Lighting
+           ═══════════════════════════════════════════════════════════════ */}
+        <SectionHeader label="Lighting" defaultOpen={false}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            {/* SSAO */}
+            <div style={effectLabel}>SSAO</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="ssao"
+              checked={pp?.ssao?.enabled ?? false}
+            />
+            {pp?.ssao?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssao"
+                  field="radius"
+                  label="Radius"
+                  value={pp.ssao.radius ?? d.ssao.radius}
+                  step={0.01}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssao"
+                  field="intensity"
+                  label="Intensity"
+                  value={pp.ssao.intensity ?? d.ssao.intensity}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssao"
+                  field="bias"
+                  label="Bias"
+                  value={pp.ssao.bias ?? d.ssao.bias}
+                  step={0.005}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssao"
+                  field="samples"
+                  label="Samples"
+                  value={pp.ssao.samples ?? d.ssao.samples}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssao"
+                  field="rings"
+                  label="Rings"
+                  value={pp.ssao.rings ?? d.ssao.rings}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssao"
+                  field="fade"
+                  label="Fade"
+                  value={pp.ssao.fade ?? d.ssao.fade}
+                  step={0.01}
+                />
+                <div>
+                  <div style={labelStyle}>Color</div>
+                  <ColorInput
+                    value={pp.ssao.color ?? '#000000'}
+                    onChange={(v) => updatePP(store, env, 'ssao', { color: v })}
+                  />
+                </div>
+              </>
+            )}
+
+            {/* N8AO */}
+            <div style={effectLabel}>N8AO</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="n8ao"
+              checked={pp?.n8ao?.enabled ?? false}
+            />
+            {pp?.n8ao?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="aoSamples"
+                  label="AO Samples"
+                  value={pp.n8ao.aoSamples ?? d.n8ao.aoSamples}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="aoRadius"
+                  label="AO Radius"
+                  value={pp.n8ao.aoRadius ?? d.n8ao.aoRadius}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="intensity"
+                  label="Intensity"
+                  value={pp.n8ao.intensity ?? d.n8ao.intensity}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="denoiseSamples"
+                  label="Denoise Samples"
+                  value={pp.n8ao.denoiseSamples ?? d.n8ao.denoiseSamples}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="denoiseRadius"
+                  label="Denoise Radius"
+                  value={pp.n8ao.denoiseRadius ?? d.n8ao.denoiseRadius}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="distanceFalloff"
+                  label="Distance Falloff"
+                  value={pp.n8ao.distanceFalloff ?? d.n8ao.distanceFalloff}
+                />
+                <Check
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="screenSpaceRadius"
+                  label="Screen-Space Radius"
+                  checked={pp.n8ao.screenSpaceRadius ?? false}
+                />
+                <Check
+                  store={store}
+                  env={env}
+                  effectKey="n8ao"
+                  field="halfRes"
+                  label="Half Resolution"
+                  checked={pp.n8ao.halfRes ?? false}
+                />
+                <div>
+                  <div style={labelStyle}>Color</div>
+                  <ColorInput
+                    value={pp.n8ao.color ?? '#000000'}
+                    onChange={(v) => updatePP(store, env, 'n8ao', { color: v })}
+                  />
+                </div>
+              </>
+            )}
+
+            {/* SSR */}
+            <div style={effectLabel}>Screen-Space Reflections</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="ssr"
+              checked={pp?.ssr?.enabled ?? false}
+            />
+            {pp?.ssr?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssr"
+                  field="intensity"
+                  label="Intensity"
+                  value={pp.ssr.intensity ?? d.ssr.intensity}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssr"
+                  field="exponent"
+                  label="Exponent"
+                  value={pp.ssr.exponent ?? d.ssr.exponent}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssr"
+                  field="distance"
+                  label="Distance"
+                  value={pp.ssr.distance ?? d.ssr.distance}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssr"
+                  field="thickness"
+                  label="Thickness"
+                  value={pp.ssr.thickness ?? d.ssr.thickness}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssr"
+                  field="maxRoughness"
+                  label="Max Roughness"
+                  value={pp.ssr.maxRoughness ?? d.ssr.maxRoughness}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* SSGI */}
+            <div style={effectLabel}>Screen-Space Global Illumination</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="ssgi"
+              checked={pp?.ssgi?.enabled ?? false}
+            />
+            {pp?.ssgi?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssgi"
+                  field="intensity"
+                  label="Intensity"
+                  value={pp.ssgi.intensity ?? d.ssgi.intensity}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssgi"
+                  field="distance"
+                  label="Distance"
+                  value={pp.ssgi.distance ?? d.ssgi.distance}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssgi"
+                  field="thickness"
+                  label="Thickness"
+                  value={pp.ssgi.thickness ?? d.ssgi.thickness}
+                  step={1}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="ssgi"
+                  field="maxRoughness"
+                  label="Max Roughness"
+                  value={pp.ssgi.maxRoughness ?? d.ssgi.maxRoughness}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* God Rays */}
+            <div style={effectLabel}>God Rays</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="godRays"
+              checked={pp?.godRays?.enabled ?? false}
+            />
+            {pp?.godRays?.enabled && (
+              <>
+                <div>
+                  <div style={labelStyle}>Source Entity ID</div>
+                  <input
+                    type="text"
+                    value={pp.godRays.sourceEntity ?? ''}
+                    onChange={(e) =>
+                      updatePP(store, env, 'godRays', { sourceEntity: e.target.value })
+                    }
+                    placeholder="Entity ID of light source mesh"
+                    style={textInputStyle}
+                  />
+                </div>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="godRays"
+                  field="density"
+                  label="Density"
+                  value={pp.godRays.density ?? d.godRays.density}
+                  step={0.01}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="godRays"
+                  field="decay"
+                  label="Decay"
+                  value={pp.godRays.decay ?? d.godRays.decay}
+                  step={0.01}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="godRays"
+                  field="weight"
+                  label="Weight"
+                  value={pp.godRays.weight ?? d.godRays.weight}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="godRays"
+                  field="exposure"
+                  label="Exposure"
+                  value={pp.godRays.exposure ?? d.godRays.exposure}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="godRays"
+                  field="samples"
+                  label="Samples"
+                  value={pp.godRays.samples ?? d.godRays.samples}
+                  step={1}
+                />
+              </>
+            )}
+          </div>
+        </SectionHeader>
+
+        {/* ═══════════════════════════════════════════════════════════════
+            Camera
+           ═══════════════════════════════════════════════════════════════ */}
+        <SectionHeader label="Camera" defaultOpen={false}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            {/* Bloom */}
+            <div style={effectLabel}>Bloom</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="bloom"
+              checked={pp?.bloom?.enabled ?? false}
+            />
+            {pp?.bloom?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="bloom"
+                  field="intensity"
+                  label="Intensity"
+                  value={pp.bloom.intensity ?? d.bloom.intensity}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="bloom"
+                  field="luminanceThreshold"
+                  label="Luminance Threshold"
+                  value={pp.bloom.luminanceThreshold ?? d.bloom.luminanceThreshold}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="bloom"
+                  field="luminanceSmoothing"
+                  label="Luminance Smoothing"
+                  value={pp.bloom.luminanceSmoothing ?? d.bloom.luminanceSmoothing}
+                  step={0.005}
+                />
+              </>
+            )}
+
+            {/* Depth of Field */}
+            <div style={effectLabel}>Depth of Field</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="depthOfField"
+              checked={pp?.depthOfField?.enabled ?? false}
+            />
+            {pp?.depthOfField?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="depthOfField"
+                  field="worldFocusDistance"
+                  label="Focus Distance"
+                  value={pp.depthOfField.worldFocusDistance ?? d.depthOfField.worldFocusDistance}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="depthOfField"
+                  field="worldFocusRange"
+                  label="Focus Range"
+                  value={pp.depthOfField.worldFocusRange ?? d.depthOfField.worldFocusRange}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="depthOfField"
+                  field="bokehScale"
+                  label="Bokeh Scale"
+                  value={pp.depthOfField.bokehScale ?? d.depthOfField.bokehScale}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="depthOfField"
+                  field="focalLength"
+                  label="Focal Length"
+                  value={pp.depthOfField.focalLength ?? d.depthOfField.focalLength}
+                  step={0.01}
+                />
+              </>
+            )}
+
+            {/* Tilt Shift */}
+            <div style={effectLabel}>Tilt Shift</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="tiltShift"
+              checked={pp?.tiltShift?.enabled ?? false}
+            />
+            {pp?.tiltShift?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="tiltShift"
+                  field="offset"
+                  label="Offset"
+                  value={pp.tiltShift.offset ?? d.tiltShift.offset}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="tiltShift"
+                  field="rotation"
+                  label="Rotation"
+                  value={pp.tiltShift.rotation ?? d.tiltShift.rotation}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="tiltShift"
+                  field="focusArea"
+                  label="Focus Area"
+                  value={pp.tiltShift.focusArea ?? d.tiltShift.focusArea}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="tiltShift"
+                  field="feather"
+                  label="Feather"
+                  value={pp.tiltShift.feather ?? d.tiltShift.feather}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* Chromatic Aberration */}
+            <div style={effectLabel}>Chromatic Aberration</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="chromaticAberration"
+              checked={pp?.chromaticAberration?.enabled ?? false}
+            />
+            {pp?.chromaticAberration?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="chromaticAberration"
+                  field="offsetX"
+                  label="Offset X"
+                  value={pp.chromaticAberration.offsetX ?? d.chromaticAberration.offsetX}
+                  step={0.001}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="chromaticAberration"
+                  field="offsetY"
+                  label="Offset Y"
+                  value={pp.chromaticAberration.offsetY ?? d.chromaticAberration.offsetY}
+                  step={0.001}
+                />
+                <Check
+                  store={store}
+                  env={env}
+                  effectKey="chromaticAberration"
+                  field="radialModulation"
+                  label="Radial Modulation"
+                  checked={pp.chromaticAberration.radialModulation ?? false}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="chromaticAberration"
+                  field="modulationOffset"
+                  label="Modulation Offset"
+                  value={
+                    pp.chromaticAberration.modulationOffset ??
+                    d.chromaticAberration.modulationOffset
+                  }
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* Lens Distortion */}
+            <div style={effectLabel}>Lens Distortion</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="lensDistortion"
+              checked={pp?.lensDistortion?.enabled ?? false}
+            />
+            {pp?.lensDistortion?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="lensDistortion"
+                  field="distortionX"
+                  label="Distortion X"
+                  value={pp.lensDistortion.distortionX ?? d.lensDistortion.distortionX}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="lensDistortion"
+                  field="distortionY"
+                  label="Distortion Y"
+                  value={pp.lensDistortion.distortionY ?? d.lensDistortion.distortionY}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="lensDistortion"
+                  field="focalLengthX"
+                  label="Focal Length X"
+                  value={pp.lensDistortion.focalLengthX ?? d.lensDistortion.focalLengthX}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="lensDistortion"
+                  field="focalLengthY"
+                  label="Focal Length Y"
+                  value={pp.lensDistortion.focalLengthY ?? d.lensDistortion.focalLengthY}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="lensDistortion"
+                  field="skew"
+                  label="Skew"
+                  value={pp.lensDistortion.skew ?? d.lensDistortion.skew}
+                  step={0.01}
+                />
+              </>
+            )}
+
+            {/* Motion Blur */}
+            <div style={effectLabel}>Motion Blur</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="motionBlur"
+              checked={pp?.motionBlur?.enabled ?? false}
+            />
+            {pp?.motionBlur?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="motionBlur"
+                  field="intensity"
+                  label="Intensity"
+                  value={pp.motionBlur.intensity ?? d.motionBlur.intensity}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="motionBlur"
+                  field="jitter"
+                  label="Jitter"
+                  value={pp.motionBlur.jitter ?? d.motionBlur.jitter}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="motionBlur"
+                  field="samples"
+                  label="Samples"
+                  value={pp.motionBlur.samples ?? d.motionBlur.samples}
+                  step={1}
+                />
+              </>
+            )}
+          </div>
+        </SectionHeader>
+
+        {/* ═══════════════════════════════════════════════════════════════
+            Color
+           ═══════════════════════════════════════════════════════════════ */}
+        <SectionHeader label="Color" defaultOpen={false}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            {/* Brightness / Contrast */}
+            <div style={effectLabel}>Brightness / Contrast</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="brightnessContrast"
+              checked={pp?.brightnessContrast?.enabled ?? false}
+            />
+            {pp?.brightnessContrast?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="brightnessContrast"
+                  field="brightness"
+                  label="Brightness"
+                  value={pp.brightnessContrast.brightness ?? d.brightnessContrast.brightness}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="brightnessContrast"
+                  field="contrast"
+                  label="Contrast"
+                  value={pp.brightnessContrast.contrast ?? d.brightnessContrast.contrast}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* Hue / Saturation */}
+            <div style={effectLabel}>Hue / Saturation</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="hueSaturation"
+              checked={pp?.hueSaturation?.enabled ?? false}
+            />
+            {pp?.hueSaturation?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="hueSaturation"
+                  field="hue"
+                  label="Hue"
+                  value={pp.hueSaturation.hue ?? d.hueSaturation.hue}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="hueSaturation"
+                  field="saturation"
+                  label="Saturation"
+                  value={pp.hueSaturation.saturation ?? d.hueSaturation.saturation}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* Sepia */}
+            <div style={effectLabel}>Sepia</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="sepia"
+              checked={pp?.sepia?.enabled ?? false}
+            />
+            {pp?.sepia?.enabled && (
+              <Num
+                store={store}
+                env={env}
+                effectKey="sepia"
+                field="intensity"
+                label="Intensity"
+                value={pp.sepia.intensity ?? d.sepia.intensity}
+                step={0.05}
+              />
+            )}
+
+            {/* Color Depth */}
+            <div style={effectLabel}>Color Depth</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="colorDepth"
+              checked={pp?.colorDepth?.enabled ?? false}
+            />
+            {pp?.colorDepth?.enabled && (
+              <Num
+                store={store}
+                env={env}
+                effectKey="colorDepth"
+                field="bits"
+                label="Bits"
+                value={pp.colorDepth.bits ?? d.colorDepth.bits}
+                step={1}
+              />
+            )}
+          </div>
+        </SectionHeader>
+
+        {/* ═══════════════════════════════════════════════════════════════
+            Stylistic
+           ═══════════════════════════════════════════════════════════════ */}
+        <SectionHeader label="Stylistic" defaultOpen={false}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            {/* Vignette */}
+            <div style={effectLabel}>Vignette</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="vignette"
+              checked={pp?.vignette?.enabled ?? false}
+            />
+            {pp?.vignette?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="vignette"
+                  field="darkness"
+                  label="Darkness"
+                  value={pp.vignette.darkness ?? d.vignette.darkness}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="vignette"
+                  field="offset"
+                  label="Offset"
+                  value={pp.vignette.offset ?? d.vignette.offset}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* Noise */}
+            <div style={effectLabel}>Noise (Film Grain)</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="noise"
+              checked={pp?.noise?.enabled ?? false}
+            />
+            {pp?.noise?.enabled && (
+              <Check
+                store={store}
+                env={env}
+                effectKey="noise"
+                field="premultiply"
+                label="Premultiply"
+                checked={pp.noise.premultiply ?? d.noise.premultiply}
+              />
+            )}
+
+            {/* Scanline */}
+            <div style={effectLabel}>Scanline</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="scanline"
+              checked={pp?.scanline?.enabled ?? false}
+            />
+            {pp?.scanline?.enabled && (
+              <Num
+                store={store}
+                env={env}
+                effectKey="scanline"
+                field="density"
+                label="Density"
+                value={pp.scanline.density ?? d.scanline.density}
+                step={0.05}
+              />
+            )}
+
+            {/* Dot Screen */}
+            <div style={effectLabel}>Dot Screen</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="dotScreen"
+              checked={pp?.dotScreen?.enabled ?? false}
+            />
+            {pp?.dotScreen?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="dotScreen"
+                  field="angle"
+                  label="Angle"
+                  value={pp.dotScreen.angle ?? d.dotScreen.angle}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="dotScreen"
+                  field="scale"
+                  label="Scale"
+                  value={pp.dotScreen.scale ?? d.dotScreen.scale}
+                />
+              </>
+            )}
+
+            {/* Grid */}
+            <div style={effectLabel}>Grid</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="grid"
+              checked={pp?.grid?.enabled ?? false}
+            />
+            {pp?.grid?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="grid"
+                  field="scale"
+                  label="Scale"
+                  value={pp.grid.scale ?? d.grid.scale}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="grid"
+                  field="lineWidth"
+                  label="Line Width"
+                  value={pp.grid.lineWidth ?? d.grid.lineWidth}
+                  step={0.01}
+                />
+              </>
+            )}
+
+            {/* Pixelation */}
+            <div style={effectLabel}>Pixelation</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="pixelation"
+              checked={pp?.pixelation?.enabled ?? false}
+            />
+            {pp?.pixelation?.enabled && (
+              <Num
+                store={store}
+                env={env}
+                effectKey="pixelation"
+                field="granularity"
+                label="Granularity"
+                value={pp.pixelation.granularity ?? d.pixelation.granularity}
+                step={1}
+              />
+            )}
+
+            {/* Glitch */}
+            <div style={effectLabel}>Glitch</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="glitch"
+              checked={pp?.glitch?.enabled ?? false}
+            />
+            {pp?.glitch?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="delayX"
+                  label="Delay Min"
+                  value={pp.glitch.delayX ?? d.glitch.delayX}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="delayY"
+                  label="Delay Max"
+                  value={pp.glitch.delayY ?? d.glitch.delayY}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="durationX"
+                  label="Duration Min"
+                  value={pp.glitch.durationX ?? d.glitch.durationX}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="durationY"
+                  label="Duration Max"
+                  value={pp.glitch.durationY ?? d.glitch.durationY}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="strengthX"
+                  label="Strength Min"
+                  value={pp.glitch.strengthX ?? d.glitch.strengthX}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="strengthY"
+                  label="Strength Max"
+                  value={pp.glitch.strengthY ?? d.glitch.strengthY}
+                  step={0.05}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="columns"
+                  label="Columns"
+                  value={pp.glitch.columns ?? d.glitch.columns}
+                  step={0.01}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="glitch"
+                  field="ratio"
+                  label="Ratio"
+                  value={pp.glitch.ratio ?? d.glitch.ratio}
+                  step={0.05}
+                />
+              </>
+            )}
+
+            {/* Outline */}
+            <div style={effectLabel}>Outline</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="outline"
+              checked={pp?.outline?.enabled ?? false}
+            />
+            {pp?.outline?.enabled && (
+              <>
+                <div>
+                  <div style={labelStyle}>Tags (comma-separated)</div>
+                  <input
+                    type="text"
+                    value={(pp.outline.tags ?? []).join(', ')}
+                    onChange={(e) => {
+                      const tags = e.target.value
+                        .split(',')
+                        .map((t) => t.trim())
+                        .filter((t) => t.length > 0);
+                      updatePP(store, env, 'outline', { tags });
+                    }}
+                    placeholder="e.g. highlighted, selected"
+                    style={textInputStyle}
+                  />
+                </div>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="outline"
+                  field="edgeStrength"
+                  label="Edge Strength"
+                  value={pp.outline.edgeStrength ?? d.outline.edgeStrength}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="outline"
+                  field="pulseSpeed"
+                  label="Pulse Speed"
+                  value={pp.outline.pulseSpeed ?? d.outline.pulseSpeed}
+                />
+                <div>
+                  <div style={labelStyle}>Visible Edge Color</div>
+                  <ColorInput
+                    value={pp.outline.visibleEdgeColor ?? d.outline.visibleEdgeColor}
+                    onChange={(v) => updatePP(store, env, 'outline', { visibleEdgeColor: v })}
+                  />
+                </div>
+                <div>
+                  <div style={labelStyle}>Hidden Edge Color</div>
+                  <ColorInput
+                    value={pp.outline.hiddenEdgeColor ?? d.outline.hiddenEdgeColor}
+                    onChange={(v) => updatePP(store, env, 'outline', { hiddenEdgeColor: v })}
+                  />
+                </div>
+                <Check
+                  store={store}
+                  env={env}
+                  effectKey="outline"
+                  field="xRay"
+                  label="X-Ray"
+                  checked={pp.outline.xRay ?? false}
+                />
+              </>
+            )}
+
+            {/* Shock Wave */}
+            <div style={effectLabel}>Shock Wave</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="shockWave"
+              checked={pp?.shockWave?.enabled ?? false}
+            />
+            {pp?.shockWave?.enabled && (
+              <>
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="speed"
+                  label="Speed"
+                  value={pp.shockWave.speed ?? d.shockWave.speed}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="maxRadius"
+                  label="Max Radius"
+                  value={pp.shockWave.maxRadius ?? d.shockWave.maxRadius}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="waveSize"
+                  label="Wave Size"
+                  value={pp.shockWave.waveSize ?? d.shockWave.waveSize}
+                  step={0.01}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="amplitude"
+                  label="Amplitude"
+                  value={pp.shockWave.amplitude ?? d.shockWave.amplitude}
+                  step={0.01}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="positionX"
+                  label="Position X"
+                  value={pp.shockWave.positionX ?? 0}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="positionY"
+                  label="Position Y"
+                  value={pp.shockWave.positionY ?? 0}
+                  step={0.5}
+                />
+                <Num
+                  store={store}
+                  env={env}
+                  effectKey="shockWave"
+                  field="positionZ"
+                  label="Position Z"
+                  value={pp.shockWave.positionZ ?? 0}
+                  step={0.5}
+                />
+              </>
+            )}
+          </div>
+        </SectionHeader>
+
+        {/* ═══════════════════════════════════════════════════════════════
+            Anti-Aliasing
+           ═══════════════════════════════════════════════════════════════ */}
+        <SectionHeader label="Anti-Aliasing" defaultOpen={false}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            <div style={effectLabel}>SMAA</div>
+            <EnabledCheckbox
+              store={store}
+              env={env}
+              effectKey="smaa"
+              checked={pp?.smaa?.enabled ?? false}
+            />
+            {pp?.smaa?.enabled && (
+              <div>
+                <div style={labelStyle}>Preset</div>
+                <select
+                  value={pp.smaa.preset ?? d.smaa.preset}
+                  onChange={(e) => updatePP(store, env, 'smaa', { preset: e.target.value })}
+                  style={selectStyle}
+                >
+                  <option value="low">Low</option>
+                  <option value="medium">Medium</option>
+                  <option value="high">High</option>
+                  <option value="ultra">Ultra</option>
+                </select>
+              </div>
+            )}
+          </div>
+        </SectionHeader>
+      </div>
+    </SectionHeader>
+  );
+}