@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/inspectors/MeshSection.tsx

@@ -1,7 +1,7 @@
 import type { SceneMesh } from '@engine/scene/scene-types';
+import { NumberInput, SectionHeader, Select } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonNum, commonStr } from './multi-edit-utils';
 
@@ -42,8 +42,9 @@ export function MeshSection({ entities, ids }: SectionProps) {
     <SectionHeader label="Mesh">
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Type</div>
-          <select
+          <div style={fieldLabelStyle}>Type</div>
+          <Select
+            className="vgai-select"
             value={meshType ?? ''}
             onChange={(e) => {
               const type = e.target.value as SceneMesh['type'];
@@ -53,20 +54,11 @@ export function MeshSection({ entities, ids }: SectionProps) {
                   : { type };
               });
             }}
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              color: meshType === null ? '#666' : '#c5c8ce',
-              fontStyle: meshType === null ? 'italic' : 'normal',
-              border: '1px solid #333',
-              borderRadius: 2,
-              padding: '3px 4px',
-              fontSize: 12,
-            }}
+            style={{ width: '100%', ...mixedStyle(meshType === null) }}
           >
             {meshType === null && (
               <option value="" disabled>
-                (mixed)
+                —
               </option>
             )}
             {meshTypes.map((t) => (
@@ -74,11 +66,11 @@ export function MeshSection({ entities, ids }: SectionProps) {
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         {labels.map((label, i) => (
           <div key={label}>
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>{label}</div>
+            <div style={fieldLabelStyle}>{label}</div>
             <NumberInput
               value={commonArgs[i] ?? null}
               onChange={(v) => {

package/src/components/inspectors/NavigationSection.tsx

@@ -1,5 +1,6 @@
+import { SectionHeader, Select } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonStr } from './multi-edit-utils';
 
@@ -16,8 +17,9 @@ export function NavigationSection({ entities, ids }: SectionProps) {
     <SectionHeader label="Navigation" defaultOpen={false}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Role</div>
-          <select
+          <div style={fieldLabelStyle}>Role</div>
+          <Select
+            className="vgai-select"
             value={role ?? ''}
             onChange={(e) => {
               const val = e.target.value;
@@ -29,20 +31,11 @@ export function NavigationSection({ entities, ids }: SectionProps) {
                 }
               });
             }}
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              color: role === null ? '#666' : '#c5c8ce',
-              fontStyle: role === null ? 'italic' : 'normal',
-              border: '1px solid #333',
-              borderRadius: 2,
-              padding: '3px 4px',
-              fontSize: 12,
-            }}
+            style={{ width: '100%', ...mixedStyle(role === null) }}
           >
             {role === null && (
               <option value="" disabled>
-                (mixed)
+                —
               </option>
             )}
             {roles.map((r) => (
@@ -50,7 +43,7 @@ export function NavigationSection({ entities, ids }: SectionProps) {
                 {r}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
       </div>
     </SectionHeader>

package/src/components/inspectors/ParticleSection.tsx

@@ -5,29 +5,26 @@ import type {
   EmitterShapeJSON,
   ValueGeneratorJSON,
 } from '@engine/scene/schema/particles';
+import {
+  Button,
+  Checkbox,
+  ColorSwatchInput,
+  NumberInput,
+  SectionHeader,
+  Select,
+  TextInput,
+  themeVars,
+} from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle, groupLabelStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 
-const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 const subHeaderStyle: React.CSSProperties = {
-  fontSize: 10,
-  color: '#aaa',
-  fontWeight: 600,
-  textTransform: 'uppercase' as const,
+  ...groupLabelStyle,
   marginTop: 4,
   marginBottom: 4,
 };
-const selectStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '2px 4px',
-  fontSize: 11,
-};
 const rowStyle: React.CSSProperties = { display: 'flex', gap: 4, alignItems: 'center' };
 
 // --- Value Generator Editor ---
@@ -47,7 +44,7 @@ function ValueGenEditor({
     <div>
       <div style={labelStyle}>{label}</div>
       <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-        <select
+        <Select
           value={gen.type}
           onChange={(e) => {
             const t = e.target.value;
@@ -59,12 +56,13 @@ function ValueGenEditor({
                 functions: [{ function: { p0: 1, p1: 0.67, p2: 0.33, p3: 0 }, start: 0 }],
               });
           }}
-          style={{ ...selectStyle, width: 'auto', flex: '0 0 auto' }}
+          className="vgai-select"
+          style={{ width: 'auto', flex: '0 0 auto' }}
         >
           <option value="ConstantValue">Const</option>
           <option value="IntervalValue">Range</option>
           <option value="PiecewiseBezier">Curve</option>
-        </select>
+        </Select>
         <div style={{ flex: 1, display: 'flex', gap: 2 }}>
           {gen.type === 'ConstantValue' && (
             <NumberInput
@@ -90,7 +88,7 @@ function ValueGenEditor({
             </>
           )}
           {gen.type === 'PiecewiseBezier' && (
-            <span style={{ fontSize: 10, color: '#666', padding: '2px 4px' }}>
+            <span style={{ fontSize: 10, color: themeVars.content.dim, padding: '2px 4px' }}>
               {gen.functions.length} segment{gen.functions.length !== 1 ? 's' : ''}
             </span>
           )}
@@ -137,7 +135,7 @@ function ColorGenEditor({
     <div>
       <div style={labelStyle}>{label}</div>
       <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-        <select
+        <Select
           value={gen.type}
           onChange={(e) => {
             const t = e.target.value;
@@ -150,24 +148,32 @@ function ColorGenEditor({
                 b: { r: 1, g: 0, b: 0, a: 1 },
               });
           }}
-          style={{ ...selectStyle, width: 'auto', flex: '0 0 auto' }}
+          className="vgai-select"
+          style={{ width: 'auto', flex: '0 0 auto' }}
         >
           <option value="ConstantColor">Solid</option>
           <option value="ColorRange">Range</option>
           <option value="Gradient">Gradient</option>
           <option value="RandomColorBetweenGradient">Rnd Gradient</option>
-        </select>
+        </Select>
         <div style={{ flex: 1, display: 'flex', gap: 2, alignItems: 'center' }}>
           {gen.type === 'ConstantColor' && (
             <>
-              <input
-                type="color"
+              <ColorSwatchInput
                 value={toHex(gen.color)}
                 onChange={(e) => {
                   const rgb = fromHex(e.target.value);
                   onChange({ ...gen, color: { ...rgb, a: gen.color.a } });
                 }}
-                style={{ width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' }}
+                style={{
+                  width: 20,
+                  height: 20,
+                  border: `1px solid ${themeVars.boundary.default}`,
+                  borderRadius: themeVars.shape.small,
+                  background: 'transparent',
+                  padding: 0,
+                  cursor: 'pointer',
+                }}
               />
               <NumberInput
                 value={gen.color.a}
@@ -179,28 +185,42 @@ function ColorGenEditor({
           )}
           {gen.type === 'ColorRange' && (
             <>
-              <input
-                type="color"
+              <ColorSwatchInput
                 value={toHex(gen.a)}
                 onChange={(e) => {
                   const rgb = fromHex(e.target.value);
                   onChange({ ...gen, a: { ...rgb, a: gen.a.a } });
                 }}
-                style={{ width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' }}
+                style={{
+                  width: 20,
+                  height: 20,
+                  border: `1px solid ${themeVars.boundary.default}`,
+                  borderRadius: themeVars.shape.small,
+                  background: 'transparent',
+                  padding: 0,
+                  cursor: 'pointer',
+                }}
               />
-              <input
-                type="color"
+              <ColorSwatchInput
                 value={toHex(gen.b)}
                 onChange={(e) => {
                   const rgb = fromHex(e.target.value);
                   onChange({ ...gen, b: { ...rgb, a: gen.b.a } });
                 }}
-                style={{ width: 28, height: 20, border: 'none', padding: 0, cursor: 'pointer' }}
+                style={{
+                  width: 20,
+                  height: 20,
+                  border: `1px solid ${themeVars.boundary.default}`,
+                  borderRadius: themeVars.shape.small,
+                  background: 'transparent',
+                  padding: 0,
+                  cursor: 'pointer',
+                }}
               />
             </>
           )}
           {(gen.type === 'Gradient' || gen.type === 'RandomColorBetweenGradient') && (
-            <span style={{ fontSize: 10, color: '#666', padding: '2px 4px' }}>
+            <span style={{ fontSize: 10, color: themeVars.content.dim, padding: '2px 4px' }}>
               (gradient editor)
             </span>
           )}
@@ -238,17 +258,18 @@ function ShapeEditor({
       <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         <div>
           <div style={labelStyle}>Type</div>
-          <select
+          <Select
             value={shape.type}
             onChange={(e) => onChange({ type: e.target.value as EmitterShapeJSON['type'] })}
-            style={selectStyle}
+            className="vgai-select"
+            style={{ width: '100%' }}
           >
             {SHAPE_TYPES.map((t) => (
               <option key={t} value={t}>
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         {shape.type !== 'point' && shape.type !== 'grid' && 'radius' in shape && (
           <div>
@@ -409,7 +430,7 @@ function BehaviorListEditor({
         }}
       >
         <span>Behaviors</span>
-        <select
+        <Select
           value=""
           onChange={(e) => {
             if (e.target.value) {
@@ -417,7 +438,8 @@ function BehaviorListEditor({
               e.target.value = '';
             }
           }}
-          style={{ ...selectStyle, width: 'auto', fontSize: 10, padding: '1px 2px' }}
+          className="vgai-select"
+          style={{ width: 'auto' }}
         >
           <option value="">+ Add</option>
           {BEHAVIOR_TYPES.map((t) => (
@@ -425,17 +447,17 @@ function BehaviorListEditor({
               {t}
             </option>
           ))}
-        </select>
+        </Select>
       </div>
       {behaviors.map((b, i) => (
         <div
           key={`${b.type}-${i}`}
           style={{
-            background: '#1e1e1e',
-            borderRadius: 2,
+            background: themeVars.surface.inset,
+            borderRadius: themeVars.shape.small,
             padding: '4px 6px',
             marginBottom: 3,
-            border: '1px solid #333',
+            border: `1px solid ${themeVars.boundary.default}`,
           }}
         >
           <div
@@ -446,21 +468,17 @@ function BehaviorListEditor({
               marginBottom: 2,
             }}
           >
-            <span style={{ fontSize: 10, color: '#aaa', fontWeight: 600 }}>{b.type}</span>
-            <button
+            <span style={{ fontSize: 10, color: themeVars.content.muted, fontWeight: 600 }}>
+              {b.type}
+            </span>
+            <Button
               type="button"
               onClick={() => onChange(behaviors.filter((_, j) => j !== i))}
-              style={{
-                background: 'none',
-                border: 'none',
-                color: '#666',
-                cursor: 'pointer',
-                fontSize: 12,
-                padding: '0 2px',
-              }}
+              variant="ghost"
+              size="compact"
             >
               ×
-            </button>
+            </Button>
           </div>
           {/* Inline editing for common behaviors */}
           {b.type === 'ApplyForce' && (
@@ -506,7 +524,9 @@ function BehaviorListEditor({
         </div>
       ))}
       {behaviors.length === 0 && (
-        <div style={{ fontSize: 10, color: '#555', padding: '2px 0' }}>No behaviors</div>
+        <div style={{ fontSize: 10, color: themeVars.content.dim, padding: '2px 0' }}>
+          No behaviors
+        </div>
       )}
     </div>
   );
@@ -537,11 +557,11 @@ export function ParticleSection({ entities }: SectionProps) {
               alignItems: 'center',
               gap: 4,
               fontSize: 11,
-              color: '#c5c8ce',
+              color: themeVars.content.primary,
             }}
           >
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={particles.looping !== false}
               onChange={(e) => update({ looping: e.target.checked })}
             />
@@ -553,11 +573,11 @@ export function ParticleSection({ entities }: SectionProps) {
               alignItems: 'center',
               gap: 4,
               fontSize: 11,
-              color: '#c5c8ce',
+              color: themeVars.content.primary,
             }}
           >
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={particles.worldSpace ?? false}
               onChange={(e) => update({ worldSpace: e.target.checked })}
             />
@@ -610,10 +630,11 @@ export function ParticleSection({ entities }: SectionProps) {
         {/* Render mode */}
         <div>
           <div style={labelStyle}>Render Mode</div>
-          <select
+          <Select
             value={particles.renderMode ?? 'billboard'}
             onChange={(e) => update({ renderMode: e.target.value as SceneParticles['renderMode'] })}
-            style={selectStyle}
+            className="vgai-select"
+            style={{ width: '100%' }}
           >
             <option value="billboard">Billboard</option>
             <option value="stretchedBillboard">Stretched</option>
@@ -621,14 +642,14 @@ export function ParticleSection({ entities }: SectionProps) {
             <option value="verticalBillboard">Vertical</option>
             <option value="mesh">Mesh</option>
             <option value="trail">Trail</option>
-          </select>
+          </Select>
         </div>
 
         {/* Material */}
         <div style={subHeaderStyle}>Material</div>
         <div>
           <div style={labelStyle}>Blending</div>
-          <select
+          <Select
             value={particles.material.blending ?? 'additive'}
             onChange={(e) =>
               update({
@@ -638,15 +659,16 @@ export function ParticleSection({ entities }: SectionProps) {
                 },
               })
             }
-            style={selectStyle}
+            className="vgai-select"
+            style={{ width: '100%' }}
           >
             <option value="additive">Additive</option>
             <option value="normal">Normal</option>
-          </select>
+          </Select>
         </div>
         <div>
           <div style={labelStyle}>Texture</div>
-          <input
+          <TextInput
             value={particles.material.map ?? ''}
             placeholder="path/to/sprite.png"
             onChange={(e) => {
@@ -658,15 +680,8 @@ export function ParticleSection({ entities }: SectionProps) {
               }
               update({ material: mat });
             }}
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              color: '#c5c8ce',
-              border: '1px solid #333',
-              borderRadius: 2,
-              padding: '2px 4px',
-              fontSize: 11,
-            }}
+            className="vgai-input"
+            style={{ width: '100%' }}
           />
         </div>