@vgai/editor 0.2.0

package/src/components/inspectors/MaterialSection.tsx

@@ -0,0 +1,1189 @@
+import { resolveUrl } from '@engine/loader';
+import { DEFAULTS } from '@engine/scene/defaults';
+import { parseMaterialFile } from '@engine/scene/parse';
+import type { MaterialFile, SceneEntity, SceneMaterial } from '@engine/scene/scene-types';
+import { useEffect, useRef, useState } from 'react';
+import { useEditorStore } from '../../EditorContext';
+import { clearMaterialRefCache } from '../../scene-sync';
+import { saveMaterialToServer } from '../DefaultEditorLayout';
+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 { commonBool, commonNum, commonStr } from './multi-edit-utils';
+
+const matTypes: SceneMaterial['type'][] = ['standard', 'physical', 'basic', 'toon'];
+const sideOptions: SceneMaterial['side'][] = ['front', 'back', 'double'];
+
+const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+
+function TextureInput({
+  value,
+  onChange,
+}: {
+  value: string | undefined;
+  onChange: (v: string | undefined) => void;
+}) {
+  const [dragOver, setDragOver] = useState(false);
+  const [imgError, setImgError] = useState(false);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    const raw = e.dataTransfer.types.includes('application/x-editor-asset');
+    if (!raw) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'link';
+    setDragOver(true);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/x-editor-asset'));
+      if (data.kind === 'image' && data.path) {
+        onChange(data.path);
+      }
+    } catch {
+      /* ignore malformed drops */
+    }
+  };
+
+  const thumbSrc = value && !imgError ? `/${value}` : undefined;
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={handleDrop}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        border: dragOver ? '1px dashed #5b9bd5' : '1px solid transparent',
+        background: dragOver ? 'rgba(91,155,213,0.08)' : undefined,
+        borderRadius: 3,
+        padding: 1,
+      }}
+    >
+      {thumbSrc && (
+        <img
+          src={thumbSrc}
+          alt=""
+          onError={() => setImgError(true)}
+          style={{
+            width: 48,
+            height: 48,
+            objectFit: 'cover',
+            borderRadius: 2,
+            border: '1px solid #333',
+            flexShrink: 0,
+          }}
+        />
+      )}
+      {!thumbSrc && (
+        <div
+          style={{
+            width: 48,
+            height: 48,
+            background: '#1a1a1a',
+            borderRadius: 2,
+            border: '1px solid #333',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 16,
+            color: '#555',
+            flexShrink: 0,
+          }}
+        >
+          {dragOver ? '+' : '\u2014'}
+        </div>
+      )}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <input
+          value={value ?? ''}
+          placeholder="path/to/texture.png"
+          onChange={(e) => {
+            setImgError(false);
+            onChange(e.target.value || undefined);
+          }}
+          style={{
+            width: '100%',
+            background: '#1e1e1e',
+            color: '#c5c8ce',
+            border: '1px solid #333',
+            borderRadius: 2,
+            padding: '2px 4px',
+            fontSize: 11,
+          }}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={() => {
+              setImgError(false);
+              onChange(undefined);
+            }}
+            style={{
+              alignSelf: 'flex-start',
+              background: '#333',
+              color: '#c5c8ce',
+              border: '1px solid #444',
+              borderRadius: 3,
+              padding: '1px 6px',
+              cursor: 'pointer',
+              fontSize: 10,
+            }}
+          >
+            Clear
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Collapsible feature toggle header with enable checkbox. */
+function FeatureToggle({
+  label,
+  enabled,
+  onToggle,
+  children,
+}: {
+  label: string;
+  enabled: boolean;
+  onToggle: (on: boolean) => void;
+  children?: React.ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(enabled);
+
+  // Auto-expand when enabled
+  useEffect(() => {
+    if (enabled) setExpanded(true);
+  }, [enabled]);
+
+  return (
+    <div style={{ borderTop: '1px solid #2a2a2a', paddingTop: 4 }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          cursor: 'pointer',
+          userSelect: 'none',
+        }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <span style={{ fontSize: 9, color: '#666', width: 10 }}>
+          {expanded ? '\u25BC' : '\u25B6'}
+        </span>
+        <span style={{ fontSize: 11, color: '#c5c8ce', flex: 1, fontWeight: 600 }}>{label}</span>
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={(e) => {
+            e.stopPropagation();
+            onToggle(e.target.checked);
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </div>
+      {expanded && enabled && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 6,
+            paddingLeft: 14,
+            paddingTop: 4,
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Physical material feature toggles for single-entity editing. */
+function PhysicalFeaturesSingle({
+  mat,
+  update,
+  setField,
+}: {
+  mat: SceneMaterial;
+  update: (partial: Partial<SceneMaterial>) => void;
+  setField: (key: keyof SceneMaterial, value: string | undefined) => void;
+}) {
+  return (
+    <>
+      {/* Clearcoat */}
+      <FeatureToggle
+        label="Clearcoat"
+        enabled={!!mat.clearcoat}
+        onToggle={(on) => {
+          if (on) update({ clearcoat: { ...DEFAULTS.material.clearcoat } });
+          else update({ clearcoat: undefined });
+        }}
+      >
+        <div>
+          <div style={labelStyle}>Clearcoat</div>
+          <NumberInput
+            value={mat.clearcoat?.clearcoat ?? 1}
+            onChange={(v) => update({ clearcoat: { ...mat.clearcoat!, clearcoat: v } })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Roughness</div>
+          <NumberInput
+            value={mat.clearcoat?.clearcoatRoughness ?? 0}
+            onChange={(v) => update({ clearcoat: { ...mat.clearcoat!, clearcoatRoughness: v } })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Clearcoat Map</div>
+          <TextureInput
+            value={mat.clearcoat?.clearcoatMap}
+            onChange={(v) => update({ clearcoat: { ...mat.clearcoat!, clearcoatMap: v } })}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Roughness Map</div>
+          <TextureInput
+            value={mat.clearcoat?.clearcoatRoughnessMap}
+            onChange={(v) => update({ clearcoat: { ...mat.clearcoat!, clearcoatRoughnessMap: v } })}
+          />
+        </div>
+      </FeatureToggle>
+
+      {/* Transmission */}
+      <FeatureToggle
+        label="Transmission"
+        enabled={!!mat.transmission}
+        onToggle={(on) => {
+          if (on) update({ transmission: { ...DEFAULTS.material.transmission } });
+          else update({ transmission: undefined });
+        }}
+      >
+        <div>
+          <div style={labelStyle}>Transmission</div>
+          <NumberInput
+            value={mat.transmission?.transmission ?? 1}
+            onChange={(v) => update({ transmission: { ...mat.transmission!, transmission: v } })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <Tooltip text="Index of refraction (glass ~1.5, water ~1.33)" position="right">
+            <div style={labelStyle}>IOR</div>
+          </Tooltip>
+          <NumberInput
+            value={mat.transmission?.ior ?? 1.5}
+            onChange={(v) => update({ transmission: { ...mat.transmission!, ior: v } })}
+            step={0.01}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Thickness</div>
+          <NumberInput
+            value={mat.transmission?.thickness ?? 0}
+            onChange={(v) => update({ transmission: { ...mat.transmission!, thickness: v } })}
+            step={0.1}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Attenuation Color</div>
+          <ColorInput
+            value={mat.transmission?.attenuationColor ?? '#ffffff'}
+            onChange={(v) =>
+              update({ transmission: { ...mat.transmission!, attenuationColor: v } })
+            }
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Attenuation Distance</div>
+          <NumberInput
+            value={mat.transmission?.attenuationDistance ?? 0}
+            onChange={(v) =>
+              update({ transmission: { ...mat.transmission!, attenuationDistance: v } })
+            }
+            step={0.1}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Transmission Map</div>
+          <TextureInput
+            value={mat.transmission?.transmissionMap}
+            onChange={(v) => update({ transmission: { ...mat.transmission!, transmissionMap: v } })}
+          />
+        </div>
+      </FeatureToggle>
+
+      {/* Sheen */}
+      <FeatureToggle
+        label="Sheen"
+        enabled={!!mat.sheen}
+        onToggle={(on) => {
+          if (on) update({ sheen: { ...DEFAULTS.material.sheen } });
+          else update({ sheen: undefined });
+        }}
+      >
+        <div>
+          <div style={labelStyle}>Sheen</div>
+          <NumberInput
+            value={mat.sheen?.sheen ?? 1}
+            onChange={(v) => update({ sheen: { ...mat.sheen!, sheen: v } })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Color</div>
+          <ColorInput
+            value={mat.sheen?.sheenColor ?? '#ffffff'}
+            onChange={(v) => update({ sheen: { ...mat.sheen!, sheenColor: v } })}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Roughness</div>
+          <NumberInput
+            value={mat.sheen?.sheenRoughness ?? 0.5}
+            onChange={(v) => update({ sheen: { ...mat.sheen!, sheenRoughness: v } })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Color Map</div>
+          <TextureInput
+            value={mat.sheen?.sheenColorMap}
+            onChange={(v) => update({ sheen: { ...mat.sheen!, sheenColorMap: v } })}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Roughness Map</div>
+          <TextureInput
+            value={mat.sheen?.sheenRoughnessMap}
+            onChange={(v) => update({ sheen: { ...mat.sheen!, sheenRoughnessMap: v } })}
+          />
+        </div>
+      </FeatureToggle>
+
+      {/* Iridescence */}
+      <FeatureToggle
+        label="Iridescence"
+        enabled={!!mat.iridescence}
+        onToggle={(on) => {
+          if (on) update({ iridescence: { ...DEFAULTS.material.iridescence } });
+          else update({ iridescence: undefined });
+        }}
+      >
+        <div>
+          <div style={labelStyle}>Iridescence</div>
+          <NumberInput
+            value={mat.iridescence?.iridescence ?? 1}
+            onChange={(v) => update({ iridescence: { ...mat.iridescence!, iridescence: v } })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <Tooltip text="Thin-film index of refraction" position="right">
+            <div style={labelStyle}>IOR</div>
+          </Tooltip>
+          <NumberInput
+            value={mat.iridescence?.iridescenceIOR ?? 1.3}
+            onChange={(v) => update({ iridescence: { ...mat.iridescence!, iridescenceIOR: v } })}
+            step={0.01}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Thickness Min (nm)</div>
+          <NumberInput
+            value={mat.iridescence?.iridescenceThicknessRange?.[0] ?? 100}
+            onChange={(v) =>
+              update({
+                iridescence: {
+                  ...mat.iridescence!,
+                  iridescenceThicknessRange: [
+                    v,
+                    mat.iridescence?.iridescenceThicknessRange?.[1] ?? 400,
+                  ],
+                },
+              })
+            }
+            step={10}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Thickness Max (nm)</div>
+          <NumberInput
+            value={mat.iridescence?.iridescenceThicknessRange?.[1] ?? 400}
+            onChange={(v) =>
+              update({
+                iridescence: {
+                  ...mat.iridescence!,
+                  iridescenceThicknessRange: [
+                    mat.iridescence?.iridescenceThicknessRange?.[0] ?? 100,
+                    v,
+                  ],
+                },
+              })
+            }
+            step={10}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Iridescence Map</div>
+          <TextureInput
+            value={mat.iridescence?.iridescenceMap}
+            onChange={(v) => update({ iridescence: { ...mat.iridescence!, iridescenceMap: v } })}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Thickness Map</div>
+          <TextureInput
+            value={mat.iridescence?.iridescenceThicknessMap}
+            onChange={(v) =>
+              update({ iridescence: { ...mat.iridescence!, iridescenceThicknessMap: v } })
+            }
+          />
+        </div>
+      </FeatureToggle>
+
+      {/* Displacement */}
+      <FeatureToggle
+        label="Displacement"
+        enabled={mat.displacementMap !== undefined}
+        onToggle={(on) => {
+          if (on) {
+            update({
+              displacementScale: DEFAULTS.material.displacementScale,
+              displacementBias: DEFAULTS.material.displacementBias,
+            });
+          } else {
+            update({
+              displacementMap: undefined,
+              displacementScale: undefined,
+              displacementBias: undefined,
+            });
+          }
+        }}
+      >
+        <div>
+          <div style={labelStyle}>Displacement Map</div>
+          <TextureInput
+            value={mat.displacementMap}
+            onChange={(v) => setField('displacementMap', v)}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Scale</div>
+          <NumberInput
+            value={mat.displacementScale ?? 1}
+            onChange={(v) => update({ displacementScale: v })}
+            step={0.1}
+          />
+        </div>
+        <div>
+          <div style={labelStyle}>Bias</div>
+          <NumberInput
+            value={mat.displacementBias ?? 0}
+            onChange={(v) => update({ displacementBias: v })}
+            step={0.01}
+          />
+        </div>
+      </FeatureToggle>
+    </>
+  );
+}
+
+/** Physical material feature toggles for multi-entity editing. */
+function PhysicalFeaturesMulti({ entities, ids }: { entities: SceneEntity[]; ids: string[] }) {
+  const store = useEditorStore();
+
+  // Only show toggle states — detailed editing of nested objects is single-entity only
+  const hasClearcoat = commonBool(entities, (e) => !!e.material?.clearcoat);
+  const hasTransmission = commonBool(entities, (e) => !!e.material?.transmission);
+  const hasSheen = commonBool(entities, (e) => !!e.material?.sheen);
+  const hasIridescence = commonBool(entities, (e) => !!e.material?.iridescence);
+
+  const toggleFeature = (
+    feature: 'clearcoat' | 'transmission' | 'sheen' | 'iridescence',
+    on: boolean,
+  ) => {
+    store.batchMutate(ids, (entity) => {
+      if (!entity.material) return;
+      if (on) {
+        (entity.material as Record<string, unknown>)[feature] = {
+          ...DEFAULTS.material[feature],
+        };
+      } else {
+        delete (entity.material as Record<string, unknown>)[feature];
+      }
+    });
+  };
+
+  return (
+    <>
+      <div style={{ borderTop: '1px solid #2a2a2a', paddingTop: 4 }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
+          <input
+            type="checkbox"
+            checked={hasClearcoat ?? false}
+            ref={(el) => {
+              if (el) el.indeterminate = hasClearcoat === null;
+            }}
+            onChange={(e) => toggleFeature('clearcoat', e.target.checked)}
+          />
+          <span style={{ color: '#c5c8ce' }}>Clearcoat</span>
+        </label>
+      </div>
+      <div>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
+          <input
+            type="checkbox"
+            checked={hasTransmission ?? false}
+            ref={(el) => {
+              if (el) el.indeterminate = hasTransmission === null;
+            }}
+            onChange={(e) => toggleFeature('transmission', e.target.checked)}
+          />
+          <span style={{ color: '#c5c8ce' }}>Transmission</span>
+        </label>
+      </div>
+      <div>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
+          <input
+            type="checkbox"
+            checked={hasSheen ?? false}
+            ref={(el) => {
+              if (el) el.indeterminate = hasSheen === null;
+            }}
+            onChange={(e) => toggleFeature('sheen', e.target.checked)}
+          />
+          <span style={{ color: '#c5c8ce' }}>Sheen</span>
+        </label>
+      </div>
+      <div>
+        <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
+          <input
+            type="checkbox"
+            checked={hasIridescence ?? false}
+            ref={(el) => {
+              if (el) el.indeterminate = hasIridescence === null;
+            }}
+            onChange={(e) => toggleFeature('iridescence', e.target.checked)}
+          />
+          <span style={{ color: '#c5c8ce' }}>Iridescence</span>
+        </label>
+      </div>
+    </>
+  );
+}
+
+export function MaterialSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  const multi = entities.length > 1;
+  const entity = entities[0]!;
+  const materialRef = entity.materialRef;
+
+  // Hooks must be unconditional — single-entity-only features gated with !multi below
+  const [refMat, setRefMat] = useState<SceneMaterial | null>(null);
+  useEffect(() => {
+    if (multi || !materialRef) {
+      setRefMat(null);
+      return;
+    }
+    fetch(resolveUrl(materialRef))
+      .then((r) => (r.ok ? r.json() : null))
+      .then((json) => (json === null ? null : parseMaterialFile(json, materialRef)))
+      .then((file) => setRefMat(file?.material ?? null))
+      .catch((err) => {
+        console.error(`[MaterialSection] invalid material ref "${materialRef}":`, err);
+        setRefMat(null);
+      });
+  }, [multi, materialRef]);
+
+  const [savingAs, setSavingAs] = useState(false);
+  const defaultName = entity.name.toLowerCase().replace(/\s+/g, '-');
+  const [savePath, setSavePath] = useState(`materials/${defaultName}.mat.json`);
+  const saveInputRef = useRef<HTMLInputElement>(null);
+
+  if (!entities.every((e) => e.material || e.materialRef)) return null;
+
+  const id = entity.id!;
+  const hasRef = !multi && !!entity.materialRef;
+
+  // --- Multi-entity path ---
+  if (multi) {
+    const matType = commonStr(entities, (e) => e.material?.type);
+    const color = commonStr(entities, (e) => e.material?.color ?? '#ffffff');
+    const metalness = commonNum(entities, (e) => e.material?.metalness ?? 0);
+    const roughness = commonNum(entities, (e) => e.material?.roughness ?? 0.5);
+    const opacity = commonNum(entities, (e) => e.material?.opacity ?? 1);
+    const emissive = commonStr(entities, (e) => e.material?.emissive ?? '#000000');
+    const emissiveIntensity = commonNum(entities, (e) => e.material?.emissiveIntensity ?? 0);
+    const flatShading = commonBool(entities, (e) => e.material?.flatShading ?? false);
+    const transparent = commonBool(entities, (e) => e.material?.transparent ?? false);
+    const side = commonStr(entities, (e) => e.material?.side ?? 'front');
+
+    const showPBR = matType === 'standard' || matType === 'physical';
+    const showEmissive = matType !== null && matType !== 'basic';
+
+    const update = (partial: Partial<SceneMaterial>) => {
+      store.batchMutate(ids, (entity) => {
+        if (entity.material) Object.assign(entity.material, partial);
+      });
+    };
+
+    return (
+      <SectionHeader label="Material">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {/* Type */}
+          <div>
+            <div style={labelStyle}>Type</div>
+            <select
+              value={matType ?? ''}
+              onChange={(e) => update({ type: e.target.value as SceneMaterial['type'] })}
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                color: matType === null ? '#666' : '#c5c8ce',
+                fontStyle: matType === null ? 'italic' : 'normal',
+                border: '1px solid #333',
+                borderRadius: 2,
+                padding: '3px 4px',
+                fontSize: 12,
+              }}
+            >
+              {matType === null && (
+                <option value="" disabled>
+                  (mixed)
+                </option>
+              )}
+              {matTypes.map((t) => (
+                <option key={t} value={t}>
+                  {t}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Color */}
+          <div>
+            <div style={labelStyle}>Color</div>
+            <ColorInput value={color} onChange={(v) => update({ color: v })} />
+          </div>
+
+          {/* PBR */}
+          {showPBR && (
+            <>
+              <div>
+                <Tooltip text="Metallic look (0 = matte, 1 = metal)" position="right">
+                  <div style={labelStyle}>Metalness</div>
+                </Tooltip>
+                <NumberInput
+                  value={metalness}
+                  onChange={(v) => update({ metalness: v })}
+                  step={0.05}
+                />
+              </div>
+              <div>
+                <Tooltip text="Surface roughness (0 = glossy, 1 = rough)" position="right">
+                  <div style={labelStyle}>Roughness</div>
+                </Tooltip>
+                <NumberInput
+                  value={roughness}
+                  onChange={(v) => update({ roughness: v })}
+                  step={0.05}
+                />
+              </div>
+              <div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <input
+                    type="checkbox"
+                    checked={flatShading ?? false}
+                    ref={(el) => {
+                      if (el) el.indeterminate = flatShading === null;
+                    }}
+                    onChange={(e) => update({ flatShading: e.target.checked })}
+                  />
+                  <span style={{ fontSize: 11, color: '#c5c8ce' }}>Flat Shading</span>
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Emissive */}
+          {showEmissive && (
+            <>
+              <div>
+                <Tooltip text="Self-illuminating color" position="right">
+                  <div style={labelStyle}>Emissive</div>
+                </Tooltip>
+                <ColorInput value={emissive} onChange={(v) => update({ emissive: v })} />
+              </div>
+              <div>
+                <div style={labelStyle}>Emissive Intensity</div>
+                <NumberInput
+                  value={emissiveIntensity}
+                  onChange={(v) => update({ emissiveIntensity: v })}
+                  step={0.1}
+                />
+              </div>
+            </>
+          )}
+
+          {/* Opacity & Transparency */}
+          <div>
+            <div style={labelStyle}>Opacity</div>
+            <NumberInput value={opacity} onChange={(v) => update({ opacity: v })} step={0.05} />
+          </div>
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <input
+                type="checkbox"
+                checked={transparent ?? false}
+                ref={(el) => {
+                  if (el) el.indeterminate = transparent === null;
+                }}
+                onChange={(e) => update({ transparent: e.target.checked })}
+              />
+              <span style={{ fontSize: 11, color: '#c5c8ce' }}>Transparent</span>
+            </div>
+          </div>
+
+          {/* Side */}
+          <div>
+            <Tooltip text="Which faces to render" position="right">
+              <div style={labelStyle}>Side</div>
+            </Tooltip>
+            <select
+              value={side ?? ''}
+              onChange={(e) => update({ side: e.target.value as SceneMaterial['side'] })}
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                color: side === null ? '#666' : '#c5c8ce',
+                fontStyle: side === null ? 'italic' : 'normal',
+                border: '1px solid #333',
+                borderRadius: 2,
+                padding: '3px 4px',
+                fontSize: 12,
+              }}
+            >
+              {side === null && (
+                <option value="" disabled>
+                  (mixed)
+                </option>
+              )}
+              {sideOptions.map((s) => (
+                <option key={s} value={s}>
+                  {s}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Physical material feature toggles (multi-entity) */}
+          {matType === 'physical' && <PhysicalFeaturesMulti entities={entities} ids={ids} />}
+        </div>
+      </SectionHeader>
+    );
+  }
+
+  // --- Single-entity path (full features: materialRef, textures, save-as) ---
+  const mat = hasRef ? refMat : entity.material;
+  if (!mat && !hasRef) return null;
+  if (!mat)
+    return (
+      <SectionHeader label="Material">
+        <div style={{ padding: 4, fontSize: 11, color: '#666' }}>Loading material...</div>
+      </SectionHeader>
+    );
+
+  const showPBR = mat.type === 'standard' || mat.type === 'physical';
+  const showEmissive = mat.type !== 'basic';
+
+  const update = (partial: Partial<SceneMaterial>) => {
+    if (hasRef && entity.materialRef) {
+      const updated: SceneMaterial = { ...mat, ...partial };
+      const file: MaterialFile = {
+        version: 1,
+        name: entity.materialRef.split('/').pop()?.replace('.mat.json', '') ?? 'Material',
+        material: updated,
+      };
+      saveMaterialToServer(file, entity.materialRef).then((ok) => {
+        if (ok) {
+          setRefMat(updated);
+          clearMaterialRefCache();
+          window.dispatchEvent(new CustomEvent('editor:material-changed'));
+        }
+      });
+    } else {
+      store.updateEntity(id, { material: { ...mat, ...partial } });
+    }
+  };
+
+  const setField = (key: keyof SceneMaterial, value: string | undefined) => {
+    const next = { ...mat };
+    if (value === undefined) {
+      delete next[key];
+    } else {
+      (next as Record<string, unknown>)[key] = value;
+    }
+    if (hasRef && entity.materialRef) {
+      const file: MaterialFile = {
+        version: 1,
+        name: entity.materialRef.split('/').pop()?.replace('.mat.json', '') ?? 'Material',
+        material: next,
+      };
+      saveMaterialToServer(file, entity.materialRef).then((ok) => {
+        if (ok) {
+          setRefMat(next);
+          clearMaterialRefCache();
+          window.dispatchEvent(new CustomEvent('editor:material-changed'));
+        }
+      });
+    } else {
+      store.updateEntity(id, { material: next });
+    }
+  };
+
+  const handleSaveAsMaterial = async () => {
+    if (!savePath.trim()) return;
+    const path = savePath.trim();
+    const file: MaterialFile = { version: 1, name: defaultName, material: mat };
+    const ok = await saveMaterialToServer(file, path);
+    if (ok) {
+      store.updateEntity(id, { materialRef: path, material: undefined });
+      setSavingAs(false);
+    }
+  };
+
+  const handleMakeUnique = () => {
+    store.updateEntity(id, { material: { ...mat }, materialRef: undefined });
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (e.dataTransfer.types.includes('application/x-editor-asset')) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'link';
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    try {
+      const data = JSON.parse(e.dataTransfer.getData('application/x-editor-asset'));
+      if (data.kind === 'material' && data.path) {
+        store.updateEntity(id, { materialRef: data.path, material: undefined });
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const btnStyle: React.CSSProperties = {
+    background: '#333',
+    color: '#c5c8ce',
+    border: '1px solid #444',
+    borderRadius: 3,
+    padding: '2px 6px',
+    cursor: 'pointer',
+    fontSize: 10,
+  };
+
+  return (
+    <SectionHeader label="Material">
+      <div
+        style={{ display: 'flex', flexDirection: 'column', gap: 6 }}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        {/* Material Ref Banner */}
+        {hasRef && entity.materialRef && (
+          <div
+            style={{
+              padding: '4px 6px',
+              background: '#1e3a5f',
+              borderRadius: 3,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+            }}
+          >
+            <span style={{ fontSize: 10, color: '#93c5fd', fontWeight: 600 }}>Shared</span>
+            <span
+              style={{
+                fontSize: 10,
+                color: '#60a5fa',
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+              title={entity.materialRef}
+            >
+              {entity.materialRef.split('/').pop()?.replace('.mat.json', '')}
+            </span>
+            <button
+              type="button"
+              style={{ ...btnStyle, color: '#60a5fa' }}
+              onClick={() => {
+                window.dispatchEvent(
+                  new CustomEvent('editor:open-asset', { detail: { path: entity.materialRef } }),
+                );
+              }}
+            >
+              Open
+            </button>
+            <button type="button" style={btnStyle} onClick={handleMakeUnique}>
+              Make Unique
+            </button>
+          </div>
+        )}
+
+        {/* Type */}
+        <div>
+          <div style={labelStyle}>Type</div>
+          <select
+            value={mat.type}
+            onChange={(e) => update({ type: e.target.value as SceneMaterial['type'] })}
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              color: '#c5c8ce',
+              border: '1px solid #333',
+              borderRadius: 2,
+              padding: '3px 4px',
+              fontSize: 12,
+            }}
+          >
+            {matTypes.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Color */}
+        <div>
+          <div style={labelStyle}>Color</div>
+          <ColorInput value={mat.color ?? '#ffffff'} onChange={(v) => update({ color: v })} />
+        </div>
+
+        {/* PBR properties */}
+        {showPBR && (
+          <>
+            <div>
+              <Tooltip text="Metallic look (0 = matte, 1 = metal)" position="right">
+                <div style={labelStyle}>Metalness</div>
+              </Tooltip>
+              <NumberInput
+                value={mat.metalness ?? 0}
+                onChange={(v) => update({ metalness: v })}
+                step={0.05}
+              />
+            </div>
+            <div>
+              <Tooltip text="Surface roughness (0 = glossy, 1 = rough)" position="right">
+                <div style={labelStyle}>Roughness</div>
+              </Tooltip>
+              <NumberInput
+                value={mat.roughness ?? 0.5}
+                onChange={(v) => update({ roughness: v })}
+                step={0.05}
+              />
+            </div>
+            <div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <input
+                  type="checkbox"
+                  checked={mat.flatShading ?? false}
+                  onChange={(e) => update({ flatShading: e.target.checked })}
+                />
+                <span style={{ fontSize: 11, color: '#c5c8ce' }}>Flat Shading</span>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Emissive */}
+        {showEmissive && (
+          <>
+            <div>
+              <Tooltip text="Self-illuminating color" position="right">
+                <div style={labelStyle}>Emissive</div>
+              </Tooltip>
+              <ColorInput
+                value={mat.emissive ?? '#000000'}
+                onChange={(v) => update({ emissive: v })}
+              />
+            </div>
+            <div>
+              <div style={labelStyle}>Emissive Intensity</div>
+              <NumberInput
+                value={mat.emissiveIntensity ?? 0}
+                onChange={(v) => update({ emissiveIntensity: v })}
+                step={0.1}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Opacity & Transparency */}
+        <div>
+          <div style={labelStyle}>Opacity</div>
+          <NumberInput
+            value={mat.opacity ?? 1}
+            onChange={(v) => update({ opacity: v })}
+            step={0.05}
+          />
+        </div>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <input
+              type="checkbox"
+              checked={mat.transparent ?? false}
+              onChange={(e) => update({ transparent: e.target.checked })}
+            />
+            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Transparent</span>
+          </div>
+        </div>
+
+        {/* Side */}
+        <div>
+          <Tooltip text="Which faces to render" position="right">
+            <div style={labelStyle}>Side</div>
+          </Tooltip>
+          <select
+            value={mat.side ?? 'front'}
+            onChange={(e) => setField('side', e.target.value)}
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              color: '#c5c8ce',
+              border: '1px solid #333',
+              borderRadius: 2,
+              padding: '3px 4px',
+              fontSize: 12,
+            }}
+          >
+            {sideOptions.map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Texture Maps */}
+        <div
+          style={{
+            fontSize: 10,
+            color: '#8c8c8c',
+            fontWeight: 700,
+            marginTop: 4,
+            textTransform: 'uppercase',
+          }}
+        >
+          Textures
+        </div>
+        <div>
+          <div style={labelStyle}>Map</div>
+          <TextureInput value={mat.map} onChange={(v) => setField('map', v)} />
+        </div>
+        <div>
+          <div style={labelStyle}>Normal Map</div>
+          <TextureInput value={mat.normalMap} onChange={(v) => setField('normalMap', v)} />
+        </div>
+        {showEmissive && (
+          <div>
+            <div style={labelStyle}>Emissive Map</div>
+            <TextureInput value={mat.emissiveMap} onChange={(v) => setField('emissiveMap', v)} />
+          </div>
+        )}
+        {showPBR && (
+          <>
+            <div>
+              <div style={labelStyle}>AO Map</div>
+              <TextureInput value={mat.aoMap} onChange={(v) => setField('aoMap', v)} />
+            </div>
+            <div>
+              <div style={labelStyle}>Roughness Map</div>
+              <TextureInput
+                value={mat.roughnessMap}
+                onChange={(v) => setField('roughnessMap', v)}
+              />
+            </div>
+            <div>
+              <div style={labelStyle}>Metalness Map</div>
+              <TextureInput
+                value={mat.metalnessMap}
+                onChange={(v) => setField('metalnessMap', v)}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Physical material feature toggles (single-entity) */}
+        {mat.type === 'physical' && (
+          <PhysicalFeaturesSingle mat={mat} update={update} setField={setField} />
+        )}
+
+        {/* Save as / Assign material */}
+        {!hasRef && !savingAs && (
+          <button
+            type="button"
+            style={btnStyle}
+            onClick={() => {
+              setSavingAs(true);
+              setSavePath(`materials/${defaultName}.mat.json`);
+              requestAnimationFrame(() => saveInputRef.current?.select());
+            }}
+          >
+            Save as Material...
+          </button>
+        )}
+        {!hasRef && savingAs && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            <div style={labelStyle}>Save path (relative to public/)</div>
+            <input
+              ref={saveInputRef}
+              value={savePath}
+              onChange={(e) => setSavePath(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSaveAsMaterial();
+                if (e.key === 'Escape') setSavingAs(false);
+              }}
+              style={{
+                width: '100%',
+                background: '#1e1e1e',
+                color: '#c5c8ce',
+                border: '1px solid #5b9bd5',
+                borderRadius: 2,
+                padding: '3px 4px',
+                fontSize: 11,
+              }}
+            />
+            <div style={{ display: 'flex', gap: 4 }}>
+              <button
+                type="button"
+                style={{ ...btnStyle, color: '#60a5fa' }}
+                onClick={handleSaveAsMaterial}
+              >
+                Save
+              </button>
+              <button type="button" style={btnStyle} onClick={() => setSavingAs(false)}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </SectionHeader>
+  );
+}