@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/inspectors/MaterialSection.tsx

@@ -3,20 +3,30 @@ 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 {
+  Button,
+  Checkbox,
+  ColorInput,
+  DisclosureIcon,
+  NumberInput,
+  SectionHeader,
+  Select,
+  TextInput,
+  Tooltip,
+  themeVars,
+} from '../../design-system';
+import { useEditorStore, useOptionalHistoryService } from '../../EditorContext';
+import { getProjectFileHistory } from '../../history/project-file-history';
 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 { fieldLabelStyle, groupLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 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 };
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 
 function TextureInput({
   value,
@@ -60,9 +70,9 @@ function TextureInput({
         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,
+        border: dragOver ? `1px dashed ${themeVars.accent.default}` : '1px solid transparent',
+        background: dragOver ? themeVars.accent.muted : undefined,
+        borderRadius: themeVars.shape.small,
         padding: 1,
       }}
     >
@@ -75,8 +85,8 @@ function TextureInput({
             width: 48,
             height: 48,
             objectFit: 'cover',
-            borderRadius: 2,
-            border: '1px solid #333',
+            borderRadius: themeVars.shape.small,
+            border: `1px solid ${themeVars.boundary.default}`,
             flexShrink: 0,
           }}
         />
@@ -86,14 +96,16 @@ function TextureInput({
           style={{
             width: 48,
             height: 48,
-            background: '#1a1a1a',
-            borderRadius: 2,
-            border: '1px solid #333',
+            // Recessed-well surface \u2014 unified on themeVars.surface.inset (I-31; this was one
+            // of three competing "recessed panel" grays).
+            background: themeVars.surface.inset,
+            borderRadius: themeVars.shape.small,
+            border: `1px solid ${themeVars.boundary.default}`,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             fontSize: 16,
-            color: '#555',
+            color: themeVars.content.dim,
             flexShrink: 0,
           }}
         >
@@ -101,43 +113,27 @@ function TextureInput({
         </div>
       )}
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
-        <input
+        <TextInput
+          className="vgai-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,
-          }}
+          style={{ width: '100%' }}
         />
         {value && (
-          <button
+          <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,
-            }}
+            style={{ alignSelf: 'flex-start' }}
           >
             Clear
-          </button>
+          </Button>
         )}
       </div>
     </div>
@@ -164,7 +160,7 @@ function FeatureToggle({
   }, [enabled]);
 
   return (
-    <div style={{ borderTop: '1px solid #2a2a2a', paddingTop: 4 }}>
+    <div style={{ borderTop: `1px solid ${themeVars.boundary.default}`, paddingTop: 4 }}>
       <div
         style={{
           display: 'flex',
@@ -175,12 +171,16 @@ function FeatureToggle({
         }}
         onClick={() => setExpanded(!expanded)}
       >
-        <span style={{ fontSize: 9, color: '#666', width: 10 }}>
-          {expanded ? '\u25BC' : '\u25B6'}
+        <DisclosureIcon
+          direction={expanded ? 'down' : 'right'}
+          tone="muted"
+          style={{ width: 10 }}
+        />
+        <span style={{ fontSize: 11, color: themeVars.content.primary, flex: 1, fontWeight: 600 }}>
+          {label}
         </span>
-        <span style={{ fontSize: 11, color: '#c5c8ce', flex: 1, fontWeight: 600 }}>{label}</span>
-        <input
-          type="checkbox"
+        <Checkbox
+          className="vgai-checkbox"
           checked={enabled}
           onChange={(e) => {
             e.stopPropagation();
@@ -526,56 +526,56 @@ function PhysicalFeaturesMulti({ entities, ids }: { entities: SceneEntity[]; ids
 
   return (
     <>
-      <div style={{ borderTop: '1px solid #2a2a2a', paddingTop: 4 }}>
+      <div style={{ borderTop: `1px solid ${themeVars.boundary.default}`, paddingTop: 4 }}>
         <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
-          <input
-            type="checkbox"
+          <Checkbox
+            className="vgai-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>
+          <span style={{ color: themeVars.content.primary }}>Clearcoat</span>
         </label>
       </div>
       <div>
         <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
-          <input
-            type="checkbox"
+          <Checkbox
+            className="vgai-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>
+          <span style={{ color: themeVars.content.primary }}>Transmission</span>
         </label>
       </div>
       <div>
         <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
-          <input
-            type="checkbox"
+          <Checkbox
+            className="vgai-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>
+          <span style={{ color: themeVars.content.primary }}>Sheen</span>
         </label>
       </div>
       <div>
         <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
-          <input
-            type="checkbox"
+          <Checkbox
+            className="vgai-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>
+          <span style={{ color: themeVars.content.primary }}>Iridescence</span>
         </label>
       </div>
     </>
@@ -584,12 +584,23 @@ function PhysicalFeaturesMulti({ entities, ids }: { entities: SceneEntity[]; ids
 
 export function MaterialSection({ entities, ids }: SectionProps) {
   const store = useEditorStore();
+  const history = useOptionalHistoryService();
   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);
+  const [materialRevision, setMaterialRevision] = useState(0);
+  useEffect(
+    () =>
+      history
+        ? getProjectFileHistory(history).subscribeAll((path) => {
+            if (path === materialRef) setMaterialRevision((value) => value + 1);
+          })
+        : () => {},
+    [history, materialRef],
+  );
   useEffect(() => {
     if (multi || !materialRef) {
       setRefMat(null);
@@ -599,11 +610,10 @@ export function MaterialSection({ entities, ids }: SectionProps) {
       .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);
+      .catch((_err) => {
         setRefMat(null);
       });
-  }, [multi, materialRef]);
+  }, [multi, materialRef, materialRevision]);
 
   const [savingAs, setSavingAs] = useState(false);
   const defaultName = entity.name.toLowerCase().replace(/\s+/g, '-');
@@ -643,23 +653,15 @@ export function MaterialSection({ entities, ids }: SectionProps) {
           {/* Type */}
           <div>
             <div style={labelStyle}>Type</div>
-            <select
+            <Select
+              className="vgai-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,
-              }}
+              style={{ width: '100%', ...mixedStyle(matType === null) }}
             >
               {matType === null && (
                 <option value="" disabled>
-                  (mixed)
+                  —
                 </option>
               )}
               {matTypes.map((t) => (
@@ -667,7 +669,7 @@ export function MaterialSection({ entities, ids }: SectionProps) {
                   {t}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
 
           {/* Color */}
@@ -701,15 +703,17 @@ export function MaterialSection({ entities, ids }: SectionProps) {
               </div>
               <div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <input
-                    type="checkbox"
+                  <Checkbox
+                    className="vgai-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>
+                  <span style={{ fontSize: 11, color: themeVars.content.primary }}>
+                    Flat Shading
+                  </span>
                 </div>
               </div>
             </>
@@ -742,15 +746,15 @@ export function MaterialSection({ entities, ids }: SectionProps) {
           </div>
           <div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <input
-                type="checkbox"
+              <Checkbox
+                className="vgai-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>
+              <span style={{ fontSize: 11, color: themeVars.content.primary }}>Transparent</span>
             </div>
           </div>
 
@@ -759,23 +763,15 @@ export function MaterialSection({ entities, ids }: SectionProps) {
             <Tooltip text="Which faces to render" position="right">
               <div style={labelStyle}>Side</div>
             </Tooltip>
-            <select
+            <Select
+              className="vgai-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,
-              }}
+              style={{ width: '100%', ...mixedStyle(side === null) }}
             >
               {side === null && (
                 <option value="" disabled>
-                  (mixed)
+                  —
                 </option>
               )}
               {sideOptions.map((s) => (
@@ -783,7 +779,7 @@ export function MaterialSection({ entities, ids }: SectionProps) {
                   {s}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
 
           {/* Physical material feature toggles (multi-entity) */}
@@ -799,7 +795,9 @@ export function MaterialSection({ entities, ids }: SectionProps) {
   if (!mat)
     return (
       <SectionHeader label="Material">
-        <div style={{ padding: 4, fontSize: 11, color: '#666' }}>Loading material...</div>
+        <div style={{ padding: 4, fontSize: 11, color: themeVars.content.dim }}>
+          Loading material...
+        </div>
       </SectionHeader>
     );
 
@@ -814,7 +812,7 @@ export function MaterialSection({ entities, ids }: SectionProps) {
         name: entity.materialRef.split('/').pop()?.replace('.mat.json', '') ?? 'Material',
         material: updated,
       };
-      saveMaterialToServer(file, entity.materialRef).then((ok) => {
+      saveMaterialToServer(file, entity.materialRef, history ?? undefined).then((ok) => {
         if (ok) {
           setRefMat(updated);
           clearMaterialRefCache();
@@ -839,7 +837,7 @@ export function MaterialSection({ entities, ids }: SectionProps) {
         name: entity.materialRef.split('/').pop()?.replace('.mat.json', '') ?? 'Material',
         material: next,
       };
-      saveMaterialToServer(file, entity.materialRef).then((ok) => {
+      saveMaterialToServer(file, entity.materialRef, history ?? undefined).then((ok) => {
         if (ok) {
           setRefMat(next);
           clearMaterialRefCache();
@@ -855,9 +853,12 @@ export function MaterialSection({ entities, ids }: SectionProps) {
     if (!savePath.trim()) return;
     const path = savePath.trim();
     const file: MaterialFile = { version: 1, name: defaultName, material: mat };
-    const ok = await saveMaterialToServer(file, path);
+    const content = JSON.stringify(file, null, 2);
+    const ok = history
+      ? await store.saveMaterialAsReference(id, path, content)
+      : await saveMaterialToServer(file, path);
     if (ok) {
-      store.updateEntity(id, { materialRef: path, material: undefined });
+      if (!history) store.updateEntity(id, { materialRef: path, material: undefined });
       setSavingAs(false);
     }
   };
@@ -885,15 +886,7 @@ export function MaterialSection({ entities, ids }: SectionProps) {
     }
   };
 
-  const btnStyle: React.CSSProperties = {
-    background: '#333',
-    color: '#c5c8ce',
-    border: '1px solid #444',
-    borderRadius: 3,
-    padding: '2px 6px',
-    cursor: 'pointer',
-    fontSize: 10,
-  };
+  // Shared compact chrome button (I-8/I-10) — the old per-file literal.
 
   return (
     <SectionHeader label="Material">
@@ -907,18 +900,23 @@ export function MaterialSection({ entities, ids }: SectionProps) {
           <div
             style={{
               padding: '4px 6px',
-              background: '#1e3a5f',
-              borderRadius: 3,
+              // Info-banner tint band (shared with the prefab banner) — no
+              // token slot exists for tinted panel backgrounds; deliberate
+              // literal, text/buttons reconciled onto text-1/themeVars.accent.default (I-5).
+              background: themeVars.accent.muted,
+              borderRadius: themeVars.shape.small,
               display: 'flex',
               alignItems: 'center',
               gap: 4,
             }}
           >
-            <span style={{ fontSize: 10, color: '#93c5fd', fontWeight: 600 }}>Shared</span>
+            <span style={{ fontSize: 10, color: themeVars.content.primary, fontWeight: 600 }}>
+              Shared
+            </span>
             <span
               style={{
                 fontSize: 10,
-                color: '#60a5fa',
+                color: themeVars.accent.default,
                 flex: 1,
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
@@ -928,9 +926,10 @@ export function MaterialSection({ entities, ids }: SectionProps) {
             >
               {entity.materialRef.split('/').pop()?.replace('.mat.json', '')}
             </span>
-            <button
+            <Button
               type="button"
-              style={{ ...btnStyle, color: '#60a5fa' }}
+              variant="outline"
+              size="compact"
               onClick={() => {
                 window.dispatchEvent(
                   new CustomEvent('editor:open-asset', { detail: { path: entity.materialRef } }),
@@ -938,35 +937,28 @@ export function MaterialSection({ entities, ids }: SectionProps) {
               }}
             >
               Open
-            </button>
-            <button type="button" style={btnStyle} onClick={handleMakeUnique}>
+            </Button>
+            <Button type="button" size="compact" onClick={handleMakeUnique}>
               Make Unique
-            </button>
+            </Button>
           </div>
         )}
 
         {/* Type */}
         <div>
           <div style={labelStyle}>Type</div>
-          <select
+          <Select
+            className="vgai-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,
-            }}
+            style={{ width: '100%' }}
           >
             {matTypes.map((t) => (
               <option key={t} value={t}>
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
 
         {/* Color */}
@@ -1000,12 +992,12 @@ export function MaterialSection({ entities, ids }: SectionProps) {
             </div>
             <div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                <input
-                  type="checkbox"
+                <Checkbox
+                  className="vgai-checkbox"
                   checked={mat.flatShading ?? false}
                   onChange={(e) => update({ flatShading: e.target.checked })}
                 />
-                <span style={{ fontSize: 11, color: '#c5c8ce' }}>Flat Shading</span>
+                <span style={{ fontSize: 11, color: themeVars.content.primary }}>Flat Shading</span>
               </div>
             </div>
           </>
@@ -1045,12 +1037,12 @@ export function MaterialSection({ entities, ids }: SectionProps) {
         </div>
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={mat.transparent ?? false}
               onChange={(e) => update({ transparent: e.target.checked })}
             />
-            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Transparent</span>
+            <span style={{ fontSize: 11, color: themeVars.content.primary }}>Transparent</span>
           </div>
         </div>
 
@@ -1059,39 +1051,22 @@ export function MaterialSection({ entities, ids }: SectionProps) {
           <Tooltip text="Which faces to render" position="right">
             <div style={labelStyle}>Side</div>
           </Tooltip>
-          <select
+          <Select
+            className="vgai-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,
-            }}
+            style={{ width: '100%' }}
           >
             {sideOptions.map((s) => (
               <option key={s} value={s}>
                 {s}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
 
         {/* Texture Maps */}
-        <div
-          style={{
-            fontSize: 10,
-            color: '#8c8c8c',
-            fontWeight: 700,
-            marginTop: 4,
-            textTransform: 'uppercase',
-          }}
-        >
-          Textures
-        </div>
+        <div style={{ ...groupLabelStyle, marginTop: 4 }}>Textures</div>
         <div>
           <div style={labelStyle}>Map</div>
           <TextureInput value={mat.map} onChange={(v) => setField('map', v)} />
@@ -1136,9 +1111,8 @@ export function MaterialSection({ entities, ids }: SectionProps) {
 
         {/* Save as / Assign material */}
         {!hasRef && !savingAs && (
-          <button
+          <Button
             type="button"
-            style={btnStyle}
             onClick={() => {
               setSavingAs(true);
               setSavePath(`materials/${defaultName}.mat.json`);
@@ -1146,12 +1120,12 @@ export function MaterialSection({ entities, ids }: SectionProps) {
             }}
           >
             Save as Material...
-          </button>
+          </Button>
         )}
         {!hasRef && savingAs && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
             <div style={labelStyle}>Save path (relative to public/)</div>
-            <input
+            <TextInput
               ref={saveInputRef}
               value={savePath}
               onChange={(e) => setSavePath(e.target.value)}
@@ -1159,27 +1133,16 @@ export function MaterialSection({ entities, ids }: SectionProps) {
                 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,
-              }}
+              className="vgai-input"
+              style={{ width: '100%', borderColor: themeVars.accent.default }}
             />
             <div style={{ display: 'flex', gap: 4 }}>
-              <button
-                type="button"
-                style={{ ...btnStyle, color: '#60a5fa' }}
-                onClick={handleSaveAsMaterial}
-              >
+              <Button type="button" variant="primary" size="compact" onClick={handleSaveAsMaterial}>
                 Save
-              </button>
-              <button type="button" style={btnStyle} onClick={() => setSavingAs(false)}>
+              </Button>
+              <Button type="button" onClick={() => setSavingAs(false)}>
                 Cancel
-              </button>
+              </Button>
             </div>
           </div>
         )}